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

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

@@ -0,0 +1,247 @@
+import { MemoryRouter, Route } from 'react-router-dom';
+
+import {
+  MultiColumnList,
+  MultiColumnListCell,
+  MultiColumnListHeader,
+  MultiColumnListRow,
+} from '@folio/stripes-erm-testing';
+import { renderWithKintHarness } from '../../../../test/jest';
+
+import TableBody from './TableBody';
+
+const mockHistoryPush = jest.fn();
+
+// We want to use the ACTUAL location, but to mock history push so we can inspect it
+jest.mock('react-router-dom', () => {
+  return ({
+    ...jest.requireActual('react-router-dom'),
+    useHistory: () => ({ push: mockHistoryPush })
+  });
+});
+
+const mockFetchNextPage = jest.fn();
+const mockToggleFilterPane = jest.fn();
+const mockOnSort = jest.fn();
+
+const nameFormatterMock = jest.fn((item) => item.name);
+
+const defaultMCLProps = {
+  formatter: {
+    name: (item) => item.name || '',
+    status: (item) => item.status?.label || '',
+    description: (item) => item.description || ''
+  },
+  columnWidths: { description: 500 },
+  interactive: true,
+  id: 'list-test-items',
+  autosize: false,
+  virtualize: false
+};
+
+const resultColumns = [
+  { propertyPath: 'name', label: 'Name' },
+  { propertyPath: 'status', label: 'Status' },
+  { propertyPath: 'description', label: 'Description' }
+];
+
+const mockData = {
+  results: [
+    {
+      id: 'test-item-1',
+      name: 'Test Item 1',
+      description: 'Description 1',
+      status: { id: 'status-active', value: 'active', label: 'Active' },
+    },
+    {
+      id: 'test-item-2',
+      name: 'AAAAA',
+      description: 'Description 2',
+      status: { id: 'status-closed', value: 'closed', label: 'Closed' },
+    },
+    {
+      id: 'test-item-3',
+      name: 'ZZZZZ',
+      description: 'Description 3',
+      status: { id: 'status-draft', value: 'draft', label: 'Draft' },
+    }
+  ],
+  totalRecords: 3
+};
+
+describe('TableBody', () => {
+  describe.each([
+    {
+      label: 'default path',
+      initialEntries: ['/test/items'],
+      expectedSortOrder: 'Name',
+      expectedSortDirection: 'none',
+    },
+    {
+      label: 'with search params',
+      initialEntries: ['/test/items?testquery=123'],
+      expectedSortOrder: 'Name',
+      expectedSortDirection: 'none',
+      expectedPushQuery: '?testquery=123'
+    },
+    {
+      label: 'with query sort descending',
+      initialEntries: ['/test/items'],
+      query: { sort: '-status' },
+      expectedSortOrder: 'Status',
+      expectedSortDirection: 'descending',
+    },
+    {
+      label: 'selected row',
+      initialEntries: ['/test/items/test-item-2'],
+      selectedRowIndex: 1,
+    },
+    {
+      label: 'enhanced formatter check',
+      initialEntries: ['/test/items'],
+      mclProps: {
+        ...defaultMCLProps,
+        formatter: {
+          ...defaultMCLProps.formatter,
+          name: nameFormatterMock
+        }
+      },
+      checkEnhancedFormatter: true
+    }
+  ])('Testing $label', ({
+    checkEnhancedFormatter,
+    expectedPushQuery = '',
+    expectedSortDirection,
+    expectedSortOrder,
+    initialEntries,
+    mclProps = defaultMCLProps,
+    query = {},
+    selectedRowIndex
+  }) => {
+    beforeEach(() => {
+      renderWithKintHarness(
+        <MemoryRouter initialEntries={initialEntries}>
+          <Route
+            path="/test/items/:id?"
+            render={(routeProps) => (
+              <TableBody
+                {...routeProps}
+                data={mockData}
+                fetchNextPage={mockFetchNextPage}
+                filterPaneVisible={false}
+                intlKey="stripes-kint-components"
+                isError={false}
+                isLoading={false}
+                mclProps={mclProps}
+                onSort={mockOnSort}
+                path="/test/items"
+                query={query}
+                resultColumns={resultColumns}
+                rowNavigation
+                toggleFilterPane={mockToggleFilterPane}
+              />
+            )}
+          />
+        </MemoryRouter>,
+      );
+    });
+
+    test('renders the expected number of columns', async () => {
+      await MultiColumnList({ columnCount: 3 }).exists();
+    });
+
+    test('renders the expected number of rows', async () => {
+      await MultiColumnList({ rowCount: 3 }).exists();
+    });
+
+    if (expectedSortOrder) {
+      test(`renders ${expectedSortOrder} header with ${expectedSortDirection} sort`, async () => {
+        await MultiColumnListHeader(expectedSortOrder).has({ sort: expectedSortDirection });
+      });
+    }
+
+    if (selectedRowIndex !== undefined) {
+      test(`row ${selectedRowIndex} is selected`, async () => {
+        await MultiColumnListRow({ index: selectedRowIndex }).has({ selected: ['mclSelected'] });
+      });
+
+      test(`row ${selectedRowIndex - 1} is not selected`, async () => {
+        await MultiColumnListRow({ index: selectedRowIndex - 1 }).has({ selected: null });
+      });
+    }
+
+    describe('TableBody content rendering', () => {
+      describe.each([0, 1, 2])('rendering row %s', (index) => {
+        describe.each([
+          {
+            property: 'name',
+            col: 0
+          },
+          {
+            property: 'status',
+            col: 1,
+            hasLabel: true
+          },
+          {
+            property: 'description',
+            col: 2
+          },
+        ])('rendering column: $col, property: $property', (({ property, col, hasLabel }) => {
+          const expectedValue = hasLabel ? mockData.results[index][property].label : mockData.results[index][property];
+
+          test(`renders expected ${property} content: ${expectedValue}`, async () => {
+            await MultiColumnListCell({ row: index, columnIndex: col }).has({ content: expectedValue });
+          });
+        }));
+      });
+    });
+
+    describe('clicking table header', () => {
+      beforeEach(async () => {
+        mockOnSort.mockClear();
+        await MultiColumnListHeader('Name').click();
+      });
+
+      test('onSort callback is called', async () => {
+        expect(mockOnSort).toHaveBeenCalled();
+      });
+    });
+
+    if (checkEnhancedFormatter) {
+      describe('enhanced formatter logic', () => {
+        test('name formatter receives defaultRowUrl', async () => {
+          // Verify that the formatter function was called with the injected defaultRowUrl object
+          expect(nameFormatterMock).toHaveBeenCalledWith(
+            expect.objectContaining({
+              defaultRowUrl: expect.objectContaining({
+                baseUrl: '/test/items/test-item-1',
+                path: '/test/items'
+              })
+            })
+          );
+        });
+
+        test('name formatter receives expected item', async () => {
+          // Verify that the formatter function was called with the injected item object
+          expect(nameFormatterMock).toHaveBeenCalledWith(
+            expect.objectContaining(mockData.results[0])
+          );
+        });
+      });
+    }
+
+    describe('clicking a row', () => {
+      const targetRow = 0;
+      const expectedId = mockData.results[targetRow].id;
+
+      beforeEach(async () => {
+        mockHistoryPush.mockClear();
+        await MultiColumnListCell({ row: targetRow, columnIndex: 0 }).click();
+      });
+
+      test(`useHistory called with expected path to ${expectedId}`, () => {
+        expect(mockHistoryPush).toHaveBeenCalledWith(`/test/items/${expectedId}${expectedPushQuery}`);
+      });
+    });
+  });
+});

package/src/lib/SASQLookupComponent/__mocks__/SASQLookupComponent.js

@@ -0,0 +1,31 @@
+import { forwardRef, useImperativeHandle } from 'react';
+import noop from 'lodash/noop';
+
+import { Button } from '@folio/stripes/components';
+
+import SASQLookupComponentRender from './SASQLookupComponentRender';
+
+const SASQLookupComponent = forwardRef(({
+  children,
+  fetchParameters,
+  testFetchParametersOnClick = noop
+}, ref) => {
+  // Use useImperativeHandle to expose a mock object
+  useImperativeHandle(ref, () => ({
+    // This is the object the ref will point to
+    lookupRefData: 'mocked lookup data',
+  }));
+
+  return (
+    <>
+      <Button onClick={() => testFetchParametersOnClick(fetchParameters)}>
+        Test fetchParameters
+      </Button>
+      <SASQLookupComponentRender>
+        {children}
+      </SASQLookupComponentRender>
+    </>
+  );
+});
+
+export default SASQLookupComponent;

package/src/lib/SASQLookupComponent/__mocks__/SASQLookupComponentRender.js

@@ -0,0 +1,20 @@
+// We deal with the render part separately to the forwardRef part so that we might mock them separately as well
+// Store the original implementation so we can restore it with a single call on the mock
+const originalRenderImplementation = ({ children }) => {
+  return (
+    <div>
+      <div>
+        SASQLookupComponent
+      </div>
+      {children}
+    </div>
+  );
+};
+
+const SASQLookupComponentRender = jest.fn(originalRenderImplementation);
+
+SASQLookupComponentRender.mockResetToDefault = () => {
+  SASQLookupComponentRender.mockImplementation(originalRenderImplementation);
+};
+
+export default SASQLookupComponentRender;

package/src/lib/SASQLookupComponent/__mocks__/index.js

@@ -0,0 +1,2 @@
+export { default as SASQLookupComponent } from './SASQLookupComponent';
+export { default as SASQLookupComponentRender } from './SASQLookupComponentRender';

package/src/lib/SASQRoute/SASQRoute.test.js

@@ -0,0 +1,281 @@
+import { createRef } from 'react';
+import { MemoryRouter, Route, Switch } from 'react-router-dom';
+
+import { /* screen, */ waitFor } from '@folio/jest-config-stripes/testing-library/react';
+
+import { Button as StripesButton } from '@folio/stripes/components';
+import { Button } from '@folio/stripes-erm-testing';
+
+import { renderWithKintHarness } from '../../../test/jest';
+import SASQRoute from './SASQRoute';
+
+// We can import these special render-mocks once we manually mock the modules
+import { SASQLookupComponent, SASQLookupComponentRender } from '../SASQLookupComponent';
+import { SASQViewComponentRender } from '../SASQViewComponent';
+
+// Using Manual mocks
+jest.mock('../SASQLookupComponent');
+jest.mock('../SASQViewComponent');
+
+const testFetchParametersOnClick = jest.fn();
+
+let theRef;
+describe('SASQRoute', () => {
+  describe.each([
+    {
+      testLabel: 'default behaviour on path /testPath',
+      props: {
+        fetchParameters: {
+          SASQ_MAP: {}
+        },
+        path: '/testPath'
+      },
+      expectedPath: '/testPath',
+      expectedViewPath: '/testPath/testId',
+      expectedFetchParameters: {
+        SASQ_MAP: {
+          perPage: 25,
+          stats: true
+        }
+      },
+      lookupComponentText: 'SASQLookupComponent',
+      viewComponentText: 'SASQViewComponent',
+    },
+    {
+      testLabel: 'with passed getPathLookup and getPathView',
+      props: {
+        fetchParameters: {
+          SASQ_MAP: {}
+        },
+        getPathLookup: () => '/wibble/:id?',
+        getPathView: () => '/wibble/extra-param/:id',
+        // path: '/testPath' // FIXME it turns out if you pass a path in then that gets used by parent Switch
+        // In addition one can't easily set just the view path since it needs to be rendered within the lookup path...
+        // not the most helpful props to be honest -- see ILL SharedIndexRoute for the current only usage
+      },
+      expectedPath: '/wibble',
+      expectedViewPath: '/wibble/extra-param/testId',
+      expectedFetchParameters: {
+        SASQ_MAP: {
+          perPage: 25,
+          stats: true
+        }
+      },
+      lookupComponentText: 'SASQLookupComponent',
+      viewComponentText: 'SASQViewComponent',
+    },
+    {
+      testLabel: 'with passed SASQLookupComponent',
+      props: {
+        fetchParameters: {
+          SASQ_MAP: {}
+        },
+        path: '/testPath'
+      },
+      expectedPath: '/testPath',
+      expectedViewPath: '/testPath/testId',
+      expectedFetchParameters: {
+        SASQ_MAP: {
+          perPage: 25,
+          stats: true
+        }
+      },
+      lookupComponentText: 'Special Test Lookup Component',
+      viewComponentText: 'SASQViewComponent',
+      mockLookupComponent: ({ children }) => (
+        <div>
+          <div>
+            Special Test Lookup Component
+          </div>
+          {children}
+        </div>
+      )
+    },
+    {
+      testLabel: 'with passed SASQViewComponent',
+      props: {
+        fetchParameters: {
+          SASQ_MAP: {}
+        },
+        path: '/testPath'
+      },
+      expectedPath: '/testPath',
+      expectedViewPath: '/testPath/testId',
+      expectedFetchParameters: {
+        SASQ_MAP: {
+          perPage: 25,
+          stats: true
+        }
+      },
+      lookupComponentText: 'SASQLookupComponent',
+      viewComponentText: 'Special Test View Component',
+      mockViewComponent: () => (
+        <div>
+          Special Test View Component
+        </div>
+      )
+    },
+    {
+      testLabel: 'with passed fetchParameters',
+      props: {
+        fetchParameters: {
+          wibble: 3, // Test that fetchParams don't get lost
+          SASQ_MAP: {
+            wobble: 'igneous', // Test that fetchParams.SASQ_MAP params don't get lost
+            perPage: 20, // Test that fetchParams.SASQ_MAP.perPage is only defaulted, not overridden
+            stats: false // This tests that stats gets overridden
+          }
+        },
+        path: '/testPath'
+      },
+      expectedPath: '/testPath',
+      expectedViewPath: '/testPath/testId',
+      expectedFetchParameters: {
+        wibble: 3,
+        SASQ_MAP: {
+          wobble: 'igneous',
+          perPage: 20,
+          stats: true
+        }
+      },
+      lookupComponentText: 'SASQLookupComponent',
+      viewComponentText: 'SASQViewComponent',
+    },
+  ])('Testing $testLabel', ({
+    expectedPath,
+    expectedViewPath,
+    expectedFetchParameters,
+    props,
+    lookupComponentText,
+    viewComponentText,
+    mockLookupComponent,
+    mockViewComponent
+  }) => {
+    let renderComponent;
+    beforeEach(() => {
+      testFetchParametersOnClick.mockClear();
+
+      // Set up a ref we can pass around -- new per test (block)
+     theRef = createRef();
+
+      // EXAMPLE we set up a special "mockResetToDefault" on the manual mock objects specifically
+      // to return to the original implementation
+      // We could potentially have used jest spyOn and restore, but this already took me too long to figure out...
+      if (mockLookupComponent) {
+        SASQLookupComponentRender.mockImplementation(mockLookupComponent);
+      } else {
+        SASQLookupComponentRender.mockResetToDefault();
+      }
+
+      if (mockViewComponent) {
+        SASQViewComponentRender.mockImplementation(mockViewComponent);
+      } else {
+        SASQViewComponentRender.mockResetToDefault();
+      }
+
+      renderComponent = renderWithKintHarness(
+        <MemoryRouter initialEntries={['/hello']}>
+          <StripesButton to={expectedPath}>
+            SASQRouteButton
+          </StripesButton>
+          <StripesButton to={expectedViewPath}>
+            SASQViewButton
+          </StripesButton>
+          {/* Extra helper route to grab MemoryRouter location */}
+          {/* <Route
+              path="/:any?"
+            >
+              {({ location }) => {
+                console.log('location', location);
+                return null
+              }}
+            </Route> */}
+          <Switch>
+            <Route path="/hello">
+              Hello world
+            </Route>
+            <SASQRoute
+              ref={theRef}
+                // Allow for testing of fetch parameters
+              testFetchParametersOnClick={testFetchParametersOnClick}
+              {...props}
+            />
+          </Switch>
+        </MemoryRouter>
+      );
+    });
+
+    test('does not render SASQRoute on /hello', () => {
+      const { queryByText } = renderComponent;
+      expect(queryByText(lookupComponentText)).not.toBeInTheDocument();
+    });
+
+    test('renders hello world text', () => {
+      const { getByText } = renderComponent;
+      expect(getByText('Hello world')).toBeInTheDocument();
+    });
+
+    test('ref is unset', () => {
+      expect(theRef.current).toEqual(null);
+    });
+
+    describe(`navigating to ${expectedPath}`, () => {
+      beforeEach(async () => {
+        await waitFor(async () => {
+          await Button('SASQRouteButton').click();
+        });
+      });
+
+      test('no longer renders hello world text', () => {
+        const { queryByText } = renderComponent;
+        expect(queryByText('Hello world')).not.toBeInTheDocument();
+      });
+
+      test(`renders SASQRoute lookup component on ${expectedPath}`, () => {
+        const { getByText } = renderComponent;
+        expect(getByText(lookupComponentText)).toBeInTheDocument();
+      });
+
+      test(`does not render SASQRoute view component on ${expectedPath}`, () => {
+        const { queryByText } = renderComponent;
+        expect(queryByText(viewComponentText)).not.toBeInTheDocument();
+      });
+
+      test('ref has gained lookup component ref data', () => {
+        expect(theRef.current).toEqual({ lookupRefData: 'mocked lookup data' });
+      });
+
+      describe('testing fetchParameters', () => {
+        beforeEach(async () => {
+          await waitFor(async () => {
+            await Button('Test fetchParameters').click();
+          });
+        });
+
+        test('testFetchParametersOnClick was called with expected values', () => {
+          expect(testFetchParametersOnClick).toHaveBeenCalledWith(expectedFetchParameters);
+        });
+      });
+
+      describe(`navigating to ${expectedViewPath}`, () => {
+        beforeEach(async () => {
+          await waitFor(async () => {
+            await Button('SASQViewButton').click();
+          });
+        });
+
+        test(`renders SASQRoute view component on ${expectedViewPath}`, () => {
+          const { getByText } = renderComponent;
+          expect(getByText(viewComponentText)).toBeInTheDocument();
+        });
+
+        test('ref has gained view component ref data', () => {
+          expect(theRef.current).toEqual({
+            lookupRefData: 'mocked lookup data',
+            viewRefData: 'mocked view data',
+          });
+        });
+      });
+    });
+  });
+});

package/src/lib/SASQViewComponent/SASQViewComponent.test.js

@@ -0,0 +1,114 @@
+import { createRef } from 'react';
+import { MemoryRouter, Route } from 'react-router-dom';
+
+import { waitFor } from '@folio/jest-config-stripes/testing-library/react';
+import { Button } from '@folio/stripes-erm-testing';
+
+import { renderWithKintHarness } from '../../../test/jest';
+import SASQViewComponent from './SASQViewComponent';
+
+export const ViewComponentRender = jest.fn();
+
+const MockViewComponent = jest.fn((props) => {
+  ViewComponentRender(props);
+
+  return (
+    <div>
+      SASQViewComponent
+      <button onClick={props.onClose} type="button">
+        Close
+      </button>
+    </div>
+  );
+});
+
+describe('SASQViewComponent', () => {
+  let theRef;
+  let historyPush;
+
+  describe.each([
+    {
+      testLabel: 'default behaviour',
+      startingLocation: '/testPath/testId',
+      expectedPath: '/testPath',
+      expectedSearch: '',
+    },
+    {
+      testLabel: 'with query params',
+      startingLocation: '/testPath/testId?filters=test&page=1',
+      expectedPath: '/testPath',
+      expectedSearch: '?filters=test&page=1',
+    },
+  ])(
+    'Testing $testLabel',
+    ({ startingLocation, expectedPath, expectedSearch }) => {
+      let renderResult;
+
+      beforeEach(() => {
+        ViewComponentRender.mockClear();
+        MockViewComponent.mockClear();
+
+        historyPush = jest.fn();
+        theRef = createRef();
+
+        renderResult = renderWithKintHarness(
+          <MemoryRouter initialEntries={[startingLocation]}>
+            <Route
+              path="/testPath/:id"
+              render={(routeProps) => (
+                <SASQViewComponent
+                  {...routeProps}
+                  ref={theRef}
+                  fetchParameters={{
+                    endpoint: '/test',
+                    itemEndpoint: '/test',
+                  }}
+                  history={{ push: historyPush }}
+                  id="sasq-test"
+                  path="/testPath"
+                  ViewComponent={MockViewComponent}
+                />
+              )}
+            />
+          </MemoryRouter>
+        );
+      });
+
+      test('renders the view component', async () => {
+        const { getByText } = renderResult;
+
+        await waitFor(() => {
+          expect(getByText('SASQViewComponent')).toBeInTheDocument();
+        });
+      });
+
+      test('calls the ViewComponent', async () => {
+        await waitFor(() => {
+          expect(ViewComponentRender).toHaveBeenCalled();
+        });
+      });
+
+      test('onClose navigates back to list path', async () => {
+       await waitFor(async () => {
+        await Button('Close').click();
+        });
+        expect(historyPush).toHaveBeenCalledWith(`${expectedPath}${expectedSearch}`);
+      });
+
+      test('ref exposes onClose function', async () => {
+        await waitFor(() => {
+          expect(theRef.current).toBeTruthy();
+        });
+      });
+
+      test('ref exposes queryProps', async () => {
+        await waitFor(() => {
+          expect(theRef.current).toBeTruthy();
+        });
+
+        expect(theRef.current.queryProps).toBeDefined();
+        expect(theRef.current.queryProps.data).toBeDefined();
+      });
+    }
+  );
+});