vue-instantsearch 4.10.8 → 4.10.10

package/package.json

@@ -16,7 +16,7 @@
     "autocomplete"
   ],
   "license": "MIT",
-  "version": "4.10.8",
+  "version": "4.10.10",
   "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.56.8",
+    "instantsearch.js": "4.56.10",
     "mitt": "^2.1.0"
   },
   "peerDependencies": {
@@ -87,5 +87,5 @@
     "vuex": "3.5.1",
     "vuex4": "npm:vuex@4.0.0"
   },
-  "gitHead": "f4acbc0c1106a4fd7c7ad95a3e02de4fdac1ad27"
+  "gitHead": "90a5e43746613d2f9eb3dc49fa15b1895d45c7bd"
 }

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

@@ -18,6 +18,9 @@ import {
   AisHits,
   AisIndex,
   AisRangeInput,
+  AisHitsPerPage,
+  AisClearRefinements,
+  AisCurrentRefinements,
 } from '../instantsearch';
 import { renderCompat } from '../util/vue-compat';
 
@@ -320,6 +323,47 @@ const testSetups = {
       ],
     };
   },
+  async createHitsPerPageWidgetTests({ instantSearchOptions, widgetParams }) {
+    mountApp(
+      {
+        render: renderCompat((h) =>
+          h(AisInstantSearch, { props: instantSearchOptions }, [
+            h(AisHitsPerPage, { props: widgetParams }),
+            h(GlobalErrorSwallower),
+          ])
+        ),
+      },
+      document.body.appendChild(document.createElement('div'))
+    );
+
+    await nextTick();
+  },
+  async createClearRefinementsWidgetTests({
+    instantSearchOptions,
+    widgetParams,
+  }) {
+    const refinementListAttributes = Object.keys(
+      instantSearchOptions.initialUiState?.indexName.refinementList || {}
+    );
+
+    mountApp(
+      {
+        render: renderCompat((h) =>
+          h(AisInstantSearch, { props: instantSearchOptions }, [
+            ...refinementListAttributes.map((attribute) =>
+              h(AisRefinementList, { props: { attribute } })
+            ),
+            h(AisCurrentRefinements),
+            h(AisClearRefinements, { props: widgetParams }),
+            h(GlobalErrorSwallower),
+          ])
+        ),
+      },
+      document.body.appendChild(document.createElement('div'))
+    );
+
+    await nextTick();
+  },
 };
 
 const testOptions = {
@@ -332,6 +376,8 @@ const testOptions = {
   createHitsWidgetTests: undefined,
   createRangeInputWidgetTests: undefined,
   createInstantSearchWidgetTests: undefined,
+  createHitsPerPageWidgetTests: undefined,
+  createClearRefinementsWidgetTests: undefined,
 };
 
 describe('Common widget tests (Vue InstantSearch)', () => {

package/src/components/ClearRefinements.vue

@@ -1,3 +1,4 @@
+<!-- @MAJOR remove `type="reset"` -->
 <template>
   <div v-if="state" :class="suit()">
     <slot

package/src/components/Menu.vue

@@ -39,9 +39,9 @@
         :disabled="!state.canToggleShowMore"
         @click.prevent="state.toggleShowMore()"
       >
-        <slot name="showMoreLabel" :is-showing-more="state.isShowingMore">
-          {{ state.isShowingMore ? 'Show less' : 'Show more' }}
-        </slot>
+        <slot name="showMoreLabel" :is-showing-more="state.isShowingMore">{{
+          state.isShowingMore ? 'Show less' : 'Show more'
+        }}</slot>
       </button>
     </slot>
   </div>

package/src/components/__tests__/Menu.js

@@ -10,337 +10,20 @@ import '../../../test/utils/sortedHtmlSerializer';
 jest.mock('../../mixins/widget');
 jest.mock('../../mixins/panel');
 
-const apple = {
-  value: 'Apple',
-  label: 'Apple',
-  count: 50,
-  isRefined: false,
-};
-
-const samsung = {
-  value: 'Samsung',
-  label: 'Samsung',
-  count: 25,
-  isRefined: false,
-};
-
-const microsoft = {
-  value: 'Microsoft',
-  label: 'Microsoft',
-  count: 12,
-  isRefined: false,
-};
-
-const defaultState = {
-  items: [apple, samsung, microsoft],
-  canRefine: true,
-  canToggleShowMore: false,
-  isShowingMore: false,
-  refine: () => {},
-  createURL: () => {},
-  toggleShowMore: () => {},
-};
-
-const defaultProps = {
-  attribute: 'brand',
-};
-
-it('accepts an attribute prop', () => {
-  __setState({
-    ...defaultState,
-  });
-
-  const props = {
-    ...defaultProps,
-  };
-
-  const wrapper = mount(Menu, {
-    propsData: props,
-  });
-
-  expect(wrapper.vm.widgetParams.attribute).toBe('brand');
-});
-
-it('accepts a limit prop', () => {
-  __setState({
-    ...defaultState,
-  });
-
-  const props = {
-    ...defaultProps,
-    limit: 5,
-  };
-
-  const wrapper = mount(Menu, {
-    propsData: props,
-  });
-
-  expect(wrapper.vm.widgetParams.limit).toBe(5);
-});
-
-it('accepts a showMoreLimit prop', () => {
-  __setState({
-    ...defaultState,
-  });
-
-  const props = {
-    ...defaultProps,
-    showMoreLimit: 10,
-  };
-
-  const wrapper = mount(Menu, {
-    propsData: props,
-  });
-
-  expect(wrapper.vm.widgetParams.showMoreLimit).toBe(10);
-});
-
-it('accepts a sortBy prop', () => {
-  __setState({
-    ...defaultState,
-  });
-
-  const props = {
-    ...defaultProps,
-    sortBy: ['name:desc'],
-  };
-
-  const wrapper = mount(Menu, {
-    propsData: props,
-  });
-
-  expect(wrapper.vm.widgetParams.sortBy).toEqual(['name:desc']);
-});
-
-it('accepts a transformItems prop', () => {
-  __setState({
-    ...defaultState,
-  });
-
-  const transformItems = () => {};
-
-  const props = {
-    ...defaultProps,
-    transformItems,
-  };
-
-  const wrapper = mount(Menu, {
-    propsData: props,
-  });
-
-  expect(wrapper.vm.widgetParams.transformItems).toBe(transformItems);
-});
-
-describe('default render', () => {
-  it('renders correctly', () => {
-    __setState({ ...defaultState });
-
-    const wrapper = mount(Menu, {
-      propsData: defaultProps,
-    });
-
-    expect(wrapper.html()).toMatchSnapshot();
-  });
-
-  it('renders correctly without refinement', () => {
-    __setState({
-      ...defaultState,
-      items: [],
-      canRefine: false,
-    });
-
-    const wrapper = mount(Menu, {
-      propsData: defaultProps,
-    });
-
-    expect(wrapper.findAll('.ais-Menu--noRefinement')).toHaveLength(1);
-    expect(wrapper.html()).toMatchSnapshot();
-  });
-
-  it('renders correctly with a selected item', () => {
-    __setState({
-      ...defaultState,
-      items: [
-        apple,
-        {
-          ...samsung,
-          isRefined: true,
-        },
-        microsoft,
-      ],
-    });
-
-    const wrapper = mount(Menu, {
-      propsData: defaultProps,
-    });
-
-    expect(wrapper.findAll('.ais-Menu-item--selected')).toHaveLength(1);
-    expect(wrapper.find('.ais-Menu-item--selected .ais-Menu-link').html())
-      .toMatchInlineSnapshot(`
-<a class="ais-Menu-link">
-  <span class="ais-Menu-label">
-    Samsung
-  </span>
-  <span class="ais-Menu-count">
-    25
-  </span>
-</a>
-`);
-    expect(wrapper.html()).toMatchSnapshot();
-  });
-
-  it('renders correctly with a URL for the href', () => {
-    __setState({
-      ...defaultState,
-      createURL: (value) => `/brand/${value}`,
-    });
-
-    const wrapper = mount(Menu, {
-      propsData: defaultProps,
-    });
-
-    expect(wrapper.find('.ais-Menu-link').attributes().href).toBe(
-      '/brand/Apple'
-    );
-    expect(wrapper.html()).toMatchSnapshot();
-  });
-
-  it('renders correctly with show more button', () => {
-    __setState({ ...defaultState });
-
-    const wrapper = mount(Menu, {
-      propsData: {
-        ...defaultProps,
-        showMore: true,
-      },
-    });
-
-    expect(wrapper.findAll('.ais-Menu-showMore')).toHaveLength(1);
-    expect(wrapper.find('.ais-Menu-showMore').text()).toBe('Show more');
-    expect(wrapper.htmlCompat()).toMatchSnapshot();
-  });
-
-  it('renders correctly with show more button toggled', () => {
-    __setState({
-      ...defaultState,
-      isShowingMore: true,
-    });
-
-    const wrapper = mount(Menu, {
-      propsData: {
-        ...defaultProps,
-        showMore: true,
-      },
-    });
-
-    expect(wrapper.find('.ais-Menu-showMore').text()).toBe('Show less');
-    expect(wrapper.htmlCompat()).toMatchSnapshot();
-  });
-
-  it('renders correctly with a disabled show more button', () => {
-    __setState({
-      ...defaultState,
-      canToggleShowMore: false,
-    });
-
-    const wrapper = mount(Menu, {
-      propsData: {
-        ...defaultProps,
-        showMore: true,
-      },
-    });
-
-    const showMoreWrapper = wrapper.find('.ais-Menu-showMore');
-
-    expect(wrapper.findAll('.ais-Menu-showMore')).toHaveLength(1);
-    expect(showMoreWrapper.classes()).toContain('ais-Menu-showMore--disabled');
-    expect(showMoreWrapper).vueToBeDisabled();
-    expect(wrapper.htmlCompat()).toMatchSnapshot();
-  });
-
-  it('renders correctly without a show more button (canRefine)', () => {
-    __setState({
-      ...defaultState,
-      items: [],
-      canRefine: false,
-    });
-
-    const wrapper = mount(Menu, {
-      propsData: {
-        ...defaultProps,
-        showMore: true,
-      },
-    });
-
-    expect(wrapper.findAll('.ais-Menu-showMore')).toHaveLength(0);
-    expect(wrapper.html()).toMatchSnapshot();
-  });
-
-  it('renders correctly without a show more button (showMore)', () => {
-    __setState({ ...defaultState });
-
-    const wrapper = mount(Menu, {
-      propsData: {
-        ...defaultProps,
-        showMore: false,
-      },
-    });
-
-    expect(wrapper.findAll('.ais-Menu-showMore')).toHaveLength(0);
-    expect(wrapper.html()).toMatchSnapshot();
-  });
-
-  it('calls refine on link click', async () => {
-    const refine = jest.fn();
-
-    __setState({
-      ...defaultState,
-      refine,
-    });
-
-    const wrapper = mount(Menu, {
-      propsData: defaultProps,
-    });
-
-    await wrapper.find('.ais-Menu-link').trigger('click');
-
-    expect(refine).toHaveBeenCalledTimes(1);
-    expect(refine).toHaveBeenCalledWith('Apple');
-  });
-
-  it('calls toggleShowMore on button click', async () => {
-    const toggleShowMore = jest.fn();
-
-    __setState({
-      ...defaultState,
-      canToggleShowMore: true,
-      toggleShowMore,
-    });
-
-    const wrapper = mount(Menu, {
-      propsData: {
-        ...defaultProps,
-        showMore: true,
-      },
-    });
-
-    await wrapper.find('.ais-Menu-showMore').trigger('click');
-
-    expect(toggleShowMore).toHaveBeenCalledTimes(1);
-  });
-});
-
 it('exposes send-event method for insights middleware', async () => {
   const sendEvent = jest.fn();
   __setState({
-    ...defaultState,
     sendEvent,
   });
 
   const wrapper = mount({
     components: { Menu },
     data() {
-      return { props: defaultProps };
+      return {
+        props: {
+          attribute: 'brand',
+        },
+      };
     },
     template: `
       <Menu v-bind="props">
@@ -356,245 +39,3 @@ it('exposes send-event method for insights middleware', async () => {
   await wrapper.find('button').trigger('click');
   expect(sendEvent).toHaveBeenCalledTimes(1);
 });
-
-describe('custom default render', () => {
-  const defaultSlot = `
-    <template v-slot="state">
-      <div :class="[!state.canRefine && 'no-refinement']">
-        <ol>
-          <li
-            v-for="item in state.items"
-            :key="item.value"
-          >
-            <a
-              :href="state.createURL(item.value)"
-              @click.prevent="state.refine(item.value)"
-            >
-              {{item.label}} - {{item.count}}
-            </a>
-          </li>
-        </ol>
-        <button
-          :disabled="!state.canToggleShowMore"
-          @click.prevent="state.toggleShowMore"
-        >
-          {{ state.isShowingMore ? 'Show less' : 'Show more' }}
-        </button>
-      </div>
-    </template>
-  `;
-
-  it('renders correctly', () => {
-    __setState({ ...defaultState });
-
-    const wrapper = mount({
-      components: { Menu },
-      data() {
-        return { props: defaultProps };
-      },
-      template: `
-        <Menu v-bind="props">
-          ${defaultSlot}
-        </Menu>
-      `,
-    });
-
-    expect(wrapper.htmlCompat()).toMatchSnapshot();
-  });
-
-  it('renders correctly without refinement', () => {
-    __setState({
-      ...defaultState,
-      items: [],
-      canRefine: false,
-    });
-
-    const wrapper = mount({
-      components: { Menu },
-      data() {
-        return { props: defaultProps };
-      },
-      template: `
-        <Menu v-bind="props">
-          ${defaultSlot}
-        </Menu>
-      `,
-    });
-
-    expect(wrapper.htmlCompat()).toMatchSnapshot();
-  });
-
-  it('renders correctly with an URL for the href', () => {
-    __setState({
-      ...defaultState,
-      createURL: (value) => `/brand/${value}`,
-    });
-
-    const wrapper = mount({
-      components: { Menu },
-      data() {
-        return { props: defaultProps };
-      },
-      template: `
-        <Menu v-bind="props">
-          ${defaultSlot}
-        </Menu>
-      `,
-    });
-
-    expect(wrapper.htmlCompat()).toMatchSnapshot();
-  });
-
-  it('renders correctly with a show more button toggled', () => {
-    __setState({
-      ...defaultState,
-      isShowingMore: true,
-    });
-
-    const wrapper = mount({
-      components: { Menu },
-      data() {
-        return { props: defaultProps };
-      },
-      template: `
-        <Menu v-bind="props">
-          ${defaultSlot}
-        </Menu>
-      `,
-    });
-
-    expect(wrapper.htmlCompat()).toMatchSnapshot();
-  });
-
-  it('renders correctly with a disabled show more button', () => {
-    __setState({
-      ...defaultState,
-      canToggleShowMore: false,
-    });
-
-    const wrapper = mount({
-      components: { Menu },
-      data() {
-        return { props: defaultProps };
-      },
-      template: `
-        <Menu v-bind="props">
-          ${defaultSlot}
-        </Menu>
-      `,
-    });
-
-    expect(wrapper.htmlCompat()).toMatchSnapshot();
-  });
-
-  it('calls refine on link click', async () => {
-    const refine = jest.fn();
-
-    __setState({
-      ...defaultState,
-      refine,
-    });
-
-    const wrapper = mount({
-      components: { Menu },
-      data() {
-        return { props: defaultProps };
-      },
-      template: `
-        <Menu v-bind="props">
-          ${defaultSlot}
-        </Menu>
-      `,
-    });
-
-    await wrapper.find('a').trigger('click');
-
-    expect(refine).toHaveBeenCalledTimes(1);
-    expect(refine).toHaveBeenCalledWith('Apple');
-  });
-
-  it('calls toggleShowMore on button click', async () => {
-    const toggleShowMore = jest.fn();
-
-    __setState({
-      ...defaultState,
-      canToggleShowMore: true,
-      toggleShowMore,
-    });
-
-    const wrapper = mount({
-      components: { Menu },
-      data() {
-        return { props: defaultProps };
-      },
-      template: `
-        <Menu v-bind="props">
-          ${defaultSlot}
-        </Menu>
-      `,
-    });
-
-    await wrapper.find('button').trigger('click');
-
-    expect(toggleShowMore).toHaveBeenCalledTimes(1);
-  });
-});
-
-describe('custom showMoreLabel render', () => {
-  const showMoreLabelSlot = `
-    <template v-slot:showMoreLabel="{ isShowingMore }">
-      <span>
-        {{ isShowingMore ? 'Voir moins' : 'Voir plus' }}
-      </span>
-    </template>
-  `;
-
-  it('renders correctly with a custom show more label', () => {
-    __setState({ ...defaultState });
-
-    const props = {
-      ...defaultProps,
-      showMore: true,
-    };
-    const wrapper = mount({
-      components: { Menu },
-      data() {
-        return { props };
-      },
-      template: `
-        <Menu v-bind="props">
-          ${showMoreLabelSlot}
-        </Menu>
-      `,
-    });
-
-    expect(wrapper.find('.ais-Menu-showMore').text()).toBe('Voir plus');
-    expect(wrapper.htmlCompat()).toMatchSnapshot();
-  });
-
-  it('renders correctly with a custom show more label toggled', () => {
-    __setState({
-      ...defaultState,
-      isShowingMore: true,
-    });
-
-    const props = {
-      ...defaultProps,
-      showMore: true,
-    };
-    const wrapper = mount({
-      components: { Menu },
-      data() {
-        return { props };
-      },
-      template: `
-        <Menu v-bind="props">
-          ${showMoreLabelSlot}
-        </Menu>
-      `,
-    });
-
-    expect(wrapper.find('.ais-Menu-showMore').text()).toBe('Voir moins');
-    expect(wrapper.htmlCompat()).toMatchSnapshot();
-  });
-});