vue-instantsearch 4.12.0 → 4.13.0

package/package.json

@@ -16,7 +16,7 @@
     "autocomplete"
   ],
   "license": "MIT",
-  "version": "4.12.0",
+  "version": "4.13.0",
   "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.59.0",
+    "instantsearch.js": "4.61.0",
     "mitt": "^2.1.0"
   },
   "peerDependencies": {
@@ -87,5 +87,5 @@
     "vuex": "3.5.1",
     "vuex4": "npm:vuex@4.0.0"
   },
-  "gitHead": "8fb537f2301a5e133e9e5df20c7c208cae16b3aa"
+  "gitHead": "0035f4bc5b91cdb4095ec36f5514c6718ea00c29"
 }

package/src/__tests__/common-connectors.test.js

@@ -36,7 +36,27 @@ const testSetups = {
       name: 'RefinementList',
       requiredProps: ['attribute'],
       urlValue: 'value',
-      refineValue: 'Apple',
+      refineComponents: [
+        (h, state) =>
+          h(
+            'form',
+            {
+              on: {
+                submit: (event) => {
+                  state.refine(event.currentTarget.elements[0].value);
+                },
+              },
+            },
+            [
+              h('input', {
+                attrs: {
+                  type: 'text',
+                  'data-testid': 'RefinementList-refine-input',
+                },
+              }),
+            ]
+          ),
+      ],
     });
 
     mountApp(
@@ -61,7 +81,27 @@ const testSetups = {
       name: 'HierarchicalMenu',
       requiredProps: ['attributes'],
       urlValue: 'value',
-      refineValue: 'Apple',
+      refineComponents: [
+        (h, state) =>
+          h(
+            'form',
+            {
+              on: {
+                submit: (event) => {
+                  state.refine(event.currentTarget.elements[0].value);
+                },
+              },
+            },
+            [
+              h('input', {
+                attrs: {
+                  type: 'text',
+                  'data-testid': 'HierarchicalMenu-refine-input',
+                },
+              }),
+            ]
+          ),
+      ],
     });
 
     mountApp(
@@ -105,7 +145,27 @@ const testSetups = {
       name: 'Menu',
       requiredProps: ['attribute'],
       urlValue: 'value',
-      refineValue: 'Apple',
+      refineComponents: [
+        (h, state) =>
+          h(
+            'form',
+            {
+              on: {
+                submit: (event) => {
+                  state.refine(event.currentTarget.elements[0].value);
+                },
+              },
+            },
+            [
+              h('input', {
+                attrs: {
+                  type: 'text',
+                  'data-testid': 'Menu-refine-input',
+                },
+              }),
+            ]
+          ),
+      ],
     });
 
     mountApp(
@@ -233,6 +293,7 @@ const testSetups = {
       name: 'RatingMenu',
       requiredProps: ['attribute'],
       urlValue: encodeURI('5'),
+      refineValue: 5,
     });
 
     mountApp(
@@ -286,6 +347,27 @@ function createCustomWidget({
   urlValue,
   refineValue,
   requiredProps = [],
+  refineComponents = [
+    (h, state) =>
+      h(
+        'button',
+        {
+          attrs: {
+            'data-testid': `${name}-refine`,
+          },
+          on: {
+            click: () => {
+              state.refine(
+                typeof refineValue === 'function'
+                  ? refineValue(state)
+                  : refineValue
+              );
+            },
+          },
+        },
+        'REFINE'
+      ),
+  ],
 }) {
   return {
     name: `Custom${name}`,
@@ -313,24 +395,7 @@ function createCustomWidget({
               },
               'LINK'
             ),
-            h(
-              'button',
-              {
-                attrs: {
-                  'data-testid': `${name}-refine`,
-                },
-                on: {
-                  click: () => {
-                    this.state.refine(
-                      typeof refineValue === 'function'
-                        ? refineValue(this.state)
-                        : refineValue
-                    );
-                  },
-                },
-              },
-              'REFINE'
-            ),
+            ...refineComponents.map((component) => component(h, this.state)),
           ])
         : null;
     }),

package/src/__tests__/common-widgets.test.js

@@ -21,6 +21,9 @@ import {
   AisHitsPerPage,
   AisClearRefinements,
   AisCurrentRefinements,
+  AisToggleRefinement,
+  AisSortBy,
+  AisStats,
 } from '../instantsearch';
 import { renderCompat } from '../util/vue-compat';
 
@@ -400,6 +403,72 @@ const testSetups = {
       document.body.appendChild(document.createElement('div'))
     );
 
+    await nextTick();
+  },
+  async createToggleRefinementWidgetTests({
+    instantSearchOptions,
+    widgetParams,
+  }) {
+    mountApp(
+      {
+        render: renderCompat((h) =>
+          h(AisInstantSearch, { props: instantSearchOptions }, [
+            h(AisToggleRefinement, { props: widgetParams }),
+            h(GlobalErrorSwallower),
+          ])
+        ),
+      },
+      document.body.appendChild(document.createElement('div'))
+    );
+
+    await nextTick();
+  },
+  async createSearchBoxWidgetTests({ instantSearchOptions, widgetParams }) {
+    mountApp(
+      {
+        render: renderCompat((h) =>
+          h(AisInstantSearch, { props: instantSearchOptions }, [
+            h(AisSearchBox, { props: widgetParams }),
+            h(GlobalErrorSwallower),
+          ])
+        ),
+      },
+      document.body.appendChild(document.createElement('div'))
+    );
+
+    await nextTick();
+  },
+  async createSortByWidgetTests({ instantSearchOptions, widgetParams }) {
+    mountApp(
+      {
+        render: renderCompat((h) =>
+          h(AisInstantSearch, { props: instantSearchOptions }, [
+            h(AisSortBy, { props: widgetParams }),
+            h(GlobalErrorSwallower),
+          ])
+        ),
+      },
+      document.body.appendChild(document.createElement('div'))
+    );
+
+    await nextTick();
+  },
+  async createStatsWidgetTests({ instantSearchOptions, widgetParams }) {
+    mountApp(
+      {
+        render: renderCompat((h) =>
+          h('div', {}, [
+            h(AisInstantSearch, { props: instantSearchOptions }, [
+              h(AisSearchBox),
+              h(AisStats, { props: widgetParams }),
+              h(GlobalErrorSwallower),
+            ]),
+          ])
+        ),
+      },
+      document.body.appendChild(document.createElement('div'))
+    );
+
     await nextTick();
   },
 };
@@ -417,6 +486,12 @@ const testOptions = {
   createHitsPerPageWidgetTests: undefined,
   createClearRefinementsWidgetTests: undefined,
   createCurrentRefinementsWidgetTests: undefined,
+  createToggleRefinementWidgetTests: undefined,
+  createSearchBoxWidgetTests: {
+    skippedTests: { 'searchAsYouType option': true },
+  },
+  createSortByWidgetTests: undefined,
+  createStatsWidgetTests: undefined,
 };
 
 describe('Common widget tests (Vue InstantSearch)', () => {

package/src/components/SearchBox.vue

@@ -66,7 +66,7 @@ export default {
   props: {
     placeholder: {
       type: String,
-      default: 'Search here…',
+      default: '',
     },
     autofocus: {
       type: Boolean,
@@ -74,15 +74,15 @@ export default {
     },
     showLoadingIndicator: {
       type: Boolean,
-      default: false,
+      default: true,
     },
     submitTitle: {
       type: String,
-      default: 'Search',
+      default: 'Submit the search query',
     },
     resetTitle: {
       type: String,
-      default: 'Clear',
+      default: 'Clear the search query',
     },
     value: {
       type: String,

package/src/components/SearchInput.vue

@@ -15,7 +15,6 @@
       autocapitalize="off"
       autocomplete="off"
       spellcheck="false"
-      required
       maxlength="512"
       aria-label="Search"
       :placeholder="placeholder"
@@ -39,8 +38,6 @@
       <slot name="submit-icon">
         <svg
           aria-hidden="true"
-          role="img"
-          xmlns="http://www.w3.org/2000/svg"
           width="10"
           height="10"
           viewBox="0 0 40 40"
@@ -48,7 +45,6 @@
         >
           <path
             d="M26.804 29.01c-2.832 2.34-6.465 3.746-10.426 3.746C7.333 32.756 0 25.424 0 16.378 0 7.333 7.333 0 16.378 0c9.046 0 16.378 7.333 16.378 16.378 0 3.96-1.406 7.594-3.746 10.426l10.534 10.534c.607.607.61 1.59-.004 2.202-.61.61-1.597.61-2.202.004L26.804 29.01zm-10.426.627c7.323 0 13.26-5.936 13.26-13.26 0-7.32-5.937-13.257-13.26-13.257C9.056 3.12 3.12 9.056 3.12 16.378c0 7.323 5.936 13.26 13.258 13.26z"
-            fillRule="evenodd"
           />
         </svg>
       </slot>
@@ -66,15 +62,13 @@
       <slot name="reset-icon">
         <svg
           aria-hidden="true"
-          role="img"
-          xmlns="http://www.w3.org/2000/svg"
-          style="width: 1em; height: 1em"
+          height="10"
           viewBox="0 0 20 20"
           :class="suit('resetIcon')"
+          width="10"
         >
           <path
             d="M8.114 10L.944 2.83 0 1.885 1.886 0l.943.943L10 8.113l7.17-7.17.944-.943L20 1.886l-.943.943-7.17 7.17 7.17 7.17.943.944L18.114 20l-.943-.943-7.17-7.17-7.17 7.17-.944.943L0 18.114l.943-.943L8.113 10z"
-            fillRule="evenodd"
           />
         </svg>
       </slot>
@@ -87,11 +81,10 @@
     >
       <slot name="loading-indicator">
         <svg
-          role="img"
+          :aria-hidden="!shouldShowLoadingIndicator"
           aria-label="Results are loading"
           width="16"
           height="16"
-          xmlns="http://www.w3.org/2000/svg"
           stroke="#444"
           viewBox="0 0 38 38"
           :class="suit('loadingIcon')"

package/src/components/SortBy.vue

@@ -10,6 +10,7 @@
       <select
         :class="suit('select')"
         @change="state.refine($event.currentTarget.value)"
+        aria-label="Sort results by"
       >
         <option
           v-for="item in state.options"

package/src/components/Stats.vue

@@ -7,8 +7,8 @@
       <!-- prettier-ignore -->
       <span :class="suit('text')"
         ><template v-if="state.areHitsSorted"
-          >{{ state.nbSortedHits.toLocaleString() }} relevant results sorted out of {{ state.nbHits.toLocaleString() }}</template
-        ><template v-else>{{ state.nbHits.toLocaleString() }} results</template
+          >{{ sortedResultsSentence }}</template
+        ><template v-else>{{ resultsSentence }}</template
         > found in {{ state.processingTimeMS.toLocaleString() }}ms</span
       >
     </slot>
@@ -33,6 +33,44 @@ export default {
     createSuitMixin({ name: 'Stats' }),
   ],
   computed: {
+    sortedResultsSentence() {
+      const { nbHits, nbSortedHits } = this.state;
+
+      const suffix = `sorted out of ${nbHits.toLocaleString()}`;
+
+      if (nbSortedHits === 0) {
+        return `No relevant results ${suffix}`;
+      }
+
+      if (nbSortedHits === 1) {
+        return `1 relevant result ${suffix}`;
+      }
+
+      if (nbSortedHits > 1) {
+        return `${(
+          nbSortedHits || 0
+        ).toLocaleString()} relevant results ${suffix}`;
+      }
+
+      return '';
+    },
+    resultsSentence() {
+      const { nbHits } = this.state;
+
+      if (nbHits === 0) {
+        return 'No results';
+      }
+
+      if (nbHits === 1) {
+        return '1 result';
+      }
+
+      if (nbHits > 1) {
+        return `${nbHits.toLocaleString()} results`;
+      }
+
+      return '';
+    },
     widgetParams() {
       return {};
     },

package/src/components/ToggleRefinement.vue

@@ -19,7 +19,7 @@
           :checked="state.value.isRefined"
           @change="state.refine(state.value)"
         />
-        <span :class="suit('labelText')">{{ label }}</span>
+        <span :class="suit('labelText')">{{ label || state.value.name }}</span>
         <span v-if="state.value.count !== null" :class="suit('count')">{{
           state.value.count.toLocaleString()
         }}</span>

package/src/components/__tests__/SearchBox.js

@@ -10,37 +10,6 @@ import '../../../test/utils/sortedHtmlSerializer';
 
 const defaultState = {};
 
-test('renders HTML correctly', () => {
-  __setState(defaultState);
-  const wrapper = mount(SearchBox);
-
-  expect(wrapper.htmlCompat()).toMatchSnapshot();
-});
-
-test('with autofocus', () => {
-  __setState(defaultState);
-  const wrapper = mount(SearchBox, {
-    propsData: {
-      autofocus: true,
-    },
-  });
-
-  expect(wrapper.find('.ais-SearchBox-input')).vueToBeAutofocused();
-});
-
-test('with placeholder', () => {
-  __setState(defaultState);
-  const wrapper = mount(SearchBox, {
-    propsData: {
-      placeholder: 'Search placeholder',
-    },
-  });
-
-  expect(wrapper.find('.ais-SearchBox-input').attributes().placeholder).toBe(
-    'Search placeholder'
-  );
-});
-
 test('with submit title', () => {
   __setState(defaultState);
   const wrapper = mount(SearchBox, {
@@ -67,47 +36,11 @@ test('with reset title', () => {
   );
 });
 
-test('with reset button hidden without refinement', () => {
-  __setState({ ...defaultState });
-
-  const wrapper = mount(SearchBox);
-
-  expect(wrapper.find('.ais-SearchBox-reset')).vueToBeHidden();
-});
-
-test('with reset button visible with refinement', () => {
-  __setState({
-    ...defaultState,
-    query: 'Hello',
-  });
-
-  const wrapper = mount(SearchBox);
-
-  expect(wrapper.find('.ais-SearchBox-reset')).not.vueToBeHidden();
-});
-
-test('with stalled search hides the submit, reset and displays the loader', () => {
-  __setState({
-    ...defaultState,
-    isSearchStalled: true,
-  });
-
-  const wrapper = mount(SearchBox, {
-    propsData: {
-      showLoadingIndicator: true,
-    },
-  });
-
-  expect(wrapper.find('.ais-SearchBox-submit')).vueToBeHidden();
-
-  expect(wrapper.find('.ais-SearchBox-reset')).vueToBeHidden();
-
-  expect(wrapper.find('.ais-SearchBox-loadingIndicator').exists()).toBe(true);
-});
-
 test('with stalled search but no `showLoadingIndicator` displays the submit and hides reset, loader', () => {
   __setState({ ...defaultState, isSearchStalled: true });
-  const wrapper = mount(SearchBox);
+  const wrapper = mount(SearchBox, {
+    propsData: { showLoadingIndicator: false },
+  });
 
   expect(wrapper.find('.ais-SearchBox-submit')).not.vueToBeHidden();
 
@@ -118,11 +51,7 @@ test('with stalled search but no `showLoadingIndicator` displays the submit and
 
 test('with not stalled search displays the submit and hides reset, loader', () => {
   __setState(defaultState);
-  const wrapper = mount(SearchBox, {
-    propsData: {
-      showLoadingIndicator: true,
-    },
-  });
+  const wrapper = mount(SearchBox);
 
   expect(wrapper.find('.ais-SearchBox-submit')).not.vueToBeHidden();
 
@@ -204,34 +133,34 @@ test('overriding slots', () => {
 
   expect(htmlCompat(wrapper.find('.ais-SearchBox-submit').html()))
     .toMatchInlineSnapshot(`
-<button class="ais-SearchBox-submit"
-        hidden="hidden"
-        title="Search"
-        type="submit"
->
-  <span>
-    SUBMIT
-  </span>
-</button>
-`);
+    <button class="ais-SearchBox-submit"
+            hidden="hidden"
+            title="Submit the search query"
+            type="submit"
+    >
+      <span>
+        SUBMIT
+      </span>
+    </button>
+  `);
   expect(htmlCompat(wrapper.find('.ais-SearchBox-reset').html()))
     .toMatchInlineSnapshot(`
-<button class="ais-SearchBox-reset"
-        hidden="hidden"
-        title="Clear"
-        type="reset"
->
-  <span>
-    RESET
-  </span>
-</button>
-`);
+    <button class="ais-SearchBox-reset"
+            hidden="hidden"
+            title="Clear the search query"
+            type="reset"
+    >
+      <span>
+        RESET
+      </span>
+    </button>
+  `);
   expect(wrapper.find('.ais-SearchBox-loadingIndicator').html())
     .toMatchInlineSnapshot(`
-<span class="ais-SearchBox-loadingIndicator">
-  <span>
-    LOADING...
-  </span>
-</span>
-`);
+    <span class="ais-SearchBox-loadingIndicator">
+      <span>
+        LOADING...
+      </span>
+    </span>
+  `);
 });

package/src/components/__tests__/SortBy.js

@@ -1,9 +1,6 @@
 /**
  * @jest-environment jsdom
  */
-import { getByRole } from '@testing-library/dom';
-import userEvent from '@testing-library/user-event';
-
 import { mount } from '../../../test/utils';
 import '../../../test/utils/sortedHtmlSerializer';
 import { __setState } from '../../mixins/widget';
@@ -31,32 +28,6 @@ const defaultProps = {
   ],
 };
 
-it('accepts transformItems prop', () => {
-  __setState({ ...defaultState });
-
-  const transformItems = () => {};
-
-  const wrapper = mount(SortBy, {
-    propsData: {
-      ...defaultProps,
-      transformItems,
-    },
-  });
-
-  expect(wrapper.vm.widgetParams.transformItems).toBe(transformItems);
-});
-
-it('renders correctly', () => {
-  __setState({ ...defaultState });
-
-  const wrapper = mount(SortBy, {
-    propsData: {
-      ...defaultProps,
-    },
-  });
-  expect(wrapper.html()).toMatchSnapshot();
-});
-
 it('renders with scoped slots', () => {
   const defaultSlot = `
   <template v-slot="{ items, refine, currentRefinement }">
@@ -91,27 +62,3 @@ it('renders with scoped slots', () => {
 
   expect(wrapper.html()).toMatchSnapshot();
 });
-
-it('calls `refine` when the selection changes with the `value`', () => {
-  const refine = jest.fn();
-  __setState({
-    ...defaultState,
-    refine,
-  });
-  const wrapper = mount(SortBy, {
-    propsData: {
-      ...defaultProps,
-    },
-  });
-
-  userEvent.selectOptions(
-    getByRole(wrapper.element, 'combobox'),
-    getByRole(wrapper.element, 'option', { name: 'Quality ascending' })
-  );
-
-  expect(refine).toHaveBeenCalledTimes(1);
-  expect(refine).toHaveBeenLastCalledWith('some_index_quality');
-  expect(
-    getByRole(wrapper.element, 'option', { name: 'Quality ascending' }).selected
-  ).toBe(true);
-});