@k-int/stripes-kint-components 5.31.3 → 5.32.0

package/src/lib/SASQLookupComponent/SASQLookupComponent.test.js

@@ -0,0 +1,495 @@
+import { createRef } from 'react';
+
+import { MemoryRouter } from 'react-router-dom';
+
+import { waitFor } from '@folio/jest-config-stripes/testing-library/react';
+
+import { mockKy } from '@folio/stripes/core';
+import { Button as MockStripesButton } from '@folio/stripes/components';
+import {
+  Button,
+  SearchField,
+  Pane,
+  IconButton
+} from '@folio/stripes-erm-testing';
+
+import { useQuery } from 'react-query';
+import { renderWithKintHarness } from '../../../test/jest';
+import SASQLookupComponent from './SASQLookupComponent';
+import translationsProperties from '../../../test/helpers';
+
+jest.mock('react-query', () => {
+  const { mockReactQuery } = jest.requireActual('@folio/stripes-erm-testing');
+  return {
+    ...jest.requireActual('react-query'),
+    ...mockReactQuery,
+    useQuery: jest.fn((_key, func, opts) => {
+      const defaultData = {
+        results: [
+          { id: 1, someData: false, test: 'wibble' },
+          { id: 2, someData: true, test: 'wobble' }
+        ],
+        totalRecords: 2
+      };
+
+      // Mock ensures the function is called so we can test outcomes
+      if (opts.enabled) {
+        func();
+      }
+
+      if (opts.select) {
+        return ({
+          data: opts.select(defaultData),
+          extraProp: 'extraProp'
+        });
+      }
+
+      return ({
+        data: defaultData,
+        extraProp: 'extraProp'
+      });
+    }),
+  };
+});
+
+// TODO why does unmocking react-router-dom cause module hierarchy issues?
+// EXAMPLE mocking react-router-dom
+const mockHistoryPush = jest.fn();
+const mockHistoryReplace = jest.fn();
+jest.mock('react-router-dom', () => {
+  const { mockReactRouterDom } = jest.requireActual('@folio/stripes-erm-testing');
+  const actualReactRouterDom = jest.requireActual('react-router-dom');
+
+  return ({
+    ...actualReactRouterDom,
+    ...mockReactRouterDom,
+    useHistory: jest.fn(() => ({ push: mockHistoryPush, replace: mockHistoryReplace })),
+    useLocation: actualReactRouterDom.useLocation, // Bit ugly... idk why I need to put this back specifically like this instead of just unmocking react-router-dom
+  });
+});
+
+jest.mock('./TableBody', () => jest.fn(({ mclProps }) => (
+  <div>
+    <div>TableBody</div>
+    {/* This allows our interactors to find and click a pagination trigger */}
+    <MockStripesButton
+      onClick={() => mclProps.onNeedMoreData(null, 1)}
+    >
+      Next Page
+    </MockStripesButton>
+  </div>
+)));
+
+jest.mock('../SearchKeyControl', () => jest.fn(() => <div>SearchKeyControl</div>));
+
+const fetchParameters = {
+  endpoint: '/wibble',
+  SASQ_MAP: {
+    searchKey: 'test.test1.test2,test3',
+    filterKeys: {
+      status: 'status.value',
+      wobble: 'wobble.value',
+    },
+  },
+};
+
+const baseSASQLookupProps = {
+  id: 'testing-sasq-lookup-component',
+  path: 'the-path', // Required as it's needed for children
+  fetchParameters
+};
+
+const baseSASQObj = { filters: '', qindex: undefined, query: '' };
+const getBaseExpectedQueryNamespace = (obj = baseSASQLookupProps) => ([
+  '@folio/test-implementor',
+  'SASQ',
+  'testing-sasq-lookup-component',
+  'viewAll',
+  obj,
+  1
+]);
+
+let renderComponent;
+let theRef;
+describe('SASQLookupComponent', () => {
+  describe.each([
+    {
+      testLabel: 'default behaviour',
+      props: baseSASQLookupProps,
+      expectQueryFire: false,
+      expectedMockKyCall: '/wibble?filters=status.value%3D%3DtestFilter&stats=true&page=1',
+    },
+    {
+      testLabel: 'with searchable indexes',
+      props: {
+        ...baseSASQLookupProps,
+        searchableIndexes: [{ key: 'name', label: 'Name' }]
+      },
+      expectQueryFire: false, // No actual query yet
+      expectedSearchKeyControl: true,
+    },
+    {
+      testLabel: 'starting with filters',
+      props: baseSASQLookupProps,
+      startingLocation: '/wibble?filters=status.testFilter',
+      expectedQueryNamespace: getBaseExpectedQueryNamespace({
+        filters: 'status.testFilter',
+        qindex: undefined,
+        query: ''
+      }),
+      expectedMockKyCall: '/wibble?filters=status.value%3D%3DtestFilter&stats=true&page=1',
+      expectedMockKyCallAfterSearch: '/wibble?match=test.test1.test2&match=test3&term=some%20test%20query&filters=status.value%3D%3DtestFilter&stats=true&page=1',
+      expectedRef: {
+        lookupQueryProps: {
+          data: {
+            results: [{ 'id': 1, 'someData': false, 'test': 'wibble' }, { 'id': 2, 'someData': true, 'test': 'wobble' }],
+            totalRecords: 2
+          },
+          'extraProp': 'extraProp'
+        },
+        queryParams: '?filters=status.value%3D%3DtestFilter&stats=true&page=1'
+      }
+    },
+    {
+      testLabel: 'starting with qindex and no query',
+      props: baseSASQLookupProps,
+      startingLocation: '/wibble?qindex=test.test1.test2',
+      expectQueryFire: false,
+      expectedQueryNamespace: getBaseExpectedQueryNamespace({
+        filters: '',
+        qindex: 'test.test1.test2',
+        query: ''
+      }),
+      expectedMockKyCallAfterSearch: '/wibble?match=test.test1.test2&term=some%20test%20query&stats=true&page=1',
+    },
+    {
+      testLabel: 'starting with qindex and query',
+      props: {
+        ...baseSASQLookupProps,
+        sasqProps: {
+          initialSearchState: { query: 'hello', qindex: 'test.test1.test2' },
+        },
+      },
+      startingLocation: '/wibble?qindex=some.new.qindex.path&query=hello',
+      expectedQueryNamespace: getBaseExpectedQueryNamespace({
+        filters: '',
+        qindex: 'some.new.qindex.path',
+        query: 'hello'
+      }),
+      expectedMockKyCall: '/wibble?match=some.new.qindex.path&term=hello&stats=true&page=1',
+      expectedMockKyCallAfterSearch: '/wibble?match=some.new.qindex.path&term=some%20test%20query&stats=true&page=1',
+      expectedRef: {
+        lookupQueryProps: {
+          data: {
+            results: [{ 'id': 1, 'someData': false, 'test': 'wibble' }, { 'id': 2, 'someData': true, 'test': 'wobble' }],
+            totalRecords: 2
+          },
+          'extraProp': 'extraProp'
+        },
+        queryParams: '?match=some.new.qindex.path&term=hello&stats=true&page=1'
+      }
+    },
+    {
+      testLabel: 'with FilterComponent',
+      props: {
+        ...baseSASQLookupProps,
+        FilterComponent: () => <div>FilterComponent</div>
+      },
+      expectQueryFire: false,
+      expectedMockKyCall: '/wibble?filters=status.value%3D%3DtestFilter&stats=true&page=1',
+      expectedFilterComponent: 'FilterComponent',
+    },
+    {
+      testLabel: 'with filter pane disabled',
+      props: {
+        ...baseSASQLookupProps,
+        hasFilterPane: false
+      },
+      expectQueryFire: false,
+      expectedSearchField :false,
+      expectedFilterPane: false,
+    },
+    {
+      testLabel: 'with FilterHeaderComponent',
+      props: {
+        ...baseSASQLookupProps,
+        FilterPaneHeaderComponent: () => <div>FilterPaneHeaderComponent</div>
+      },
+      expectQueryFire: false,
+      expectedMockKyCall: '/wibble?filters=status.value%3D%3DtestFilter&stats=true&page=1',
+      expectedFilterHeaderComponent: 'FilterPaneHeaderComponent',
+    },
+    {
+      testLabel: 'no search field mode',
+      props: {
+        ...baseSASQLookupProps,
+        noSearchField: true
+      },
+      expectQueryFire: false,
+      expectedSearchField: false,
+    },
+    {
+      testLabel: 'with RenderBody',
+      props: {
+        ...baseSASQLookupProps,
+        RenderBody: () => <div>TheBodyComponent</div>
+      },
+      expectQueryFire: false,
+      expectedMockKyCall: '/wibble?filters=status.value%3D%3DtestFilter&stats=true&page=1',
+      expectedBodyComponent: 'TheBodyComponent',
+    },
+    {
+      testLabel: 'with custom lookupQueryNamespaceGenerator',
+      props: {
+        ...baseSASQLookupProps,
+        lookupQueryNamespaceGenerator: ({
+          currentPage,
+          namespace,
+          id: passedId,
+        }) => [`testing-${currentPage}`, `testing-${namespace}`, `testing-${passedId}`],
+      },
+      expectedQueryNamespace: ['testing-1', 'testing-@folio/test-implementor', 'testing-testing-sasq-lookup-component'],
+      startingLocation: '/wibble?filters=status.testFilter',
+      expectedMockKyCall: '/wibble?filters=status.value%3D%3DtestFilter&stats=true&page=1',
+      expectedMockKyCallAfterSearch: '/wibble?match=test.test1.test2&match=test3&term=some%20test%20query&filters=status.value%3D%3DtestFilter&stats=true&page=1',
+      expectedRef: {
+        lookupQueryProps: {
+          data: {
+            results: [{ 'id': 1, 'someData': false, 'test': 'wibble' }, { 'id': 2, 'someData': true, 'test': 'wobble' }],
+            totalRecords: 2
+          },
+          'extraProp': 'extraProp'
+        },
+        queryParams: '?filters=status.value%3D%3DtestFilter&stats=true&page=1'
+      }
+    },
+    {
+      testLabel: 'with lookupResponseTransform',
+      props: {
+        ...baseSASQLookupProps,
+        sasqProps: {
+          initialSearchState: { query: 'test', qindex: 'test.test1.test2' },
+        },
+        // Wrap results in an extra object to prove transform works
+        lookupResponseTransform: (resp) => ({ originalData: resp, transformed: true }),
+      },
+      startingLocation: '/wibble?query=test',
+      expectedQueryNamespace: getBaseExpectedQueryNamespace({
+        filters: '',
+        qindex: undefined,
+        query: 'test'
+      }),
+      expectedMockKyCall: '/wibble?match=test.test1.test2&match=test3&term=test&stats=true&page=1',
+      expectedRef: {
+        lookupQueryProps: {
+          data: {
+            originalData: {
+              results: [{ 'id': 1, 'someData': false, 'test': 'wibble' }, { 'id': 2, 'someData': true, 'test': 'wobble' }],
+              totalRecords: 2
+            },
+            transformed: true,
+          },
+          'extraProp': 'extraProp'
+        },
+        queryParams: '?match=test.test1.test2&match=test3&term=test&stats=true&page=1'
+      },
+      expectedNumberOfResults: 0
+    },
+  ])('$testLabel', ({
+    props,
+    startingLocation = '/wibble',
+    expectQueryFire = true,
+    expectedQueryNamespace = getBaseExpectedQueryNamespace(baseSASQObj),
+    expectedMockKyCall = '/wibble?match=test.test1.test2&match=test3&term=some%20test%20query&stats=true&page=1',
+    expectedMockKyCallAfterSearch = '/wibble?match=test.test1.test2&match=test3&term=some%20test%20query&stats=true&page=1',
+    expectedFilterComponent,
+    expectedFilterHeaderComponent,
+    expectedFilterPane = true,
+    expectedBodyComponent,
+    expectedNumberOfResults = 2,
+    expectedSearchField = true,
+    expectedSearchKeyControl = false,
+    expectedRef,
+  }) => {
+    beforeEach(() => {
+      // CLEAR MOCKS
+      mockKy.mockClear();
+      useQuery.mockClear();
+
+      // CLEAR LOCAL STORAGE to ensure filter pane starts open
+      window.localStorage.clear();
+
+      // SET UP REF
+      theRef = createRef();
+      renderComponent = renderWithKintHarness(
+        <MemoryRouter initialEntries={[startingLocation]}>
+          <SASQLookupComponent ref={theRef} {...props}>
+            <div>CHILD COMPONENT</div>
+          </SASQLookupComponent>
+        </MemoryRouter>,
+        undefined,
+        translationsProperties
+      );
+    });
+
+    test('renders children', () => {
+      const { getByText } = renderComponent;
+      expect(getByText('CHILD COMPONENT')).toBeInTheDocument();
+    });
+
+    test('renders the main pane', async () => {
+      await Pane({ id: `${props.id}-main-pane` }).exists();
+    });
+
+    // This MUST happen before the Searching block as that will clear the mocks
+    describe('Initial lookup', () => {
+      // Called once without SASQ props, then once without page, then finally as expected, so call 2
+      test('useQuery namespace was as expected', () => {
+        expect(useQuery.mock.calls[3][0]).toEqual(expectedQueryNamespace);
+      });
+
+      if (expectQueryFire) {
+        test('mockKy was called with expected values', () => {
+          expect(mockKy).toHaveBeenCalledWith(expectedMockKyCall);
+        });
+
+        test('ref has gained lookup data', async () => {
+          await waitFor(() => {
+            expect(theRef.current).toEqual(expectedRef);
+          });
+        });
+      } else {
+        test('mockKy was not called', () => {
+          expect(mockKy).toHaveBeenCalledTimes(0);
+        });
+      }
+    });
+
+    describe('Searching', () => {
+      if (expectedSearchKeyControl) {
+        test('renders SearchKeyControl', () => {
+          const { getByText } = renderComponent;
+          expect(getByText('SearchKeyControl')).toBeInTheDocument();
+        });
+      }
+
+      if (!expectedSearchField) {
+        test('does not render SearchField', async () => {
+          await SearchField().absent();
+        });
+      } else {
+        test('renders SearchField', async () => {
+          await SearchField().exists();
+        });
+
+        test('mockKy has not yet been called with expected search', async () => {
+          await waitFor(() => {
+            expect(mockKy).not.toHaveBeenCalledWith(expectedMockKyCallAfterSearch);
+          });
+        });
+
+        describe('running a search', () => {
+          beforeEach(async () => {
+            mockKy.mockClear();
+            await waitFor(async () => {
+              await SearchField().fillIn('some test query');
+              await Button('Search').click();
+            });
+          });
+
+          test('mockKy behaves as expected after search', async () => {
+            await waitFor(() => {
+              expect(mockKy).toHaveBeenCalledWith(expectedMockKyCallAfterSearch);
+            });
+          });
+
+          describe('resetting search', () => {
+            beforeEach(async () => {
+              mockKy.mockClear();
+              await waitFor(async () => {
+                await Button('Reset all').click();
+              });
+            });
+
+            if (expectQueryFire) {
+              test('mockKy was called with expected values after reset', async () => {
+                await waitFor(() => {
+                  expect(mockKy).toHaveBeenCalledWith(expectedMockKyCall);
+                });
+              });
+            } else {
+              test('mockKy was not called  after reset', () => {
+                expect(mockKy).toHaveBeenCalledTimes(0);
+              });
+            }
+          });
+        });
+      }
+    });
+
+    // TESTING TOTAL RECORDS DISPLAY
+    test('displays the correct number of found values', async () => {
+      // SASQ uses paneSub for "found X values"
+      await Pane({ subtitle: `Found ${expectedNumberOfResults} values` }).exists();
+    });
+
+    if (expectedBodyComponent) {
+      test('renders the RenderBody', () => {
+        const { getByText } = renderComponent;
+        expect(getByText(expectedBodyComponent)).toBeInTheDocument();
+      });
+    } else {
+      test('renders the TableBody', () => {
+        const { getByText } = renderComponent;
+        expect(getByText('TableBody')).toBeInTheDocument();
+      });
+    }
+
+    if (expectedFilterPane) {
+      describe('Filter pane', () => {
+        test('renders the filter pane', async () => {
+          await Pane({ id: `${props.id}-filter-pane` }).exists();
+        });
+
+        test('collapse filter pane button exists', async () => {
+          await IconButton('caret-left').exists();
+        });
+
+        test('expand filter pane button does not exist', async () => {
+          await IconButton('caret-right').absent();
+        });
+
+        describe('toggling the filter pane', () => {
+          beforeEach(async () => {
+            // Find the collapse button in the filter pane
+            await waitFor(async () => {
+              await IconButton('caret-left').click();
+            });
+          });
+
+          test('expand button appears in main pane', async () => {
+            await IconButton('caret-right').exists();
+          });
+
+          test('filter pane is removed from DOM', async () => {
+            await Pane({ id: `${props.id}-filter-pane` }).absent();
+          });
+        });
+
+        if (expectedFilterComponent) {
+          test('FilterComponent renders', () => {
+            const { getByText } = renderComponent;
+            expect(getByText(expectedFilterComponent)).toBeInTheDocument();
+          });
+        }
+
+        if (expectedFilterHeaderComponent) {
+          test('FilterHeaderComponent renders', () => {
+            const { getByText } = renderComponent;
+            expect(getByText(expectedFilterHeaderComponent)).toBeInTheDocument();
+          });
+        }
+      });
+    }
+  });
+});

package/src/lib/SASQLookupComponent/TableBody/TableBody.js

@@ -51,7 +51,7 @@ const TableBody = ({
   const getRowUrl = useCallback((rowData) => {
     const baseUrl = `${path}/${getNavigationIdentifier(rowData)}`;
     return {
-      url: `${baseUrl}${location?.search}`,
+      url: `${baseUrl}${location?.search ?? ''}`,
       path,
       baseUrl,
       location
@@ -61,9 +61,12 @@ const TableBody = ({
   const getEnhancedFormatter = useCallback(() => {
     const enhancedFormatter = {};
     for (const [key, value] of Object.entries(formatter)) {
-      enhancedFormatter[key] = (item) => value({ ...item, defaultRowUrl: getRowUrl(item) });
+      if (typeof value === 'function') {
+        enhancedFormatter[key] = (item) => value({ ...item, defaultRowUrl: getRowUrl(item) });
+      } else {
+        enhancedFormatter[key] = value;
+      }
     }
-
     return enhancedFormatter;
   }, [formatter, getRowUrl]);