From 4a609c8f0573dac3f46d02cce8700209e0f20ba3 Mon Sep 17 00:00:00 2001
From: Priyanka Terala <priyanka_terala@epam.com>
Date: Fri, 30 Aug 2024 12:49:14 +0530
Subject: [PATCH] UIPFU-81 - Add jest tests to Filters.js

---
 package.json                            |  1 +
 src/Filters.test.js                     | 80 +++++++++++++++++++++++++
 test/jest/__mock__/currencyData.mock.js |  1 +
 test/jest/__mock__/index.js             |  2 +
 test/jest/helpers/renderWithRouter.js   | 29 +++++++++
 5 files changed, 113 insertions(+)
 create mode 100644 src/Filters.test.js
 create mode 100644 test/jest/__mock__/currencyData.mock.js
 create mode 100644 test/jest/helpers/renderWithRouter.js

diff --git a/package.json b/package.json
index 2d09b25..f722914 100644
--- a/package.json
+++ b/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",
diff --git a/src/Filters.test.js b/src/Filters.test.js
new file mode 100644
index 0000000..896546e
--- /dev/null
+++ b/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();
+  });
+});
diff --git a/test/jest/__mock__/currencyData.mock.js b/test/jest/__mock__/currencyData.mock.js
new file mode 100644
index 0000000..f791ffb
--- /dev/null
+++ b/test/jest/__mock__/currencyData.mock.js
@@ -0,0 +1 @@
+jest.mock('currency-codes/data', () => ({ filter: () => [] }));
diff --git a/test/jest/__mock__/index.js b/test/jest/__mock__/index.js
index 1596784..52681f8 100644
--- a/test/jest/__mock__/index.js
+++ b/test/jest/__mock__/index.js
@@ -4,3 +4,5 @@ import './stripes.mock';
 import './intl.mock';
 import './stripesComponents.mock';
 import './stripesSmartComponents.mock';
+import './currencyData.mock';
+
diff --git a/test/jest/helpers/renderWithRouter.js b/test/jest/helpers/renderWithRouter.js
new file mode 100644
index 0000000..b4f96f6
--- /dev/null
+++ b/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;