UIPFU-81 - Add jest tests to Filters.js

package.json

@@ -48,6 +48,7 @@
     "eslint": "^7.32.0",
     "eslint-import-resolver-webpack": "^0.13.2",
     "faker": "^4.1.0",
+    "history": "^5.0.0",
     "inflected": "^2.0.4",
     "miragejs": "^0.1.40",
     "react": "^18.2.0",

src/Filters.test.js

@@ -0,0 +1,80 @@
+import { screen } from '@folio/jest-config-stripes/testing-library/react';
+import userEvent from '@folio/jest-config-stripes/testing-library/user-event';
+import { FormattedMessage } from 'react-intl';
+
+import renderWithRouter from 'helpers/renderWithRouter';
+import Filters from './Filters';
+
+jest.unmock('@folio/stripes/components');
+
+const renderFilters = (props) => renderWithRouter(
+  <Filters {...props} />
+);
+
+const props = {
+  onChangeHandlers : {
+    checkbox: jest.fn(),
+  },
+  activeFilters: {
+    state: {},
+    string: '',
+  },
+  resultOffset: {
+    replace: jest.fn(),
+    update: jest.fn(),
+  },
+  config:[
+    {
+      label: <FormattedMessage id="ui-plugin-find-user.status" />,
+      name: 'active',
+      cql: 'active',
+      values: [
+        {
+          name: 'inactive',
+          cql: 'false',
+          displayName: <FormattedMessage id="ui-plugin-find-user.inactive" />,
+        },
+        {
+          name: 'active',
+          cql: 'true',
+          displayName: <FormattedMessage id="ui-plugin-find-user.active" />,
+        },
+      ],
+    },
+    {
+      label: <FormattedMessage id="ui-plugin-find-user.information.patronGroup" />,
+      name: 'pg',
+      cql: 'patronGroup',
+      values: [],
+    },
+  ],
+};
+
+describe('Filters', () => {
+  beforeEach(() => {
+    renderFilters(props);
+  });
+
+  it('should render status filter groups', () => {
+    expect(screen.queryByText('ui-plugin-find-user.status')).toBeInTheDocument();
+  });
+
+  it('should render patronGroup filter groups', () => {
+    expect(screen.queryByText('ui-plugin-find-user.information.patronGroup')).toBeInTheDocument();
+  });
+
+  it('should render active status filter', () => {
+    expect(screen.queryByText('ui-plugin-find-user.active')).toBeInTheDocument();
+  });
+
+  it('should render inactive status filter', () => {
+    expect(screen.getByText('ui-plugin-find-user.inactive')).toBeInTheDocument();
+  });
+
+  it('should call changeHandler on clicking inactive checkbox', async () => {
+    const inActiveCheckbox = document.querySelector('[ id = "clickable-filter-active-inactive"]');
+    await userEvent.click(inActiveCheckbox);
+
+    expect(props.onChangeHandlers.checkbox).toHaveBeenCalled();
+  });
+});

test/jest/__mock__/currencyData.mock.js

@@ -0,0 +1 @@
+jest.mock('currency-codes/data', () => ({ filter: () => [] }));

test/jest/__mock__/index.js

@@ -4,3 +4,5 @@ import './stripes.mock';
 import './intl.mock';
 import './stripesComponents.mock';
 import './stripesSmartComponents.mock';
+import './currencyData.mock';
+

test/jest/helpers/renderWithRouter.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { IntlProvider } from 'react-intl';
+import { CalloutContext } from '@folio/stripes/core';
+import { Router } from 'react-router-dom';
+import { render } from '@folio/jest-config-stripes/testing-library/react';
+import { createMemoryHistory } from 'history';
+
+let rtlApi;
+
+
+const renderWithRouter = (children, options = {}) => {
+  const history = createMemoryHistory();
+  const renderFn = options.rerender ? rtlApi.rerender : render;
+  rtlApi = renderFn(
+    <Router history={history}>
+      <CalloutContext.Provider value={{ sendCallout: () => { } }}>
+        <IntlProvider
+          locale="en"
+          messages={{}}
+        >
+          {children}
+        </IntlProvider>
+      </CalloutContext.Provider>
+    </Router>
+  );
+  return { ...rtlApi, history };
+};
+
+export default renderWithRouter;