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:
parent
67f4cd3696
commit
fa688e9c02
|
@ -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
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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;
|
|
@ -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 };
|
|
@ -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');
|
||||
});
|
||||
});
|
||||
});
|
|
@ -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,
|
||||
|
|
Loading…
Reference in New Issue