fix(HitsPerPage): compute selected from isRefined

examples/vue/e-commerce/src/App.vue

@@ -259,19 +259,15 @@
                 {
                   label: '16 hits per page',
                   value: 16,
-                  default:
-                    getSelectedHitsPerPageValue() === 16 ||
-                    !getSelectedHitsPerPageValue(),
+                  default: true,
                 },
                 {
                   label: '32 hits per page',
                   value: 32,
-                  default: getSelectedHitsPerPageValue() === 32,
                 },
                 {
                   label: '64 hits per page',
                   value: 64,
-                  default: getSelectedHitsPerPageValue() === 64,
                 },
               ]"
             />
@@ -561,11 +557,6 @@ export default {
         typeof value.max === 'number' ? value.max : range.max,
       ];
     },
-    getSelectedHitsPerPageValue() {
-      const [, hitsPerPage] =
-        document.location.search.match(/hitsPerPage=([0-9]+)/) || [];
-      return Number(hitsPerPage);
-    },
     openFilters() {
       document.body.classList.add('filtering');
       window.scrollTo(0, 0);

packages/vue-instantsearch/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>

packages/vue-instantsearch/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);
 });

packages/vue-instantsearch/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);
 });

packages/vue-instantsearch/stories/HitsPerPage.stories.js

@@ -2,7 +2,11 @@ import { storiesOf } from '@storybook/vue';
 import { previewWrapper } from './utils';
 
 storiesOf('ais-hits-per-page', module)
-  .addDecorator(previewWrapper())
+  .addDecorator(
+    previewWrapper({
+      filters: '',
+    })
+  )
   .add('default', () => ({
     template: `
       <ais-hits-per-page