Add jest + react testing library for unit testing (#802)

* add testing libraries

* add test bypass for axios

* first test case

* fix jest dom import

* cleanup babel config

* remove babel config

* add window.env setup

* update linter rules

* make eslint happy

* add mock test calling

* wrap up test cases

* remove babel present-env

* change no op function

* add babel preset-env back

.eslintrc

@@ -2,7 +2,8 @@
   "parser": "babel-eslint",
   "extends": ["airbnb", "prettier"],
   "env": {
-    "browser": true
+    "browser": true,
+    "jest": true
   },
   "rules": {
     "prefer-const": "off",
@@ -74,6 +75,7 @@
     "react/no-unused-prop-types": "off",
     "react/no-unused-state": "off",
     "react/no-did-update-set-state": ["warn"],
+    "react/react-in-jsx-scope": "off", // This is only required in older versions of React
     "react/sort-comp": "off",
     "react/require-default-props": "off",
     "react/no-array-index-key": "warn",

package.json

@@ -37,8 +37,8 @@
     ]
   },
   "dependencies": {
-    "@babel/core": "^7.22.5",
-    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "@babel/core": "^7.24.5",
+    "@babel/preset-env": "^7.24.5",
     "@material-ui/core": "^4.9.14",
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "^4.0.0-alpha.54",
@@ -102,6 +102,10 @@
     "winston": "^3.3.3"
   },
   "devDependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "@testing-library/jest-dom": "^6.4.5",
+    "@testing-library/react": "12.1.5",
+    "babel-jest": "^26.6.0",
     "cross-env": "^7.0.2",
     "eslint-config-airbnb": "^18.1.0",
     "eslint-config-prettier": "^6.11.0",
@@ -118,5 +122,10 @@
   },
   "resolutions": {
     "react-error-overlay": "6.0.9"
+  },
+  "jest": {
+    "moduleNameMapper": {
+      "^axios$": "axios/dist/node/axios.cjs"
+    }
   }
 }

src/components/CTEPubListScreen/components/NewEPubModal.test.js

@@ -0,0 +1,50 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { LanguageConstants } from 'components/CTPlayer';
+import NewEPubModal from './NewEPubModal';
+
+const mockSelect = jest.fn();
+jest.mock("../../../layout/CTForm/Select/index.js", () => (props) => {
+    mockSelect(props);
+    return <div />;
+}) 
+
+describe('New EPubModal', () => {
+    const baseProps = {
+        open: true,
+        onClose: jest.fn(),
+        onCreate: jest.fn(),
+        defaultTitle: ""
+    }
+    test('it renders with no languages', () => {
+        render(<NewEPubModal {...baseProps} />);
+
+        expect(screen.getByText("CREATE NEW I-Note")).toBeVisible();
+        expect(screen.getByText("I-Note Title")).toBeVisible();
+
+        expect(mockSelect).toHaveBeenCalledWith(
+            expect.objectContaining({
+                options: []
+            })
+        );
+    });
+
+    test('it renders given list of languages and uniquely', () => {
+        const languages = [
+            LanguageConstants.English,
+            LanguageConstants.English,
+            LanguageConstants.French,
+            LanguageConstants.Spanish,
+            LanguageConstants.French
+        ]
+        render(<NewEPubModal languages={languages} {...baseProps} />);
+
+        expect(mockSelect).toHaveBeenCalledWith(
+            expect.objectContaining({
+                options:  [
+                    {"text": "English", "value": LanguageConstants.English}, 
+                    {"text": "French", "value": LanguageConstants.French}, 
+                    {"text": "Spanish", "value": LanguageConstants.Spanish}]
+            })
+        );
+    });
+});

src/setupTests.js

@@ -0,0 +1,16 @@
+// react-testing-library renders your components to document.body,
+// this adds jest-dom's custom assertions
+// https://create-react-app.dev/docs/running-tests/
+import '@testing-library/jest-dom';
+
+// Similar to config.template but we put in placeholders for required fields
+window.env={}
+window.env.TEST_SIGN_IN='true'
+// window.env.REACT_APP_FRONTEND_COMMIT_ENDPOINT="$REACT_APP_FRONTEND_COMMIT_ENDPOINT"
+window.env.AUTH0_CLIENT_ID=""
+window.env.AUTH0_DOMAIN=""
+window.env.CILOGON_CLIENT_ID=""
+// window.env.APPLICATION_INSIGHTS_KEY=""
+// window.env.BRANCH=""
+// window.env.BUILDNUMBER=""
+// window.env.GITSHA1=""