Merge pull request #2 from m-avagyan/unit-tests-setup

Unit tests setup

README.md

@@ -21,6 +21,12 @@ Build Project
 -   `yarn clean` - clean the `dist/` directory
 -   `yarn build` - we can see the output in `dist/` directory
 
+Run Unit Tests
+
+-   `yarn test` - run all test cases
+-   `yarn test:watch` - run all test cases in watch mode
+-   `yarn test:coverage` - run all test cases and collect coverage for each tested files
+
 Analyze
 
 -   `yarn analyze` - build project to `/dist` and analyze your bundle size in [localhost:3006](http://localhost:3006)

jest.config.js

@@ -0,0 +1,9 @@
+module.exports = {
+    coverageProvider: 'v8',
+    testEnvironment: 'jsdom',
+    testPathIgnorePatterns: ['<rootDir>/node_modules/', '<rootDir>/dist/'],
+    transform: {
+        '^.+\\.(ts|tsx)$': '@swc/jest',
+        '^.+\\.(js|jsx)$': '@swc/jest',
+    },
+};

package.json

@@ -34,16 +34,21 @@
         "watch": "yarn webpack serve --progress --mode production",
         "lint": "eslint src --ext .js,.ts,.tsx --ignore-pattern '!.*.js'",
         "format": "yarn lint --fix",
+        "test": "jest",
+        "test:watch": "jest --watchAll=true",
+        "test:coverage": "rm -rf coverage && jest --coverage && open coverage/lcov-report/index.html",
         "postinstall": "husky install"
     },
     "dependencies": {
+        "classcraft": "^1.0.1",
         "i18next": "^21.9.2",
         "i18next-browser-languagedetector": "^6.1.5",
         "i18next-resources-to-backend": "^1.0.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-router-dom": "5.3.3",
-        "styled-components": "^5.3.6"
+        "styled-components": "^5.3.6",
+        "ublob": "^1.0.1"
     },
     "devDependencies": {
         "@babel/core": "^7.20.12",
@@ -53,7 +58,12 @@
         "@commitlint/cli": "^17.4.4",
         "@commitlint/config-conventional": "^17.4.4",
         "@svgr/webpack": "^6.5.1",
+        "@swc/core": "^1.4.2",
+        "@swc/jest": "^0.2.36",
+        "@testing-library/jest-dom": "^6.4.2",
+        "@testing-library/react": "^14.2.1",
         "@trivago/prettier-plugin-sort-imports": "^4.0.0",
+        "@types/jest": "^29.5.12",
         "@types/node": "^18.11.18",
         "@types/react": "^18.0.27",
         "@types/react-dom": "^18.0.10",
@@ -76,6 +86,8 @@
         "file-loader": "^6.2.0",
         "html-webpack-plugin": "^5.5.0",
         "husky": "^8.0.0",
+        "jest": "^29.7.0",
+        "jest-environment-jsdom": "^29.7.0",
         "mini-css-extract-plugin": "^2.7.2",
         "postcss": "^8.4.31",
         "postcss-loader": "^7.0.2",

src/App.tsx

@@ -3,6 +3,8 @@ import { useTranslation } from 'react-i18next';
 import { Route, Switch } from 'react-router';
 import { Link } from 'react-router-dom';
 
+import Loader from 'components/loader';
+
 import Paths from './constants/path';
 import routes from './routes';
 
@@ -18,7 +20,7 @@ function App() {
             <Switch>
                 {routes.map(({ name, path, Component }, index) => (
                     <Route key={name + index} path={path} exact>
-                        <Suspense fallback={null}>
+                        <Suspense fallback={<Loader />}>
                             <Component />
                         </Suspense>
                     </Route>

src/__tests__/classcraft/index.test.ts

@@ -0,0 +1,17 @@
+import classcraft from 'classcraft';
+
+describe('Test classcraft joining.', () => {
+    it('Should merge all arguments if the type of arg is string.', () => {
+        const result = classcraft('test-1', 'test-2', 'test-3');
+        const expected = 'test-1 test-2 test-3';
+
+        expect(result).toEqual(expected);
+    });
+
+    it('Should merge only truthy valued properties.', () => {
+        const result = classcraft({ 'test-1': true }, { 'test-2': false, 'test-3': true }, { 'test-4': undefined });
+        const expected = 'test-1 test-3';
+
+        expect(result).toEqual(expected);
+    });
+});

src/__tests__/ublub/file-type.test.ts

@@ -0,0 +1,26 @@
+import { getFileType } from 'ublob';
+
+describe('Get file type tests.', () => {
+    it('Should throw exception error if argument is not string.', () => {
+        try {
+            // @ts-ignore
+            const result = getFileType(1);
+
+            expect(result).toThrowError('The parameter must be a blob string.');
+        } catch {}
+    });
+
+    it('Should throw exception error if file type not supported.', () => {
+        try {
+            const result = getFileType('unsupported-file');
+
+            expect(result).toThrowError('The file type is not supported.');
+        } catch {}
+    });
+
+    it('Should return file type.', () => {
+        const result = getFileType('blob-start:application/pdf;string:');
+
+        expect(result).toEqual('application/pdf');
+    });
+});

src/components/loader/index.styled.ts

@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+
+export const Loader = styled.div`
+    font-size: 20px;
+    line-height: 24px;
+    font-weight: bold;
+    text-align: center;
+    color: #000;
+`;

src/components/loader/index.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+import * as Styled from './index.styled';
+
+function Loader() {
+    return <Styled.Loader>Loading...</Styled.Loader>;
+}
+
+export default Loader;

src/index.tsx

@@ -2,7 +2,7 @@ import React, { lazy, Suspense } from 'react';
 import { createRoot } from 'react-dom/client';
 import { BrowserRouter as Router } from 'react-router-dom';
 
-import Loader from './components/loader/Loader';
+import Loader from './components/loader';
 import './i18next';
 
 const root = document.getElementById('root');