Merge pull request #768 from folio-org/release-v5.1.1

Release v5.1.1

CHANGELOG.md

@@ -2,6 +2,12 @@
 
 ## (5.2.0 IN PROGRESS)
 
+
+## [5.1.1](https://github.com/folio-org/stripes-acq-components/tree/v5.1.1) (2024-04-22)
+[Full Changelog](https://github.com/folio-org/stripes-acq-components/compare/v5.1.0...v5.1.1)
+
+* Added new returned `clearLocationFilters` function from `useLocationFilters`. Refs UISACQCOMP-181.
+
 ## [5.1.0](https://github.com/folio-org/stripes-acq-components/tree/v5.1.0) (2024-03-18)
 [Full Changelog](https://github.com/folio-org/stripes-acq-components/compare/v5.0.0...v5.1.0)
 

jest.config.js

@@ -19,6 +19,7 @@ module.exports = {
   moduleNameMapper: {
     '^.+\\.(css)$': 'identity-obj-proxy',
     '^.+\\.(svg)$': 'identity-obj-proxy',
+    '^.+\\.(png)$': 'identity-obj-proxy',
   },
   testMatch: ['**/(lib|src)/**/?(*.)test.{js,jsx}'],
   testPathIgnorePatterns: ['/node_modules/', '/test/ui-testing/', '/test/bigtest/'],

lib/AcqList/hooks/useLocationFilters.js

@@ -2,6 +2,7 @@ import {
   useEffect,
   useCallback,
 } from 'react';
+import pick from 'lodash/pick';
 
 import {
   SEARCH_INDEX_PARAMETER,
@@ -80,6 +81,22 @@ const useLocationFilters = (location, history, resetData) => {
     [history, resetFilters],
   );
 
+  const clearLocationFilters = useCallback(
+    () => {
+      /*
+        there's a lot of state setters called synchronously both in this hook and it's consumers
+        so we need to be careful about not using old state data
+      */
+      setFilters((currentFilters) => {
+        const newFilters = pick(currentFilters, ['qindex', 'query']);
+
+        return newFilters;
+      });
+      resetData();
+    },
+    [setFilters, resetData],
+  );
+
   const changeLocationSearchIndex = useCallback(
     (e) => {
       changeSearchIndex(e);
@@ -96,6 +113,7 @@ const useLocationFilters = (location, history, resetData) => {
     resetLocationFilters,
     changeLocationSearchIndex,
     searchIndex,
+    clearLocationFilters,
   ];
 };
 

lib/AcqList/hooks/useLocationFilters.test.js

@@ -0,0 +1,128 @@
+import React from 'react';
+import {
+  fireEvent,
+  render,
+  cleanup,
+} from '@testing-library/react';
+import {
+  MemoryRouter,
+  Route,
+} from 'react-router-dom';
+import { withRouter } from 'react-router';
+import {
+  deleteFromStorage,
+  useLocalStorage,
+  writeStorage,
+} from '@rehooks/local-storage';
+
+import useLocationFilters from './useLocationFilters';
+
+const mockResetData = jest.fn();
+
+const TestList = withRouter(({ location, history }) => {
+  const [
+    // eslint-disable-next-line no-unused-vars
+    filters,
+    searchQuery,
+    applyFilters,
+    applySearch,
+    changeSearch,
+    resetFilters,
+    // eslint-disable-next-line no-unused-vars
+    changeIndex,
+    searchIndex,
+    clearLocationFilters,
+  ] = useLocationFilters(location, history, mockResetData);
+
+  return (
+    <>
+      <div data-testid="search-query">{searchQuery}</div>
+      <div data-testid="search-index">{searchIndex}</div>
+      <input
+        data-testid="search-query-input"
+        type="text"
+        value={searchQuery}
+        onChange={changeSearch}
+      />
+      <input
+        data-testid="filter1"
+        name="Filter 1"
+        onChange={() => applyFilters('Filter 1', ['true'])}
+        type="checkbox"
+      />
+      <button
+        type="button"
+        onClick={applySearch}
+      >
+        Search
+      </button>
+      <button
+        type="button"
+        onClick={resetFilters}
+      >
+        Reset
+      </button>
+      <button
+        type="button"
+        onClick={clearLocationFilters}
+      >
+        Clear filters
+      </button>
+    </>
+  );
+});
+
+const renderTestList = (initialRoute = '/some-route') => render(
+  <MemoryRouter initialEntries={[initialRoute]}>
+    <Route
+      component={TestList}
+    />
+  </MemoryRouter>,
+);
+
+describe('useLocationFilters', () => {
+  beforeEach(() => {
+    useLocalStorage.mockClear().mockReturnValue([]);
+    writeStorage.mockClear();
+    deleteFromStorage.mockClear();
+    mockResetData.mockClear();
+  });
+
+  afterEach(cleanup);
+
+  it('should set searchQuery from location.search', () => {
+    const { getByTestId } = renderTestList('/some-route?query=testquery');
+
+    expect(getByTestId('search-query').textContent).toBe('testquery');
+  });
+
+  describe('when calling clearLocationFilters', () => {
+    it('should clear filters and keep qindex and query', () => {
+      const {
+        getByTestId,
+        getByText,
+      } = renderTestList('/some-route?query=testquery&qindex=testindex&Filter%201=true');
+
+      fireEvent.click(getByText('Clear filters'));
+
+      expect(getByTestId('search-query').textContent).toBe('testquery');
+      expect(getByTestId('search-index').textContent).toBe('testindex');
+      expect(getByTestId('filter1')).not.toBeChecked();
+    });
+  });
+
+  describe('when calling resetLocationFilters', () => {
+    it('should clear filters, qindex and query', () => {
+      const {
+        getByTestId,
+        getByText,
+      } = renderTestList('/some-route?query=testquery&qindex=testindex&Filter%201=true');
+
+      fireEvent.click(getByText('Reset'));
+
+      expect(getByTestId('search-query').textContent).toBe('');
+      expect(getByTestId('search-index').textContent).toBe('');
+      expect(getByTestId('filter1')).not.toBeChecked();
+    });
+  });
+});

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@folio/stripes-acq-components",
-  "version": "5.1.0",
+  "version": "5.1.1",
   "description": "Component library for Stripes Acquisitions modules",
   "publishConfig": {
     "registry": "https://repository.folio.org/repository/npm-folio/"