UIPFU-81 - Add jest tests to Filters.js

.github/workflows/build-npm-release.yml

@@ -21,7 +21,7 @@ jobs:
   github-actions-ci:
     if : ${{ startsWith(github.ref, 'refs/tags/v') }}
     env:
-      YARN_TEST_OPTIONS: '--karma.singleRun --karma.browsers ChromeDocker --karma.reporters mocha junit --coverage'
+      YARN_TEST_OPTIONS: ''
       SQ_ROOT_DIR: './src'
       COMPILE_TRANSLATION_FILES: 'true'
       PUBLISH_MOD_DESCRIPTOR: 'true'
@@ -152,7 +152,7 @@ jobs:
           comment_title: Jest Unit Test Statistics
 
       - name: Publish Jest coverage report
-        uses: actions/upload-artifact@v2
+        uses: actions/upload-artifact@v3
         if: always()
         with:
           name: jest-coverage-report
@@ -170,7 +170,7 @@ jobs:
           comment_title: BigTest Unit Test Statistics
 
       - name: Publish BigTest coverage report
-        uses: actions/upload-artifact@v2
+        uses: actions/upload-artifact@v3
         if: always()
         with:
           name: bigtest-coverage-report

.github/workflows/build-npm.yml

@@ -18,7 +18,7 @@ on: [push, pull_request]
 jobs:
   github-actions-ci:
     env:
-      YARN_TEST_OPTIONS: '--karma.singleRun --karma.browsers ChromeDocker --karma.reporters mocha junit --coverage'
+      YARN_TEST_OPTIONS: ''
       SQ_ROOT_DIR: './src'
       COMPILE_TRANSLATION_FILES: 'true'
       PUBLISH_MOD_DESCRIPTOR: 'true'
@@ -95,7 +95,7 @@ jobs:
           comment_title: Jest Unit Test Statistics
 
       - name: Publish Jest coverage report
-        uses: actions/upload-artifact@v2
+        uses: actions/upload-artifact@v3
         if: always()
         with:
           name: jest-coverage-report
@@ -113,7 +113,7 @@ jobs:
           comment_title: BigTest Unit Test Statistics
 
       - name: Publish BigTest coverage report
-        uses: actions/upload-artifact@v2
+        uses: actions/upload-artifact@v3
         if: always()
         with:
           name: bigtest-coverage-report

CHANGELOG.md

@@ -5,6 +5,7 @@
 * Create Jest test environment and setup initial mocks. Refs UIPFU-78.
 * Apply Prev/Next Pagination. Refs UIPFU-49.
 * Use keywords CQL field for keyword user search. Ref UIPFU-95.
+* Add Jest unit tests for ui-plugin-find-user/src/Filters.js. Refs UIPFU-81.
 
 ## [7.1.1](https://github.com/folio-org/ui-plugin-find-user/tree/v7.1.1) (2024-05-03)
 [Full Changelog](https://github.com/folio-org/ui-plugin-find-user/compare/v7.1.0...v7.1.1)

package.json

@@ -25,7 +25,7 @@
     "lint": "eslint .",
     "build-mod-descriptor": "stripes mod descriptor --full --strict | jq '.[]' > module-descriptor.json ",
     "formatjs-compile": "formatjs compile-folder --ast --format simple ./translations/ui-plugin-find-user ./translations/ui-plugin-find-user/compiled",
-    "test": "stripes test karma",
+    "test": "yarn run test:jest",
     "test:jest": "jest --ci --coverage --colors"
   },
   "okapiInterfaces": {
@@ -48,6 +48,7 @@
     "eslint": "^7.32.0",
     "eslint-import-resolver-webpack": "^0.13.2",
     "faker": "^4.1.0",
+    "history": "^4.0.0",
     "inflected": "^2.0.4",
     "miragejs": "^0.1.40",
     "react": "^18.2.0",

src/Filters.test.js

@@ -0,0 +1,81 @@
+import { FormattedMessage } from 'react-intl';
+
+import { screen } from '@folio/jest-config-stripes/testing-library/react';
+import userEvent from '@folio/jest-config-stripes/testing-library/user-event';
+
+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 = screen.getByRole('checkbox', { name: 'ui-plugin-find-user.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,28 @@
+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;

yarn.lock

@@ -6780,7 +6780,7 @@ highlight-words-core@^1.2.0:
   resolved "https://registry.yarnpkg.com/highlight-words-core/-/highlight-words-core-1.2.2.tgz#1eff6d7d9f0a22f155042a00791237791b1eeaaa"
   integrity sha512-BXUKIkUuh6cmmxzi5OIbUJxrG8OAk2MqoL1DtO3Wo9D2faJg2ph5ntyuQeLqaHJmzER6H5tllCDA9ZnNe9BVGg==
 
-history@^4.10.1, history@^4.6.3, history@^4.9.0:
+history@^4.0.0, history@^4.10.1, history@^4.6.3, history@^4.9.0:
   version "4.10.1"
   resolved "https://registry.yarnpkg.com/history/-/history-4.10.1.tgz#33371a65e3a83b267434e2b3f3b1b4c58aad4cf3"
   integrity sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==