From c00c5e40286a3ef22b538a0882dbba7fdfd7c7ac Mon Sep 17 00:00:00 2001 From: Lucky Date: Mon, 16 Sep 2019 12:14:19 +0100 Subject: [PATCH] --no-edit --- .circleci/config.yml | 10 +- .gitignore | 1 + clientV2/__mocks__/fileMock.js | 1 + clientV2/__mocks__/styleMock.js | 1 + clientV2/__tests__/component/Avatar.test.js | 15 ++ .../__tests__/component/AvatarGroup.test.js | 19 ++ .../__snapshots__/Avatar.test.js.snap | 75 ++++++++ .../__snapshots__/AvatarGroup.test.js.snap | 164 ++++++++++++++++++ clientV2/__tests__/setup/setupEnzyme.js | 4 + clientV2/component/Avatar/index.jsx | 4 +- .../component/AvatarGroup/avatar-group.scss | 2 +- clientV2/component/AvatarGroup/index.jsx | 12 +- clientV2/jest.config.js | 16 ++ 13 files changed, 309 insertions(+), 15 deletions(-) create mode 100644 clientV2/__mocks__/fileMock.js create mode 100644 clientV2/__mocks__/styleMock.js create mode 100644 clientV2/__tests__/component/Avatar.test.js create mode 100644 clientV2/__tests__/component/AvatarGroup.test.js create mode 100644 clientV2/__tests__/component/__snapshots__/Avatar.test.js.snap create mode 100644 clientV2/__tests__/component/__snapshots__/AvatarGroup.test.js.snap create mode 100644 clientV2/__tests__/setup/setupEnzyme.js create mode 100644 clientV2/jest.config.js diff --git a/.circleci/config.yml b/.circleci/config.yml index f9b033e0..0f8356ee 100644 --- a/.circleci/config.yml +++ b/.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: diff --git a/.gitignore b/.gitignore index 97f51cd8..b1b6b61e 100644 --- a/.gitignore +++ b/.gitignore @@ -35,6 +35,7 @@ cypress.json yarn-error.log .coverage /client/coverage +/clientV2/coverage .tox warning.log client/dist diff --git a/clientV2/__mocks__/fileMock.js b/clientV2/__mocks__/fileMock.js new file mode 100644 index 00000000..86059f36 --- /dev/null +++ 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 new file mode 100644 index 00000000..f053ebf7 --- /dev/null +++ b/clientV2/__mocks__/styleMock.js @@ -0,0 +1 @@ +module.exports = {}; diff --git a/clientV2/__tests__/component/Avatar.test.js b/clientV2/__tests__/component/Avatar.test.js new file mode 100644 index 00000000..d173ae01 --- /dev/null +++ b/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(); + + expect(wrapper).toMatchSnapshot(); + }); +}); diff --git a/clientV2/__tests__/component/AvatarGroup.test.js b/clientV2/__tests__/component/AvatarGroup.test.js new file mode 100644 index 00000000..90637a6a --- /dev/null +++ b/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(); + + expect(wrapper).toMatchSnapshot(); + }); +}); \ No newline at end of file diff --git a/clientV2/__tests__/component/__snapshots__/Avatar.test.js.snap b/clientV2/__tests__/component/__snapshots__/Avatar.test.js.snap new file mode 100644 index 00000000..13d86ba0 --- /dev/null +++ b/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__): , + 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 {}, +} +`; diff --git a/clientV2/__tests__/component/__snapshots__/AvatarGroup.test.js.snap b/clientV2/__tests__/component/__snapshots__/AvatarGroup.test.js.snap new file mode 100644 index 00000000..13d47b67 --- /dev/null +++ b/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__): , + 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 [ +
+ +
, + ], + false, + ], + "className": "avatar-group", + }, + "ref": null, + "rendered": Array [ + Object { + "instance": null, + "key": "img0", + "nodeType": "host", + "props": Object { + "children": , + "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 [ +
+ +
, + ], + false, + ], + "className": "avatar-group", + }, + "ref": null, + "rendered": Array [ + Object { + "instance": null, + "key": "img0", + "nodeType": "host", + "props": Object { + "children": , + "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 {}, +} +`; diff --git a/clientV2/__tests__/setup/setupEnzyme.js b/clientV2/__tests__/setup/setupEnzyme.js new file mode 100644 index 00000000..fc7b0dce --- /dev/null +++ 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/component/Avatar/index.jsx b/clientV2/component/Avatar/index.jsx index 8aab856d..9ac7db4a 100644 --- a/clientV2/component/Avatar/index.jsx +++ b/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 {altText}; diff --git a/clientV2/component/AvatarGroup/avatar-group.scss b/clientV2/component/AvatarGroup/avatar-group.scss index 853f08a4..754183ad 100644 --- a/clientV2/component/AvatarGroup/avatar-group.scss +++ b/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); } } diff --git a/clientV2/component/AvatarGroup/index.jsx b/clientV2/component/AvatarGroup/index.jsx index 6389ead9..3e082aff 100644 --- a/clientV2/component/AvatarGroup/index.jsx +++ b/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 }) => (
{imgList.map((img, index) => { if (index < 7) { return ( -
+
); @@ -32,5 +32,3 @@ AvatarGroup.propTypes = { }; AvatarGroup.defaultProps = { classes: '' }; - -export default AvatarGroup; diff --git a/clientV2/jest.config.js b/clientV2/jest.config.js new file mode 100644 index 00000000..c2b128e2 --- /dev/null +++ b/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: '/__tests__/setup/setupEnzyme.js', + moduleNameMapper: { + '\\.(css|less|sass|scss)$': '/__mocks__/styleMock.js', + '\\.(gif|ttf|eot|svg)$': '/__mocks__/fileMock.js', + }, +};