test(hierarchicalMenu): add common test suite (#5955)

algolia · Dec 7, 2023 · f9ab0ff · f9ab0ff
1 parent 967178e
commit f9ab0ff
Show file tree

Hide file tree

Showing 11 changed files with 1,109 additions and 1,879 deletions.
diff --git a/packages/instantsearch.js/src/widgets/hierarchical-menu/__tests__/hierarchical-menu-test.ts b/packages/instantsearch.js/src/widgets/hierarchical-menu/__tests__/hierarchical-menu-test.ts
diff --git a/packages/instantsearch.js/src/widgets/hierarchical-menu/__tests__/hierarchical-menu.test.tsx b/packages/instantsearch.js/src/widgets/hierarchical-menu/__tests__/hierarchical-menu.test.tsx
@@ -19,7 +19,86 @@ beforeEach(() => {
   document.body.innerHTML = '';
 });
 
-describe('refinementList', () => {
+const facets = {
+  'categories.lvl0': {
+    'Cameras & Camcorders': 1369,
+    'Video Games': 505,
+    'Wearable Technology': 271,
+  },
+  'categories.lvl1': {
+    'Cameras & Camcorders > Digital Cameras': 170,
+    'Cameras & Camcorders > Memory Cards': 113,
+  },
+};
+
+const attributes = Object.keys(facets);
+
+describe('hierarchicalMenu', () => {
+  describe('options', () => {
+    test('throws without a `container`', () => {
+      expect(() => {
+        const searchClient = createMockedSearchClient();
+
+        const search = instantsearch({
+          indexName: 'indexName',
+          searchClient,
+        });
+
+        search.addWidgets([
+          hierarchicalMenu({
+            // @ts-expect-error
+            container: undefined,
+            attributes,
+          }),
+        ]);
+      }).toThrowErrorMatchingInlineSnapshot(`
+"The \`container\` option is required.
+
+See documentation: https://www.algolia.com/doc/api-reference/widgets/hierarchical-menu/js/"
+`);
+    });
+
+    test('add custom CSS classes', async () => {
+      const container = document.createElement('div');
+      const searchClient = createSearchClient();
+
+      const search = instantsearch({
+        indexName: 'indexName',
+        searchClient,
+      });
+
+      search.addWidgets([
+        hierarchicalMenu({
+          container,
+          attributes,
+          cssClasses: {
+            root: 'ROOT',
+            noRefinementRoot: 'NO_REFINEMENT_ROOT',
+            list: 'LIST',
+            childList: 'CHILD_LIST',
+            item: 'ITEM',
+            selectedItem: 'SELECTED_ITEM',
+            parentItem: 'PARENT_ITEM',
+            link: 'LINK',
+            selectedItemLink: 'SELECTED_ITEM_LINK',
+            label: 'LABEL',
+            count: 'COUNT',
+            showMore: 'SHOW_MORE',
+            disabledShowMore: 'DISABLED_SHOW_MORE',
+          },
+        }),
+      ]);
+
+      search.start();
+
+      await wait(0);
+
+      const root = container.firstChild;
+
+      expect(root).toHaveClass('ROOT');
+    });
+  });
+
   describe('templates', () => {
     test('renders default templates', async () => {
       const container = document.createElement('div');
@@ -415,29 +494,10 @@ function createMockedSearchClient() {
   const search = jest.fn((requests) =>
     Promise.resolve(
       createMultiSearchResponse(
-        ...requests.map(() =>
-          createSingleSearchResponse({
-            facets: {
-              'categories.lvl0': {
-                'Cameras & Camcorders': 1369,
-                'Video Games': 505,
-                'Wearable Technology': 271,
-              },
-              'categories.lvl1': {
-                'Cameras & Camcorders > Digital Cameras': 170,
-                'Cameras & Camcorders > Memory Cards': 113,
-              },
-            },
-          })
-        )
+        ...requests.map(() => createSingleSearchResponse({ facets }))
       )
     )
   );
 
-  return createSearchClient({
-    search,
-    // @ts-ignore
-    applicationID: 'latency',
-    apiKey: '123',
-  });
+  return createSearchClient({ search });
 }
diff --git a/packages/react-instantsearch/src/ui/HierarchicalMenu.tsx b/packages/react-instantsearch/src/ui/HierarchicalMenu.tsx
@@ -102,11 +102,14 @@ function HierarchicalList({
           className={cx(
             'ais-HierarchicalMenu-item',
             classNames.item,
+            item.isRefined &&
+              cx(
+                'ais-HierarchicalMenu-item--selected',
+                classNames.selectedItem
+              ),
             item.data &&
               item.data.length > 0 &&
-              cx('ais-HierarchicalMenu-item--parent', classNames.parentItem),
-            item.isRefined &&
-              cx('ais-HierarchicalMenu-item--selected', classNames.selectedItem)
+              cx('ais-HierarchicalMenu-item--parent', classNames.parentItem)
           )}
         >
           <a

diff --git a/packages/react-instantsearch/src/ui/__tests__/HierarchicalMenu.test.tsx b/packages/react-instantsearch/src/ui/__tests__/HierarchicalMenu.test.tsx
@@ -80,7 +80,7 @@ describe('HierarchicalMenu', () => {
             class="ais-HierarchicalMenu-list"
           >
             <li
-              class="ais-HierarchicalMenu-item ais-HierarchicalMenu-item--parent ais-HierarchicalMenu-item--selected"
+              class="ais-HierarchicalMenu-item ais-HierarchicalMenu-item--selected ais-HierarchicalMenu-item--parent"
             >
               <a
                 class="ais-HierarchicalMenu-link ais-HierarchicalMenu-link--selected"
@@ -210,7 +210,7 @@ describe('HierarchicalMenu', () => {
               class="ais-HierarchicalMenu-list"
             >
               <li
-                class="ais-HierarchicalMenu-item ais-HierarchicalMenu-item--parent ais-HierarchicalMenu-item--selected"
+                class="ais-HierarchicalMenu-item ais-HierarchicalMenu-item--selected ais-HierarchicalMenu-item--parent"
               >
                 <a
                   class="ais-HierarchicalMenu-link ais-HierarchicalMenu-link--selected"
@@ -367,7 +367,7 @@ describe('HierarchicalMenu', () => {
             class="ais-HierarchicalMenu-list LIST"
           >
             <li
-              class="ais-HierarchicalMenu-item ITEM ais-HierarchicalMenu-item--parent PARENTITEM ais-HierarchicalMenu-item--selected SELECTEDITEM"
+              class="ais-HierarchicalMenu-item ITEM ais-HierarchicalMenu-item--selected SELECTEDITEM ais-HierarchicalMenu-item--parent PARENTITEM"
             >
               <a
                 class="ais-HierarchicalMenu-link LINK ais-HierarchicalMenu-link--selected SELECTEDITEMLINK"