vue-instantsearch 4.17.2 → 4.17.4

package/package.json

@@ -16,7 +16,7 @@
     "autocomplete"
   ],
   "license": "MIT",
-  "version": "4.17.2",
+  "version": "4.17.4",
   "files": [
     "vue2",
     "vue3",
@@ -36,8 +36,8 @@
     "watch:es": "yarn --silent build --watch"
   },
   "dependencies": {
-    "instantsearch-ui-components": "0.6.0",
-    "instantsearch.js": "4.71.0",
+    "instantsearch-ui-components": "0.7.0",
+    "instantsearch.js": "4.72.0",
     "mitt": "^2.1.0"
   },
   "peerDependencies": {
@@ -62,7 +62,7 @@
     "@vue/test-utils": "1.3.0",
     "@vue/test-utils2": "npm:@vue/test-utils@2.0.0-rc.11",
     "algoliasearch": "4.23.2",
-    "algoliasearch-helper": "3.21.0",
+    "algoliasearch-helper": "3.22.0",
     "instantsearch.css": "8.2.1",
     "rollup": "1.32.1",
     "rollup-plugin-babel": "4.4.0",
@@ -89,5 +89,5 @@
     "vuex": "3.5.1",
     "vuex4": "npm:vuex@4.0.0"
   },
-  "gitHead": "3707501a19e582e8263a3ae5a9d51ff3f5263361"
+  "gitHead": "0b125d8a3fb2a5905aea9b6b540e07ab91649215"
 }

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

@@ -26,6 +26,8 @@ import {
   AisStats,
   AisRatingMenu,
   AisNumericMenu,
+  AisPoweredBy,
+  AisMenuSelect,
 } from '../instantsearch';
 import { renderCompat } from '../util/vue-compat';
 
@@ -520,6 +522,38 @@ const testSetups = {
   createLookingSimilarWidgetTests() {
     throw new Error('LookingSimilar is not supported in Vue InstantSearch');
   },
+  createPoweredByWidgetTests({ instantSearchOptions, widgetParams }) {
+    mountApp(
+      {
+        render: renderCompat((h) =>
+          h(AisInstantSearch, { props: instantSearchOptions }, [
+            h(AisPoweredBy, { props: widgetParams }),
+            h(GlobalErrorSwallower),
+          ])
+        ),
+      },
+      document.body.appendChild(document.createElement('div'))
+    );
+
+    return {
+      flavor: 'vue-instantsearch',
+    };
+  },
+  async createMenuSelectWidgetTests({ instantSearchOptions, widgetParams }) {
+    mountApp(
+      {
+        render: renderCompat((h) =>
+          h(AisInstantSearch, { props: instantSearchOptions }, [
+            h(AisMenuSelect, { props: widgetParams }),
+            h(GlobalErrorSwallower),
+          ])
+        ),
+      },
+      document.body.appendChild(document.createElement('div'))
+    );
+
+    await nextTick();
+  },
 };
 
 const testOptions = {
@@ -556,6 +590,7 @@ const testOptions = {
   createLookingSimilarWidgetTests: {
     skippedTests: { 'LookingSimilar widget common tests': true },
   },
+  createPoweredByWidgetTests: undefined,
 };
 
 describe('Common widget tests (Vue InstantSearch)', () => {

package/src/components/PoweredBy.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="suit()">
+  <div :class="[suit(), suit('', theme)]">
     <a
       :class="suit('link')"
       :href="algoliaUrl"
@@ -13,7 +13,7 @@
         viewBox="0 0 572 64"
       >
         <path
-          :fill="theme === 'dark' ? '#FFF' : '#36395a'"
+          :fill="theme === 'dark' ? '#FFF' : '#36395A'"
           d="M16 48.3c-3.4 0-6.3-.6-8.7-1.7A12.4 12.4 0 0 1 1.9 42C.6 40 0 38 0 35.4h6.5a6.7 6.7 0 0 0 3.9 6c1.4.7 3.3 1.1 5.6 1.1 2.2 0 4-.3 5.4-1a7 7 0 0 0 3-2.4 6 6 0 0 0 1-3.4c0-1.5-.6-2.8-1.9-3.7-1.3-1-3.3-1.6-5.9-1.8l-4-.4c-3.7-.3-6.6-1.4-8.8-3.4a10 10 0 0 1-3.3-7.9c0-2.4.6-4.6 1.8-6.4a12 12 0 0 1 5-4.3c2.2-1 4.7-1.6 7.5-1.6s5.5.5 7.6 1.6a12 12 0 0 1 5 4.4c1.2 1.8 1.8 4 1.8 6.7h-6.5a6.4 6.4 0 0 0-3.5-5.9c-1-.6-2.6-1-4.4-1s-3.2.3-4.4 1c-1.1.6-2 1.4-2.6 2.4-.5 1-.8 2-.8 3.1a5 5 0 0 0 1.5 3.6c1 1 2.6 1.7 4.7 1.9l4 .3c2.8.2 5.2.8 7.2 1.8 2.1 1 3.7 2.2 4.9 3.8a9.7 9.7 0 0 1 1.7 5.8c0 2.5-.7 4.7-2 6.6a13 13 0 0 1-5.6 4.4c-2.4 1-5.2 1.6-8.4 1.6Zm35.6 0c-2.6 0-4.8-.4-6.7-1.3a13 13 0 0 1-4.7-3.5 17.1 17.1 0 0 1-3.6-10.4v-1c0-2 .3-3.8 1-5.6a13 13 0 0 1 7.3-8.3 15 15 0 0 1 6.3-1.4A13.2 13.2 0 0 1 64 24.3c1 2.2 1.6 4.6 1.6 7.2V34H39.4v-4.3h21.8l-1.8 2.2c0-2-.3-3.7-.9-5.1a7.3 7.3 0 0 0-2.7-3.4c-1.2-.7-2.7-1.1-4.6-1.1s-3.4.4-4.7 1.3a8 8 0 0 0-2.9 3.6c-.6 1.5-.9 3.3-.9 5.4 0 2 .3 3.7 1 5.3a7.9 7.9 0 0 0 2.8 3.7c1.3.8 3 1.3 5 1.3s3.8-.5 5.1-1.3c1.3-1 2.1-2 2.4-3.2h6a11.8 11.8 0 0 1-7 8.7 16 16 0 0 1-6.4 1.2ZM80 48c-2.2 0-4-.3-5.7-1a8.4 8.4 0 0 1-3.7-3.3 9.7 9.7 0 0 1-1.3-5.2c0-2 .5-3.8 1.5-5.2a9 9 0 0 1 4.3-3.1c1.8-.7 4-1 6.7-1H89v4.1h-7.5c-2 0-3.4.5-4.4 1.4-1 1-1.6 2.1-1.6 3.6s.5 2.7 1.6 3.6c1 1 2.5 1.4 4.4 1.4 1.1 0 2.2-.2 3.2-.7 1-.4 1.9-1 2.6-2 .6-1 1-2.4 1-4.2l1.7 2.1c-.2 2-.7 3.8-1.5 5.2a9 9 0 0 1-3.4 3.3 12 12 0 0 1-5.3 1Zm9.5-.7v-8.8h-1v-10c0-1.8-.5-3.2-1.4-4.1-1-1-2.4-1.4-4.2-1.4a142.9 142.9 0 0 0-10.2.4v-5.6a74.8 74.8 0 0 1 8.6-.4c3 0 5.5.4 7.5 1.2s3.4 2 4.4 3.6c1 1.7 1.4 4 1.4 6.7v18.4h-5Zm12.9 0V17.8h5v12.3h-.2c0-4.2 1-7.4 2.8-9.5a11 11 0 0 1 8.3-3.1h1v5.6h-2a9 9 0 0 0-6.3 2.2c-1.5 1.5-2.2 3.6-2.2 6.4v15.6h-6.4Zm34.4 1a15 15 0 0 1-6.6-1.3c-1.9-.9-3.4-2-4.7-3.5a15.5 15.5 0 0 1-2.7-5c-.6-1.7-1-3.6-1-5.4v-1c0-2 .4-3.8 1-5.6a15 15 0 0 1 2.8-4.9c1.3-1.5 2.8-2.6 4.6-3.5a16.4 16.4 0 0 1 13.3.2c2 1 3.5 2.3 4.8 4a12 12 0 0 1 2 6H144c-.2-1.6-1-3-2.2-4.1a7.5 7.5 0 0 0-5.2-1.7 8 8 0 0 0-4.7 1.3 8 8 0 0 0-2.8 3.6 13.8 13.8 0 0 0 0 10.3c.6 1.5 1.5 2.7 2.8 3.6s2.8 1.3 4.8 1.3c1.5 0 2.7-.2 3.8-.8a7 7 0 0 0 2.6-2c.7-1 1-2 1.2-3.2h6.2a11 11 0 0 1-2 6.2 15.1 15.1 0 0 1-11.8 5.5Zm19.7-1v-40h6.4V31h-1.3c0-3 .4-5.5 1.1-7.6a9.7 9.7 0 0 1 3.5-4.8A9.9 9.9 0 0 1 172 17h.3c3.5 0 6 1.1 7.9 3.5 1.7 2.3 2.6 5.7 2.6 10v16.8h-6.4V29.6c0-2.1-.6-3.8-1.8-5a6.4 6.4 0 0 0-4.8-1.8c-2 0-3.7.7-5 2a7.8 7.8 0 0 0-1.9 5.5v17h-6.4Zm63.8 1a12.2 12.2 0 0 1-10.9-6.2 19 19 0 0 1-1.8-7.3h1.4v12.5h-5.1v-40h6.4v19.8l-2 3.5c.2-3.1.8-5.7 1.9-7.7a11 11 0 0 1 4.4-4.5c1.8-1 3.9-1.5 6.1-1.5a13.4 13.4 0 0 1 12.8 9.1c.7 1.9 1 3.8 1 6v1c0 2.2-.3 4.1-1 6a13.6 13.6 0 0 1-13.2 9.4Zm-1.2-5.5a8.4 8.4 0 0 0 7.9-5c.7-1.5 1.1-3.3 1.1-5.3s-.4-3.8-1.1-5.3a8.7 8.7 0 0 0-3.2-3.6 9.6 9.6 0 0 0-9.2-.2 8.5 8.5 0 0 0-3.3 3.2c-.8 1.4-1.3 3-1.3 5v2.3a9 9 0 0 0 1.3 4.8 9 9 0 0 0 3.4 3c1.4.7 2.8 1 4.4 1Zm27.3 3.9-10-28.9h6.5l9.5 28.9h-6Zm-7.5 12.2v-5.7h4.9c1 0 2-.1 2.9-.4a4 4 0 0 0 2-1.4c.4-.7.9-1.6 1.2-2.7l8.6-30.9h6.2l-9.3 32.4a14 14 0 0 1-2.5 5 8.9 8.9 0 0 1-4 2.8c-1.5.6-3.4.9-5.6.9h-4.4Zm9-12.2v-5.2h6.4v5.2H248Z"
         />
         <path

package/src/components/__tests__/MenuSelect.js

@@ -23,92 +23,7 @@ const defaultProps = {
   attribute: 'brand',
 };
 
-it('accepts an attribute prop', () => {
-  __setState({
-    ...defaultState,
-  });
-
-  const props = {
-    ...defaultProps,
-  };
-
-  const wrapper = mount(MenuSelect, {
-    propsData: props,
-  });
-
-  expect(wrapper.vm.widgetParams.attribute).toBe('brand');
-});
-
-it('accepts a limit prop', () => {
-  __setState({
-    ...defaultState,
-  });
-
-  const props = {
-    ...defaultProps,
-    limit: 5,
-  };
-
-  const wrapper = mount(MenuSelect, {
-    propsData: props,
-  });
-
-  expect(wrapper.vm.widgetParams.limit).toBe(5);
-});
-
-it('accepts a sortBy prop', () => {
-  __setState({
-    ...defaultState,
-  });
-
-  const props = {
-    ...defaultProps,
-    sortBy: ['name:desc'],
-  };
-
-  const wrapper = mount(MenuSelect, {
-    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(MenuSelect, {
-    propsData: props,
-  });
-
-  expect(wrapper.vm.widgetParams.transformItems).toBe(transformItems);
-});
-
 describe('default render', () => {
-  it('renders correctly', () => {
-    __setState({
-      ...defaultState,
-    });
-
-    const props = {
-      ...defaultProps,
-    };
-
-    const wrapper = mount(MenuSelect, {
-      propsData: props,
-    });
-
-    expect(wrapper.html()).toMatchSnapshot();
-  });
-
   it('renders correctly with custom label', () => {
     __setState({
       ...defaultState,
@@ -129,81 +44,6 @@ describe('default render', () => {
     expect(wrapper.find('option').html()).toContain('None');
     expect(wrapper.html()).toMatchSnapshot();
   });
-
-  it('renders correctly with a selected value', () => {
-    __setState({
-      ...defaultState,
-      items: [
-        { label: 'Apple', value: 'Apple', isRefined: false, count: 50 },
-        { label: 'Samsung', value: 'Samsung', isRefined: true, count: 20 },
-        { label: 'Sony', value: 'Sony', isRefined: false, count: 15 },
-      ],
-    });
-
-    const props = {
-      ...defaultProps,
-    };
-
-    const wrapper = mount(MenuSelect, {
-      propsData: props,
-    });
-
-    const selected = wrapper.find('[value="Samsung"]');
-    const options = wrapper.findAll('option:not([value="Samsung"])');
-
-    expect(selected.element.selected).toBe(true);
-
-    for (let i = 0; i < options.length; i++) {
-      expect((options[i] || options.at(i)).element.selected).toBe(false);
-    }
-  });
-
-  it('renders correctly without refinements', () => {
-    __setState({
-      ...defaultState,
-      canRefine: false,
-      items: [],
-    });
-
-    const props = {
-      ...defaultProps,
-    };
-
-    const wrapper = mount(MenuSelect, {
-      propsData: props,
-    });
-
-    expect(wrapper.html()).toMatchSnapshot();
-  });
-
-  it('calls refine on select change', async () => {
-    const refine = jest.fn();
-
-    __setState({
-      ...defaultState,
-      refine,
-    });
-
-    const props = {
-      ...defaultProps,
-    };
-
-    const wrapper = mount(MenuSelect, {
-      propsData: props,
-    });
-
-    expect(refine).not.toHaveBeenCalled();
-
-    const select = wrapper.find('select');
-
-    // Simulate the change
-    select.element.value = 'Apple';
-
-    await select.trigger('change');
-
-    expect(refine).toHaveBeenCalledTimes(1);
-    expect(refine).toHaveBeenCalledWith('Apple');
-  });
 });
 
 it('exposes send-event method for insights middleware', async () => {

package/src/components/__tests__/RangeInput.js

@@ -26,233 +26,6 @@ const defaultProps = {
   attribute: 'price',
 };
 
-it('accepts an attribute prop', () => {
-  __setState({
-    ...defaultState,
-  });
-
-  const wrapper = mount(RangeInput, {
-    propsData: {
-      ...defaultProps,
-    },
-  });
-
-  expect(wrapper.vm.widgetParams.attribute).toBe('price');
-});
-
-it('accepts a min prop', () => {
-  __setState({
-    ...defaultState,
-  });
-
-  const wrapper = mount(RangeInput, {
-    propsData: {
-      ...defaultProps,
-      min: 10,
-    },
-  });
-
-  expect(wrapper.vm.widgetParams.min).toBe(10);
-});
-
-it('accepts a max prop', () => {
-  __setState({
-    ...defaultState,
-  });
-
-  const wrapper = mount(RangeInput, {
-    propsData: {
-      ...defaultProps,
-      max: 500,
-    },
-  });
-
-  expect(wrapper.vm.widgetParams.max).toBe(500);
-});
-
-it('accepts a precision prop', () => {
-  __setState({
-    ...defaultState,
-  });
-
-  const wrapper = mount(RangeInput, {
-    propsData: {
-      ...defaultProps,
-      precision: 3,
-    },
-  });
-
-  expect(wrapper.vm.widgetParams.precision).toBe(3);
-});
-
-describe('rendering', () => {
-  it('displays correctly with default', () => {
-    __setState({
-      ...defaultState,
-    });
-
-    const wrapper = mount(RangeInput, {
-      propsData: defaultProps,
-    });
-
-    expect(wrapper.html()).toMatchSnapshot();
-  });
-
-  it('displays correctly with a min', () => {
-    __setState({
-      ...defaultState,
-      range: {
-        ...defaultRange,
-        min: 100,
-      },
-    });
-
-    const wrapper = mount(RangeInput, {
-      propsData: {
-        ...defaultProps,
-      },
-    });
-
-    expect(wrapper.html()).toMatchSnapshot();
-  });
-
-  it('displays correctly with a max', () => {
-    __setState({
-      ...defaultState,
-      range: {
-        ...defaultRange,
-        max: 100,
-      },
-    });
-
-    const wrapper = mount(RangeInput, {
-      propsData: {
-        ...defaultProps,
-      },
-    });
-
-    expect(wrapper.html()).toMatchSnapshot();
-  });
-
-  it('displays correctly with a min and a max', () => {
-    __setState({
-      ...defaultState,
-      range: {
-        min: 10,
-        max: 37,
-      },
-    });
-
-    const wrapper = mount(RangeInput, {
-      propsData: {
-        ...defaultProps,
-      },
-    });
-
-    expect(wrapper.html()).toMatchSnapshot();
-  });
-
-  it('displays correctly with a min refinement', () => {
-    __setState({
-      ...defaultState,
-      start: [10, 500],
-    });
-
-    const wrapper = mount(RangeInput, {
-      propsData: {
-        ...defaultProps,
-      },
-    });
-
-    expect(wrapper.find('.ais-RangeInput-input--min').element.value).toBe('10');
-  });
-
-  it('displays correctly with a min refinement equal -Infinity', () => {
-    __setState({
-      ...defaultState,
-      start: [-Infinity, 500],
-    });
-
-    const wrapper = mount(RangeInput, {
-      propsData: {
-        ...defaultProps,
-      },
-    });
-
-    expect(wrapper.find('.ais-RangeInput-input--min').element.value).toBe('');
-  });
-
-  it('displays correctly with a min refinement equal to min range', () => {
-    __setState({
-      ...defaultState,
-      start: [10, 500],
-      range: {
-        ...defaultRange,
-        min: 10,
-      },
-    });
-
-    const wrapper = mount(RangeInput, {
-      propsData: {
-        ...defaultProps,
-      },
-    });
-
-    expect(wrapper.find('.ais-RangeInput-input--min').element.value).toBe('');
-  });
-
-  it('displays correctly with a max refinement', () => {
-    __setState({
-      ...defaultState,
-      start: [10, 500],
-    });
-
-    const wrapper = mount(RangeInput, {
-      propsData: {
-        ...defaultProps,
-      },
-    });
-
-    expect(wrapper.find('.ais-RangeInput-input--max').element.value).toBe(
-      '500'
-    );
-  });
-
-  it('displays correctly with a max refinement equal Infinity', () => {
-    __setState({
-      ...defaultState,
-      start: [10, Infinity],
-    });
-
-    const wrapper = mount(RangeInput, {
-      propsData: {
-        ...defaultProps,
-      },
-    });
-
-    expect(wrapper.find('.ais-RangeInput-input--max').element.value).toBe('');
-  });
-
-  it('displays correctly with a max refinement equal to max range', () => {
-    __setState({
-      ...defaultState,
-      start: [10, 500],
-      range: {
-        ...defaultRange,
-        max: 500,
-      },
-    });
-
-    const wrapper = mount(RangeInput, {
-      propsData: {
-        ...defaultProps,
-      },
-    });
-
-    expect(wrapper.find('.ais-RangeInput-input--max').element.value).toBe('');
-  });
-});
-
 it('exposes send-event method for insights middleware', async () => {
   const sendEvent = jest.fn();
   __setState({
@@ -279,93 +52,3 @@ it('exposes send-event method for insights middleware', async () => {
   await wrapper.find('button').trigger('click');
   expect(sendEvent).toHaveBeenCalledTimes(1);
 });
-
-describe('refinement', () => {
-  it('uses the value of the inputs when the form is submited', async () => {
-    const refine = jest.fn();
-
-    __setState({
-      ...defaultState,
-      refine,
-    });
-
-    const wrapper = mount(RangeInput, {
-      propsData: {
-        attribute: 'price',
-      },
-    });
-
-    const minInput = wrapper.find('.ais-RangeInput-input--min');
-    minInput.element.value = 100;
-    await minInput.trigger('change');
-
-    const maxInput = wrapper.find('.ais-RangeInput-input--max');
-    maxInput.element.value = 106;
-    await maxInput.trigger('change');
-
-    const form = wrapper.find('form');
-    await form.trigger('submit');
-
-    expect(refine).toHaveBeenLastCalledWith(['100', '106']);
-  });
-
-  it('refines correctly when `start` given and user clicks submit without changing input field', async () => {
-    const refine = jest.fn();
-    __setState({
-      refine,
-      start: [50, 100],
-      range: {
-        min: 1,
-        max: 5000,
-      },
-    });
-
-    const wrapper = mount(RangeInput, {
-      propsData: {
-        ...defaultProps,
-      },
-    });
-
-    const form = wrapper.find('form');
-    await form.trigger('submit');
-
-    expect(refine).toHaveBeenCalledTimes(1);
-    expect(refine).toHaveBeenCalledWith([50, 100]);
-  });
-
-  it('refines correctly even when state changes', async () => {
-    const refine = jest.fn();
-    __setState({
-      ...defaultState,
-      refine,
-    });
-
-    const wrapper = mount(RangeInput, {
-      propsData: {
-        ...defaultProps,
-      },
-    });
-
-    // refine for the first time
-    const minInput = wrapper.find('.ais-RangeInput-input--min');
-    minInput.element.value = 10;
-    await minInput.trigger('change');
-
-    const maxInput = wrapper.find('.ais-RangeInput-input--max');
-    maxInput.element.value = 100;
-    await maxInput.trigger('change');
-
-    const form = wrapper.find('form');
-    await form.trigger('submit');
-
-    expect(refine).toHaveBeenCalledTimes(1);
-    expect(refine).toHaveBeenCalledWith(['10', '100']);
-
-    // update the state
-    await wrapper.setData({ state: { start: [50, 200] } }); // min: 10 -> 50, max: 100 -> 200
-
-    await form.trigger('submit');
-    expect(refine).toHaveBeenCalledTimes(2);
-    expect(refine).toHaveBeenCalledWith([50, 200]);
-  });
-});

package/src/components/__tests__/__snapshots__/MenuSelect.js.snap

@@ -62,33 +62,6 @@ exports[`custom item slot renders correctly 1`] = `
 </div>
 `;
 
-exports[`default render renders correctly 1`] = `
-<div class="ais-MenuSelect">
-  <select class="ais-MenuSelect-select">
-    <option class="ais-MenuSelect-option"
-            value
-    >
-      See all
-    </option>
-    <option class="ais-MenuSelect-option"
-            value="Apple"
-    >
-      Apple (50)
-    </option>
-    <option class="ais-MenuSelect-option"
-            value="Samsung"
-    >
-      Samsung (20)
-    </option>
-    <option class="ais-MenuSelect-option"
-            value="Sony"
-    >
-      Sony (15)
-    </option>
-  </select>
-</div>
-`;
-
 exports[`default render renders correctly with custom label 1`] = `
 <div class="ais-MenuSelect">
   <select class="ais-MenuSelect-select">
@@ -117,15 +90,3 @@ exports[`default render renders correctly with custom label 1`] = `
   </select>
 </div>
 `;
-
-exports[`default render renders correctly without refinements 1`] = `
-<div class="ais-MenuSelect ais-MenuSelect--noRefinement">
-  <select class="ais-MenuSelect-select">
-    <option class="ais-MenuSelect-option"
-            value
-    >
-      See all
-    </option>
-  </select>
-</div>
-`;