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>
This commit is contained in:
Saswata Mukherjee 2021-04-05 14:38:17 +05:30 committed by GitHub
parent 67f4cd3696
commit fa688e9c02
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 599 additions and 25108 deletions

View File

@ -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

File diff suppressed because it is too large Load Diff

View File

@ -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"
}
}

View File

@ -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;

View File

@ -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 };

View File

@ -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');
});
});
});

View File

@ -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,