Convert AddressForm From Angular to React

jest.config.js

@@ -2,6 +2,8 @@ module.exports = {
   collectCoverage: true,
   collectCoverageFrom: [
     'src/**/*.js',
+    'src/**/*.ts',
+    'src/**/*.tsx',
     '!**/*.fixture.js'
   ],
   restoreMocks: true,
@@ -11,14 +13,15 @@ module.exports = {
     'jest-date-mock',
     '<rootDir>/jest/setup.js'
   ],
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
   moduleNameMapper: {
     '^.+\\.(css|scss)$': '<rootDir>/__mocks__/styleMock.js'
   },
   modulePaths: [
     '<rootDir>/src'
   ],
   transform: {
-    '^.+\\.js?$': 'babel-jest',
+    '\\.[jt]sx?$': 'babel-jest',
     '^.+\\.html$': '<rootDir>/jest/htmlTransform.js'
   }
 }

package.json

@@ -21,6 +21,7 @@
     "change-case-object": "^2.0.0",
     "cru-payments": "^1.2.2",
     "crypto-js": "^3.1.9-1",
+    "formik": "^2.2.9",
     "jwt-decode": "^2.2.0",
     "lodash": "^4.17.11",
     "moment": "^2.24.0",
@@ -31,7 +32,8 @@
     "rxjs": "^5.2.0",
     "slick-carousel": "1.8.1",
     "textangularjs": "^2.1.2",
-    "typescript": "^4.5.5"
+    "typescript": "^4.5.5",
+    "yup": "^0.32.11"
   },
   "devDependencies": {
     "@babel/cli": "^7.5.5",
@@ -42,7 +44,10 @@
     "@babel/preset-react": "^7.16.7",
     "@babel/preset-typescript": "^7.16.7",
     "@babel/runtime": "^7.5.5",
+    "@testing-library/react": "^12.1.4",
+    "@testing-library/user-event": "^13.5.0",
     "@types/angular": "^1.8.4",
+    "@types/jest": "^27.4.1",
     "@types/node": "^17.0.12",
     "@types/react": "^17.0.38",
     "@types/react-dom": "^17.0.11",
@@ -59,12 +64,13 @@
     "mini-css-extract-plugin": "^0.8.0",
     "moment-locales-webpack-plugin": "^1.1.0",
     "ngtemplate-loader": "^2.0.1",
+    "react-hooks-testing-library": "^0.6.0",
+    "react-testing-library": "^8.0.1",
     "sass": "^1.49.0",
     "sass-loader": "^10",
     "standard": "^16.0.4",
     "style-loader": "^1.0.0",
     "ts-essentials": "^9.1.2",
-    "ts-loader": "^9.2.6",
     "ts-node": "^10.4.0",
     "typescript-eslint": "^0.0.1-alpha.0",
     "webpack": "^4.39.2",

src/common/components/addressForm/addressForm.react.spec.tsx

@@ -0,0 +1,260 @@
+import React from 'react';
+import { render, fireEvent, waitFor } from '@testing-library/react';
+
+import { AddressForm, Address, GeographiesItem } from './addressForm.react';
+import userEvent from '@testing-library/user-event';
+import { JsxElement } from 'typescript';
+
+const address: Address = {
+  country: '',
+  locality: '',
+  region: '',
+  postalCode: '',
+  streetAddress: '',
+  extendedAddress: '',
+  intAddressLine3: '',
+  intAddressLine4: '',
+};
+const countries: GeographiesItem[] = [
+  { name: 'US', "display-name": 'Country 1', links: [] },
+  { name: 'UK', "display-name": 'Country 2', links: [] },
+];
+const regions: GeographiesItem[] = [
+  { name: 'A', "display-name": 'Region 1', links: [] },
+  { name: 'B', "display-name": 'Region 1', links: [] },
+];
+
+const onAddressChanged = jest.fn();
+const geographiesService = { getCountries: jest.fn(), getRegions: jest.fn() };
+
+const log = { error: () => {} };
+
+describe('AddressForm', () => {
+  beforeEach(() => {
+    onAddressChanged.mockClear();
+    geographiesService.getCountries.mockImplementation(() => {
+      const subscribe = (func: (data: any[]) => void) => func(countries);
+      return { subscribe };
+    });
+    geographiesService.getRegions.mockImplementation(() => {
+      const subscribe = (func: (data: any[]) => void) => func(regions);
+      return { subscribe };
+    });
+  });
+
+  it('Loads Countries and Regions on Initialize for US', () => {
+    render(
+      <AddressForm
+        address={{ ...address, country: 'US' }}
+        onAddressChanged={onAddressChanged}
+        geographiesService={geographiesService}
+        $log={log}
+      />
+    );
+
+    expect(geographiesService.getCountries).toHaveBeenCalledWith();
+    expect(geographiesService.getRegions).toHaveBeenCalledWith(countries[0]);
+  });
+
+  it('Renders Form for US', () => {
+    const { getAllByTestId } = render(
+      <AddressForm
+        address={{ ...address, country: 'US' }}
+        onAddressChanged={onAddressChanged}
+        geographiesService={geographiesService}
+        $log={log}
+      />
+    );
+
+    const selectInputs = getAllByTestId('SelectInputField') as HTMLSelectElement[];
+    const textInputs = getAllByTestId('TextInputField') as HTMLInputElement[];
+
+    expect(selectInputs.length).toBe(2);
+    expect(selectInputs[0].name).toBe('country');
+    expect(selectInputs[0].value).toBe('US');
+    expect(selectInputs[1].name).toBe('region');
+    expect(selectInputs[1].value).toBe('A');
+
+    expect(textInputs.length).toBe(4);
+    expect(textInputs[0].name).toBe('streetAddress');
+    expect(textInputs[0].value).toBe(address.streetAddress);
+    expect(textInputs[1].name).toBe('extendedAddress');
+    expect(textInputs[1].value).toBe(address.extendedAddress);
+    expect(textInputs[2].name).toBe('locality');
+    expect(textInputs[2].value).toBe(address.locality);
+    expect(textInputs[3].name).toBe('postalCode');
+    expect(textInputs[3].value).toBe(address.postalCode);
+  });
+
+  it('Renders Form for International', () => {
+   const { getAllByTestId } = render(
+      <AddressForm
+        address={{ ...address, country: 'UK' }}
+        onAddressChanged={onAddressChanged}
+        geographiesService={geographiesService}
+        $log={log}
+      />
+    );
+
+    const selectInputs = getAllByTestId('SelectInputField') as HTMLSelectElement[];
+    const textInputs = getAllByTestId('TextInputField') as HTMLInputElement[];
+
+    expect(selectInputs.length).toBe(1);
+    expect(selectInputs[0].name).toBe('country');
+    expect(selectInputs[0].value).toBe('UK');
+
+    expect(textInputs.length).toBe(4);
+    expect(textInputs[0].name).toBe('streetAddress');
+    expect(textInputs[0].value).toBe(address.streetAddress);
+    expect(textInputs[1].name).toBe('extendedAddress');
+    expect(textInputs[1].value).toBe(address.extendedAddress);
+    expect(textInputs[2].name).toBe('intAddressLine3');
+    expect(textInputs[2].value).toBe(address.intAddressLine3);
+    expect(textInputs[3].name).toBe('intAddressLine4');
+    expect(textInputs[3].value).toBe(address.intAddressLine4);
+  });
+
+  it('Triggers Callback to Parent Component on Change', async () => {
+    const { getAllByTestId } = render(
+      <AddressForm
+        address={{ ...address, country: 'US' }}
+        onAddressChanged={onAddressChanged}
+        geographiesService={geographiesService}
+        $log={log}
+      />
+    );
+
+    const selectInputs = getAllByTestId('SelectInputField') as HTMLSelectElement[];
+    const textInputs = getAllByTestId('TextInputField') as HTMLInputElement[];    
+
+    expect(selectInputs.length).toBe(2);
+    expect(textInputs.length).toBe(4);
+
+    fireEvent.change(selectInputs[0], { target: { value: countries[1].name } });
+    userEvent.type(textInputs[0], 'New Value');
+
+    await waitFor(() => 
+      expect(onAddressChanged).toHaveBeenCalledTimes(2),
+    );
+  });
+
+  describe('Error Handling', () => {
+    it('Displays Error For Loading Countries', () => {
+      geographiesService.getCountries.mockImplementation(() => {
+        const subscribe = (
+          func: (data: any[]) => void,
+          errorFunc: (error: any) => void
+        ) => errorFunc({});
+
+        return { subscribe };
+      });
+
+      const { getAllByTestId } = render(
+        <AddressForm
+          address={{ ...address, country: 'US' }}
+          onAddressChanged={onAddressChanged}
+          geographiesService={geographiesService}
+          $log={log}
+        />
+      );
+
+      const errors = getAllByTestId('SelectInputError');
+      const retryButtons = getAllByTestId('SelectInputRetryButton') as HTMLButtonElement[];
+
+      expect(errors.length).toBe(1);
+      expect(retryButtons.length).toBe(1);
+      expect(errors[0].textContent).toBe('There was an error loading the list of countries. If you continue to see this message, contact <a href="mailto:[email protected]">[email protected]</a> for assistance.');
+    });
+
+    it('Retries Loading Countries After Error', () => {
+      geographiesService.getCountries.mockImplementation(() => {
+        const subscribe = (
+          func: (data: any[]) => void,
+          errorFunc: (error: any) => void
+        ) => errorFunc({});
+
+        return { subscribe };
+      });
+
+      const { getAllByTestId } = render(
+        <AddressForm
+          address={{ ...address, country: 'US' }}
+          onAddressChanged={onAddressChanged}
+          geographiesService={geographiesService}
+          $log={log}
+        />
+      );
+
+      const errors = getAllByTestId('SelectInputError');
+      const retryButtons = getAllByTestId('SelectInputRetryButton') as HTMLButtonElement[];
+
+      expect(errors.length).toBe(1);
+      expect(retryButtons.length).toBe(1);
+      expect(geographiesService.getCountries).toHaveBeenCalledTimes(1);
+
+      userEvent.click(retryButtons[0]);
+
+      expect(geographiesService.getCountries).toHaveBeenCalledTimes(2);
+    });
+
+    it('Displays Error For Loading Regions', () => {
+      geographiesService.getRegions.mockImplementation(() => {
+        const subscribe = (
+          func: (data: any[]) => void,
+          errorFunc: (error: any) => void
+        ) => errorFunc({});
+
+        return { subscribe };
+      });
+
+      const { getAllByTestId } = render(
+        <AddressForm
+          address={{ ...address, country: 'US' }}
+          onAddressChanged={onAddressChanged}
+          geographiesService={geographiesService}
+          $log={log}
+        />
+      );
+
+      const errors = getAllByTestId('SelectInputError');
+      const retryButtons = getAllByTestId('SelectInputRetryButton') as HTMLButtonElement[];
+
+      expect(errors.length).toBe(1);
+      expect(retryButtons.length).toBe(1);
+      expect(errors[0].textContent).toBe('There was an error loading the list of regions/state. If you continue to see this message, contact <a href="mailto:[email protected]">[email protected]</a> for assistance.');
+    });
+
+    it('Retries Loading Regions After Error', () => {
+      geographiesService.getRegions.mockImplementation(() => {
+        const subscribe = (
+          func: (data: any[]) => void,
+          errorFunc: (error: any) => void
+        ) => errorFunc({});
+
+        return { subscribe };
+      });
+
+      const { getAllByTestId } = render(
+        <AddressForm
+          address={{ ...address, country: 'US' }}
+          onAddressChanged={onAddressChanged}
+          geographiesService={geographiesService}
+          $log={log}
+        />
+      );
+
+      const errors = getAllByTestId('SelectInputError');
+      const retryButtons = getAllByTestId('SelectInputRetryButton') as HTMLButtonElement[];
+
+      expect(errors.length).toBe(1);
+      expect(retryButtons.length).toBe(1);
+      expect(geographiesService.getCountries).toHaveBeenCalledTimes(1);
+      expect(geographiesService.getRegions).toHaveBeenCalledTimes(1);
+
+      userEvent.click(retryButtons[0]);
+
+      expect(geographiesService.getCountries).toHaveBeenCalledTimes(1);
+      expect(geographiesService.getRegions).toHaveBeenCalledTimes(2);
+    });
+  });
+});