vue-instantsearch 4.17.0 → 4.17.2

package/package.json

@@ -16,7 +16,7 @@
     "autocomplete"
   ],
   "license": "MIT",
-  "version": "4.17.0",
+  "version": "4.17.2",
   "files": [
     "vue2",
     "vue3",
@@ -37,7 +37,7 @@
   },
   "dependencies": {
     "instantsearch-ui-components": "0.6.0",
-    "instantsearch.js": "4.69.0",
+    "instantsearch.js": "4.71.0",
     "mitt": "^2.1.0"
   },
   "peerDependencies": {
@@ -62,8 +62,8 @@
     "@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.20.0",
-    "instantsearch.css": "8.2.0",
+    "algoliasearch-helper": "3.21.0",
+    "instantsearch.css": "8.2.1",
     "rollup": "1.32.1",
     "rollup-plugin-babel": "4.4.0",
     "rollup-plugin-buble": "0.19.6",
@@ -89,5 +89,5 @@
     "vuex": "3.5.1",
     "vuex4": "npm:vuex@4.0.0"
   },
-  "gitHead": "95ec6c4ce746c77eeb92fab1e42b5f833f3f04bc"
+  "gitHead": "3707501a19e582e8263a3ae5a9d51ff3f5263361"
 }

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

@@ -174,6 +174,9 @@ const testSetups = {
                   ),
               },
             }),
+            h('div', { attrs: { id: 'hits-with-defaults' } }, [
+              h(AisInfiniteHits, { props: widgetParams }),
+            ]),
             h(AisIndex, { props: { indexName: 'nested' } }, [
               h(AisInfiniteHits, {
                 attrs: { id: 'nested-hits' },

package/src/components/Hits.js

@@ -29,9 +29,6 @@ export default {
     },
   },
   computed: {
-    items() {
-      return this.state.hits;
-    },
     widgetParams() {
       return {
         escapeHTML: this.escapeHTML,
@@ -91,7 +88,7 @@ export default {
         },
         [
           defaultSlot({
-            items: this.state.hits,
+            items: this.state.items,
             insights: this.state.insights,
             sendEvent: this.state.sendEvent,
           }),
@@ -100,7 +97,7 @@ export default {
     }
 
     return h(createHitsComponent({ createElement: h }), {
-      hits: this.state.hits,
+      hits: this.state.items,
       itemComponent,
       sendEvent: this.state.sendEvent,
       classNames: this.classNames && {

package/src/components/InfiniteHits.vue

@@ -20,7 +20,7 @@
     </slot>
 
     <slot
-      :items="items"
+      :items="state.items"
       :results="state.results"
       :is-last-page="state.isLastPage"
       :refine-previous="refinePrevious"
@@ -31,7 +31,7 @@
     >
       <ol :class="suit('list')">
         <li
-          v-for="(item, index) in items"
+          v-for="(item, index) in state.items"
           :class="suit('item')"
           :key="item.objectID"
           @click="state.sendEvent('click:internal', item, 'Hit Clicked')"
@@ -117,11 +117,6 @@ export default {
         cache: this.cache,
       };
     },
-    items() {
-      // Fixes InstantSearch.js connectors API: every list
-      // of things must be called `items`
-      return this.state.hits;
-    },
   },
   methods: {
     refinePrevious() {

package/src/components/RatingMenu.vue

@@ -7,7 +7,7 @@
       :send-event="state.sendEvent"
       :can-refine="state.canRefine"
     >
-      <svg xmlns="http://www.w3.org/2000/svg" style="display: none">
+      <svg style="display: none">
         <symbol id="ais-RatingMenu-starSymbol" viewBox="0 0 24 24">
           <path
             d="M12 .288l2.833 8.718h9.167l-7.417 5.389 2.833 8.718-7.416-5.388-7.417 5.388 2.833-8.718-7.416-5.389h9.167z"
@@ -26,41 +26,43 @@
           :key="key"
           :class="[suit('item'), item.isRefined && suit('item', 'selected')]"
         >
-          <a
-            :href="state.createURL(item.value)"
-            :aria-label="`${item.value} & Up`"
-            :class="suit('link')"
-            @click.prevent="state.refine(item.value)"
-          >
-            <template v-for="(full, n) in item.stars">
-              <svg
-                v-if="full"
-                aria-hidden="true"
-                width="24"
-                height="24"
-                :class="[suit('starIcon'), suit('starIcon--full')]"
-                :key="n + '-full'"
-              >
-                <use xlink:href="#ais-RatingMenu-starSymbol" />
-              </svg>
+          <div>
+            <a
+              :href="state.createURL(item.value)"
+              :aria-label="`${item.value} & up`"
+              :class="suit('link')"
+              @click.prevent="state.refine(item.value)"
+            >
+              <template v-for="(full, n) in item.stars">
+                <svg
+                  v-if="full"
+                  aria-hidden="true"
+                  width="24"
+                  height="24"
+                  :class="[suit('starIcon'), suit('starIcon--full')]"
+                  :key="n + '-full'"
+                >
+                  <use xlink:href="#ais-RatingMenu-starSymbol" />
+                </svg>
 
-              <svg
-                v-else
-                :class="[suit('starIcon'), suit('starIcon--empty')]"
-                aria-hidden="true"
-                width="24"
-                height="24"
-                :key="n + '-empty'"
-              >
-                <use xlink:href="#ais-RatingMenu-starEmptySymbol" />
-              </svg>
-            </template>
+                <svg
+                  v-else
+                  :class="[suit('starIcon'), suit('starIcon--empty')]"
+                  aria-hidden="true"
+                  width="24"
+                  height="24"
+                  :key="n + '-empty'"
+                >
+                  <use xlink:href="#ais-RatingMenu-starEmptySymbol" />
+                </svg>
+              </template>
 
-            <span :class="suit('label')" aria-hidden="true">
-              <slot name="andUp">&amp; Up</slot>
-            </span>
-            <span :class="suit('count')">{{ item.count }}</span>
-          </a>
+              <span :class="suit('label')" aria-hidden="true">
+                <slot name="andUp">&amp; Up</slot>
+              </span>
+              <span :class="suit('count')">{{ item.count }}</span>
+            </a>
+          </div>
         </li>
       </ul>
     </slot>

package/src/components/__tests__/Hits.js

@@ -10,7 +10,7 @@ import '../../../test/utils/sortedHtmlSerializer';
 jest.mock('../../mixins/widget');
 
 const defaultState = {
-  hits: [{ objectID: 'one' }, { objectID: 'two' }],
+  items: [{ objectID: 'one' }, { objectID: 'two' }],
   sendEvent: jest.fn(),
 };
 

package/src/components/__tests__/InfiniteHits.js

@@ -16,7 +16,7 @@ const defaultState = {
     transformItems: (items) => items,
   },
   sendEvent: jest.fn(),
-  hits: [
+  items: [
     {
       objectID: '00001',
     },
@@ -42,79 +42,6 @@ const defaultState = {
   showPrevious: () => {},
 };
 
-it('accepts a escapeHTML prop', () => {
-  __setState({
-    ...defaultState,
-  });
-
-  const wrapper = mount(InfiniteHits, {
-    propsData: {
-      escapeHTML: true,
-    },
-  });
-
-  expect(wrapper.vm.widgetParams.escapeHTML).toBe(true);
-});
-
-it('accepts a transformItems prop', () => {
-  __setState({
-    ...defaultState,
-  });
-
-  const transformItems = () => {};
-
-  const wrapper = mount(InfiniteHits, {
-    propsData: {
-      transformItems,
-    },
-  });
-
-  expect(wrapper.vm.widgetParams.transformItems).toBe(transformItems);
-});
-
-it('accepts a showPrevious prop', () => {
-  __setState({
-    ...defaultState,
-  });
-
-  const wrapper = mount(InfiniteHits, {
-    propsData: {
-      showPrevious: true,
-    },
-  });
-
-  expect(wrapper.vm.widgetParams.showPrevious).toBe(true);
-});
-
-it('accepts a cache prop', () => {
-  __setState({
-    ...defaultState,
-  });
-
-  const cache = {
-    read: () => {},
-    write: () => {},
-  };
-
-  const wrapper = mount(InfiniteHits, {
-    propsData: {
-      cache,
-    },
-  });
-
-  expect(wrapper.vm.widgetParams.cache).toEqual(cache);
-});
-
-it('renders correctly', () => {
-  __setState({
-    ...defaultState,
-  });
-
-  const wrapper = mount(InfiniteHits);
-
-  expect(wrapper.html()).toMatchSnapshot();
-});
-
 it('renders correctly with a custom rendering', () => {
   __setState({
     ...defaultState,
@@ -159,100 +86,6 @@ it('renders correctly with a custom item rendering', () => {
   expect(wrapper.html()).toMatchSnapshot();
 });
 
-it('renders correctly on the first page', () => {
-  __setState({
-    ...defaultState,
-    isFirstPage: true,
-  });
-
-  const wrapper = mount(InfiniteHits, {
-    propsData: {
-      showPrevious: true,
-    },
-  });
-
-  const previousButton = wrapper.find('.ais-InfiniteHits-loadPrevious');
-
-  expect(previousButton.exists()).toEqual(true);
-  expect(
-    previousButton.classes('ais-InfiniteHits-loadPrevious--disabled')
-  ).toEqual(true);
-  expect(previousButton).vueToBeDisabled();
-  expect(wrapper.htmlCompat()).toMatchSnapshot();
-});
-
-it('renders correctly on the last page', () => {
-  __setState({
-    ...defaultState,
-    isLastPage: true,
-  });
-
-  const wrapper = mount(InfiniteHits);
-
-  expect(wrapper.htmlCompat()).toMatchSnapshot();
-});
-
-it('renders correctly when not on the first page', () => {
-  __setState({
-    ...defaultState,
-    isFirstPage: false,
-    isLastPage: false,
-  });
-
-  const wrapper = mount(InfiniteHits, {
-    propsData: {
-      showPrevious: true,
-    },
-  });
-
-  const previousButton = wrapper.find('.ais-InfiniteHits-loadPrevious');
-
-  expect(previousButton.exists()).toEqual(true);
-  expect(
-    previousButton.classes('ais-InfiniteHits-loadPrevious--disabled')
-  ).toEqual(false);
-  expect(previousButton.attributes('disabled')).toEqual(undefined);
-  expect(wrapper.html()).toMatchSnapshot();
-});
-
-it('expect to call showPrevious on click', async () => {
-  const showPrevious = jest.fn();
-
-  __setState({
-    ...defaultState,
-    showPrevious,
-  });
-
-  const wrapper = mount(InfiniteHits, {
-    propsData: {
-      showPrevious: true,
-    },
-  });
-
-  expect(showPrevious).toHaveBeenCalledTimes(0);
-
-  await wrapper.find('.ais-InfiniteHits-loadPrevious').trigger('click');
-
-  expect(showPrevious).toHaveBeenCalledTimes(1);
-});
-
-it('expect to call showMore on click', async () => {
-  const showMore = jest.fn();
-
-  __setState({
-    ...defaultState,
-    showMore,
-  });
-
-  const wrapper = mount(InfiniteHits);
-
-  expect(showMore).not.toHaveBeenCalled();
-
-  await wrapper.find('.ais-InfiniteHits-loadMore').trigger('click');
-
-  expect(showMore).toHaveBeenCalled();
-});
-
 it('exposes insights prop to the default slot', async () => {
   const insights = jest.fn();
 

package/src/components/__tests__/RatingMenu.js

@@ -14,123 +14,6 @@ const defaultProps = {
   attribute: 'popularity',
 };
 
-it('renders correctly', () => {
-  __setState({
-    createURL: () => '#',
-    items: [
-      {
-        isRefined: false,
-        count: 20,
-        value: '1',
-        stars: [true, false, false, false, false],
-      },
-      {
-        isRefined: false,
-        count: 3,
-        value: '2',
-        stars: [true, true, false, false, false],
-      },
-      {
-        isRefined: false,
-        count: 2000,
-        value: '3',
-        stars: [true, true, true, false, false],
-      },
-      {
-        isRefined: false,
-        count: 8,
-        value: '4',
-        stars: [true, true, true, true, false],
-      },
-    ],
-  });
-
-  const wrapper = mount(RatingMenu, {
-    propsData: defaultProps,
-  });
-
-  expect(wrapper.html()).toMatchSnapshot();
-});
-
-it('renders correctly when refined', () => {
-  __setState({
-    createURL: () => '#',
-    items: [
-      {
-        isRefined: false,
-        count: 20,
-        value: '1',
-        stars: [true, false, false, false, false],
-      },
-      {
-        isRefined: false,
-        count: 3,
-        value: '2',
-        stars: [true, true, false, false, false],
-      },
-      {
-        isRefined: false,
-        count: 2000,
-        value: '3',
-        stars: [true, true, true, false, false],
-      },
-      {
-        isRefined: true,
-        count: 8,
-        value: '4',
-        stars: [true, true, true, true, false],
-      },
-    ],
-  });
-
-  const wrapper = mount(RatingMenu, {
-    propsData: defaultProps,
-  });
-
-  expect(wrapper.html()).toMatchSnapshot();
-});
-
-it('calls refine when clicked on link', async () => {
-  __setState({
-    createURL: () => '#',
-    items: [
-      {
-        isRefined: false,
-        count: 20,
-        value: '1',
-        stars: [true, false, false, false, false],
-      },
-      {
-        isRefined: false,
-        count: 3,
-        value: '2',
-        stars: [true, true, false, false, false],
-      },
-      {
-        isRefined: false,
-        count: 2000,
-        value: '3',
-        stars: [true, true, true, false, false],
-      },
-      {
-        isRefined: false,
-        count: 8,
-        value: '4',
-        stars: [true, true, true, true, false],
-      },
-    ],
-    refine: jest.fn(),
-  });
-
-  const wrapper = mount(RatingMenu, {
-    propsData: defaultProps,
-  });
-
-  await wrapper.find('.ais-RatingMenu-link').trigger('click');
-
-  expect(wrapper.vm.state.refine).toHaveBeenLastCalledWith('1');
-});
-
 it('exposes send-event method for insights middleware', async () => {
   const sendEvent = jest.fn();
   __setState({

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

@@ -1,115 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders correctly 1`] = `
-<div class="ais-InfiniteHits">
-  <ol class="ais-InfiniteHits-list">
-    <li class="ais-InfiniteHits-item">
-      objectID: 00001, index: 0
-    </li>
-    <li class="ais-InfiniteHits-item">
-      objectID: 00002, index: 1
-    </li>
-    <li class="ais-InfiniteHits-item">
-      objectID: 00003, index: 2
-    </li>
-    <li class="ais-InfiniteHits-item">
-      objectID: 00004, index: 3
-    </li>
-    <li class="ais-InfiniteHits-item">
-      objectID: 00005, index: 4
-    </li>
-  </ol>
-  <button class="ais-InfiniteHits-loadMore">
-    Show more results
-  </button>
-</div>
-`;
-
-exports[`renders correctly on the first page 1`] = `
-<div class="ais-InfiniteHits">
-  <button class="ais-InfiniteHits-loadPrevious ais-InfiniteHits-loadPrevious--disabled"
-          disabled="disabled"
-  >
-    Show previous results
-  </button>
-  <ol class="ais-InfiniteHits-list">
-    <li class="ais-InfiniteHits-item">
-      objectID: 00001, index: 0
-    </li>
-    <li class="ais-InfiniteHits-item">
-      objectID: 00002, index: 1
-    </li>
-    <li class="ais-InfiniteHits-item">
-      objectID: 00003, index: 2
-    </li>
-    <li class="ais-InfiniteHits-item">
-      objectID: 00004, index: 3
-    </li>
-    <li class="ais-InfiniteHits-item">
-      objectID: 00005, index: 4
-    </li>
-  </ol>
-  <button class="ais-InfiniteHits-loadMore">
-    Show more results
-  </button>
-</div>
-`;
-
-exports[`renders correctly on the last page 1`] = `
-<div class="ais-InfiniteHits">
-  <ol class="ais-InfiniteHits-list">
-    <li class="ais-InfiniteHits-item">
-      objectID: 00001, index: 0
-    </li>
-    <li class="ais-InfiniteHits-item">
-      objectID: 00002, index: 1
-    </li>
-    <li class="ais-InfiniteHits-item">
-      objectID: 00003, index: 2
-    </li>
-    <li class="ais-InfiniteHits-item">
-      objectID: 00004, index: 3
-    </li>
-    <li class="ais-InfiniteHits-item">
-      objectID: 00005, index: 4
-    </li>
-  </ol>
-  <button class="ais-InfiniteHits-loadMore ais-InfiniteHits-loadMore--disabled"
-          disabled="disabled"
-  >
-    Show more results
-  </button>
-</div>
-`;
-
-exports[`renders correctly when not on the first page 1`] = `
-<div class="ais-InfiniteHits">
-  <button class="ais-InfiniteHits-loadPrevious">
-    Show previous results
-  </button>
-  <ol class="ais-InfiniteHits-list">
-    <li class="ais-InfiniteHits-item">
-      objectID: 00001, index: 0
-    </li>
-    <li class="ais-InfiniteHits-item">
-      objectID: 00002, index: 1
-    </li>
-    <li class="ais-InfiniteHits-item">
-      objectID: 00003, index: 2
-    </li>
-    <li class="ais-InfiniteHits-item">
-      objectID: 00004, index: 3
-    </li>
-    <li class="ais-InfiniteHits-item">
-      objectID: 00005, index: 4
-    </li>
-  </ol>
-  <button class="ais-InfiniteHits-loadMore">
-    Show more results
-  </button>
-</div>
-`;
-
 exports[`renders correctly with a custom item rendering 1`] = `
 <div class="ais-InfiniteHits">
   <ol class="ais-InfiniteHits-list">