[MI-3825] Add test cases for components

.gitignore

@@ -12,3 +12,4 @@ bin/
 
 node_modules
 
+coverage

webapp/babel.config.js

@@ -0,0 +1,44 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+const config = {
+    presets: [
+        ['@babel/preset-env', {
+            targets: {
+                chrome: 66,
+                firefox: 60,
+                edge: 42,
+                safari: 12,
+            },
+            modules: false,
+            corejs: 3,
+            debug: false,
+            useBuiltIns: 'usage',
+            shippedProposals: true,
+        }],
+        ['@babel/preset-react', {
+            useBuiltIns: true,
+        }],
+        ['@babel/typescript', {
+            allExtensions: true,
+            isTSX: true,
+        }],
+    ],
+    plugins: [
+        '@babel/plugin-proposal-class-properties',
+        '@babel/plugin-syntax-dynamic-import',
+        '@babel/plugin-proposal-optional-chaining',
+        'babel-plugin-typescript-to-proptypes',
+    ],
+};
+
+// Jest needs module transformation
+config.env = {
+    test: {
+        presets: config.presets,
+        plugins: config.plugins,
+    },
+};
+config.env.test.presets[0][1].modules = 'auto';
+
+module.exports = config;

webapp/jest.config.ts

@@ -0,0 +1,94 @@
+/**
+ * For a detailed explanation regarding each configuration property, visit:
+ * https://jestjs.io/docs/configuration
+ */
+
+import type {Config} from 'jest';
+
+const config: Config = {
+
+    // Automatically clear mock calls, instances, contexts and results before every test
+    clearMocks: true,
+
+    // Indicates whether the coverage information should be collected while executing the test
+    collectCoverage: true,
+
+    // An array of glob patterns indicating a set of files for which coverage information should be collected
+    collectCoverageFrom: [
+        'src/components/**/*.{jsx,tsx}',
+        'src/reducers/**/*.{js,jsx,ts,tsx}',
+        'src/containers/**/*.{js,jsx,ts,tsx}',
+    ],
+
+    // The directory where Jest should output its coverage files
+    coverageDirectory: 'coverage',
+
+    // An array of directory names to be searched recursively up from the requiring module's location
+    moduleDirectories: [
+        'node_modules',
+    ],
+
+    // An array of file extensions your modules use
+    // moduleFileExtensions: [
+    //   "js",
+    //   "mjs",
+    //   "cjs",
+    //   "jsx",
+    //   "ts",
+    //   "tsx",
+    //   "json",
+    //   "node"
+    // ],
+    moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
+
+    // A map from regular expressions to module names or to arrays of module names that allow to stub out resources with a single module
+    moduleNameMapper: {
+        '^.+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': 'identity-obj-proxy',
+        '^.+\\.(css|less|scss)$': 'identity-obj-proxy',
+        '^src/(.*)': '<rootDir>/src/$1',
+        '^components/(.*)': '<rootDir>/src/components/$1',
+        '^constants/(.*)': '<rootDir>/src/constants/$1',
+        '^components': '<rootDir>/src/components/$1',
+        '^utils': '<rootDir>/src/utils/$1',
+        '^selectors': '<rootDir>/src/selectors/$1',
+        '^hooks/(.*)': '<rootDir>/src/hooks/$1',
+        '^reducers/(.*)': '<rootDir>/src/reducers/$1',
+        '^services': '<rootDir>/src/services/$1',
+        '^tests/(.*)': '<rootDir>/src/tests/$1',
+    },
+
+    // A preset that is used as a base for Jest's configuration
+    preset: 'ts-jest',
+
+    // A list of paths to directories that Jest should use to search for files in
+    // roots: [
+    //   "<rootDir>"
+    // ],
+    roots: ['<rootDir>/src/'],
+
+    // A list of paths to modules that run some code to configure or set up the testing framework before each test
+    // setupFilesAfterEnv: [],
+    setupFilesAfterEnv: [
+        '@testing-library/jest-dom',
+        '<rootDir>/src/tests/setup.ts',
+    ],
+
+    // The test environment that will be used for testing
+    testEnvironment: 'jsdom',
+
+    // A map from regular expressions to paths to transformers
+    transform: {
+        '\\.[jt]sx?$': 'babel-jest',
+    },
+
+    // An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation
+    // transformIgnorePatterns: [
+    //   "/node_modules/",
+    //   "\\.pnp\\.[^\\/]+$"
+    // ],
+    transformIgnorePatterns: [
+        'node_modules/(?!(react-native|react-router|@brightscout)/)',
+    ],
+};
+
+export default config;

webapp/package.json

@@ -7,100 +7,83 @@
     "debug:watch": "webpack --mode=development --watch",
     "lint": "eslint --ignore-pattern node_modules --ignore-pattern dist --ext .js --ext .jsx --ext tsx --ext ts . --quiet --cache",
     "fix": "eslint --ignore-pattern node_modules --ignore-pattern dist --ext .js --ext .jsx --ext tsx --ext ts . --quiet --fix --cache",
-    "test": "jest --forceExit --detectOpenHandles --verbose",
+    "test": "jest --verbose",
     "test:watch": "jest --watch",
     "test-ci": "jest --forceExit --detectOpenHandles --maxWorkers=2",
     "check-types": "tsc --noEmit"
   },
   "devDependencies": {
+    "@babel/plugin-proposal-class-properties": "7.18.6",
+    "@babel/plugin-proposal-decorators": "7.23.5",
+    "@babel/plugin-proposal-optional-chaining": "7.21.0",
+    "@babel/plugin-syntax-dynamic-import": "7.8.3",
+    "@babel/plugin-transform-modules-commonjs": "7.23.3",
+    "@babel/preset-env": "7.23.5",
+    "@babel/preset-flow": "7.23.3",
+    "@babel/preset-react": "7.23.3",
+    "@babel/preset-typescript": "7.23.3",
     "@emotion/core": "11.0.0",
     "@svgr/webpack": "8.1.0",
+    "@testing-library/jest-dom": "5.16.4",
+    "@testing-library/react": "12.1.4",
+    "@testing-library/user-event": "13.5.0",
     "@types/enzyme": "3.10.12",
-    "@types/jest": "29.4.4",
+    "@types/jest": "29.5.11",
     "@types/js-cookie": "3.0.2",
     "@types/node": "20.5.0",
-    "@types/react": "18.2.42",
-    "@types/react-dom": "18.0.11",
+    "@types/react": "^17.0.2",
+    "@types/react-dom": "17.0.2",
     "@types/react-intl": "3.0.0",
-    "@types/react-redux": "7.1.25",
+    "@types/react-redux": "7.1.26",
     "@types/react-router-dom": "5.3.3",
     "@types/react-transition-group": "4.4.5",
     "@typescript-eslint/eslint-plugin": "5.55.0",
     "@typescript-eslint/parser": "5.55.0",
+    "babel-jest": "29.7.0",
+    "babel-plugin-typescript-to-proptypes": "2.1.0",
     "css-loader": "6.7.3",
     "enzyme": "3.11.0",
     "enzyme-to-json": "3.6.2",
     "eslint": "8.36.0",
     "eslint-import-resolver-webpack": "0.13.2",
     "eslint-plugin-import": "2.27.5",
+    "eslint-plugin-jest": "27.6.0",
     "eslint-plugin-react": "7.32.2",
     "eslint-plugin-react-hooks": "4.6.0",
     "file-loader": "6.2.0",
     "identity-obj-proxy": "3.0.0",
-    "jest": "29.5.0",
+    "jest": "29.7.0",
     "jest-canvas-mock": "2.4.0",
+    "jest-environment-jsdom": "29.7.0",
     "jest-junit": "15.0.0",
     "mattermost-webapp": "github:mattermost/mattermost-webapp#23f5f93d9f12a7e2b5623e5cee6814366abd9a0f",
     "node-sass": "8.0.0",
+    "react-test-renderer": "17.0.2",
     "sass-loader": "13.2.0",
     "style-loader": "3.3.2",
-    "ts-jest": "29.0.5",
+    "ts-jest": "29.1.1",
     "ts-loader": "9.4.2",
     "ts-node": "10.9.1",
     "url-loader": "4.1.1",
     "webpack": "5.76.1",
-    "webpack-cli": "5.0.1"
+    "webpack-cli": "5.0.1",
+    "isomorphic-fetch": "3.0.0"
   },
   "dependencies": {
+    "@babel/core": "7.23.5",
     "@brightscout/mattermost-ui-library": "2.3.3",
-    "react-infinite-scroll-component": "6.1.0",
     "@reduxjs/toolkit": "1.8.2",
     "core-js": "3.29.1",
+    "react-bootstrap": "1.6.1",
     "js-cookie": "3.0.1",
     "mattermost-redux": "5.33.1",
-    "react": "18.2.0",
+    "react": "17.0.2",
+    "react-dnd": "16.0.1",
+    "react-dom": "17.0.2",
+    "react-infinite-scroll-component": "6.1.0",
     "react-redux": "7.2.0",
     "redux": "4.2.1",
-    "typescript": "4.9.5",
-    "styled-components": "5.3.0"
-  },
-  "jest": {
-    "preset": "ts-jest",
-    "snapshotSerializers": [
-      "<rootDir>/node_modules/enzyme-to-json/serializer"
-    ],
-    "testPathIgnorePatterns": [
-      "/node_modules/",
-      "/non_npm_dependencies/"
-    ],
-    "clearMocks": true,
-    "collectCoverageFrom": [
-      "src/**/*.{js,jsx}"
-    ],
-    "coverageReporters": [
-      "lcov",
-      "text-summary"
-    ],
-    "moduleNameMapper": {
-      "^.+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "identity-obj-proxy",
-      "^.+\\.(css|less|scss)$": "identity-obj-proxy",
-      "^.*i18n.*\\.(json)$": "<rootDir>/tests/i18n_mock.json",
-      "^bundle-loader\\?lazy\\!(.*)$": "$1"
-    },
-    "moduleDirectories": [
-      "node_modules",
-      "non_npm_dependencies",
-      "<rootDir>"
-    ],
-    "reporters": [
-      "default",
-      "jest-junit"
-    ],
-    "transformIgnorePatterns": [
-      "node_modules/(?!react-native|react-router)"
-    ],
-    "setupFiles": [
-      "jest-canvas-mock"
-    ]
+    "styled-components": "5.3.0",
+    "typescript": "4.9.5"
   }
 }

webapp/src/components/Dialog/Dialog.test.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+
+import {render, RenderResult} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import {DialogProps, LinearProgress} from '@brightscout/mattermost-ui-library';
+
+import {Dialog} from './Dialog.component';
+
+const onCloseHandler = jest.fn();
+const onSubmitHandler = jest.fn();
+
+const dialogProps = {
+    onCloseHandler,
+    onSubmitHandler,
+};
+
+let tree: RenderResult;
+
+describe('Dialog', () => {
+    beforeEach(() => {
+        tree = render(<Dialog {...dialogProps}/>);
+    });
+
+    it('Should render correctly', () => {
+        expect(tree).toMatchSnapshot();
+    });
+
+    it('Should close the dialog on clicking close button', () => {
+        expect(tree.getAllByRole('button').length).toEqual(2);
+
+        userEvent.click(tree.getAllByRole('button')[1]);
+        expect(onCloseHandler).toHaveBeenCalledTimes(1);
+    });
+});