vue-instantsearch 4.8.2 → 4.8.4

package/package.json

@@ -16,7 +16,7 @@
     "autocomplete"
   ],
   "license": "MIT",
-  "version": "4.8.2",
+  "version": "4.8.4",
   "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.2",
+    "instantsearch.js": "4.51.0",
     "mitt": "^2.1.0"
   },
   "peerDependencies": {
@@ -85,5 +85,5 @@
     "vuex": "3.5.1",
     "vuex4": "npm:vuex@4.0.0"
   },
-  "gitHead": "929c1d782d17a0d743f8a16d8d7e2231534658e7"
+  "gitHead": "dbe09ac288e92ef1b277b5e6aea79fce1029d452"
 }

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);
 });