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

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

@@ -0,0 +1,253 @@
+"use strict";
+
+var _reactRouterDom = require("react-router-dom");
+var _stripesErmTesting = require("@folio/stripes-erm-testing");
+var _jest = require("../../../../test/jest");
+var _TableBody = _interopRequireDefault(require("./TableBody"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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', _ref => {
+    let {
+      checkEnhancedFormatter,
+      expectedPushQuery = '',
+      expectedSortDirection,
+      expectedSortOrder,
+      initialEntries,
+      mclProps = defaultMCLProps,
+      query = {},
+      selectedRowIndex
+    } = _ref;
+    beforeEach(() => {
+      (0, _jest.renderWithKintHarness)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRouterDom.MemoryRouter, {
+        initialEntries: initialEntries,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRouterDom.Route, {
+          path: "/test/items/:id?",
+          render: routeProps => /*#__PURE__*/(0, _jsxRuntime.jsx)(_TableBody.default, {
+            ...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: true,
+            toggleFilterPane: mockToggleFilterPane
+          })
+        })
+      }));
+    });
+    test('renders the expected number of columns', async () => {
+      await (0, _stripesErmTesting.MultiColumnList)({
+        columnCount: 3
+      }).exists();
+    });
+    test('renders the expected number of rows', async () => {
+      await (0, _stripesErmTesting.MultiColumnList)({
+        rowCount: 3
+      }).exists();
+    });
+    if (expectedSortOrder) {
+      test(`renders ${expectedSortOrder} header with ${expectedSortDirection} sort`, async () => {
+        await (0, _stripesErmTesting.MultiColumnListHeader)(expectedSortOrder).has({
+          sort: expectedSortDirection
+        });
+      });
+    }
+    if (selectedRowIndex !== undefined) {
+      test(`row ${selectedRowIndex} is selected`, async () => {
+        await (0, _stripesErmTesting.MultiColumnListRow)({
+          index: selectedRowIndex
+        }).has({
+          selected: ['mclSelected']
+        });
+      });
+      test(`row ${selectedRowIndex - 1} is not selected`, async () => {
+        await (0, _stripesErmTesting.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', _ref2 => {
+          let {
+            property,
+            col,
+            hasLabel
+          } = _ref2;
+          const expectedValue = hasLabel ? mockData.results[index][property].label : mockData.results[index][property];
+          test(`renders expected ${property} content: ${expectedValue}`, async () => {
+            await (0, _stripesErmTesting.MultiColumnListCell)({
+              row: index,
+              columnIndex: col
+            }).has({
+              content: expectedValue
+            });
+          });
+        });
+      });
+    });
+    describe('clicking table header', () => {
+      beforeEach(async () => {
+        mockOnSort.mockClear();
+        await (0, _stripesErmTesting.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 (0, _stripesErmTesting.MultiColumnListCell)({
+          row: targetRow,
+          columnIndex: 0
+        }).click();
+      });
+      test(`useHistory called with expected path to ${expectedId}`, () => {
+        expect(mockHistoryPush).toHaveBeenCalledWith(`/test/items/${expectedId}${expectedPushQuery}`);
+      });
+    });
+  });
+});

package/es/lib/SASQLookupComponent/__mocks__/SASQLookupComponent.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _noop = _interopRequireDefault(require("lodash/noop"));
+var _components = require("@folio/stripes/components");
+var _SASQLookupComponentRender = _interopRequireDefault(require("./SASQLookupComponentRender"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const SASQLookupComponent = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    children,
+    fetchParameters,
+    testFetchParametersOnClick = _noop.default
+  } = _ref;
+  // Use useImperativeHandle to expose a mock object
+  (0, _react.useImperativeHandle)(ref, () => ({
+    // This is the object the ref will point to
+    lookupRefData: 'mocked lookup data'
+  }));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
+      onClick: () => testFetchParametersOnClick(fetchParameters),
+      children: "Test fetchParameters"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_SASQLookupComponentRender.default, {
+      children: children
+    })]
+  });
+});
+var _default = exports.default = SASQLookupComponent;

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

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+// 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 = _ref => {
+  let {
+    children
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      children: "SASQLookupComponent"
+    }), children]
+  });
+};
+const SASQLookupComponentRender = jest.fn(originalRenderImplementation);
+SASQLookupComponentRender.mockResetToDefault = () => {
+  SASQLookupComponentRender.mockImplementation(originalRenderImplementation);
+};
+var _default = exports.default = SASQLookupComponentRender;

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

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "SASQLookupComponent", {
+  enumerable: true,
+  get: function () {
+    return _SASQLookupComponent.default;
+  }
+});
+Object.defineProperty(exports, "SASQLookupComponentRender", {
+  enumerable: true,
+  get: function () {
+    return _SASQLookupComponentRender.default;
+  }
+});
+var _SASQLookupComponent = _interopRequireDefault(require("./SASQLookupComponent"));
+var _SASQLookupComponentRender = _interopRequireDefault(require("./SASQLookupComponentRender"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/es/lib/SASQRoute/SASQRoute.test.js

@@ -0,0 +1,267 @@
+"use strict";
+
+var _react = require("react");
+var _reactRouterDom = require("react-router-dom");
+var _react2 = require("@folio/jest-config-stripes/testing-library/react");
+var _components = require("@folio/stripes/components");
+var _stripesErmTesting = require("@folio/stripes-erm-testing");
+var _jest = require("../../../test/jest");
+var _SASQRoute = _interopRequireDefault(require("./SASQRoute"));
+var _SASQLookupComponent = require("../SASQLookupComponent");
+var _SASQViewComponent = require("../SASQViewComponent");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+// We can import these special render-mocks once we manually mock the modules
+
+// 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: _ref => {
+      let {
+        children
+      } = _ref;
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          children: "Special Test Lookup Component"
+        }), children]
+      });
+    }
+  }, {
+    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: () => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      children: "Special Test View Component"
+    })
+  }, {
+    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', _ref2 => {
+    let {
+      expectedPath,
+      expectedViewPath,
+      expectedFetchParameters,
+      props,
+      lookupComponentText,
+      viewComponentText,
+      mockLookupComponent,
+      mockViewComponent
+    } = _ref2;
+    let renderComponent;
+    beforeEach(() => {
+      testFetchParametersOnClick.mockClear();
+
+      // Set up a ref we can pass around -- new per test (block)
+      theRef = /*#__PURE__*/(0, _react.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) {
+        _SASQLookupComponent.SASQLookupComponentRender.mockImplementation(mockLookupComponent);
+      } else {
+        _SASQLookupComponent.SASQLookupComponentRender.mockResetToDefault();
+      }
+      if (mockViewComponent) {
+        _SASQViewComponent.SASQViewComponentRender.mockImplementation(mockViewComponent);
+      } else {
+        _SASQViewComponent.SASQViewComponentRender.mockResetToDefault();
+      }
+      renderComponent = (0, _jest.renderWithKintHarness)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactRouterDom.MemoryRouter, {
+        initialEntries: ['/hello'],
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
+          to: expectedPath,
+          children: "SASQRouteButton"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
+          to: expectedViewPath,
+          children: "SASQViewButton"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactRouterDom.Switch, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRouterDom.Route, {
+            path: "/hello",
+            children: "Hello world"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_SASQRoute.default, {
+            ref: theRef
+            // Allow for testing of fetch parameters
+            ,
+            testFetchParametersOnClick: testFetchParametersOnClick,
+            ...props
+          })]
+        })]
+      }));
+    });
+    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 (0, _react2.waitFor)(async () => {
+          await (0, _stripesErmTesting.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 (0, _react2.waitFor)(async () => {
+            await (0, _stripesErmTesting.Button)('Test fetchParameters').click();
+          });
+        });
+        test('testFetchParametersOnClick was called with expected values', () => {
+          expect(testFetchParametersOnClick).toHaveBeenCalledWith(expectedFetchParameters);
+        });
+      });
+      describe(`navigating to ${expectedViewPath}`, () => {
+        beforeEach(async () => {
+          await (0, _react2.waitFor)(async () => {
+            await (0, _stripesErmTesting.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'
+          });
+        });
+      });
+    });
+  });
+});