diff --git a/CHANGELOG.md b/CHANGELOG.md index 4664c3a6..4a5dd61f 100644 --- a/CHANGELOG.md +++ b/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) diff --git a/jest.config.js b/jest.config.js index 4008e6c2..67cb7b98 100644 --- a/jest.config.js +++ b/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/'], diff --git a/lib/AcqList/hooks/useLocationFilters.js b/lib/AcqList/hooks/useLocationFilters.js index b46ecc33..92c0e41a 100644 --- a/lib/AcqList/hooks/useLocationFilters.js +++ b/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, ]; }; diff --git a/lib/AcqList/hooks/useLocationFilters.test.js b/lib/AcqList/hooks/useLocationFilters.test.js new file mode 100644 index 00000000..d62e55b6 --- /dev/null +++ b/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 ( + <> +
{searchQuery}
+
{searchIndex}
+ + applyFilters('Filter 1', ['true'])} + type="checkbox" + /> + + + + + ); +}); + +const renderTestList = (initialRoute = '/some-route') => render( + + + , +); + +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(); + }); + }); +}); diff --git a/package.json b/package.json index af24aac6..0dc650c4 100644 --- a/package.json +++ b/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/"