From dcb0808d4229f7a27bf9fcb7c510f57c81c84e90 Mon Sep 17 00:00:00 2001
From: Oluwajuwon Fagbohungbe
 <oluwajuwonfagbohungbe@Oluwajuwons-MacBook-Pro.local>
Date: Wed, 28 Aug 2019 15:37:18 +0100
Subject: [PATCH] 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]
---
 .gitignore                                    |  3 ++
 revampedClient/__mocks__/fileMock.js          |  1 +
 revampedClient/__mocks__/styleMock.js         |  1 +
 .../__tests__/components/cards/Card.test.js   | 21 ++++++++++++
 revampedClient/__tests__/setup/setupEnzyme.js |  4 +++
 revampedClient/assets/components/_card.scss   |  8 +++++
 revampedClient/components/cards/Card.jsx      | 34 +++++++++++++++++++
 revampedClient/index.js                       |  4 ++-
 revampedClient/jest.config.js                 | 16 +++++++++
 9 files changed, 91 insertions(+), 1 deletion(-)
 create mode 100644 revampedClient/__mocks__/fileMock.js
 create mode 100644 revampedClient/__mocks__/styleMock.js
 create mode 100644 revampedClient/__tests__/components/cards/Card.test.js
 create mode 100644 revampedClient/__tests__/setup/setupEnzyme.js
 create mode 100644 revampedClient/components/cards/Card.jsx
 create mode 100644 revampedClient/jest.config.js

diff --git a/.gitignore b/.gitignore
index 97f51cd8..6727a03d 100644
--- 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/revampedClient/__mocks__/fileMock.js b/revampedClient/__mocks__/fileMock.js
new file mode 100644
index 00000000..86059f36
--- /dev/null
+++ b/revampedClient/__mocks__/fileMock.js
@@ -0,0 +1 @@
+module.exports = 'test-file-stub';
diff --git a/revampedClient/__mocks__/styleMock.js b/revampedClient/__mocks__/styleMock.js
new file mode 100644
index 00000000..f053ebf7
--- /dev/null
+++ b/revampedClient/__mocks__/styleMock.js
@@ -0,0 +1 @@
+module.exports = {};
diff --git a/revampedClient/__tests__/components/cards/Card.test.js b/revampedClient/__tests__/components/cards/Card.test.js
new file mode 100644
index 00000000..4be2d337
--- /dev/null
+++ b/revampedClient/__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/revampedClient/__tests__/setup/setupEnzyme.js b/revampedClient/__tests__/setup/setupEnzyme.js
new file mode 100644
index 00000000..fc7b0dce
--- /dev/null
+++ b/revampedClient/__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/revampedClient/assets/components/_card.scss b/revampedClient/assets/components/_card.scss
index e69de29b..7416fa7e 100644
--- a/revampedClient/assets/components/_card.scss
+++ b/revampedClient/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/revampedClient/components/cards/Card.jsx b/revampedClient/components/cards/Card.jsx
new file mode 100644
index 00000000..6f502e9f
--- /dev/null
+++ b/revampedClient/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.string.isRequired,
+  style: PropTypes.objectOf(PropTypes.string),
+};
+
+Card.defaultProps = { style: {} };
+
+export default Card;
diff --git a/revampedClient/index.js b/revampedClient/index.js
index e6572dd8..d12bcb1e 100644
--- a/revampedClient/index.js
+++ b/revampedClient/index.js
@@ -5,6 +5,8 @@ import ReactDOM from 'react-dom';
 import './assets/style.scss';
 
 ReactDOM.render(
-  <div>Andela Socials Revamping on process</div>,
+  <div>
+    Andela Socials Revamping on process
+  </div>,
   document.getElementById('app')
 );
diff --git a/revampedClient/jest.config.js b/revampedClient/jest.config.js
new file mode 100644
index 00000000..c2b128e2
--- /dev/null
+++ b/revampedClient/jest.config.js
@@ -0,0 +1,16 @@
+module.exports = {
+  clearMocks: true,
+  coverageDirectory: 'coverage',
+  testRegex: '(roots/.*|(\\.|/)(test))\\.(js|jsx)?$',
+  testEnvironment: 'node',
+  testPathIgnorePatterns: [
+    '/node_modules/',
+    '/cypress/',
+    '/__tests__/setup/',
+  ],
+  setupTestFrameworkScriptFile: '<rootDir>/__tests__/setup/setupEnzyme.js',
+  moduleNameMapper: {
+    '\\.(css|less|sass|scss)$': '<rootDir>/__mocks__/styleMock.js',
+    '\\.(gif|ttf|eot|svg)$': '<rootDir>/__mocks__/fileMock.js',
+  },
+};