UIIN-2531 Reset CheckboxFacet state.more when user resets search form and fewer facet options are loaded.

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)

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": {

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 });
+      }
     }
   }
 

src/components/CheckboxFacet/CheckboxFacet.test.js

@@ -61,8 +61,67 @@ const defaultProps = {
   isFilterable: true
 };
 
-const renderCheckboxFacet = (props, renderer = render) => renderWithIntl(
-  <CheckboxFacet {...props} />,
+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(
+  <CheckboxFacet {...defaultProps} {...props} />,
   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);
+      });
+    });
   });
 });