vue-instantsearch 4.8.1 → 4.8.3

package/package.json

@@ -16,7 +16,7 @@
     "autocomplete"
   ],
   "license": "MIT",
-  "version": "4.8.1",
+  "version": "4.8.3",
   "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.50.1",
+    "instantsearch.js": "4.50.3",
     "mitt": "^2.1.0"
   },
   "peerDependencies": {
@@ -85,5 +85,5 @@
     "vuex": "3.5.1",
     "vuex4": "npm:vuex@4.0.0"
   },
-  "gitHead": "9c696ab3244d701c05d314bb765f086a50ff481b"
+  "gitHead": "cbcf03650d0bda8dd4f57f50e6c7e890e38c352a"
 }

package/src/__tests__/common.test.js

@@ -6,6 +6,7 @@ import {
   createHierarchicalMenuTests,
   createMenuTests,
   createPaginationTests,
+  createInfiniteHitsTests,
 } from '@instantsearch/tests';
 
 import { nextTick, mountApp } from '../../test/utils';
@@ -16,6 +17,8 @@ import {
   AisHierarchicalMenu,
   AisMenu,
   AisPagination,
+  AisInfiniteHits,
+  AisSearchBox,
   createWidgetMixin,
 } from '../instantsearch';
 jest.unmock('instantsearch.js/es');
@@ -97,3 +100,20 @@ createPaginationTests(async ({ instantSearchOptions, widgetParams }) => {
 
   await nextTick();
 });
+
+createInfiniteHitsTests(async ({ instantSearchOptions, widgetParams }) => {
+  mountApp(
+    {
+      render: renderCompat((h) =>
+        h(AisInstantSearch, { props: instantSearchOptions }, [
+          h(AisSearchBox),
+          h(AisInfiniteHits, { props: widgetParams }),
+          h(GlobalErrorSwallower),
+        ])
+      ),
+    },
+    document.body.appendChild(document.createElement('div'))
+  );
+
+  await nextTick();
+});

package/src/components/HitsPerPage.vue

@@ -6,12 +6,16 @@
       :has-no-results="state.hasNoResults"
       :can-refine="state.canRefine"
     >
-      <select :class="suit('select')" v-model="selected" @change="handleChange">
+      <select
+        :class="suit('select')"
+        @change="state.refine(Number($event.currentTarget.value))"
+      >
         <option
           v-for="item in state.items"
           :key="item.value"
           :class="suit('option')"
           :value="item.value"
+          :selected="item.isRefined"
         >
           {{ item.label }}
         </option>
@@ -50,11 +54,6 @@ export default {
       default: undefined,
     },
   },
-  data() {
-    return {
-      selected: this.items.find((item) => item.default === true).value,
-    };
-  },
   computed: {
     widgetParams() {
       return {
@@ -63,10 +62,5 @@ export default {
       };
     },
   },
-  methods: {
-    handleChange() {
-      this.state.refine(this.selected);
-    },
-  },
 };
 </script>

package/src/components/__tests__/HitsPerPage.js

@@ -6,6 +6,8 @@ import { mount } from '../../../test/utils';
 import { __setState } from '../../mixins/widget';
 import HitsPerPage from '../HitsPerPage.vue';
 import '../../../test/utils/sortedHtmlSerializer';
+import { getByRole } from '@testing-library/dom';
+import userEvent from '@testing-library/user-event';
 
 jest.mock('../../mixins/widget');
 jest.mock('../../mixins/panel');
@@ -63,7 +65,7 @@ it('renders correctly', () => {
   expect(wrapper.html()).toMatchSnapshot();
 });
 
-it('calls `refine` with the `value` on `change`', async () => {
+it('calls `refine` with the `value` on `change`', () => {
   __setState({
     ...defaultState,
     refine: jest.fn(),
@@ -73,11 +75,10 @@ it('calls `refine` with the `value` on `change`', async () => {
     propsData: defaultProps,
   });
 
-  await wrapper.setData({
-    selected: 20,
-  });
-
-  await wrapper.find('select').trigger('change');
+  userEvent.selectOptions(
+    getByRole(wrapper.element, 'combobox'),
+    getByRole(wrapper.element, 'option', { name: '20 results' })
+  );
 
   expect(wrapper.vm.state.refine).toHaveBeenLastCalledWith(20);
 });

package/src/components/__tests__/SortBy.js

@@ -6,6 +6,8 @@ import { mount } from '../../../test/utils';
 import { __setState } from '../../mixins/widget';
 import SortBy from '../SortBy.vue';
 import '../../../test/utils/sortedHtmlSerializer';
+import userEvent from '@testing-library/user-event';
+import { getByRole } from '@testing-library/dom';
 
 jest.mock('../../mixins/widget');
 jest.mock('../../mixins/panel');
@@ -90,7 +92,7 @@ it('renders with scoped slots', () => {
   expect(wrapper.html()).toMatchSnapshot();
 });
 
-it('calls `refine` when the selection changes with the `value`', async () => {
+it('calls `refine` when the selection changes with the `value`', () => {
   const refine = jest.fn();
   __setState({
     ...defaultState,
@@ -101,14 +103,15 @@ it('calls `refine` when the selection changes with the `value`', async () => {
       ...defaultProps,
     },
   });
-  // This is bad 👇🏽 but the only way for now to trigger changes
-  // on a select: https://github.com/vuejs/vue-test-utils/issues/260
-  const select = wrapper.find('select');
-  select.element.value = 'some_index_quality';
-  await select.trigger('change');
-  const selectedOption = wrapper.find('option[value=some_index_quality]');
+
+  userEvent.selectOptions(
+    getByRole(wrapper.element, 'combobox'),
+    getByRole(wrapper.element, 'option', { name: 'Quality ascending' })
+  );
 
   expect(refine).toHaveBeenCalledTimes(1);
   expect(refine).toHaveBeenLastCalledWith('some_index_quality');
-  expect(selectedOption.element.selected).toBe(true);
+  expect(
+    getByRole(wrapper.element, 'option', { name: 'Quality ascending' }).selected
+  ).toBe(true);
 });