#168137051 Implement component for avatar and avatar-group

.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,46 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { AvatarGroup } from '../../component/AvatarGroup';
+import { Avatar } from '../../component/Avatar';
+
+describe('AvatarGroup Component', () => {
+  let wrapper;
+  const imgList = () => {
+    const imgArr = [];
+    for (let i = 0; i < 10; i++) {
+      imgArr.push({ imgUrl: `//http:/img.jpg${i + 1}` });
+    }
+    return imgArr;
+  };
+
+  beforeEach(() => {
+    const props = {
+      imgList: imgList()
+    };
+    wrapper = shallow(<AvatarGroup {...props} />);
+  });
+
+  it('should render correctly', () => {
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('should display Avatar Component', () => {
+    const avatar = wrapper.find(Avatar);
+    expect(avatar.length).toBe(7);
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('should display Avatar count if Avatar length is more than 8', () => {
+    const avatarCount = wrapper.find('.img-count');
+    expect(avatarCount.text()).toContain(3);
+  });
+
+  it('should not display Avatar count if Avatar length is less than 8', () => {
+    const props = {
+      imgList: [{ imgUrl: '//http:/img.jpg1' }]
+    };
+    const wrapper = shallow(<AvatarGroup {...props} />);
+    const avatarCount = wrapper.find('.img-count');
+    expect(avatarCount.length).toBe(0);
+  });
+});

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