merge branch release/testing

.eslintrc.json

@@ -1,4 +1,5 @@
 {
+  "root": true,
   "env": {
     "browser": true,
     "es2021": true,
@@ -16,7 +17,7 @@
     "project": "./tsconfig.json"
   },
   "parser": "@typescript-eslint/parser",
-  "plugins": ["react", "prettier", "@typescript-eslint", "unicorn"],
+  "plugins": ["react", "prettier", "@typescript-eslint", "unicorn", "testing-library"],
   "rules": {
     "linebreak-style": ["error", "windows"],
     "comma-dangle": "off",
@@ -74,5 +75,12 @@
       }
     ],
     "import/no-unresolved": "warn"
-  }
+  },
+  "overrides": [
+    // Only uses Testing Library lint rules in test files
+    {
+      "files": ["**/__tests__/**/*.[jt]s?(x)", "**/?(*.)+(spec|test).[jt]s?(x)"],
+      "extends": ["plugin:testing-library/react"]
+    }
+  ]
 }

jest.config.js

@@ -0,0 +1,26 @@
+// jest.config.js
+const nextJest = require('next/jest');
+
+const createJestConfig = nextJest({
+  // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
+  dir: './',
+});
+
+// Add any custom config to be passed to Jest
+/** @type {import('jest').Config} */
+const customJestConfig = {
+  // Add more setup options before each test is run
+  // setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
+  // if using TypeScript with a baseUrl set to the root directory then you need the below for alias' to work
+  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
+  moduleDirectories: ['node_modules', '<rootDir>/'],
+  moduleNameMapper: {
+    // Handle module aliases (this will be automatically configured for you soon)
+    'lodash-es': 'lodash',
+  },
+  testEnvironment: 'jest-environment-jsdom',
+  preset: 'ts-jest',
+};
+
+// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
+module.exports = createJestConfig(customJestConfig);

jest.setup.js

@@ -0,0 +1,6 @@
+// Optional: configure or set up a testing framework before each test.
+// If you delete this file, remove `setupFilesAfterEnv` from `jest.config.js`
+
+// Used for __tests__/testing-library.js
+// Learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom/extend-expect';

package.json

@@ -12,7 +12,9 @@
     "precommit": "yarn prettier && yarn lint:fix",
     "graphql:codegen": "graphql-codegen --config .graphqlrc.yml",
     "graphql:schema": "dotenv -e .env.local apollo client:download-schema graphql/crm.schema.graphql",
-    "prepare": "husky install"
+    "prepare": "husky install",
+    "test": "jest --watch",
+    "test:ci": "jest --ci"
   },
   "dependencies": {
     "@ant-design/icons": "^4.7.0",
@@ -44,6 +46,9 @@
     "@graphql-codegen/cli": "2.12.0",
     "@graphql-codegen/typescript": "2.7.3",
     "@graphql-codegen/typescript-operations": "2.5.3",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^14.4.3",
     "@types/lodash-es": "^4.17.6",
     "@types/node": "18.7.18",
     "@types/react": "18.0.20",
@@ -60,10 +65,14 @@
     "eslint-config-next": "12.3.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-testing-library": "^5.6.4",
     "eslint-plugin-unicorn": "^43.0.2",
     "husky": "^7.0.4",
+    "jest": "^29.0.3",
+    "jest-environment-jsdom": "^29.0.3",
     "msw": "^0.39.2",
     "prettier": "2.7.1",
+    "ts-jest": "^29.0.1",
     "typescript": "4.8.3"
   },
   "msw": {

stores/tables/insurance/__tests__/index.test.js

@@ -0,0 +1,145 @@
+import { defaultOptions, defaultStatuses, defaultValues } from 'config/tables/insurance-table';
+import { toJS } from 'mobx';
+import RootStore from 'stores/root';
+
+const INSURANCE_COMPANIES_OPTIONS = [
+  {
+    label: 'TEST',
+    value: 'TEST',
+  },
+  {
+    label: 'TEST2',
+    value: 'TEST2',
+  },
+];
+
+const INSURED_OPTIONS = [
+  {
+    label: 'TEST',
+    value: 'TEST',
+  },
+];
+
+describe('stores/tables/insurance', () => {
+  describe('[method] setRowValues', () => {
+    it('should set only insuranceCompany value', () => {
+      const rootStore = new RootStore();
+      const { insurance } = rootStore.$tables;
+
+      const TEST_VALUE = 'TEST_VALUE';
+
+      insurance.setRowValues('kasko', {
+        insuranceCompany: TEST_VALUE,
+      });
+
+      const KASKO_VALUES = toJS(insurance.values.find((x) => x.key === 'kasko'));
+      const DEFAULT_KASKO_VALUES = defaultValues.find((x) => x.key === 'kasko');
+      expect(KASKO_VALUES.insuranceCompany).toEqual(TEST_VALUE);
+      expect(KASKO_VALUES.insured).toEqual(DEFAULT_KASKO_VALUES.insured);
+      expect(KASKO_VALUES.insTerm).toEqual(DEFAULT_KASKO_VALUES.insTerm);
+    });
+  });
+
+  describe('[method] setRowOptions', () => {
+    it('should replace only insuranceCompany options', () => {
+      const rootStore = new RootStore();
+      const { insurance } = rootStore.$tables;
+
+      insurance.setRowOptions('kasko', {
+        insuranceCompany: INSURANCE_COMPANIES_OPTIONS,
+      });
+
+      const KASKO = toJS(insurance.getRowOptions('kasko'));
+
+      expect(KASKO.insuranceCompany).toEqual(INSURANCE_COMPANIES_OPTIONS);
+      expect(KASKO.insured).toEqual(defaultOptions.kasko.insured);
+      expect(KASKO.insTerm).toEqual(defaultOptions.kasko.insTerm);
+    });
+
+    it('should replace insuranceCompany and insured options', () => {
+      const rootStore = new RootStore();
+      const { insurance } = rootStore.$tables;
+
+      insurance.setRowOptions('kasko', {
+        insuranceCompany: INSURANCE_COMPANIES_OPTIONS,
+        insured: INSURED_OPTIONS,
+      });
+
+      const KASKO = toJS(insurance.getRowOptions('kasko'));
+
+      expect(KASKO.insuranceCompany).toEqual(INSURANCE_COMPANIES_OPTIONS);
+      expect(KASKO.insured).toEqual(INSURED_OPTIONS);
+      expect(KASKO.insTerm).toEqual(defaultOptions.kasko.insTerm);
+    });
+  });
+
+  describe('[method] setManyRowOptions', () => {
+    it('should replace only kasko options', () => {
+      const rootStore = new RootStore();
+      const { insurance } = rootStore.$tables;
+
+      insurance.setManyRowOptions({
+        kasko: {
+          insuranceCompany: INSURANCE_COMPANIES_OPTIONS,
+          insured: INSURED_OPTIONS,
+        },
+      });
+
+      const KASKO = toJS(insurance.getRowOptions('kasko'));
+      const OSAGO = toJS(insurance.getRowOptions('osago'));
+      const FINGAP = toJS(insurance.getRowOptions('fingap'));
+
+      expect(KASKO.insuranceCompany).toEqual(INSURANCE_COMPANIES_OPTIONS);
+      expect(KASKO.insured).toEqual(INSURED_OPTIONS);
+      expect(KASKO.insTerm).toEqual(defaultOptions.kasko.insTerm);
+      expect(OSAGO).toEqual(defaultOptions.osago);
+      expect(FINGAP).toEqual(defaultOptions.fingap);
+    });
+
+    it('should replace only kasko and osago options', () => {
+      const rootStore = new RootStore();
+      const { insurance } = rootStore.$tables;
+
+      insurance.setManyRowOptions({
+        kasko: {
+          insuranceCompany: INSURANCE_COMPANIES_OPTIONS,
+          insured: INSURED_OPTIONS,
+        },
+        osago: {
+          insured: INSURED_OPTIONS,
+        },
+      });
+
+      const KASKO = toJS(insurance.getRowOptions('kasko'));
+      const OSAGO = toJS(insurance.getRowOptions('osago'));
+      const FINGAP = toJS(insurance.getRowOptions('fingap'));
+
+      expect(KASKO.insuranceCompany).toEqual(INSURANCE_COMPANIES_OPTIONS);
+      expect(KASKO.insured).toEqual(INSURED_OPTIONS);
+      expect(KASKO.insTerm).toEqual(defaultOptions.kasko.insTerm);
+      expect(OSAGO.insured).toEqual(INSURED_OPTIONS);
+      expect(OSAGO.insTerm).toEqual(defaultOptions.osago.insTerm);
+      expect(FINGAP).toEqual(defaultOptions.fingap);
+    });
+  });
+
+  describe('[method] setRowStatuses', () => {
+    it('should replace only insuranceCompany and insured statuses', () => {
+      const rootStore = new RootStore();
+      const { insurance } = rootStore.$tables;
+
+      insurance.setRowStatuses('kasko', {
+        insuranceCompany: 'Disabled',
+        insured: 'Disabled',
+      });
+
+      const KASKO = toJS(insurance.getRowStatuses('kasko'));
+
+      expect(KASKO.insuranceCompany).toEqual('Disabled');
+      expect(KASKO.insured).toEqual('Disabled');
+      expect(KASKO.insCost).toEqual(defaultStatuses.kasko.insCost);
+      expect(KASKO.insTerm).toEqual(defaultStatuses.kasko.insTerm);
+      expect(KASKO.policyType).toEqual(defaultStatuses.kasko.policyType);
+    });
+  });
+});

stores/tables/insurance/index.ts

@@ -1,7 +1,6 @@
 /* eslint-disable object-curly-newline */
 import type * as Insurance from 'Components/Calculation/Form/Insurance/InsuranceTable/types';
 import * as insuranceTableConfig from 'config/tables/insurance-table';
-import { mergeWith } from 'lodash-es';
 import { makeAutoObservable } from 'mobx';
 import type RootStore from 'stores/root';
 import Validation from '../validation';
@@ -48,7 +47,7 @@ export default class InsuranceTable {
     const rowIndex = this.values.findIndex((x) => x.key === key);
 
     if (rowIndex >= 0) {
-      mergeWith(this.values[rowIndex], rowValues);
+      this.values[rowIndex] = { ...this.values[rowIndex], ...rowValues };
     }
   };
 
@@ -57,11 +56,14 @@ export default class InsuranceTable {
   }
 
   setRowOptions = (key: Insurance.Keys, rowOptions: Insurance.RowOptions) => {
-    mergeWith(this.options[key], rowOptions);
+    this.options[key] = { ...this.options[key], ...rowOptions };
   };
 
   setManyRowOptions = (options: Partial<Record<Insurance.Keys, Insurance.RowOptions>>) => {
-    mergeWith(this.options, options);
+    (Object.keys(options) as Insurance.Keys[]).forEach((key) => {
+      const rowOptions = options[key];
+      if (rowOptions !== undefined) this.setRowOptions(key, rowOptions);
+    });
   };
 
   getRowStatuses(key: Insurance.Keys) {
@@ -69,7 +71,7 @@ export default class InsuranceTable {
   }
 
   setRowStatuses = (key: Insurance.Keys, rowStatuses: Insurance.RowStatuses) => {
-    mergeWith(this.statuses[key], rowStatuses);
+    this.statuses[key] = { ...this.statuses[key], ...rowStatuses };
   };
 
   reset = () => {