Task_9.Tests: add tests

babel.config.json

@@ -1,7 +1,17 @@
 {
     "presets": [
         ["@babel/preset-env", {"corejs": 3, "useBuiltIns": "usage"}],
-        "@babel/react"
+        "@babel/react",
+        "@babel/preset-typescript"
     ],
-    "plugins": ["@babel/plugin-transform-runtime"]
+    "plugins": [
+        [
+            "@babel/plugin-proposal-decorators",
+            {
+              "legacy": true
+            }
+        ],
+        "@babel/plugin-proposal-class-properties",
+        "@babel/plugin-transform-runtime"
+    ]
 }

jest.config.js

@@ -1,11 +1,14 @@
-const path = require('path');
 
 module.exports = {
     resolver: require.resolve(`jest-pnp-resolver`),
     moduleNameMapper: {
-        '^@src/(.*)$': path.resolve(__dirname, './src/$1')
+        "\\.(css|less|scss)$": "identity-obj-proxy",
+        "^@src(.*)$": "<rootDir>",
+        "^@components(.*)$": "<rootDir>/src/components$1",
     },
     coverageDirectory: 'src',
+    collectCoverage: true,
+    coverageReporters: ["json"],
 
     bail: 1,
     verbose: true,

package.json

@@ -20,6 +20,8 @@
   },
   "homepage": "https://github.com/dmitry-mf/react-global#readme",
   "dependencies": {
+    "@babel/plugin-proposal-class-properties": "^7.13.0",
+    "@babel/plugin-proposal-decorators": "^7.14.2",
     "@types/react-redux": "^7.1.16",
     "@types/react-router-dom": "^5.1.7",
     "@types/sass-loader": "^8.0.0",
@@ -36,7 +38,13 @@
     "@babel/plugin-transform-runtime": "^7.13.7",
     "@babel/preset-env": "^7.13.5",
     "@babel/preset-react": "^7.12.13",
+    "@babel/preset-typescript": "^7.13.0",
+    "@testing-library/jest-dom": "^5.12.0",
+    "@testing-library/react": "^11.2.6",
+    "@testing-library/react-hooks": "^5.1.2",
+    "@testing-library/user-event": "^13.1.9",
     "@types/classnames": "^2.2.11",
+    "@types/jest": "^26.0.23",
     "@types/node": "^14.14.31",
     "@types/node-sass": "^4.11.1",
     "@types/react": "^17.0.2",
@@ -49,6 +57,7 @@
     "file-loader": "^6.2.0",
     "formik": "^2.2.6",
     "html-webpack-plugin": "^5.2.0",
+    "identity-obj-proxy": "^3.0.0",
     "jest": "^26.6.3",
     "mini-css-extract-plugin": "^1.3.9",
     "node-sass": "^5.0.0",

src/components/forms/add-movie/AddMovieForm.tsx

@@ -16,8 +16,8 @@ export const AddMovieForm: React.FC<{}> = () => {
     return (
         <>
             {MOVIE_FORM_FIELDS.map(formField => (
-                <FastField name={formField.name} >
-                    {({ field, meta }: FieldProps) => <FormInput title={formField.title} field={field} meta={meta} />}
+                <FastField name={formField.name} key={formField.title}>
+                    {({ field, meta }: FieldProps) => <FormInput key={formField.title} title={formField.title} field={field} meta={meta} />}
                 </FastField>
             ))}
         </>

src/components/modals/modal/ModalFooter.tsx

@@ -60,10 +60,10 @@ export const ModalFooter: React.FC<{
     return (
         <ModalFooterContainer>
             <Button type={'reset'} onClick={onDecline} classNames={declineBtnCn}>
-                <span className={declineBtnContentCn}>{declineContent}</span>
+                <span data-testid={'decline-btn'} className={declineBtnContentCn}>{declineContent}</span>
             </Button>
             <Button type={'submit'} onClick={onConfirm} classNames={confirmBtnCn}>
-                <span className={confirmBtnContentCn}>{confirmContent}</span>
+                <span data-testid={'confirm-btn'} className={confirmBtnContentCn}>{confirmContent}</span>
             </Button>
         </ModalFooterContainer>
     )

src/components/ui-kit/controls/Close.tsx

@@ -13,7 +13,7 @@ export const Close: React.FC<{
     );
 
     return (
-        <div onClick={onClick} className={defaultClassNames} >
+        <div data-testid={'close'} onClick={onClick} className={defaultClassNames} >
             X
         </div>
     )

src/hooks/hooks.test.js

@@ -0,0 +1,37 @@
+import '@testing-library/jest-dom'
+import * as React from 'react';
+import { render } from '@testing-library/react';
+import { renderHook } from '@testing-library/react-hooks'
+import { ConfirmationDialog } from '@components';
+import { useModal } from './useModal';
+import * as context from '../context';
+
+jest.mock('../context', () => ({
+    useDialogContext: jest.fn(),
+    useDialogDispatch: jest.fn(),
+    DialogContainer: jest.fn(() => (<></>))
+}));
+
+describe('show modal hook test', () => {
+    it('is service mock called', () => {
+
+        const { result } = renderHook(() => useModal('test_confirmation_dialog', ConfirmationDialog));
+
+        const [ openFn, RenderFn, closeFn, state ] = result.current;
+
+        const dialogSettings = {
+            DialogContent: () => (<>Test dialog content</>),
+            dialogTitle: 'Test dialog title',
+            onConfirm: jest.fn(),
+        };
+
+        render(
+            <context.DialogContainer>
+                <div id="dialog-root"></div>
+                <RenderFn {...dialogSettings}/>
+            </context.DialogContainer>
+        );
+
+        expect(state).toBeFalsy();
+    })
+})

src/pages/home/components/counter/__snapshots__/counter.test.js.snap

@@ -0,0 +1,20 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`render counter component 1`] = `
+<DocumentFragment>
+  <div
+    class="counter"
+  >
+    <span
+      class="text text_lg text_white text_bold padding-h_right_10px"
+    >
+      2
+    </span>
+    <span
+      class="text text_normal text_md text_white"
+    >
+      movies found
+    </span>
+  </div>
+</DocumentFragment>
+`;

src/pages/home/components/counter/counter.test.js

@@ -0,0 +1,10 @@
+import '@testing-library/jest-dom'
+import * as React from 'react';
+
+import { render } from '@testing-library/react';
+import { Counter } from './Counter';
+
+it('render counter component', () => {
+    const { asFragment } = render(<Counter count={2}/>);
+    expect(asFragment()).toMatchSnapshot();
+});

src/pages/home/components/header/search-form/search-movie.test.js

@@ -0,0 +1,11 @@
+import '@testing-library/jest-dom'
+import * as React from 'react';
+
+import { render, screen } from '@testing-library/react';
+import { SearchMovie } from './SearchMovie';
+
+it('render search movie component', () => {
+    render(<SearchMovie />);
+    const text = screen.getByText("find your movie");
+    expect(text).toBeInTheDocument();
+});

src/pages/home/components/modals/add-movie/AddMovieModal.tsx

@@ -22,6 +22,36 @@ const emptyMovie = {
     runtime: '',
 }
 
+export const DialogForm: React.FC<{
+    handleConfirm: (values: AddMovieFields) => void;
+    closeModal: () => void;
+}> = ({
+    handleConfirm,
+    closeModal,
+}) => {
+
+    return (
+        <Formik validationSchema={movieSchema} initialValues={emptyMovie} onSubmit={handleConfirm}>
+        {
+            ({ resetForm }) => (
+                <Form data-testid={'add-movie-form'}>
+                    <ModalHeader title={'add movie'} />
+                    <ModalContent>
+                        <AddMovieForm />
+                    </ModalContent>
+                    <ModalFooter
+                        onDecline={resetForm}
+                        confirmContent={'submit'}
+                        declineContent={'reset'}
+                    />
+                    <Close onClick={closeModal} />
+                </Form>
+            )
+        }
+    </Formik>
+    )
+}
+
 export const AddMovieModal: React.FC<{
     closeModal: () => void;
     onConfirm?: () => void;
@@ -61,24 +91,7 @@ export const AddMovieModal: React.FC<{
     return (
         <Overlay>
             <Modal>
-                <Formik validationSchema={movieSchema} initialValues={emptyMovie} onSubmit={handleConfirm}>
-                    {
-                        ({ resetForm }) => (
-                            <Form>
-                                <ModalHeader title={'add movie'} />
-                                <ModalContent>
-                                    <AddMovieForm />
-                                </ModalContent>
-                                <ModalFooter
-                                    onDecline={resetForm}
-                                    confirmContent={'submit'}
-                                    declineContent={'reset'}
-                                />
-                                <Close onClick={closeModal} />
-                            </Form>
-                        )
-                    }
-                </Formik>
+                <DialogForm handleConfirm={handleConfirm} closeModal={closeModal}/>
             </Modal>
         </Overlay>
     )