Package, test cleanup

folio-org · Sep 22, 2023 · 226f11a · 226f11a
1 parent 33f6cea
commit 226f11a
Show file tree

Hide file tree

Showing 5 changed files with 97 additions and 102 deletions.
diff --git a/jest.config.js b/jest.config.js
@@ -1,12 +1,12 @@
 const { join } = require('path');
 
-/** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */
+/** @type {import('ts-jest/dist/types').JestConfigWithTsJest} */
 module.exports = {
   testEnvironment: 'jsdom',
 
   preset: 'ts-jest',
   transform: {
-    '^.+\\.(t|j)sx?$': 'ts-jest'
+    '^.+\\.(t|j)sx?$': ['ts-jest', { tsconfig: 'src/tsconfig.json' }]
   },
   transformIgnorePatterns: ['node_modules/(?!@folio|ky)'],
 
@@ -37,11 +37,5 @@ module.exports = {
     uuid: require.resolve('uuid')
   },
 
-  slowTestThreshold: 10,
-
-  globals: {
-    'ts-jest': {
-      tsconfig: 'src/tsconfig.json'
-    }
-  }
+  slowTestThreshold: 10
 };
diff --git a/package.json b/package.json
@@ -113,50 +113,37 @@
     "@folio/eslint-config-stripes": "^7.0.0",
     "@folio/stripes": "^9.0.0",
     "@folio/stripes-cli": "^3.0.0",
-    "@folio/stripes-components": "^12.0.0",
-    "@folio/stripes-core": "^10.0.0",
-    "@folio/stripes-final-form": "^8.0.0",
-    "@folio/stripes-smart-components": "^9.0.0",
-    "@folio/stripes-testing": "^4.2.0",
-    "@formatjs/cli": "^6.1.3",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^12.1.5",
-    "@testing-library/react-hooks": "^8.0.1",
-    "@testing-library/user-event": "^14.4.3",
-    "@types/jest": "^28.1.6",
-    "@types/memoizee": "^0.4.8",
-    "@types/react": "^18.0.2",
-    "@types/react-router-dom": "^5.2.0",
-    "@typescript-eslint/eslint-plugin": "^5.33.0",
-    "@typescript-eslint/parser": "^5.33.0",
-    "babel-polyfill": "^6.26.0",
-    "element-is-visible": "^1.0.0",
-    "eslint": "^7.32.0",
+    "@formatjs/cli": "^6.2.0",
+    "@testing-library/jest-dom": "^6.1.3",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.5.1",
+    "@types/jest": "^29.5.5",
+    "@types/react": "^18.2.22",
+    "@typescript-eslint/eslint-plugin": "^6.7.2",
+    "@typescript-eslint/parser": "^6.7.2",
+    "eslint": "^8.49.0",
     "eslint-import-resolver-webpack": "^0.13.2",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^28.1.3",
-    "jest-environment-jsdom": "^28.1.3",
-    "jest-junit": "^14.0.0",
-    "localforage": "^1.10.0",
-    "prettier": "^2.7.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-intl": "^6.4.4",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "jest-junit": "^16.0.0",
+    "prettier": "^3.0.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-intl": "^6.4.7",
     "react-router-dom": "^5.2.0",
-    "ts-jest": "^28.0.7",
-    "typescript": "^4.7.4"
+    "ts-jest": "^29.1.1",
+    "typescript": "^5.2.2"
   },
   "dependencies": {
     "@types/memoizee": "^0.4.8",
-    "@types/react-router-dom": "^5.2.0",
-    "classnames": "^2.3.1",
-    "dayjs": "^1.11.2",
-    "dom-helpers": "^5.2.1",
-    "dotenv": "^16.0.3",
-    "final-form": "^4.20.9",
+    "@types/react-router-dom": "^5.3.3",
+    "classnames": "^2.3.2",
+    "dayjs": "^1.11.10",
+    "final-form": "^4.20.10",
     "final-form-arrays": "^3.1.0",
-    "fuzzysort": "^2.0.1",
-    "history": "^4.9.0",
+    "fuzzysort": "^2.0.4",
+    "history": "^5.3.0",
     "ky": "^0.31.1",
     "memoizee": "^0.4.15",
     "react-final-form": "^6.5.9",

diff --git a/src/data/useDataRepository.test.tsx b/src/data/useDataRepository.test.tsx
@@ -1,9 +1,9 @@
 import { useOkapiKy } from '@folio/stripes/core';
-import { render, waitFor } from '@testing-library/react';
+import { act, render, renderHook, waitFor } from '@testing-library/react';
 import ky, { ResponsePromise } from 'ky';
 import { KyInstance } from 'ky/distribution/types/ky';
 import React, { createRef, MutableRefObject } from 'react';
-import { QueryClient, QueryClientProvider } from 'react-query';
+import { Query, QueryClient, QueryClientProvider } from 'react-query';
 import * as Calendars from '../test/data/Calendars';
 import * as Dates from '../test/data/Dates';
 import * as ServicePoints from '../test/data/ServicePoints';
@@ -62,15 +62,6 @@ function mockApi() {
     return kyBase;
   });
 
-  const dataRepositoryRef = createRef<DataRepository | null>();
-
-  // needed so the hook can be wrapped by QueryClientProvider
-  const Inner = (props: {
-    dataRepositoryRef: MutableRefObject<DataRepository | null>;
-  }) => {
-    props.dataRepositoryRef.current = useDataRepository();
-    return <></>;
-  };
 
   return {
     getServicePointsMock,
@@ -80,13 +71,14 @@ function mockApi() {
     postMock,
     putMock,
     deleteMock,
-    dataRepository: dataRepositoryRef,
-    renderer: async () => {
-      render(
-        <QueryClientProvider client={new QueryClient()}>
-          <Inner dataRepositoryRef={dataRepositoryRef} />
-        </QueryClientProvider>
+    renderHook: async () => {
+      const result = renderHook(
+        () => useDataRepository(),
+        {
+          wrapper: ({children}) => <QueryClientProvider client={new QueryClient()}>{children}</QueryClientProvider>
+        }
       );
+
       await waitFor(() => {
         expect(getServicePointsMock).toHaveBeenCalled();
         expect(getCalendarsMock).toHaveBeenCalled();
@@ -98,13 +90,16 @@ function mockApi() {
       expect(putMock).not.toHaveBeenCalled();
       expect(deleteMock).not.toHaveBeenCalled();
       jest.clearAllMocks();
+
+      return result;
     }
   };
 }
 
 test('useDataRepository queries work properly', async () => {
-  const { getServicePointsMock, getCalendarsMock, dataRepository, renderer } =
+  const { getServicePointsMock, getCalendarsMock, renderHook } =
     mockApi();
+
   getServicePointsMock.mockReturnValue({
     servicepoints: [
       ServicePoints.SERVICE_POINT_1_DTO,
@@ -120,7 +115,7 @@ test('useDataRepository queries work properly', async () => {
     ]
   });
 
-  await renderer();
+  const { result: dataRepository } = await renderHook();
 
   await waitFor(() => expect(dataRepository.current?.areCalendarsLoaded()).toBe(true));
   expect(dataRepository.current?.getCalendars()).toStrictEqual([
@@ -139,18 +134,20 @@ test('useDataRepository create mutation works properly', async () => {
   const {
     getServicePointsMock,
     getCalendarsMock,
-    dataRepository,
-    renderer,
+    renderHook,
     getDatesMock,
     getUsersMock,
     postMock,
     putMock,
     deleteMock
   } = mockApi();
 
-  await renderer();
+  const { result: dataRepository} = await renderHook();
+
+  await act(async () => {
+    await dataRepository.current?.createCalendar(Calendars.SUMMER_SP_1_2);
+  });
 
-  await dataRepository.current?.createCalendar(Calendars.SUMMER_SP_1_2);
   expect(postMock).toHaveBeenCalledWith('calendar/calendars', {
     json: Calendars.SUMMER_SP_1_2
   });
@@ -171,21 +168,23 @@ test('useDataRepository update mutation works properly', async () => {
   const {
     getServicePointsMock,
     getCalendarsMock,
-    dataRepository,
-    renderer,
+    renderHook,
     getDatesMock,
     getUsersMock,
     postMock,
     putMock,
     deleteMock
   } = mockApi();
 
-  await renderer();
+  const { result: dataRepository} = await renderHook();
 
-  await dataRepository.current?.updateCalendar({
-    ...Calendars.SUMMER_SP_1_2,
-    name: 'New Name'
+  await act(async () => {
+    await dataRepository.current?.updateCalendar({
+      ...Calendars.SUMMER_SP_1_2,
+      name: 'New Name'
+    });
   });
+
   expect(putMock).toHaveBeenCalledWith(
     `calendar/calendars/${Calendars.SUMMER_SP_1_2.id}`,
     {
@@ -212,18 +211,21 @@ test('useDataRepository singular delete mutation works properly', async () => {
   const {
     getServicePointsMock,
     getCalendarsMock,
-    dataRepository,
-    renderer,
+    renderHook,
     getDatesMock,
     getUsersMock,
     postMock,
     putMock,
     deleteMock
   } = mockApi();
 
-  await renderer();
 
-  await dataRepository.current?.deleteCalendar(Calendars.SUMMER_SP_1_2);
+  const { result: dataRepository} = await renderHook();
+
+  await act(async () => {
+    await dataRepository.current?.deleteCalendar(Calendars.SUMMER_SP_1_2);
+  });
+
   expect(deleteMock).toHaveBeenCalledWith(
     `calendar/calendars?id=${Calendars.SUMMER_SP_1_2.id}`
   );
@@ -244,21 +246,23 @@ test('useDataRepository multiple delete mutation works properly', async () => {
   const {
     getServicePointsMock,
     getCalendarsMock,
-    dataRepository,
-    renderer,
+    renderHook,
     getDatesMock,
     getUsersMock,
     postMock,
     putMock,
     deleteMock
   } = mockApi();
 
-  await renderer();
+  const { result: dataRepository} = await renderHook();
+
+  await act(async () => {
+    await dataRepository.current?.deleteCalendars([
+      Calendars.SUMMER_SP_1_2,
+      Calendars.SUMMER_SP_3
+    ]);
+  });
 
-  await dataRepository.current?.deleteCalendars([
-    Calendars.SUMMER_SP_1_2,
-    Calendars.SUMMER_SP_3
-  ]);
   expect(deleteMock).toHaveBeenCalledWith(
     `calendar/calendars?id=${Calendars.SUMMER_SP_1_2.id}&id=${Calendars.SUMMER_SP_3.id}`
   );
@@ -279,22 +283,24 @@ test('useDataRepository get dates mutation works properly', async () => {
   const {
     getServicePointsMock,
     getCalendarsMock,
-    dataRepository,
-    renderer,
+    renderHook,
     getDatesMock,
     getUsersMock,
     postMock,
     putMock,
     deleteMock
   } = mockApi();
 
-  await renderer();
+  const { result: dataRepository} = await renderHook();
+
+  await act(async () => {
+    await dataRepository.current?.getDailyOpeningInfo(
+      ServicePoints.SERVICE_POINT_1.id,
+      Dates.MAY_1_DATE,
+      Dates.MAY_14_DATE
+    );
+  });
 
-  await dataRepository.current?.getDailyOpeningInfo(
-    ServicePoints.SERVICE_POINT_1.id,
-    Dates.MAY_1_DATE,
-    Dates.MAY_14_DATE
-  );
   expect(getDatesMock).toHaveBeenCalledWith(
     `calendar/dates/${
       ServicePoints.SERVICE_POINT_1.id
@@ -316,18 +322,20 @@ test('useDataRepository get user mutation works properly', async () => {
   const {
     getServicePointsMock,
     getCalendarsMock,
-    dataRepository,
-    renderer,
+    renderHook,
     getDatesMock,
     getUsersMock,
     postMock,
     putMock,
     deleteMock
   } = mockApi();
 
-  await renderer();
+  const { result: dataRepository} = await renderHook();
+
+  await act(async () => {
+    await dataRepository.current?.getUser(Users.PETRO_PROKOPOVYCH.id);
+  });
 
-  await dataRepository.current?.getUser(Users.PETRO_PROKOPOVYCH.id);
   expect(getUsersMock).toHaveBeenCalledWith(
     `users/${Users.PETRO_PROKOPOVYCH.id}`
   );

diff --git a/src/index.test.tsx b/src/index.test.tsx
@@ -2,13 +2,19 @@ import { StripesType } from '@folio/stripes/core';
 import React from 'react';
 import CalendarRouting from '.';
 import expectRender from './test/util/expectRender';
+import * as CalendarSettingsRaw from './views/CalendarSettings';
+
+jest.mock('./views/CalendarSettings');
+const CalendarSettings = CalendarSettingsRaw.default as jest.MockedFunction<typeof CalendarSettingsRaw.default>;
+
+CalendarSettings.mockReturnValue(<div>settings shown here</div>);
 
 describe('Main index.tsx entry point', () => {
   it('renders appropriately when it should not be showing', () => {
     expectRender(
       <CalendarRouting
         stripes={{} as StripesType}
-        location={{ pathname: 'foo', search: '', state: undefined, hash: '' }}
+        location={{ pathname: 'foo', search: '', state: undefined, hash: '', key: '' }}
         forceRender={0}
       />
     ).toContain('How did you get to foo?');
@@ -18,10 +24,10 @@ describe('Main index.tsx entry point', () => {
     expectRender(
       <CalendarRouting
         stripes={{} as StripesType}
-        location={{ pathname: 'foo', search: '', state: undefined, hash: '' }}
+        location={{ pathname: 'foo', search: '', state: undefined, hash: '', key: '' }}
         forceRender={0}
         showSettings
       />
-    ).not.toContain('How did you get to');
+    ).toContain('settings shown here');
   });
 });
diff --git a/src/utils/WeekdayUtils.getLocaleWeekdays.test.ts b/src/utils/WeekdayUtils.getLocaleWeekdays.test.ts
@@ -1,4 +1,4 @@
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react';
 import { IntlShape } from 'react-intl';
 import * as Weekdays from '../test/data/Weekdays';
 import getIntl from '../test/util/getIntl';