fix(breadcrumb): use hierarchical facets only (#6645)

shaejaz · web-flow · commit c9e50d923042 · 2025-06-16T12:42:25.000+02:00
No interaction with the menu widget, only the hierarchical menu widget
diff --git a/packages/instantsearch.js/src/__tests__/common-shared.test.tsx b/packages/instantsearch.js/src/__tests__/common-shared.test.tsx
@@ -6,7 +6,13 @@ import * as suites from '@instantsearch/tests/shared';
 
 import { connectMenu, connectPagination } from '../connectors';
 import instantsearch from '../index.es';
-import { menu, pagination, hits } from '../widgets';
+import {
+  menu,
+  pagination,
+  hits,
+  hierarchicalMenu,
+  breadcrumb,
+} from '../widgets';
 
 import type { TestOptionsMap, TestSetupsMap } from '@instantsearch/tests';
 
@@ -44,10 +50,18 @@ const testSetups: TestSetupsMap<TestSuites> = {
           container: document.body.appendChild(document.createElement('div')),
           ...widgetParams.menu,
         }),
+        hierarchicalMenu({
+          container: document.body.appendChild(document.createElement('div')),
+          ...widgetParams.hierarchicalMenu,
+        }),
         menu({
           container: document.body.appendChild(document.createElement('div')),
           ...widgetParams.menu,
         }),
+        breadcrumb({
+          container: document.body.appendChild(document.createElement('div')),
+          attributes: widgetParams.hierarchicalMenu.attributes,
+        }),
         hits({
           container: document.body.appendChild(document.createElement('div')),
           ...widgetParams.hits,
diff --git a/packages/instantsearch.js/src/connectors/breadcrumb/__tests__/connectBreadcrumb-test.ts b/packages/instantsearch.js/src/connectors/breadcrumb/__tests__/connectBreadcrumb-test.ts
@@ -345,6 +345,85 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/breadcrumb/
       });
     });
 
+    it('returns an empty array of items if only non-hierarchicalFacets result exist', () => {
+      const renderFn = jest.fn();
+      const unmountFn = jest.fn();
+      const createBreadcrumb = connectBreadcrumb(renderFn, unmountFn);
+      const breadcrumb = createBreadcrumb({
+        attributes: ['category', 'subCategory'],
+      });
+      const helper = algoliasearchHelper(
+        createSearchClient(),
+        'indexName',
+        breadcrumb.getWidgetSearchParameters!(
+          new SearchParameters({
+            hierarchicalFacets: [
+              {
+                attributes: ['country'],
+                name: 'country',
+              },
+            ],
+          }),
+          {
+            uiState: {},
+          }
+        )
+      );
+
+      helper.toggleFacetRefinement('country', 'country');
+
+      const renderState1 = breadcrumb.getWidgetRenderState(
+        createInitOptions({ helper })
+      );
+
+      expect(renderState1).toEqual({
+        canRefine: false,
+        createURL: expect.any(Function),
+        items: [],
+        refine: expect.any(Function),
+        widgetParams: { attributes: ['category', 'subCategory'] },
+      });
+
+      helper.toggleFacetRefinement('category', 'Decoration');
+
+      const renderState2 = breadcrumb.getWidgetRenderState(
+        createRenderOptions({
+          helper,
+          state: helper.state,
+          results: new SearchResults(helper.state, [
+            createSingleSearchResponse({
+              hits: [],
+              facets: {
+                category: {
+                  Decoration: 880,
+                },
+                subCategory: {
+                  'Decoration > Candle holders & candles': 193,
+                  'Decoration > Frames & pictures': 173,
+                },
+              },
+            }),
+            createSingleSearchResponse({
+              facets: {
+                category: {
+                  Decoration: 880,
+                  Outdoor: 47,
+                },
+              },
+            }),
+          ]),
+        })
+      );
+
+      expect(renderState2).toEqual({
+        canRefine: true,
+        createURL: expect.any(Function),
+        items: [{ label: 'Decoration', value: null }],
+        refine: expect.any(Function),
+        widgetParams: { attributes: ['category', 'subCategory'] },
+      });
+    });
+
     test('refine method called with null does not mutate the current helper state if no hierarchicalFacets exist', () => {
       const renderFn = jest.fn();
       const unmountFn = jest.fn();
diff --git a/packages/instantsearch.js/src/connectors/breadcrumb/connectBreadcrumb.ts b/packages/instantsearch.js/src/connectors/breadcrumb/connectBreadcrumb.ts
@@ -194,9 +194,7 @@ const connectBreadcrumb: BreadcrumbConnector = function connectBreadcrumb(
             return [];
           }
 
-          const [{ name: facetName }] = state.hierarchicalFacets;
-
-          const facetValues = results.getFacetValues(facetName, {});
+          const facetValues = results.getFacetValues(hierarchicalFacetName, {});
           const facetItems =
             facetValues && !Array.isArray(facetValues) && facetValues.data
               ? facetValues.data
diff --git a/packages/react-instantsearch/src/__tests__/common-shared.test.tsx b/packages/react-instantsearch/src/__tests__/common-shared.test.tsx
@@ -13,6 +13,8 @@ import {
   Hits,
   usePagination,
   useMenu,
+  HierarchicalMenu,
+  Breadcrumb,
 } from '..';
 
 import type { UseMenuProps, UsePaginationProps } from '..';
@@ -44,7 +46,9 @@ const testSetups: TestSetupsMap<TestSuites> = {
     render(
       <InstantSearch {...instantSearchOptions}>
         <MenuURL {...widgetParams.menu} />
+        <HierarchicalMenu {...widgetParams.hierarchicalMenu} />
         <Menu {...widgetParams.menu} />
+        <Breadcrumb attributes={widgetParams.hierarchicalMenu.attributes} />
         <Hits {...widgetParams.hits} />
         <PaginationURL {...widgetParams.pagination} />
         <Pagination {...widgetParams.pagination} />
diff --git a/packages/vue-instantsearch/src/__tests__/common-shared.test.js b/packages/vue-instantsearch/src/__tests__/common-shared.test.js
@@ -7,6 +7,8 @@ import { connectMenu, connectPagination } from 'instantsearch.js/es/connectors';
 
 import { nextTick, mountApp } from '../../test/utils';
 import {
+  AisBreadcrumb,
+  AisHierarchicalMenu,
   AisHits,
   AisInstantSearch,
   AisMenu,
@@ -35,7 +37,11 @@ const testSetups = {
         render: renderCompat((h) =>
           h(AisInstantSearch, { props: instantSearchOptions }, [
             h(CustomMenu, { props: widgetParams.menu }),
+            h(AisHierarchicalMenu, { props: widgetParams.hierarchicalMenu }),
             h(AisMenu, { props: widgetParams.menu }),
+            h(AisBreadcrumb, {
+              props: { attributes: widgetParams.hierarchicalMenu.attributes },
+            }),
             h(AisHits, { props: widgetParams.hits }),
             h(CustomPagination, { props: widgetParams.pagination }),
             h(AisPagination, { props: widgetParams.pagination }),
diff --git a/tests/common/shared/index.ts b/tests/common/shared/index.ts
@@ -1,9 +1,11 @@
 import { fakeAct } from '../common';
 
 import { createInsightsTests } from './insights';
+import { createInteractionTests } from './interaction';
 import { createRoutingTests } from './routing';
 
 import type { TestOptions, TestSetup } from '../common';
+import type { HierarchicalMenuWidget } from 'instantsearch.js/es/widgets/hierarchical-menu/hierarchical-menu';
 import type { HitsWidget } from 'instantsearch.js/es/widgets/hits/hits';
 import type { MenuWidget } from 'instantsearch.js/es/widgets/menu/menu';
 import type { PaginationWidget } from 'instantsearch.js/es/widgets/pagination/pagination';
@@ -13,6 +15,7 @@ export type SharedSetup = TestSetup<{
     menu: Omit<Parameters<MenuWidget>[0], 'container'>;
     hits: Omit<Parameters<HitsWidget>[0], 'container'>;
     pagination: Omit<Parameters<PaginationWidget>[0], 'container'>;
+    hierarchicalMenu: Omit<Parameters<HierarchicalMenuWidget>[0], 'container'>;
   };
 }>;
 
@@ -27,5 +30,6 @@ export function createSharedTests(
   describe('Shared common tests', () => {
     createRoutingTests(setup, { act, skippedTests });
     createInsightsTests(setup, { act, skippedTests });
+    createInteractionTests(setup, { act, skippedTests });
   });
 }
diff --git a/tests/common/shared/insights.ts b/tests/common/shared/insights.ts
@@ -25,6 +25,8 @@ export function createInsightsTests(
         const delay = 100;
         const margin = 10;
         const attribute = 'one';
+        const hierarchicalAttribute = 'hierarchicalCategories.lvl0';
+
         window.aa = Object.assign(jest.fn(), { version: '2.17.2' });
 
         const options = {
@@ -62,6 +64,7 @@ export function createInsightsTests(
             },
             hits: {},
             pagination: {},
+            hierarchicalMenu: { attributes: [hierarchicalAttribute] },
           },
         };
 
@@ -109,6 +112,8 @@ export function createInsightsTests(
         const delay = 100;
         const margin = 10;
         const attribute = 'one';
+        const hierarchicalAttribute = 'hierarchicalCategories.lvl0';
+
         window.aa = Object.assign(jest.fn(), { version: '2.17.2' });
 
         const options = {
@@ -145,6 +150,7 @@ export function createInsightsTests(
             },
             hits: {},
             pagination: {},
+            hierarchicalMenu: { attributes: [hierarchicalAttribute] },
           },
         };
 
diff --git a/tests/common/shared/interaction.ts b/tests/common/shared/interaction.ts
@@ -0,0 +1,91 @@
+import {
+  createSearchClient,
+  createMultiSearchResponse,
+  createSingleSearchResponse,
+} from '@instantsearch/mocks';
+import { wait } from '@instantsearch/testutils';
+import { screen } from '@testing-library/dom';
+import userEvent from '@testing-library/user-event';
+
+import type { SharedSetup } from '.';
+import type { TestOptions } from '../../common';
+import type { MockSearchClient } from '@instantsearch/mocks';
+import type { SearchClient } from 'instantsearch.js';
+
+export function createInteractionTests(
+  setup: SharedSetup,
+  { act }: Required<TestOptions>
+) {
+  describe('interaction', () => {
+    describe('hierarchical menu and breadcrumb', () => {
+      test('breadcrumb generation', async () => {
+        const delay = 100;
+        const margin = 10;
+        const attribute = 'one';
+        const hierarchicalAttribute = 'hierarchicalCategories.lvl0';
+
+        const options = {
+          instantSearchOptions: {
+            indexName: 'indexName',
+            searchClient: createSearchClient({
+              search: jest.fn(async (requests) => {
+                await wait(delay);
+                return createMultiSearchResponse(
+                  ...requests.map(
+                    ({
+                      params,
+                    }: Parameters<SearchClient['search']>[0][number]) =>
+                      createSingleSearchResponse({
+                        facets: {
+                          [attribute]: {
+                            Samsung: 100,
+                            Apple: 200,
+                          },
+                          [hierarchicalAttribute]: {
+                            'Computers & Tablets': 148,
+                          },
+                        },
+                        page: params.page,
+                        nbPages: 20,
+                      })
+                  )
+                );
+              }) as MockSearchClient['search'],
+            }),
+          },
+          widgetParams: {
+            menu: {
+              attribute,
+            },
+            hits: {},
+            pagination: {},
+            hierarchicalMenu: { attributes: [hierarchicalAttribute] },
+          },
+        };
+
+        await setup(options);
+
+        // Wait for initial results to populate widgets with data
+        await act(async () => {
+          await wait(margin + delay);
+          await wait(0);
+        });
+
+        const hierarchicalLink = screen.getByRole('link', {
+          name: 'Computers & Tablets 148',
+        });
+        userEvent.click(hierarchicalLink);
+
+        await act(async () => {
+          await wait(0);
+        });
+
+        const breadcrumbs = document.querySelectorAll(
+          '.ais-Breadcrumb-item.ais-Breadcrumb-item--selected'
+        );
+        expect(breadcrumbs).toHaveLength(1);
+        expect(breadcrumbs[0]).toHaveTextContent('Computers & Tablets');
+      });
+    });
+  });
+}
diff --git a/tests/common/shared/routing.ts b/tests/common/shared/routing.ts
@@ -28,6 +28,7 @@ export function createRoutingTests(
         const delay = 100;
         const margin = 10;
         const attribute = 'one';
+        const hierarchicalAttribute = 'hierarchicalCategories.lvl0';
 
         const router = history({
           writeDelay: 0,
@@ -65,6 +66,7 @@ export function createRoutingTests(
             },
             hits: {},
             pagination: {},
+            hierarchicalMenu: { attributes: [hierarchicalAttribute] },
           },
         };
 
