feat(card): create reusable card component

- write test for card component - create card component to be reusable - add styling to the card component - fix jest configuration - add setup files for enzyme and jest [Delivers #168078593]
AndelaOSP · Sep 16, 2019 · 6e72493 · 6e72493
1 parent 441a67b
commit 6e72493
Show file tree

Hide file tree

Showing 23 changed files with 1,139 additions and 1 deletion.
diff --git a/.gitignore b/.gitignore
@@ -41,3 +41,6 @@ client/dist
 andela_creds.json
 artifacts/
 htmlcov/
+
+revampedClient/coverage
+revampedClient/**/**/__snapshots__/*.test.js.snap
diff --git a/clientV2/__mocks__/fileMock.js b/clientV2/__mocks__/fileMock.js
@@ -0,0 +1 @@
+module.exports = 'test-file-stub';
diff --git a/clientV2/__mocks__/styleMock.js b/clientV2/__mocks__/styleMock.js
@@ -0,0 +1 @@
+module.exports = {};
diff --git a/clientV2/__tests__/components/cards/Card.test.js b/clientV2/__tests__/components/cards/Card.test.js
@@ -0,0 +1,21 @@
+
+import React from 'react';
+
+import { shallow } from 'enzyme';
+
+import Card from '../../../components/cards/Card';
+
+describe('Card component', () => {
+  it('should render correctly', () => {
+    const props = {
+      style: {
+        height: '10px',
+        width: '120px',
+      },
+      children: '<div>code block</div>',
+    };
+    const wrapper = shallow(<Card { ...props }/>);
+
+    expect(wrapper).toMatchSnapshot();
+  });
+});
diff --git a/clientV2/__tests__/components/cards/__snapshots__/Card.test.js.snap b/clientV2/__tests__/components/cards/__snapshots__/Card.test.js.snap
@@ -0,0 +1,86 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Card component should render correctly 1`] = `
+ShallowWrapper {
+  Symbol(enzyme.__root__): [Circular],
+  Symbol(enzyme.__unrendered__): <Card
+    style={
+      Object {
+        "height": "10px",
+        "width": "120px",
+      }
+    }
+  >
+    &lt;div&gt;code block&lt;/div&gt;
+  </Card>,
+  Symbol(enzyme.__renderer__): Object {
+    "batchedUpdates": [Function],
+    "checkPropTypes": [Function],
+    "getNode": [Function],
+    "render": [Function],
+    "simulateError": [Function],
+    "simulateEvent": [Function],
+    "unmount": [Function],
+  },
+  Symbol(enzyme.__node__): Object {
+    "instance": null,
+    "key": undefined,
+    "nodeType": "host",
+    "props": Object {
+      "children": "<div>code block</div>",
+      "className": "card",
+      "style": Object {
+        "height": "10px",
+        "width": "120px",
+      },
+    },
+    "ref": null,
+    "rendered": "<div>code block</div>",
+    "type": "div",
+  },
+  Symbol(enzyme.__nodes__): Array [
+    Object {
+      "instance": null,
+      "key": undefined,
+      "nodeType": "host",
+      "props": Object {
+        "children": "<div>code block</div>",
+        "className": "card",
+        "style": Object {
+          "height": "10px",
+          "width": "120px",
+        },
+      },
+      "ref": null,
+      "rendered": "<div>code block</div>",
+      "type": "div",
+    },
+  ],
+  Symbol(enzyme.__options__): Object {
+    "adapter": ReactSixteenAdapter {
+      "options": Object {
+        "enableComponentDidUpdateOnSetState": true,
+        "legacyContextMode": "parent",
+        "lifecycles": Object {
+          "componentDidUpdate": Object {
+            "onSetState": true,
+          },
+          "getChildContext": Object {
+            "calledByRenderer": false,
+          },
+          "getDerivedStateFromError": false,
+          "getDerivedStateFromProps": Object {
+            "hasShouldComponentUpdateBug": false,
+          },
+          "getSnapshotBeforeUpdate": true,
+          "setState": Object {
+            "skipsComponentDidUpdateOnNullish": true,
+          },
+        },
+      },
+    },
+    Symbol(enzyme.__providerValues__): undefined,
+  },
+  Symbol(enzyme.__providerValues__): Map {},
+}
+`;
diff --git a/clientV2/__tests__/setup/setupEnzyme.js b/clientV2/__tests__/setup/setupEnzyme.js
@@ -0,0 +1,4 @@
+import Enzyme from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+
+Enzyme.configure({ adapter: new Adapter() });
diff --git a/clientV2/assets/components/_card.scss b/clientV2/assets/components/_card.scss
@@ -0,0 +1,8 @@
+
+.card {
+  border-radius: 10px;
+  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1);
+  min-height: 200px;
+  min-width: 250px;
+  padding: 10px;
+}
diff --git a/clientV2/components/cards/Card.jsx b/clientV2/components/cards/Card.jsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import '../../assets/components/_card.scss';
+
+/**
+ * @description - This component displays a reusable card
+ *
+ * @param {object} props { children, style }
+ *
+ * @returns JSX
+ */
+const Card = (props) => {
+  const {
+    children, style,
+  } = props;
+
+  return (
+    <div
+      className="card"
+      style={style}
+    >
+      {children}
+    </div>
+  );
+};
+
+Card.propTypes = {
+  children: PropTypes.node.isRequired,
+  style: PropTypes.objectOf(PropTypes.string),
+};
+
+Card.defaultProps = { style: {} };
+
+export default Card;
diff --git a/clientV2/coverage/clover.xml b/clientV2/coverage/clover.xml
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<coverage generated="1568642726361" clover="3.2.0">
+  <project timestamp="1568642726361" name="All files">
+    <metrics statements="6" coveredstatements="6" conditionals="0" coveredconditionals="0" methods="1" coveredmethods="1" elements="7" coveredelements="7" complexity="0" loc="6" ncloc="6" packages="2" files="2" classes="2">
+      <package name="__tests__.setup">
+        <metrics statements="1" coveredstatements="1" conditionals="0" coveredconditionals="0" methods="0" coveredmethods="0"/>
+        <file name="setupEnzyme.js" path="/Users/oluwajuwonfagbohungbe/Documents/D1/Andela-Socials/clientV2/__tests__/setup/setupEnzyme.js">
+          <metrics statements="1" coveredstatements="1" conditionals="0" coveredconditionals="0" methods="0" coveredmethods="0"/>
+          <line num="4" count="1" type="stmt"/>
+        </file>
+      </package>
+      <package name="components.cards">
+        <metrics statements="5" coveredstatements="5" conditionals="0" coveredconditionals="0" methods="1" coveredmethods="1"/>
+        <file name="Card.jsx" path="/Users/oluwajuwonfagbohungbe/Documents/D1/Andela-Socials/clientV2/components/cards/Card.jsx">
+          <metrics statements="5" coveredstatements="5" conditionals="0" coveredconditionals="0" methods="1" coveredmethods="1"/>
+          <line num="12" count="1" type="stmt"/>
+          <line num="15" count="1" type="stmt"/>
+          <line num="17" count="1" type="stmt"/>
+          <line num="27" count="1" type="stmt"/>
+          <line num="32" count="1" type="stmt"/>
+        </file>
+      </package>
+    </metrics>
+  </project>
+</coverage>
diff --git a/clientV2/coverage/coverage-final.json b/clientV2/coverage/coverage-final.json
@@ -0,0 +1,3 @@
+{"/Users/oluwajuwonfagbohungbe/Documents/D1/Andela-Socials/clientV2/__tests__/setup/setupEnzyme.js": {"path":"/Users/oluwajuwonfagbohungbe/Documents/D1/Andela-Socials/clientV2/__tests__/setup/setupEnzyme.js","statementMap":{"0":{"start":{"line":4,"column":0},"end":{"line":4,"column":45}}},"fnMap":{},"branchMap":{},"s":{"0":1},"f":{},"b":{},"_coverageSchema":"332fd63041d2c1bcb487cc26dd0d5f7d97098a6c","hash":"b5a244deb5a31d19a34cbd6d25abbef55c8582f1"}
+,"/Users/oluwajuwonfagbohungbe/Documents/D1/Andela-Socials/clientV2/components/cards/Card.jsx": {"path":"/Users/oluwajuwonfagbohungbe/Documents/D1/Andela-Socials/clientV2/components/cards/Card.jsx","statementMap":{"0":{"start":{"line":12,"column":13},"end":{"line":25,"column":1}},"1":{"start":{"line":15,"column":6},"end":{"line":15,"column":11}},"2":{"start":{"line":17,"column":2},"end":{"line":24,"column":4}},"3":{"start":{"line":27,"column":0},"end":{"line":30,"column":2}},"4":{"start":{"line":32,"column":0},"end":{"line":32,"column":34}}},"fnMap":{"0":{"name":"(anonymous_0)","decl":{"start":{"line":12,"column":13},"end":{"line":12,"column":14}},"loc":{"start":{"line":12,"column":24},"end":{"line":25,"column":1}},"line":12}},"branchMap":{},"s":{"0":1,"1":1,"2":1,"3":1,"4":1},"f":{"0":1},"b":{},"_coverageSchema":"332fd63041d2c1bcb487cc26dd0d5f7d97098a6c","hash":"8816cbf447cdbf9031281dbaad038cdb6c65ef13"}
+}
diff --git a/clientV2/coverage/lcov-report/__tests__/setup/index.html b/clientV2/coverage/lcov-report/__tests__/setup/index.html
@@ -0,0 +1,93 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <title>Code coverage report for __tests__/setup</title>
+    <meta charset="utf-8" />
+    <link rel="stylesheet" href="../../prettify.css" />
+    <link rel="stylesheet" href="../../base.css" />
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <style type='text/css'>
+        .coverage-summary .sorter {
+            background-image: url(../../sort-arrow-sprite.png);
+        }
+    </style>
+</head>
+<body>
+<div class='wrapper'>
+  <div class='pad1'>
+    <h1>
+      <a href="../../index.html">All files</a> __tests__/setup
+    </h1>
+    <div class='clearfix'>
+      <div class='fl pad1y space-right2'>
+        <span class="strong">100% </span>
+        <span class="quiet">Statements</span>
+        <span class='fraction'>1/1</span>
+      </div>
+      <div class='fl pad1y space-right2'>
+        <span class="strong">100% </span>
+        <span class="quiet">Branches</span>
+        <span class='fraction'>0/0</span>
+      </div>
+      <div class='fl pad1y space-right2'>
+        <span class="strong">100% </span>
+        <span class="quiet">Functions</span>
+        <span class='fraction'>0/0</span>
+      </div>
+      <div class='fl pad1y space-right2'>
+        <span class="strong">100% </span>
+        <span class="quiet">Lines</span>
+        <span class='fraction'>1/1</span>
+      </div>
+    </div>
+  </div>
+  <div class='status-line high'></div>
+<div class="pad1">
+<table class="coverage-summary">
+<thead>
+<tr>
+   <th data-col="file" data-fmt="html" data-html="true" class="file">File</th>
+   <th data-col="pic" data-type="number" data-fmt="html" data-html="true" class="pic"></th>
+   <th data-col="statements" data-type="number" data-fmt="pct" class="pct">Statements</th>
+   <th data-col="statements_raw" data-type="number" data-fmt="html" class="abs"></th>
+   <th data-col="branches" data-type="number" data-fmt="pct" class="pct">Branches</th>
+   <th data-col="branches_raw" data-type="number" data-fmt="html" class="abs"></th>
+   <th data-col="functions" data-type="number" data-fmt="pct" class="pct">Functions</th>
+   <th data-col="functions_raw" data-type="number" data-fmt="html" class="abs"></th>
+   <th data-col="lines" data-type="number" data-fmt="pct" class="pct">Lines</th>
+   <th data-col="lines_raw" data-type="number" data-fmt="html" class="abs"></th>
+</tr>
+</thead>
+<tbody><tr>
+	<td class="file high" data-value="setupEnzyme.js"><a href="setupEnzyme.js.html">setupEnzyme.js</a></td>
+	<td data-value="100" class="pic high"><div class="chart"><div class="cover-fill cover-full" style="width: 100%;"></div><div class="cover-empty" style="width:0%;"></div></div></td>
+	<td data-value="100" class="pct high">100%</td>
+	<td data-value="1" class="abs high">1/1</td>
+	<td data-value="100" class="pct high">100%</td>
+	<td data-value="0" class="abs high">0/0</td>
+	<td data-value="100" class="pct high">100%</td>
+	<td data-value="0" class="abs high">0/0</td>
+	<td data-value="100" class="pct high">100%</td>
+	<td data-value="1" class="abs high">1/1</td>
+	</tr>
+
+</tbody>
+</table>
+</div><div class='push'></div><!-- for sticky footer -->
+</div><!-- /wrapper -->
+<div class='footer quiet pad2 space-top1 center small'>
+  Code coverage
+  generated by <a href="https://istanbul.js.org/" target="_blank">istanbul</a> at Mon Sep 16 2019 15:05:26 GMT+0100 (West Africa Standard Time)
+</div>
+</div>
+<script src="../../prettify.js"></script>
+<script>
+window.onload = function () {
+        if (typeof prettyPrint === 'function') {
+            prettyPrint();
+        }
+};
+</script>
+<script src="../../sorter.js"></script>
+</body>
+</html>
diff --git a/clientV2/coverage/lcov-report/__tests__/setup/setupEnzyme.js.html b/clientV2/coverage/lcov-report/__tests__/setup/setupEnzyme.js.html
@@ -0,0 +1,77 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <title>Code coverage report for __tests__/setup/setupEnzyme.js</title>
+    <meta charset="utf-8" />
+    <link rel="stylesheet" href="../../prettify.css" />
+    <link rel="stylesheet" href="../../base.css" />
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <style type='text/css'>
+        .coverage-summary .sorter {
+            background-image: url(../../sort-arrow-sprite.png);
+        }
+    </style>
+</head>
+<body>
+<div class='wrapper'>
+  <div class='pad1'>
+    <h1>
+      <a href="../../index.html">All files</a> / <a href="index.html">__tests__/setup</a> setupEnzyme.js
+    </h1>
+    <div class='clearfix'>
+      <div class='fl pad1y space-right2'>
+        <span class="strong">100% </span>
+        <span class="quiet">Statements</span>
+        <span class='fraction'>1/1</span>
+      </div>
+      <div class='fl pad1y space-right2'>
+        <span class="strong">100% </span>
+        <span class="quiet">Branches</span>
+        <span class='fraction'>0/0</span>
+      </div>
+      <div class='fl pad1y space-right2'>
+        <span class="strong">100% </span>
+        <span class="quiet">Functions</span>
+        <span class='fraction'>0/0</span>
+      </div>
+      <div class='fl pad1y space-right2'>
+        <span class="strong">100% </span>
+        <span class="quiet">Lines</span>
+        <span class='fraction'>1/1</span>
+      </div>
+    </div>
+  </div>
+  <div class='status-line high'></div>
+<pre><table class="coverage">
+<tr><td class="line-count quiet">1
+2
+3
+4
+5</td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import Enzyme from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+&nbsp;
+Enzyme.configure({ adapter: new Adapter() });
+&nbsp;</pre></td></tr>
+</table></pre>
+<div class='push'></div><!-- for sticky footer -->
+</div><!-- /wrapper -->
+<div class='footer quiet pad2 space-top1 center small'>
+  Code coverage
+  generated by <a href="https://istanbul.js.org/" target="_blank">istanbul</a> at Mon Sep 16 2019 15:05:26 GMT+0100 (West Africa Standard Time)
+</div>
+</div>
+<script src="../../prettify.js"></script>
+<script>
+window.onload = function () {
+        if (typeof prettyPrint === 'function') {
+            prettyPrint();
+        }
+};
+</script>
+<script src="../../sorter.js"></script>
+</body>
+</html>