diff --git a/CHANGELOG.md b/CHANGELOG.md index 23a2b3217..a75cbd96d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,9 +1,14 @@ # Change history for ui-inventory -## 10.0.1 IN PROGRESS + +## [10.1.0] IN PROGRESS + + +## [10.0.1] IN PROGRESS * Instance 3rd pane: Adjust behavior when returning to instance from holdings/item full screen. Refs UIIN-2453. * Consortial holdings accordion is not appearing after the sharing of Instance. Fixes UIIN-2629. +* Reset CheckboxFacet state.more when user resets search form and fewer facet options are loaded. Fixes UIIN-2531. ## [10.0.0](https://github.com/folio-org/ui-inventory/tree/v10.0.0) (2023-10-13) [Full Changelog](https://github.com/folio-org/ui-inventory/compare/v9.4.12...v10.0.0) diff --git a/package.json b/package.json index c114a0879..4dc9374e4 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@folio/inventory", - "version": "10.0.0", + "version": "10.1.0", "description": "Inventory manager", "repository": "folio-org/ui-inventory", "publishConfig": { diff --git a/src/components/CheckboxFacet/CheckboxFacet.js b/src/components/CheckboxFacet/CheckboxFacet.js index aa169ecfc..b266aad20 100644 --- a/src/components/CheckboxFacet/CheckboxFacet.js +++ b/src/components/CheckboxFacet/CheckboxFacet.js @@ -42,12 +42,12 @@ export default class CheckboxFacet extends React.Component { const prevDataLength = prevProps.dataOptions.length; const currentDataLength = this.props.dataOptions.length; - if ( - this.state.isMoreClicked && - prevDataLength === DEFAULT_FILTERS_NUMBER && - currentDataLength > DEFAULT_FILTERS_NUMBER - ) { - this.updateMore(); + if (this.state.isMoreClicked) { + if (prevDataLength === DEFAULT_FILTERS_NUMBER && currentDataLength > DEFAULT_FILTERS_NUMBER) { + this.updateMore(); + } else if (currentDataLength < prevDataLength) { // if filters were reset we need to reset state.more to show +More button + this.setState({ more: SHOW_OPTIONS_COUNT }); + } } } diff --git a/src/components/CheckboxFacet/CheckboxFacet.test.js b/src/components/CheckboxFacet/CheckboxFacet.test.js index bb1b13ced..b07fd1588 100644 --- a/src/components/CheckboxFacet/CheckboxFacet.test.js +++ b/src/components/CheckboxFacet/CheckboxFacet.test.js @@ -61,8 +61,67 @@ const defaultProps = { isFilterable: true }; -const renderCheckboxFacet = (props, renderer = render) => renderWithIntl( - , +const moreOptions = [ + { + disabled: false, + label: 'TestOption1', + readOnly: false, + value: 1, + count: 5 + }, + { + disabled: false, + label: 'TestOption2', + readOnly: false, + value: 2, + count: 12 + }, + { + disabled: false, + label: 'TestOption3', + readOnly: false, + value: 3, + count: 4 + }, + { + disabled: false, + label: 'TestOption4', + readOnly: false, + value: 4, + count: 6 + }, + { + disabled: false, + label: 'TestOption5', + readOnly: false, + value: 5, + count: 8 + }, + { + disabled: false, + label: 'TestOption6', + readOnly: false, + value: 6, + count: 10 + }, + { + disabled: false, + label: 'TestOption7', + readOnly: false, + value: 7, + count: 19 + }, + { + disabled: false, + label: 'TestOption8', + readOnly: false, + value: 8, + count: 17 + } +]; + +const renderCheckboxFacet = (props = {}, renderer = render) => renderWithIntl( + , translationsProperties, renderer ); @@ -72,119 +131,82 @@ describe('CheckboxFacet', () => { facetsStore.getState().resetFacetSettings(); }); - it('Component should render', () => { - renderCheckboxFacet(defaultProps); + it('should render component', () => { + renderCheckboxFacet(); + expect(screen.getByRole('searchbox', { name: 'Test Name-field' })).toBeInTheDocument(); expect(screen.getAllByRole('checkbox')).toHaveLength(5); expect(screen.getByRole('button', { name: 'More' })).toBeInTheDocument(); }); - it('More options should render when More button is click', () => { - renderCheckboxFacet(defaultProps); - fireEvent.click(screen.getByRole('button', { name: 'More' })); - expect(screen.getAllByRole('checkbox')).toHaveLength(6); + + describe('when more button is clicked', () => { + it('should render more options', () => { + renderCheckboxFacet(); + + fireEvent.click(screen.getByRole('button', { name: 'More' })); + expect(screen.getAllByRole('checkbox')).toHaveLength(6); + }); + + describe('and then component re-renders with fewer options', () => { + it('should show More button', () => { + const { rerender } = renderCheckboxFacet(); + + fireEvent.click(screen.getByRole('button', { name: 'More' })); + renderCheckboxFacet({ dataOptions: moreOptions }, rerender); + + renderCheckboxFacet(defaultProps, rerender); + expect(screen.getByRole('button', { name: 'More' })).toBeInTheDocument(); + }); + }); }); - it('components.readonly should be render when readonly property is true', () => { - const props = { - dataOptions: [ - { - disabled: false, - label: 'Options1', - readOnly: true, - value: 1, - count: 4 - } - ], - name: 'Test Name', - onChange: jest.fn(), - isPending: false - }; - renderCheckboxFacet(props); - expect(screen.getByText('Read-only')).toBeInTheDocument(); + + describe('when readonly property is true', () => { + it('should render components.readonly ', () => { + renderCheckboxFacet({ + dataOptions: [ + { + disabled: false, + label: 'Options1', + readOnly: true, + value: 1, + count: 4 + }, + ], + }); + + expect(screen.getByText('Read-only')).toBeInTheDocument(); + }); }); - it('No matching options should be render when required search is not found', () => { - const { rerender } = renderCheckboxFacet(defaultProps); - fireEvent.change(screen.getByRole('searchbox', { name: 'Test Name-field' }), { target: { value: 'test search' } }); - renderCheckboxFacet(defaultProps, rerender); + describe('when required search is not found', () => { + it('should render "No matching options" message', () => { + const { rerender } = renderCheckboxFacet(); + + fireEvent.change(screen.getByRole('searchbox', { name: 'Test Name-field' }), { target: { value: 'test search' } }); - expect(screen.getByText('No matching options')).toBeInTheDocument(); + renderCheckboxFacet(defaultProps, rerender); + + expect(screen.getByText('No matching options')).toBeInTheDocument(); + }); }); - it('component should re-render ', () => { - const props = { - dataOptions: [ - { - disabled: false, - label: 'TestOption1', - readOnly: false, - value: 1, - count: 5 - }, - { - disabled: false, - label: 'TestOption2', - readOnly: false, - value: 2, - count: 12 - }, - { - disabled: false, - label: 'TestOption3', - readOnly: false, - value: 3, - count: 4 - }, - { - disabled: false, - label: 'TestOption4', - readOnly: false, - value: 4, - count: 6 - }, - { - disabled: false, - label: 'TestOption5', - readOnly: false, - value: 5, - count: 8 - }, - { - disabled: false, - label: 'TestOption6', - readOnly: false, - value: 6, - count: 10 - }, - { - disabled: false, - label: 'TestOption7', - readOnly: false, - value: 7, - count: 19 - }, - { - disabled: false, - label: 'TestOption8', - readOnly: false, - value: 8, - count: 17 - } - ], - onFetch: jest.fn(), - onSearch: jest.fn(), - name: 'Test Name', - onChange: jest.fn(), - isPending: false, - selectedValues: [7, 8, 6], - isFilterable: true - }; - const { rerender } = renderCheckboxFacet(defaultProps); - - fireEvent.click(screen.getByRole('button', { name: 'More' })); - renderCheckboxFacet(props, rerender); - - fireEvent.click(screen.getByRole('checkbox', { name: 'TestOption3 4' })); - fireEvent.click(screen.getByRole('checkbox', { name: 'TestOption7 19' })); - - expect(screen.getAllByRole('checkbox')).toHaveLength(8); + + describe('when dataOptions change', () => { + describe('when new options are added', () => { + it('should render new options', () => { + const newProps = { + dataOptions: moreOptions, + selectedValues: [7, 8, 6], + }; + const { rerender } = renderCheckboxFacet(); + + fireEvent.click(screen.getByRole('button', { name: 'More' })); + renderCheckboxFacet(newProps, rerender); + + fireEvent.click(screen.getByRole('checkbox', { name: 'TestOption3 4' })); + fireEvent.click(screen.getByRole('checkbox', { name: 'TestOption7 19' })); + + expect(screen.getAllByRole('checkbox')).toHaveLength(8); + }); + }); }); });