chore(litmus-portal): Add unit testing setup using `@testing-library/react` (#2622)

* Add test setup
* Remove styleMock
* Refactor test
* Remove toBeTruthy tests

Signed-off-by: Saswata Mukherjee <saswataminsta@yahoo.com>

litmus-portal/frontend/.eslintrc.json

@@ -1,7 +1,12 @@
 {
   "parser": "@typescript-eslint/parser",
   "plugins": ["@typescript-eslint"],
-  "extends": ["airbnb", "plugin:prettier/recommended", "prettier/react"],
+  "extends": [
+    "airbnb",
+    "plugin:prettier/recommended",
+    "plugin:jest/recommended",
+    "prettier/react"
+  ],
   "env": {
     "browser": true,
     "es6": true

litmus-portal/frontend/package.json

@@ -7,7 +7,11 @@
     "build": "cross-env NODE_PATH=src react-scripts build",
     "eject": "react-scripts eject",
     "lint": "eslint . --ext .js,.tsx,.ts",
-    "format": "prettier --write \"src/**/*.+(ts|tsx|js|jsx|json)\" && eslint --fix . --ext .js,.tsx,.ts"
+    "format": "prettier --write \"src/**/*.+(ts|tsx|js|jsx|json)\" && eslint --fix . --ext .js,.tsx,.ts",
+    "test": "react-scripts test --maxWorkers=2",
+    "test:clean": "react-scripts test --clearCache",
+    "test:watch": "npm test --watch",
+    "test:coverage": "npm test --coverage --colors --maxWorkers=2"
   },
   "dependencies": {
     "@apollo/client": "^3.1.2",
@@ -16,6 +20,8 @@
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "^4.0.0-alpha.57",
     "@material-ui/pickers": "^3.2.10",
+    "@testing-library/jest-dom": "^5.11.10",
+    "@testing-library/react": "^11.2.6",
     "ace-builds": "^1.4.12",
     "brace": "^0.11.1",
     "clsx": "^1.1.1",
@@ -103,6 +109,7 @@
     "eslint-config-airbnb": "^18.2.0",
     "eslint-config-prettier": "^6.11.0",
     "eslint-plugin-import": "^2.22.0",
+    "eslint-plugin-jest": "^24.3.2",
     "eslint-plugin-jsx-a11y": "^6.3.1",
     "eslint-plugin-prettier": "^3.1.4",
     "eslint-plugin-react": "^7.20.1",
@@ -110,6 +117,6 @@
     "husky": "^4.2.5",
     "lint-staged": "^10.2.6",
     "prettier": "^2.0.5",
-    "typescript": "^3.7.5"
+    "typescript": "^3.9.9"
   }
 }

litmus-portal/frontend/src/testHelpers/ThemeWrapper.tsx

@@ -1,13 +0,0 @@
-// This Component will work as a Theme Wrapper for the component to be tested.
-import { LitmusThemeProvider } from 'litmus-ui';
-import React from 'react';
-
-interface ThemeWrapperProps {
-  children?: React.ReactNode;
-}
-
-const ThemeWrapper: React.FC<ThemeWrapperProps> = ({ children }) => {
-  return <LitmusThemeProvider>{children}</LitmusThemeProvider>;
-};
-
-export default ThemeWrapper;

litmus-portal/frontend/src/testHelpers/test-util.tsx

@@ -0,0 +1,32 @@
+import { render, RenderOptions } from '@testing-library/react';
+import { LitmusThemeProvider } from 'litmus-ui';
+import React, { ReactElement } from 'react';
+import { ApolloProvider } from '@apollo/client';
+import { Provider } from 'react-redux';
+import config from '../config';
+import configureStore from '../redux/configureStore';
+import createApolloClient from '../utils/createApolloClient';
+
+const { store } = configureStore();
+
+const client = createApolloClient(
+  `${config.grahqlEndpoint}/query`,
+  `${config.grahqlEndpointSubscription}/query`
+);
+
+const Wrapper: React.FC = ({ children }) => {
+  return (
+    <ApolloProvider client={client}>
+      <Provider store={store}>
+        <LitmusThemeProvider>{children}</LitmusThemeProvider>
+      </Provider>
+    </ApolloProvider>
+  );
+};
+
+const UIRenderer = (
+  ui: ReactElement,
+  options?: Omit<RenderOptions, 'queries'>
+) => render(ui, { wrapper: Wrapper, ...options });
+
+export { UIRenderer as render };

litmus-portal/frontend/src/views/CreateWorkflow/ChooseWorkflow/__tests__/ChooseWorkflow.test.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { screen, fireEvent } from '@testing-library/react';
+import { render } from '../../../../testHelpers/test-util';
+import ChooseWorkflow from '../index';
+import '@testing-library/jest-dom';
+
+describe('ChooseWorkflow', () => {
+  it('Renders', () => {
+    render(<ChooseWorkflow />);
+
+    // get all radio byRole
+    const radios = screen.getAllByRole('radio');
+    radios.forEach((radio: HTMLElement) => {
+      // check type
+      expect(radio).toHaveProperty('type', 'radio');
+      // check checked attribute
+      expect(radio).toHaveProperty('checked', false);
+      // change checked value
+      fireEvent.change(radio, { target: { checked: true } });
+      // check checked changed value
+      expect(radio).toHaveProperty('checked', true);
+      // give text value
+      fireEvent.change(radio, { target: { value: 'radio button text' } });
+      // check given value
+      expect(radio).toHaveProperty('value', 'radio button text');
+    });
+  });
+});

litmus-portal/frontend/tsconfig.json

@@ -2,7 +2,7 @@
   "compilerOptions": {
     "target": "es5",
     "lib": ["dom", "dom.iterable", "esnext"],
-    "types": ["node"],
+    "types": ["node", "@types/jest"],
     "typeRoots": ["../node_modules/@types"],
     "allowJs": true,
     "skipLibCheck": true,