Implemented basic unit tests

client/jest.config.ts

@@ -0,0 +1,20 @@
+import { defaults } from 'jest-config';
+
+export default {
+  preset: 'ts-jest',
+  testEnvironment: 'jsdom',
+  transform: {
+    '^.+\\.tsx?$': 'ts-jest',
+    "^.+\\.svg$": "<rootDir>/svgTransform.ts"
+  },
+  testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$',
+  moduleFileExtensions: [...defaults.moduleFileExtensions, 'ts', 'tsx'],
+  roots: ["<rootDir>/src"],
+  setupFilesAfterEnv: [
+    "@testing-library/jest-dom/extend-expect"
+  ],
+  moduleNameMapper: {
+    "\\.(css|less|scss|sss|styl)$": "<rootDir>/node_modules/jest-css-modules",
+    '^@backend/(.*)$': '<rootDir>/../server/src/api/$1',
+  },
+};

client/package.json

@@ -5,15 +5,16 @@
   "main": "index.js",
   "scripts": {
     "bundle": "webpack --mode production",
-    "start": "webpack-dev-server"
+    "start": "webpack-dev-server",
+    "test": "jest"
   },
   "keywords": [],
   "author": "",
   "license": "ISC",
   "dependencies": {
     "@babel/core": "^7.4.5",
     "@babel/preset-env": "^7.4.5",
-    "@babel/preset-react": "^7.0.0",
+    "@babel/preset-react": "^7.12.1",
     "@types/jest": "^26.0.13",
     "@types/node": "^14.10.1",
     "@types/react": "^16.9.49",
@@ -30,6 +31,8 @@
     "dayjs": "^1.8.31",
     "file-loader": "^6.0.0",
     "html-webpack-plugin": "^3.2.0",
+    "jest": "^26.6.1",
+    "jest-css-modules": "^2.1.0",
     "live-server": "^1.2.1",
     "mini-css-extract-plugin": "^0.8.0",
     "node-sass": "^4.12.0",
@@ -53,7 +56,9 @@
     "sass": "^1.24.0",
     "sass-loader": "^8.0.0",
     "style-loader": "^1.0.0",
+    "ts-jest": "^26.4.3",
     "ts-loader": "^8.0.3",
+    "ts-node": "^9.0.0",
     "typescript": "^4.0.2",
     "uglifyjs-webpack-plugin": "^2.2.0",
     "universal-cookie": "^4.0.3",
@@ -62,5 +67,9 @@
     "webpack-bundle-analyzer": "^3.6.0",
     "webpack-cli": "^3.3.9",
     "webpack-dev-server": "^3.8.2"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^5.11.5",
+    "@testing-library/react": "^11.1.0"
   }
 }

client/src/components/BoardCard/index.tsx

@@ -12,7 +12,7 @@ import './styles.scss';
 // Declarations
 const boardService = new BoardsService();
 
-interface BoardCardProps {
+export interface BoardCardProps {
   className?: string,
   onDelete?: Function,
   boardInfo: {

client/src/components/EditableText/__test__/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<EditableText /> Matches snapshot 1`] = `
+<div
+  class="editable-text"
+>
+  <p
+    class="editable-text__title"
+  >
+    test text
+     
+    <i
+      class="fas fa-pencil-alt editable-text__icon"
+    />
+  </p>
+</div>
+`;

client/src/components/EditableText/__test__/index.test.tsx

@@ -0,0 +1,21 @@
+// Packages
+import * as React from 'react';
+import { render } from '@testing-library/react';
+
+// Project
+import EditableText from '../index';
+
+
+describe('<EditableText />', () => {
+  it('Matches snapshot', () => {
+    const { container } = render(
+      <EditableText
+        text="test text"
+        tag="p"
+        onSuccess={jest.fn()}
+      />
+    );
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});

client/src/components/Loading/__test__/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Loading /> Matches snapshot 1`] = `
+<div
+  class="loading"
+>
+  <img
+    src="[object Object]"
+  />
+</div>
+`;

client/src/components/Loading/__test__/index.test.tsx

@@ -0,0 +1,24 @@
+// Packages
+import * as React from 'react';
+import { render } from '@testing-library/react';
+
+// Project
+import Loading from '../index';
+
+
+describe('<Loading />', () => {
+  it('Matches snapshot', () => {
+    const { container } = render(
+      <Loading display />
+    );
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('Not visible when false display prop', () => {
+    const { container } = render(
+      <Loading />
+    );
+    expect(container.firstChild).toHaveClass('loading--hidden');
+  });
+});

client/src/components/Loading/index.tsx

@@ -7,7 +7,7 @@ import Spinner from '../../assets/images/spinner.svg';
 import './styles.scss'
 
 interface LoadingProps {
-  display: Boolean
+  display?: Boolean
 };
 
 const Loading = ({ display }: LoadingProps): JSX.Element => (

client/src/setupTest.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/extend-expect'

client/svgTransform.ts

@@ -0,0 +1,8 @@
+module.exports = {
+  process() {
+    return 'module.exports = {};';
+  },
+  getCacheKey() {
+    return 'svgTransform';
+  },
+}

client/tsconfig.json

@@ -6,10 +6,12 @@
     "jsx": "react",
     "noImplicitAny": false,
     "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
     "moduleResolution": "node",
     "lib": [
       "es2019",
-      "dom"
-    ]
-  }
+      "dom",
+    ],
+  },
+  "exclude": ["node_modules"]
 }