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

@@ -41,3 +41,6 @@ client/dist
 andela_creds.json
 artifacts/
 htmlcov/
+
+revampedClient/coverage
+revampedClient/**/**/__snapshots__/*.test.js.snap

revampedClient/__mocks__/fileMock.js

@@ -0,0 +1 @@
+module.exports = 'test-file-stub';

revampedClient/__mocks__/styleMock.js

@@ -0,0 +1 @@
+module.exports = {};

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();
+  });
+});

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() });

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;
+}

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;

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')
 );

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',
+  },
+};