--no-edit

.circleci/config.yml

@@ -11,7 +11,7 @@ install_yarn_packages: &install_yarn_packages
     run:
       name: install dependencies
       command: |
-        yarn --cwd client/package.json install
+        yarn --cwd clientV2/package.json install
 
 attach_workspace: &attach_workspace
   attach_workspace:
@@ -77,7 +77,7 @@ jobs:
           - run:
               name: Verify and Check Yarn packages for vulnerabilities
               command: |
-                yarn --cwd client/package.json check --integrity
+                yarn --cwd clientV2/package.json check --integrity
 
     # If lint check is required uncomment the block of code below
     # lint:
@@ -100,9 +100,9 @@ jobs:
           - run:
               name: Run frontend test
               command: |
-                yarn --cwd client/package.json test
-                ls ./client/
-                ./tmp/cc-test-reporter format-coverage -t lcov -o tmp/codeclimate.frontend.json ./client/coverage/lcov.info
+                yarn --cwd clientV2/package.json test
+                ls ./clientV2/
+                ./tmp/cc-test-reporter format-coverage -t lcov -o tmp/codeclimate.frontend.json ./clientV2/coverage/lcov.info
           - persist_to_workspace:
               root: tmp
               paths: 

.gitignore

@@ -35,6 +35,7 @@ cypress.json
 yarn-error.log
 .coverage
 /client/coverage
+/clientV2/coverage
 .tox
 warning.log
 client/dist

clientV2/__mocks__/fileMock.js

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

clientV2/__mocks__/styleMock.js

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

clientV2/__tests__/component/Avatar.test.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { Avatar } from '../../component/Avatar';
+
+describe('Avatar Component', () => {
+  it('should render correctly', () => {
+    const props = {
+      imgUrl: '//http:/img.jpg'
+    };
+
+    const wrapper = shallow(<Avatar {...props} />);
+
+    expect(wrapper).toMatchSnapshot();
+  });
+});

clientV2/__tests__/component/AvatarGroup.test.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { AvatarGroup } from '../../component/AvatarGroup';
+
+describe('AvatarGroup Component', () => {
+  it('should render correctly', () => {
+    const props = {
+      imgList: [
+        {
+          imgUrl: '//http:/img.jpg'
+        },
+      ]
+    };
+
+    const wrapper = shallow(<AvatarGroup {...props} />);
+
+    expect(wrapper).toMatchSnapshot();
+  });
+});

clientV2/__tests__/component/__snapshots__/Avatar.test.js.snap

@@ -0,0 +1,75 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Avatar Component should render correctly 1`] = `
+ShallowWrapper {
+  Symbol(enzyme.__root__): [Circular],
+  Symbol(enzyme.__unrendered__): <Unknown
+    altText=""
+    classes=""
+    imgUrl="//http:/img.jpg"
+  />,
+  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 {
+      "alt": "",
+      "className": "avatar ",
+      "src": "//http:/img.jpg",
+    },
+    "ref": null,
+    "rendered": null,
+    "type": "img",
+  },
+  Symbol(enzyme.__nodes__): Array [
+    Object {
+      "instance": null,
+      "key": undefined,
+      "nodeType": "host",
+      "props": Object {
+        "alt": "",
+        "className": "avatar ",
+        "src": "//http:/img.jpg",
+      },
+      "ref": null,
+      "rendered": null,
+      "type": "img",
+    },
+  ],
+  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 {},
+}
+`;

clientV2/__tests__/component/__snapshots__/AvatarGroup.test.js.snap

@@ -0,0 +1,164 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AvatarGroup Component should render correctly 1`] = `
+ShallowWrapper {
+  Symbol(enzyme.__root__): [Circular],
+  Symbol(enzyme.__unrendered__): <Unknown
+    classes=""
+    imgList={
+      Array [
+        Object {
+          "imgUrl": "//http:/img.jpg",
+        },
+      ]
+    }
+  />,
+  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": Array [
+        Array [
+          <div
+            className="avatar-item "
+          >
+            <Unknown
+              altText=""
+              classes=""
+              imgUrl="//http:/img.jpg"
+            />
+          </div>,
+        ],
+        false,
+      ],
+      "className": "avatar-group",
+    },
+    "ref": null,
+    "rendered": Array [
+      Object {
+        "instance": null,
+        "key": "img0",
+        "nodeType": "host",
+        "props": Object {
+          "children": <Unknown
+            altText=""
+            classes=""
+            imgUrl="//http:/img.jpg"
+          />,
+          "className": "avatar-item ",
+        },
+        "ref": null,
+        "rendered": Object {
+          "instance": null,
+          "key": undefined,
+          "nodeType": "function",
+          "props": Object {
+            "altText": "",
+            "classes": "",
+            "imgUrl": "//http:/img.jpg",
+          },
+          "ref": null,
+          "rendered": null,
+          "type": [Function],
+        },
+        "type": "div",
+      },
+      false,
+    ],
+    "type": "div",
+  },
+  Symbol(enzyme.__nodes__): Array [
+    Object {
+      "instance": null,
+      "key": undefined,
+      "nodeType": "host",
+      "props": Object {
+        "children": Array [
+          Array [
+            <div
+              className="avatar-item "
+            >
+              <Unknown
+                altText=""
+                classes=""
+                imgUrl="//http:/img.jpg"
+              />
+            </div>,
+          ],
+          false,
+        ],
+        "className": "avatar-group",
+      },
+      "ref": null,
+      "rendered": Array [
+        Object {
+          "instance": null,
+          "key": "img0",
+          "nodeType": "host",
+          "props": Object {
+            "children": <Unknown
+              altText=""
+              classes=""
+              imgUrl="//http:/img.jpg"
+            />,
+            "className": "avatar-item ",
+          },
+          "ref": null,
+          "rendered": Object {
+            "instance": null,
+            "key": undefined,
+            "nodeType": "function",
+            "props": Object {
+              "altText": "",
+              "classes": "",
+              "imgUrl": "//http:/img.jpg",
+            },
+            "ref": null,
+            "rendered": null,
+            "type": [Function],
+          },
+          "type": "div",
+        },
+        false,
+      ],
+      "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 {},
+}
+`;

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

clientV2/component/Avatar/index.jsx

@@ -4,9 +4,9 @@ import PropTypes from 'prop-types';
 /**
  * @description - This component displays a single Avatar
  *
- * @export
+ * @export Avatar
  * @param {object} { imgUrl, classes, altText }
- * @returns JSX
+ * @returns {JSX}
  */
 export const Avatar = ({ imgUrl, classes, altText }) => {
   return <img className={`avatar ${classes}`} src={imgUrl} alt={altText} />;

clientV2/component/AvatarGroup/avatar-group.scss

@@ -13,7 +13,7 @@
     display: inline-block;
     vertical-align: middle;
     margin-left: 25px;
-    font-size: 18px;
+    font-size: 1.125rem;
     color: map-get($colors, grey);
   }
 }

clientV2/component/AvatarGroup/index.jsx

@@ -2,21 +2,21 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import Avatar from '../Avatar';
+import { Avatar } from '../Avatar';
 import './avatar-group.scss';
 
 /**
- * @description - This component displays group of Avatar
+ * @description - This component displays group of Avatars
  *
- * @param {object} { classes, imgList }
+ * @param {object} { classes, imgList } - classes and imgList are props
  * @return {JSX}
  */
-const AvatarGroup = ({ classes, imgList }) => (
+export const AvatarGroup = ({ classes, imgList }) => (
   <div className="avatar-group">
     {imgList.map((img, index) => {
       if (index < 7) {
         return (
-          <div className={`avatar-item ${classes}`}>
+          <div key={`img${index}`} className={`avatar-item ${classes}`}>
             <Avatar imgUrl={img.imgUrl} />
           </div>
         );
@@ -32,5 +32,3 @@ AvatarGroup.propTypes = {
 };
 
 AvatarGroup.defaultProps = { classes: '' };
-
-export default AvatarGroup;

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