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

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

@@ -0,0 +1,257 @@
+"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 }; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+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 _objectSpread(_objectSpread({}, 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 => {
+      var _item$status;
+      return ((_item$status = item.status) === null || _item$status === void 0 ? void 0 : _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: _objectSpread(_objectSpread({}, defaultMCLProps), {}, {
+      formatter: _objectSpread(_objectSpread({}, 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, _objectSpread(_objectSpread({}, 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 ".concat(expectedSortOrder, " header with ").concat(expectedSortDirection, " sort"), async () => {
+        await (0, _stripesErmTesting.MultiColumnListHeader)(expectedSortOrder).has({
+          sort: expectedSortDirection
+        });
+      });
+    }
+    if (selectedRowIndex !== undefined) {
+      test("row ".concat(selectedRowIndex, " is selected"), async () => {
+        await (0, _stripesErmTesting.MultiColumnListRow)({
+          index: selectedRowIndex
+        }).has({
+          selected: ['mclSelected']
+        });
+      });
+      test("row ".concat(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 ".concat(property, " content: ").concat(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 ".concat(expectedId), () => {
+        expect(mockHistoryPush).toHaveBeenCalledWith("/test/items/".concat(expectedId).concat(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.js

@@ -10,28 +10,33 @@ var _reactRouterDom = require("react-router-dom");
 var _SASQLookupComponent = require("../SASQLookupComponent");
 var _SASQViewComponent = _interopRequireDefault(require("../SASQViewComponent"));
 var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["children", "fetchParameters", "getPathLookup", "getPathView", "SASQLookupComponent", "path", "SASQViewComponent"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 const SASQRoute = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   let {
-    children,
-    fetchParameters,
-    getPathLookup = path => `${path}/:id?`,
-    getPathView = path => `${path}/:id`,
-    SASQLookupComponent: RouteLookupComponent = _SASQLookupComponent.SASQLookupComponent,
-    path,
-    SASQViewComponent: RouteViewComponent = _SASQViewComponent.default,
-    ...props
-  } = _ref;
+      children,
+      fetchParameters,
+      getPathLookup = path => "".concat(path, "/:id?"),
+      getPathView = path => "".concat(path, "/:id"),
+      SASQLookupComponent: RouteLookupComponent = _SASQLookupComponent.SASQLookupComponent,
+      path,
+      SASQViewComponent: RouteViewComponent = _SASQViewComponent.default
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
   // Grab the SASQ_MAP and tweak it
   const {
     SASQ_MAP = {}
   } = fetchParameters;
   const lookupRef = (0, _react.useRef)();
   const viewRef = (0, _react.useRef)();
-  (0, _react.useImperativeHandle)(ref, () => ({
-    ...lookupRef.current,
-    ...viewRef.current
-  }));
+  (0, _react.useImperativeHandle)(ref, () => _objectSpread(_objectSpread({}, lookupRef.current), viewRef.current));
   if (!SASQ_MAP.perPage) {
     SASQ_MAP.perPage = 25;
   }
@@ -42,26 +47,25 @@ const SASQRoute = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRouterDom.Route, {
     path: getPathLookup(path),
     render: routeProps => {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(RouteLookupComponent, {
-        ref: lookupRef,
-        ...routeProps,
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(RouteLookupComponent, _objectSpread(_objectSpread(_objectSpread({
+        ref: lookupRef
+      }, routeProps), {}, {
         fetchParameters: fetchParameters,
-        path: path,
-        ...props,
+        path: path
+      }, props), {}, {
         children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactRouterDom.Switch, {
           children: [children, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRouterDom.Route, {
             path: getPathView(path),
-            render: innerProps => /*#__PURE__*/(0, _jsxRuntime.jsx)(RouteViewComponent, {
-              ref: viewRef,
-              ...innerProps,
+            render: innerProps => /*#__PURE__*/(0, _jsxRuntime.jsx)(RouteViewComponent, _objectSpread(_objectSpread({
+              ref: viewRef
+            }, innerProps), {}, {
               fetchParameters: fetchParameters,
               path: path,
-              ViewComponent: props.ViewComponent,
-              ...props
-            })
+              ViewComponent: props.ViewComponent
+            }, props))
           })]
         })
-      });
+      }));
     }
   });
 });