04-Query training module

jest.config.js

@@ -1,12 +1,14 @@
 const { join } = require('path');
+const config = require('@folio/jest-config-stripes');
 
 /** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */
 module.exports = {
   testEnvironment: 'jsdom',
 
   preset: 'ts-jest',
   transform: {
-    '^.+\\.(t|j)sx?$': 'ts-jest'
+    '^.+\\.(ts|tsx)?$': 'ts-jest',
+    ...config.transform,
   },
   transformIgnorePatterns: ['node_modules/(?!@folio|ky)'],
 

package.json

@@ -18,28 +18,29 @@
   },
   "devDependencies": {
     "@folio/eslint-config-stripes": "^7.0.0",
+    "@folio/jest-config-stripes": "^2.0.0",
     "@folio/stripes": "^9.0.0",
     "@folio/stripes-cli": "^3.0.0",
     "@formatjs/cli": "^4.2.21",
     "@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/jest": "^29.5.1",
     "@types/react-router-dom": "^5.2.0",
     "@typescript-eslint/eslint-plugin": "^5.33.0",
     "@typescript-eslint/parser": "^5.33.0",
-    "eslint": "^7.32.0",
+    "babel-jest": "^29.6.1",
+    "eslint": "^6.2.1",
+    "eslint-plugin-filenames": "^1.3.2",
+    "eslint-plugin-jest": "^23.0.4",
     "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",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-intl": "^6.0.0",
     "react-final-form": "^6.5.9",
     "react-final-form-arrays": "^3.1.4",
+    "react-intl": "^6.4.4",
     "react-router-dom": "^5.2.0",
     "ts-jest": "^28.0.7",
     "typescript": "^4.7.4"
@@ -53,11 +54,11 @@
     "utility-types": "^3.10.0"
   },
   "resolutions": {
-    "@types/react": "^17.0.2"
+    "@types/react": "^18.0.2"
   },
   "peerDependencies": {
-    "@folio/stripes": "^8.0.0",
-    "@types/react": "^17.0.2",
+    "@folio/stripes": "^9.0.0",
+    "@types/react": "^18.2.0",
     "final-form": "^4.20.7",
     "react": "^18.2.0",
     "react-final-form": "^6.5.9",

src/hooks/useInstitutions.test.tsx

@@ -0,0 +1,53 @@
+import React, { ReactNode } from 'react';
+import { QueryClient, QueryClientProvider } from 'react-query';
+import { useInstitutions } from './useInstitutions';
+import { renderHook } from '@folio/jest-config-stripes/testing-library/react-hooks';
+
+const kyMock = jest.fn(() => ({
+  json: () => {
+    return Promise.resolve({
+      locinsts: [
+        {
+          id: "inst1-id",
+          name: "institution 1",
+        },
+        {
+          id: "inst2-id",
+          name: "institution 2",
+        },
+      ],
+      totalRecords: 2,
+    });
+  },
+}));
+jest.mock("@folio/stripes/core", () => ({
+  ...jest.requireActual("@folio/stripes/core"),
+  useOkapiKy: () => ({
+    get: kyMock,
+  }),
+}));
+
+describe("Institution query", () => {
+  it("Returns the requested data", async () => {
+    const queryClient = new QueryClient();
+    const wrapper = ({ children }: { children: ReactNode }) => (
+      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+    );
+
+    const { result, waitFor } = renderHook(() => useInstitutions(), { wrapper });
+
+    await waitFor(() => result.current.isSuccess);
+
+    expect(kyMock).toHaveBeenCalledWith("location-units/institutions");
+    expect(result.current.data).toStrictEqual([
+      {
+        id: "inst1-id",
+        name: "institution 1",
+      },
+      {
+        id: "inst2-id",
+        name: "institution 2",
+      },
+    ]);
+  });
+});

src/hooks/useInstitutions.ts

@@ -0,0 +1,27 @@
+import { useOkapiKy } from "@folio/stripes/core";
+import { useQuery } from "react-query";
+
+interface InstitutionsResponse {
+  locinsts: Institution[];
+  totalRecords: number;
+}
+
+interface Institution {
+  id: string;
+  name: string;
+  code: string;
+
+  metadata: {
+    createdDate: string;
+    updatedDate?: string;
+  };
+}
+
+export const useInstitutions = () => {
+  const ky = useOkapiKy();
+
+  return useQuery<Institution[]>(
+    ["ui-training", "institutions"],
+    async () => ((await ky.get("location-units/institutions").json<InstitutionsResponse>())).locinsts,
+  );
+};

src/test/jest.setup.ts

@@ -1 +1 @@
-import '@testing-library/jest-dom';
+import '@folio/jest-config-stripes/testing-library/jest-dom';

src/test/util/expectRender.ts

@@ -1,9 +1,7 @@
-import { render } from '@testing-library/react';
+import { render } from '@folio/jest-config-stripes/testing-library/react';
 import { ReactNode } from 'react';
 import withIntlConfiguration from './withIntlConfiguration';
 
-export default function expectRender(
-  error: ReactNode
-): jest.JestMatchers<string> {
+export default function expectRender(error: ReactNode): jest.JestMatchers<string> {
   return expect(render(withIntlConfiguration(error)).container.textContent);
 }

src/test/util/getIntl.tsx

@@ -1,4 +1,4 @@
-import { cleanup, render } from '@testing-library/react';
+import { cleanup, render } from '@folio/jest-config-stripes/testing-library/react';
 import React from 'react';
 import { IntlContext, IntlShape } from 'react-intl';
 import withIntlConfiguration from './withIntlConfiguration';

src/typings.d.ts

@@ -1 +1,16 @@
+/* eslint-disable import/no-extraneous-dependencies */
 declare module '*.css';
+
+// see STTYPES-9 to understand why this is necessary
+declare module '@folio/jest-config-stripes/testing-library/react' {
+  export { default } from '@testing-library/react';
+  export * from '@testing-library/react';
+}
+declare module '@folio/jest-config-stripes/testing-library/react-hooks' {
+  export { default } from '@testing-library/react-hooks';
+  export * from '@testing-library/react-hooks';
+}
+declare module '@folio/jest-config-stripes/testing-library/user-event' {
+  export { default } from '@testing-library/user-event';
+  export * from '@testing-library/user-event';
+}

src/views/MainPage.test.tsx

@@ -1,16 +1,58 @@
-import { getByText, render, screen } from '@testing-library/react';
+import { render, screen } from '@folio/jest-config-stripes/testing-library/react';
+import { QueryClient, QueryClientProvider } from 'react-query';
 import React from 'react';
 import MainPage from './MainPage';
 import userEvent from '@testing-library/user-event'
 import withIntlConfiguration from '../test/util/withIntlConfiguration';
+import { useInstitutions } from '../hooks/useInstitutions';
+
+const queryClient = new QueryClient();
+
+jest.mock('react-query', () => ({
+  ...jest.requireActual('react-query'),
+  useQueryClient: () => queryClient,
+}));
+
+jest.mock('../hooks/useInstitutions');
 
 describe('Main page', () => {
   it('shows correct text', async () => {
-    render(withIntlConfiguration(<MainPage />));
+    render(withIntlConfiguration(<QueryClientProvider client={queryClient}> <MainPage/> </QueryClientProvider>));
 
     expect(screen.getByRole('heading', { name: 'Headline Open side panel' })).toBeVisible();
 
-    await userEvent.click(await screen.findByRole('button'));
+    await userEvent.click(await screen.findByText('Open side panel'));
     expect(screen.getByText('Side panel')).toBeVisible();
   });
+
+  it('intializes MCL properly', () => {
+    (useInstitutions as any).mockReturnValue({ isSuccess: false });
+
+    render(withIntlConfiguration(<MainPage/>));
+
+    expect(screen.queryByText('institution 1')).toBeNull();
+    expect(screen.queryByText('institution 2')).toBeNull();
+  });
+
+  it('intializes MCL properly', () => {
+    (useInstitutions as any).mockReturnValue({ 
+      isSuccess: true,
+      data: [
+          {
+            id: "inst1-id",
+            name: "institution 1",
+          },
+          {
+            id: "inst2-id",
+            name: "institution 2",
+          },
+        ],
+      },
+    );
+
+    render(withIntlConfiguration(<MainPage/>));
+
+    expect(screen.queryByText('institution 1')).toBeInTheDocument();
+    expect(screen.queryByText('institution 2')).toBeInTheDocument();
+  });
 });

src/views/MainPage.tsx

@@ -1,22 +1,23 @@
 import React from 'react';
 import SidePanel from './SidePanel';
-import { Pane, Paneset, PaneHeader, Headline, MultiColumnList, Button } from '@folio/stripes/components';
+import { Pane, Paneset, Headline, MultiColumnList, Button } from '@folio/stripes/components';
 import { useState } from 'react';
+import { ReactQueryDevtools } from 'react-query/devtools';
+import Debug from '../components/Debug';
+import { useInstitutions } from '../hooks/useInstitutions';
 
 export default function MainPage() {
+  const getInsts = useInstitutions();
   const [showPanel, setShowPanel] = useState<boolean>(false);
 
   const togglePanel = () => {
     setShowPanel(!showPanel);
   }
 
-  const bookData = [
-    {"Title": "The Cat in the Hat", "Author": "Dr. Suess"},
-    {"Title": "The Great Gatsby", "Author": "F. Scott Fitzgerald"}
-  ]
-
   return (
     <div>
+      <ReactQueryDevtools initialIsOpen={false}/>;
+      <Debug label='useInstitutions' value={useInstitutions()}/>
       <Paneset>
         <Pane defaultWidth='fill'>
           <Headline size='large' margin='medium' tag='h3'>
@@ -25,7 +26,7 @@ export default function MainPage() {
               Open side panel
             </Button>
           </Headline>
-          <MultiColumnList contentData={bookData} />
+          <MultiColumnList contentData={getInsts?.data ?? []} visibleColumns={['name', 'code']}/>
         </Pane>
         <SidePanel togglePanel={togglePanel} showPanel={showPanel}/>
       </Paneset>