This commit will setup the test environment using react-testing-library

which will help us to test components.

- Added prettier to devDependencies so we don't need to have it
  installed on our machines for the lint-staged to run without crashing.
- Added the test script to husky
- Added some test examples to the confirm_dialog
- Added prop-types to validate components props.

.eslintrc

@@ -1,4 +1,7 @@
 {
+    "env": {
+        "jest": true
+    },
     "parser": "babel-eslint",
     "extends": "airbnb",
     "plugins": ["react-hooks", "babel", "react", "jsx-a11y"],

package.json

@@ -7,7 +7,7 @@
         "start": "touch .env.local && sh -ac 'sh .env.${NODE_ENV:-local}; PORT=${PORT:-3000} EXTEND_ESLINT=true BROWSER=none react-scripts start'",
         "dev": "yarn start",
         "eject": "react-scripts eject",
-        "test": "echo \"Error: no test specified\" && exit 1",
+        "test": "react-scripts test",
         "prepackage": "rimraf lib ",
         "package": "./node_modules/.bin/babel src/package -d .",
         "postpackage": "cp-cli src/package/i18n i18n && cp-cli src/package/assets assets",
@@ -48,6 +48,7 @@
         "formik": "^2.1.2",
         "lodash": "^4.17.15",
         "moment": "^2.24.0",
+        "prop-types": "15.7.2",
         "react-dropzone": "^10.2.1",
         "react-emoji-render": "^1.2.1",
         "react-images": "^1.1.0-beta.3",
@@ -73,10 +74,12 @@
         "@babel/plugin-transform-runtime": "^7.9.0",
         "@babel/preset-env": "^7.9.0",
         "@babel/preset-react": "^7.9.4",
+        "@testing-library/jest-dom": "5.3.0",
+        "@testing-library/react": "10.0.1",
         "babel-plugin-css-modules-transform": "^1.6.2",
         "babel-plugin-inline-react-svg": "^1.1.1",
-        "babel-plugin-transform-import-styles": "^0.0.11",
         "babel-plugin-react-intl": "^7.0.0",
+        "babel-plugin-transform-import-styles": "^0.0.11",
         "eslint": "^6.8.0",
         "eslint-config-airbnb": "^18.0.1",
         "eslint-plugin-babel": "^5.3.0",
@@ -88,6 +91,7 @@
         "husky": "^3.1.0",
         "lint-staged": "^10.0.8",
         "ora": "^4.0.3",
+        "prettier": "2.0.2",
         "react-intl-translations-manager": "^5.0.3",
         "react-scripts": "^3.4.1",
         "readline-sync": "^1.4.10",
@@ -111,7 +115,7 @@
     },
     "husky": {
         "hooks": {
-            "pre-commit": "npm run test-build --scripts-prepend-node-path && lint-staged"
+            "pre-commit": "npm run test-build --scripts-prepend-node-path && CI=true yarn test && lint-staged"
         }
     },
     "lint-staged": {

src/App.jsx

@@ -23,13 +23,14 @@ const mergeFunction = (objValue, srcValue, key) => {
     return undefined;
 };
 
-const mode = 'edit';
+const mode = process.env.REACT_APP_MODE || 'edit';
+
 function App() {
     const classes = useStyles();
     const [data, setData] = useState(omit(JsonStub, 'resumeCustomization'));
 
-    const onEdit = useCallback(newData => setData(mergeWith(cloneDeep(data), newData, mergeFunction)), [
-        JSON.stringify(data)
+    const onEdit = useCallback((newData) => setData(mergeWith(cloneDeep(data), newData, mergeFunction)), [
+        JSON.stringify(data),
     ]);
     const [customization, setCustomization] = useState(JsonStub.resumeCustomization || {});
 
@@ -38,7 +39,7 @@ function App() {
     const handleClick = useCallback(async () => {
         // eslint-disable-next-line no-undef
         const blob = new Blob([JSON.stringify({ ...data, resumeCustomization: customization })], {
-            type: 'text/plain; charset=utf-8'
+            type: 'text/plain; charset=utf-8',
         });
         download(
             blob,
@@ -56,13 +57,13 @@ function App() {
             options={{
                 // side: 'back',
                 apiKeys: {
-                    giphy: process.env.REACT_APP_GIPHY
+                    giphy: process.env.REACT_APP_GIPHY,
                 },
                 endpoints: {
                     devicons:
-                        'https://firebasestorage.googleapis.com/v0/b/jechercheundev.appspot.com/o/technologies%2Ftechnologies_list.json?alt=media&token=459028ba-d9bc-4480-a3c4-88633afab7e2'
+                        'https://firebasestorage.googleapis.com/v0/b/jechercheundev.appspot.com/o/technologies%2Ftechnologies_list.json?alt=media&token=459028ba-d9bc-4480-a3c4-88633afab7e2',
                 },
-                customization
+                customization,
             }}
             additionalNodes={{
                 banner: {
@@ -71,8 +72,8 @@ function App() {
                             <SaveIcon className={classes.saveIcon} />
                             <FormattedMessage id="Profile.header.jsonResume.download" defaultMessage="Export" />
                         </Button>
-                    )
-                }
+                    ),
+                },
             }}
         />
     );

src/package/components/commons/confirm_dialog/confirm_dialog.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 
 import { FormattedMessage } from 'react-intl';
 
@@ -31,4 +32,19 @@ const ConfirmDialogComponent = ({ open, onClose, onConfirm, title = DefaultTitle
     </Dialog>
 );
 
+ConfirmDialogComponent.propTypes = {
+    open: PropTypes.bool.isRequired,
+    onClose: PropTypes.func,
+    onConfirm: PropTypes.func,
+    title: PropTypes.element,
+    content: PropTypes.element,
+};
+
+ConfirmDialogComponent.defaultProps = {
+    onClose: () => {},
+    onConfirm: () => {},
+    title: DefaultTitle,
+    content: DefaultContent,
+};
+
 export const ConfirmDialog = ConfirmDialogComponent;

src/package/components/commons/confirm_dialog/confirm_dialog.test.jsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import { ThemeProvider } from 'react-jss';
+import { IntlProvider } from 'react-intl';
+
+import en from '../../../i18n/en.json';
+import { buildTheme } from '../../../utils/styles/theme/theme';
+
+import { ConfirmDialog } from './confirm_dialog';
+
+const Providers = ({ children }) => (
+    <ThemeProvider theme={buildTheme()}>
+        <IntlProvider locale="en" defaultLocale="en" messages={en}>
+            {children}
+        </IntlProvider>
+    </ThemeProvider>
+);
+
+describe('<ConfirmDialog />', () => {
+    it('should render with the default title', () => {
+        const screen = render(
+            <Providers>
+                <ConfirmDialog open />
+            </Providers>
+        );
+
+        expect(screen.getByText('Are you sure?')).toBeInTheDocument();
+    });
+
+    it('should call the onClose function when click close', () => {
+        const onClose = jest.fn();
+        const screen = render(
+            <Providers>
+                <ConfirmDialog open onClose={onClose} />
+            </Providers>
+        );
+
+        fireEvent.click(screen.getByText('Close'));
+
+        expect(onClose).toHaveBeenCalled();
+    });
+});

src/setupTests.js

@@ -0,0 +1,2 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import '@testing-library/jest-dom/extend-expect';