test: adding test cases for code-coverage (#81)

* test: adding test cases for code-coverage

* fix: addressinng review comments

Co-authored-by: rachana <[email protected]>

.gitignore

@@ -1,4 +1,5 @@
 node_modules/
 build/
+reports/
 yarn-error.log
 .DS_Store

jest.config.json

@@ -0,0 +1,16 @@
+{
+  "setupFiles": ["<rootDir>/test/setupTests.js"],
+  "testRegex": "/*.test.js$",
+  "collectCoverage": true,
+  "coverageReporters": ["lcov"],
+  "coverageDirectory": "reports/jest",
+  "coverageThreshold": {
+    "global": {
+      "branches": 0,
+      "functions": 0,
+      "lines": 0,
+      "statements": 0
+    }
+  },
+  "moduleDirectories": ["node_modules", "src"]
+}

package.json

@@ -12,7 +12,8 @@
     "lint:fix": "eslint --fix src/*.jsx src/*.js",
     "lint": "eslint src/*.jsx src/*.js",
     "build": "webpack --config webpack.config.js",
-    "start": "webpack-dev-server --mode development"
+    "start": "webpack-dev-server --mode development",
+    "test": "jest --coverage"
   },
   "husky": {
     "hooks": {
@@ -34,6 +35,8 @@
     "babel-eslint": "10.1.0",
     "babel-loader": "8.1.0",
     "css-loader": "3.6.0",
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-16": "^1.15.5",
     "eslint": "7.5.0",
     "eslint-config-airbnb": "18.2.0",
     "eslint-loader": "4.0.2",
@@ -43,8 +46,10 @@
     "file-loader": "6.1.0",
     "html-loader": "1.1.0",
     "husky": "4.2.5",
+    "jest": "^26.4.2",
     "prettier": "2.1.2",
     "pretty-quick": "2.0.1",
+    "react-test-renderer": "^17.0.1",
     "webpack": "4.44.1",
     "webpack-cli": "3.3.12",
     "webpack-dev-server": "3.11.0"

src/FormattedMessage.jsx

@@ -31,7 +31,7 @@ const FormattedMessage = (props) => (
 
 FormattedMessage.propTypes = {
   id: PropTypes.string.isRequired,
-  values: PropTypes.objectOf(PropTypes.object),
+  values: PropTypes.objectOf(PropTypes.string),
   alt: PropTypes.string,
 };
 

src/TextProvider.jsx

@@ -5,17 +5,11 @@ export const TextContext = React.createContext({});
 
 const TextProvider = (props) => {
   const { globalText, children } = props;
-  return (
-    <TextContext.Provider value={globalText}>
-      {children}
-    </TextContext.Provider>
-  );
+  return <TextContext.Provider value={globalText}>{children}</TextContext.Provider>;
 };
 
 TextProvider.propTypes = {
-  globalText: PropTypes.objectOf(
-    PropTypes.object,
-  ),
+  globalText: PropTypes.objectOf(PropTypes.string),
   children: PropTypes.node.isRequired,
 };
 

test/FormattedMessage.test.js

@@ -0,0 +1,8 @@
+import FormattedMessage from '../src/FormattedMessage';
+
+describe('<FormattedMessage /> rendering', () => {
+  it('should have default value and alt props', () => {
+    expect(FormattedMessage.defaultProps.values).toBeDefined();
+    expect(FormattedMessage.defaultProps.alt).toBeDefined();
+  });
+});

test/TextProvider.test.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import TextProvider from '../src/TextProvider';
+import FormattedMessage from '../src/FormattedMessage';
+
+describe('<TextProvider /> rendering', () => {
+  const randomId = 'Random Id';
+  const values = {
+    valueToBeInjected: 'Random Value',
+  };
+  const sampleText = {
+    'Random Id': '{valueToBeInjected}',
+  };
+
+  it('should have default globalText prop', () => {
+    expect(TextProvider.defaultProps.globalText).toBeDefined();
+  });
+
+  it('should render correctly', () => {
+    let wrapper = renderer.create(
+      <TextProvider
+        globalText={sampleText}
+        children={<FormattedMessage id={randomId} values={values} />}
+      />,
+    );
+    expect(wrapper.toJSON()).toMatchSnapshot();
+  });
+
+  it('should replace the id with value in the context message', () => {
+    let wrapper = renderer.create(
+      <TextProvider
+        globalText={sampleText}
+        children={<FormattedMessage id={randomId} values={values} />}
+      />,
+    );
+    expect(wrapper.toJSON().props.style.fontSize).toBe('inherit');
+    expect(wrapper.toJSON().props.dangerouslySetInnerHTML.__html).toBe(values['valueToBeInjected']);
+  });
+});

test/TextProviderHOC.test.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import TextProvider from '../src/TextProvider';
+import withTextProvider from '../src/TextProviderHOC';
+
+describe('<TextProviderHOC /> rendering', () => {
+  class SomeComponent extends React.Component {
+    constructor(props) {
+      super(props);
+    }
+
+    render() {
+      return <div>{this.props.id ? this.props.id : 'id'}</div>;
+    }
+  }
+
+  it('should render TextProviderHOC correctly', () => {
+    const MockWithHOC = withTextProvider(SomeComponent);
+
+    const wrapper = renderer.create(<MockWithHOC />);
+    expect(wrapper.toJSON()).toMatchSnapshot();
+  });
+
+  it('should add getTextForKey as prop for component', () => {
+    const MockWithHOC = withTextProvider(SomeComponent);
+
+    const wrapper = renderer.create(<MockWithHOC />).root;
+    expect(wrapper.findByType(SomeComponent).props.getTextForKey).toBeDefined();
+
+    // TextProviderHOC uses {} as default context
+    expect(wrapper.findByType(SomeComponent).props.getTextForKey('test')).toEqual('');
+  });
+
+  it('should render the component provided along with props', () => {
+    const MockWithHOC = withTextProvider(SomeComponent);
+    const wrapper = renderer.create(<MockWithHOC id="id" />).root;
+    expect(wrapper.findByType(SomeComponent).props.id).toEqual('id');
+  });
+
+  it('test getTextForKey with context', () => {
+    let context = { id: 'test id' };
+    const MockWithHOC = withTextProvider(SomeComponent);
+    let wrapper = renderer.create(<TextProvider globalText={context} children={<MockWithHOC />} />)
+      .root;
+    expect(wrapper.findByType(SomeComponent).props.getTextForKey('id')).toEqual(context.id);
+  });
+});

test/__snapshots__/TextProvider.test.js.snap

@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<TextProvider /> rendering should render correctly 1`] = `
+<span
+  dangerouslySetInnerHTML={
+    Object {
+      "__html": "Random Value",
+    }
+  }
+  style={
+    Object {
+      "fontSize": "inherit",
+    }
+  }
+/>
+`;

test/__snapshots__/TextProviderHOC.test.js.snap

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<TextProviderHOC /> rendering should render TextProviderHOC correctly 1`] = `
+<div>
+  id
+</div>
+`;

test/setupTests.js

@@ -0,0 +1,4 @@
+import Enzyme from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+// React 16 Enzyme adapter
+Enzyme.configure({ adapter: new Adapter() });