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'

.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'

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": "^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;

yarn.lock

@@ -1142,6 +1142,13 @@
   dependencies:
     regenerator-runtime "^0.14.0"
 
+"@babel/runtime@^7.7.6":
+  version "7.25.6"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.25.6.tgz#9afc3289f7184d8d7f98b099884c26317b9264d2"
+  integrity sha512-VBj9MYyDb9tuLq7yzqjgzt6Q+IBQLrGZfdjOekyEirZPHxXWoTSGUTMrpsfi58Up73d13NfYLv8HT9vmznjzhQ==
+  dependencies:
+    regenerator-runtime "^0.14.0"
+
 "@babel/template@^7.22.15", "@babel/template@^7.24.0", "@babel/template@^7.3.3":
   version "7.24.0"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.24.0.tgz#c6a524aa93a4a05d66aaf31654258fae69d87d50"
@@ -6792,6 +6799,13 @@ history@^4.10.1, history@^4.6.3, history@^4.9.0:
     tiny-warning "^1.0.0"
     value-equal "^1.0.1"
 
+history@^5.0.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/history/-/history-5.3.0.tgz#1548abaa245ba47992f063a0783db91ef201c73b"
+  integrity sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==
+  dependencies:
+    "@babel/runtime" "^7.7.6"
+
 hmac-drbg@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"