vue-instantsearch 4.7.2 → 4.8.1

package/package.json

@@ -16,7 +16,7 @@
     "autocomplete"
   ],
   "license": "MIT",
-  "version": "4.7.2",
+  "version": "4.8.1",
   "files": [
     "vue2",
     "vue3",
@@ -35,7 +35,7 @@
     "test:exports:vue3": "node ./test/module/vue3/is-es-module.mjs && node ./test/module/vue3/is-cjs-module.cjs"
   },
   "dependencies": {
-    "instantsearch.js": "^4.49.4",
+    "instantsearch.js": "4.50.1",
     "mitt": "^2.1.0"
   },
   "peerDependencies": {
@@ -60,7 +60,7 @@
     "@vue/test-utils": "1.3.0",
     "@vue/test-utils2": "npm:@vue/test-utils@2.0.0-rc.11",
     "algoliasearch": "4.14.3",
-    "algoliasearch-helper": "3.11.2",
+    "algoliasearch-helper": "3.11.3",
     "instantsearch.css": "8.0.0",
     "rollup": "1.32.1",
     "rollup-plugin-babel": "4.4.0",
@@ -85,5 +85,5 @@
     "vuex": "3.5.1",
     "vuex4": "npm:vuex@4.0.0"
   },
-  "gitHead": "4c473604508a865a2488e064fdd3a415f416d14a"
+  "gitHead": "9c696ab3244d701c05d314bb765f086a50ff481b"
 }

package/src/__tests__/common.test.js

@@ -0,0 +1,99 @@
+/**
+ * @jest-environment jsdom
+ */
+import {
+  createRefinementListTests,
+  createHierarchicalMenuTests,
+  createMenuTests,
+  createPaginationTests,
+} from '@instantsearch/tests';
+
+import { nextTick, mountApp } from '../../test/utils';
+import { renderCompat } from '../util/vue-compat';
+import {
+  AisInstantSearch,
+  AisRefinementList,
+  AisHierarchicalMenu,
+  AisMenu,
+  AisPagination,
+  createWidgetMixin,
+} from '../instantsearch';
+jest.unmock('instantsearch.js/es');
+
+/**
+ * prevent rethrowing InstantSearch errors, so tests can be asserted.
+ * IRL this isn't needed, as the error doesn't stop execution.
+ */
+const GlobalErrorSwallower = {
+  mixins: [createWidgetMixin({ connector: true })],
+  mounted() {
+    this.instantSearchInstance.on('error', () => {});
+  },
+  render() {
+    return null;
+  },
+};
+
+createRefinementListTests(async ({ instantSearchOptions, widgetParams }) => {
+  mountApp(
+    {
+      render: renderCompat((h) =>
+        h(AisInstantSearch, { props: instantSearchOptions }, [
+          h(AisRefinementList, { props: widgetParams }),
+          h(GlobalErrorSwallower),
+        ])
+      ),
+    },
+    document.body.appendChild(document.createElement('div'))
+  );
+
+  await nextTick();
+});
+
+createHierarchicalMenuTests(async ({ instantSearchOptions, widgetParams }) => {
+  mountApp(
+    {
+      render: renderCompat((h) =>
+        h(AisInstantSearch, { props: instantSearchOptions }, [
+          h(AisHierarchicalMenu, { props: widgetParams }),
+          h(GlobalErrorSwallower),
+        ])
+      ),
+    },
+    document.body.appendChild(document.createElement('div'))
+  );
+
+  await nextTick();
+});
+
+createMenuTests(async ({ instantSearchOptions, widgetParams }) => {
+  mountApp(
+    {
+      render: renderCompat((h) =>
+        h(AisInstantSearch, { props: instantSearchOptions }, [
+          h(AisMenu, { props: widgetParams }),
+          h(GlobalErrorSwallower),
+        ])
+      ),
+    },
+    document.body.appendChild(document.createElement('div'))
+  );
+
+  await nextTick();
+});
+
+createPaginationTests(async ({ instantSearchOptions, widgetParams }) => {
+  mountApp(
+    {
+      render: renderCompat((h) =>
+        h(AisInstantSearch, { props: instantSearchOptions }, [
+          h(AisPagination, { props: widgetParams }),
+          h(GlobalErrorSwallower),
+        ])
+      ),
+    },
+    document.body.appendChild(document.createElement('div'))
+  );
+
+  await nextTick();
+});

package/src/components/HierarchicalMenuList.vue

@@ -1,5 +1,6 @@
 <template>
   <ul
+    v-if="items.length > 0"
     :class="[
       suit('list'),
       level > 0 && suit('list', 'child'),
@@ -11,7 +12,7 @@
       :key="item.value"
       :class="[
         suit('item'),
-        item.data && suit('item', 'parent'),
+        item.data && item.data.length > 0 && suit('item', 'parent'),
         item.isRefined && suit('item', 'selected'),
       ]"
     >

package/src/components/Pagination.vue

@@ -88,6 +88,7 @@
             <a
               :class="suit('link')"
               :href="state.createURL(page)"
+              :aria-label="`Page ${page + 1}`"
               @click.prevent="refine(page)"
               >{{ page + 1 }}</a
             >

package/src/components/__tests__/HierarchicalMenu.js

@@ -98,6 +98,14 @@ const microsoft = {
   data: null,
 };
 
+const google = {
+  label: 'Google',
+  value: 'Google',
+  isRefined: true,
+  count: 2,
+  data: [],
+};
+
 const defaultState = {
   items: [
     {
@@ -116,6 +124,7 @@ const defaultState = {
       data: [galaxy, note],
     },
     microsoft,
+    google,
   ],
   refine: () => {},
   createURL: () => {},

package/src/components/__tests__/__snapshots__/HierarchicalMenu.js.snap

@@ -48,6 +48,13 @@ exports[`custom default render renders correctly 1`] = `
           Microsoft - 20
         </a>
       </li>
+      <li>
+        <a>
+          Google - 2
+        </a>
+        <ol>
+        </ol>
+      </li>
     </ol>
     <button>
       View more
@@ -104,6 +111,13 @@ exports[`custom default render renders correctly with a disabled show more butto
           Microsoft - 20
         </a>
       </li>
+      <li>
+        <a>
+          Google - 2
+        </a>
+        <ol>
+        </ol>
+      </li>
     </ol>
     <button disabled="disabled">
       View more
@@ -160,6 +174,13 @@ exports[`custom default render renders correctly with a limit 1`] = `
           Microsoft - 20
         </a>
       </li>
+      <li>
+        <a>
+          Google - 2
+        </a>
+        <ol>
+        </ol>
+      </li>
     </ol>
     <button>
       View more
@@ -216,6 +237,13 @@ exports[`custom default render renders correctly with a show more button toggled
           Microsoft - 20
         </a>
       </li>
+      <li>
+        <a>
+          Google - 2
+        </a>
+        <ol>
+        </ol>
+      </li>
     </ol>
     <button>
       View more
@@ -272,6 +300,13 @@ exports[`custom default render renders correctly with a show more button toggled
           Microsoft - 20
         </a>
       </li>
+      <li>
+        <a>
+          Google - 2
+        </a>
+        <ol>
+        </ol>
+      </li>
     </ol>
     <button>
       View less
@@ -328,6 +363,13 @@ exports[`custom default render renders correctly with an URL for the href 1`] =
           Microsoft - 20
         </a>
       </li>
+      <li>
+        <a href="/categories/Google">
+          Google - 2
+        </a>
+        <ol>
+        </ol>
+      </li>
     </ol>
     <button>
       View more
@@ -467,6 +509,16 @@ exports[`custom showMoreLabel render renders correctly with a custom show more l
         </span>
       </a>
     </li>
+    <li class="ais-HierarchicalMenu-item ais-HierarchicalMenu-item--selected">
+      <a class="ais-HierarchicalMenu-link ais-HierarchicalMenu-link--selected">
+        <span class="ais-HierarchicalMenu-label">
+          Google
+        </span>
+        <span class="ais-HierarchicalMenu-count">
+          2
+        </span>
+      </a>
+    </li>
   </ul>
   <button class="ais-HierarchicalMenu-showMore">
     <span>
@@ -595,6 +647,16 @@ exports[`custom showMoreLabel render renders correctly with a custom show more l
         </span>
       </a>
     </li>
+    <li class="ais-HierarchicalMenu-item ais-HierarchicalMenu-item--selected">
+      <a class="ais-HierarchicalMenu-link ais-HierarchicalMenu-link--selected">
+        <span class="ais-HierarchicalMenu-label">
+          Google
+        </span>
+        <span class="ais-HierarchicalMenu-count">
+          2
+        </span>
+      </a>
+    </li>
   </ul>
   <button class="ais-HierarchicalMenu-showMore">
     <span>
@@ -723,6 +785,16 @@ exports[`default render renders correctly 1`] = `
         </span>
       </a>
     </li>
+    <li class="ais-HierarchicalMenu-item ais-HierarchicalMenu-item--selected">
+      <a class="ais-HierarchicalMenu-link ais-HierarchicalMenu-link--selected">
+        <span class="ais-HierarchicalMenu-label">
+          Google
+        </span>
+        <span class="ais-HierarchicalMenu-count">
+          2
+        </span>
+      </a>
+    </li>
   </ul>
 </div>
 `;
@@ -991,6 +1063,18 @@ exports[`default render renders correctly with a URL for the href 1`] = `
         </span>
       </a>
     </li>
+    <li class="ais-HierarchicalMenu-item ais-HierarchicalMenu-item--selected">
+      <a class="ais-HierarchicalMenu-link ais-HierarchicalMenu-link--selected"
+         href="/categories/Google"
+      >
+        <span class="ais-HierarchicalMenu-label">
+          Google
+        </span>
+        <span class="ais-HierarchicalMenu-count">
+          2
+        </span>
+      </a>
+    </li>
   </ul>
 </div>
 `;
@@ -1114,6 +1198,16 @@ exports[`default render renders correctly with show more disabled 1`] = `
         </span>
       </a>
     </li>
+    <li class="ais-HierarchicalMenu-item ais-HierarchicalMenu-item--selected">
+      <a class="ais-HierarchicalMenu-link ais-HierarchicalMenu-link--selected">
+        <span class="ais-HierarchicalMenu-label">
+          Google
+        </span>
+        <span class="ais-HierarchicalMenu-count">
+          2
+        </span>
+      </a>
+    </li>
   </ul>
   <button class="ais-HierarchicalMenu-showMore ais-HierarchicalMenu-showMore--disabled"
           disabled="disabled"
@@ -1137,7 +1231,5 @@ exports[`default render renders correctly with show more label toggled 1`] = `
 
 exports[`default render renders correctly without refinement 1`] = `
 <div class="ais-HierarchicalMenu ais-HierarchicalMenu--noRefinement">
-  <ul class="ais-HierarchicalMenu-list ais-HierarchicalMenu-list--lvl0">
-  </ul>
 </div>
 `;

package/src/components/__tests__/__snapshots__/Pagination.js.snap

@@ -20,49 +20,56 @@ exports[`renders correctly another page 1`] = `
       </a>
     </li>
     <li class="ais-Pagination-item ais-Pagination-item--page">
-      <a class="ais-Pagination-link"
+      <a aria-label="Page 4"
+         class="ais-Pagination-link"
          href="#"
       >
         4
       </a>
     </li>
     <li class="ais-Pagination-item ais-Pagination-item--page">
-      <a class="ais-Pagination-link"
+      <a aria-label="Page 5"
+         class="ais-Pagination-link"
          href="#"
       >
         5
       </a>
     </li>
     <li class="ais-Pagination-item ais-Pagination-item--page">
-      <a class="ais-Pagination-link"
+      <a aria-label="Page 6"
+         class="ais-Pagination-link"
          href="#"
       >
         6
       </a>
     </li>
     <li class="ais-Pagination-item ais-Pagination-item--page ais-Pagination-item--selected">
-      <a class="ais-Pagination-link"
+      <a aria-label="Page 7"
+         class="ais-Pagination-link"
          href="#"
       >
         7
       </a>
     </li>
     <li class="ais-Pagination-item ais-Pagination-item--page">
-      <a class="ais-Pagination-link"
+      <a aria-label="Page 8"
+         class="ais-Pagination-link"
          href="#"
       >
         8
       </a>
     </li>
     <li class="ais-Pagination-item ais-Pagination-item--page">
-      <a class="ais-Pagination-link"
+      <a aria-label="Page 9"
+         class="ais-Pagination-link"
          href="#"
       >
         9
       </a>
     </li>
     <li class="ais-Pagination-item ais-Pagination-item--page">
-      <a class="ais-Pagination-link"
+      <a aria-label="Page 10"
+         class="ais-Pagination-link"
          href="#"
       >
         10
@@ -106,49 +113,56 @@ exports[`renders correctly first page 1`] = `
       </span>
     </li>
     <li class="ais-Pagination-item ais-Pagination-item--page ais-Pagination-item--selected">
-      <a class="ais-Pagination-link"
+      <a aria-label="Page 1"
+         class="ais-Pagination-link"
          href="#"
       >
         1
       </a>
     </li>
     <li class="ais-Pagination-item ais-Pagination-item--page">
-      <a class="ais-Pagination-link"
+      <a aria-label="Page 2"
+         class="ais-Pagination-link"
          href="#"
       >
         2
       </a>
     </li>
     <li class="ais-Pagination-item ais-Pagination-item--page">
-      <a class="ais-Pagination-link"
+      <a aria-label="Page 3"
+         class="ais-Pagination-link"
          href="#"
       >
         3
       </a>
     </li>
     <li class="ais-Pagination-item ais-Pagination-item--page">
-      <a class="ais-Pagination-link"
+      <a aria-label="Page 4"
+         class="ais-Pagination-link"
          href="#"
       >
         4
       </a>
     </li>
     <li class="ais-Pagination-item ais-Pagination-item--page">
-      <a class="ais-Pagination-link"
+      <a aria-label="Page 5"
+         class="ais-Pagination-link"
          href="#"
       >
         5
       </a>
     </li>
     <li class="ais-Pagination-item ais-Pagination-item--page">
-      <a class="ais-Pagination-link"
+      <a aria-label="Page 6"
+         class="ais-Pagination-link"
          href="#"
       >
         6
       </a>
     </li>
     <li class="ais-Pagination-item ais-Pagination-item--page">
-      <a class="ais-Pagination-link"
+      <a aria-label="Page 7"
+         class="ais-Pagination-link"
          href="#"
       >
         7
@@ -194,49 +208,56 @@ exports[`renders correctly last page 1`] = `
       </a>
     </li>
     <li class="ais-Pagination-item ais-Pagination-item--page">
-      <a class="ais-Pagination-link"
+      <a aria-label="Page 4"
+         class="ais-Pagination-link"
          href="#"
       >
         4
       </a>
     </li>
     <li class="ais-Pagination-item ais-Pagination-item--page">
-      <a class="ais-Pagination-link"
+      <a aria-label="Page 5"
+         class="ais-Pagination-link"
          href="#"
       >
         5
       </a>
     </li>
     <li class="ais-Pagination-item ais-Pagination-item--page">
-      <a class="ais-Pagination-link"
+      <a aria-label="Page 6"
+         class="ais-Pagination-link"
          href="#"
       >
         6
       </a>
     </li>
     <li class="ais-Pagination-item ais-Pagination-item--page">
-      <a class="ais-Pagination-link"
+      <a aria-label="Page 7"
+         class="ais-Pagination-link"
          href="#"
       >
         7
       </a>
     </li>
     <li class="ais-Pagination-item ais-Pagination-item--page">
-      <a class="ais-Pagination-link"
+      <a aria-label="Page 8"
+         class="ais-Pagination-link"
          href="#"
       >
         8
       </a>
     </li>
     <li class="ais-Pagination-item ais-Pagination-item--page">
-      <a class="ais-Pagination-link"
+      <a aria-label="Page 9"
+         class="ais-Pagination-link"
          href="#"
       >
         9
       </a>
     </li>
     <li class="ais-Pagination-item ais-Pagination-item--page ais-Pagination-item--selected">
-      <a class="ais-Pagination-link"
+      <a aria-label="Page 10"
+         class="ais-Pagination-link"
          href="#"
       >
         10

package/src/util/__tests__/createServerRootMixin.test.js

@@ -1133,6 +1133,7 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/instantsear
 
       const resultsState = createSerializedState();
       const state = new SearchParameters(resultsState.state);
+      const localState = new SearchParameters({ index: 'lol' });
       const results = new SearchResults(state, resultsState.results);
 
       instantSearchInstance.hydrate({
@@ -1149,18 +1150,13 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/instantsear
 
       const renderArgs = widget.render.mock.calls[0][0];
 
-      expect(renderArgs).toEqual(
-        expect.objectContaining({
-          state,
-          results,
-          scopedResults: [
-            expect.objectContaining({
-              indexId: 'lol',
-              results,
-            }),
-          ],
-        })
-      );
+      // renders with local state, not the one from results
+      expect(renderArgs.state).toEqual(localState);
+      results._state = localState;
+      expect(renderArgs.results).toEqual(results);
+      expect(renderArgs.scopedResults).toHaveLength(1);
+      expect(renderArgs.scopedResults[0].indexId).toEqual('lol');
+      expect(renderArgs.scopedResults[0].results).toEqual(results);
     });
 
     describe('createURL', () => {