feat(ais-relevant-sort): add widget (#918)

Eunjae Lee · Haroenv · web-flow · commit 4fe5745c3dc8 · 2021-03-03T14:25:04.000+01:00
* feat(smartSort): add widget

* add story

* add isSmartSorted to text slot

* fix story

* fix(smartsort): don't render if not virtual replica

* test(smartsort): add tests

* chore(deps): update instantsearch

* chore(deps): update

* chore: update bundlesize

* update to relevantSort

* feat(stats): apply relevant sort

* chore: update instantsearch

Co-authored-by: Haroen Viaene &lt;hello@haroen.me&gt;
diff --git a/package.json b/package.json
@@ -46,7 +46,7 @@
   },
   "dependencies": {
     "algoliasearch-helper": "^3.1.0",
-    "instantsearch.js": "^4.11.0"
+    "instantsearch.js": "^4.16.1"
   },
   "peerDependencies": {
     "algoliasearch": ">= 3.32.0 < 5",
@@ -114,11 +114,11 @@
   "bundlesize": [
     {
       "path": "./dist/vue-instantsearch.js",
-      "maxSize": "48.10 kB"
+      "maxSize": "52.50 kB"
     },
     {
       "path": "./dist/vue-instantsearch.common.js",
-      "maxSize": "16 kB"
+      "maxSize": "16.25 kB"
     }
   ],
   "resolutions": {
diff --git a/src/components/RelevantSort.vue b/src/components/RelevantSort.vue
@@ -0,0 +1,51 @@
+<template>
+  <div
+    v-if="state && state.isVirtualReplica"
+    :class="suit()"
+  >
+    <slot
+      :is-relevant-sorted="state.isRelevantSorted"
+      :refine="state.refine"
+    >
+      <div :class="suit('text')">
+        <slot
+          name="text"
+          :is-relevant-sorted="state.isRelevantSorted"
+        />
+      </div>
+      <button
+        type="button"
+        :class="suit('button')"
+        @click="refine()"
+      >
+        <slot
+          name="button"
+          :is-relevant-sorted="state.isRelevantSorted"
+        >{{ state.isRelevantSorted ? 'See all results' : 'See relevant results' }}</slot>
+      </button>
+    </slot>
+  </div>
+</template>
+
+<script>
+import { connectRelevantSort } from 'instantsearch.js/es/connectors';
+import { createWidgetMixin } from '../mixins/widget';
+import { createSuitMixin } from '../mixins/suit';
+
+export default {
+  name: 'AisRelevantSort',
+  mixins: [
+    createSuitMixin({ name: 'RelevantSort' }),
+    createWidgetMixin({ connector: connectRelevantSort }),
+  ],
+  methods: {
+    refine() {
+      if (this.state.isRelevantSorted) {
+        this.state.refine(0);
+      } else {
+        this.state.refine(undefined);
+      }
+    },
+  },
+};
+</script>
diff --git a/src/components/Stats.vue b/src/components/Stats.vue
@@ -7,7 +7,7 @@
       v-bind="state"
       :results="state.instantSearchInstance.helper.lastResults"
     >
-      <span :class="suit('text')">{{ state.nbHits.toLocaleString() }} results found in {{ state.processingTimeMS.toLocaleString() }}ms</span>
+      <span :class="suit('text')"><template v-if="state.areHitsSorted">{{ state.nbSortedHits.toLocaleString() }} relevant results sorted out of {{ state.nbHits.toLocaleString() }}</template><template v-else>{{ state.nbHits.toLocaleString() }} results</template> found in {{ state.processingTimeMS.toLocaleString() }}ms</span>
     </slot>
   </div>
 </template>
diff --git a/src/components/__tests__/RelevantSort.js b/src/components/__tests__/RelevantSort.js
@@ -0,0 +1,80 @@
+import { mount } from '@vue/test-utils';
+import RelevantSort from '../RelevantSort.vue';
+import { __setState } from '../../mixins/widget';
+jest.mock('../../mixins/widget');
+
+describe('renders correctly', () => {
+  test('no virtual replica', () => {
+    __setState({
+      isVirtualReplica: false,
+      isRelevantSorted: false,
+    });
+    const wrapper = mount(RelevantSort);
+    expect(wrapper.html()).toMatchInlineSnapshot(`undefined`);
+  });
+
+  test('not relevant sorted', () => {
+    __setState({
+      isVirtualReplica: true,
+      isRelevantSorted: false,
+    });
+    const wrapper = mount(RelevantSort);
+    expect(wrapper.html()).toMatchInlineSnapshot(`
+
+<div class="ais-RelevantSort">
+  <div class="ais-RelevantSort-text">
+  </div>
+  <button type="button"
+          class="ais-RelevantSort-button"
+  >
+    See relevant results
+  </button>
+</div>
+
+`);
+  });
+
+  test('relevant sorted', () => {
+    __setState({
+      isVirtualReplica: true,
+      isRelevantSorted: true,
+    });
+    const wrapper = mount(RelevantSort);
+    expect(wrapper.html()).toMatchInlineSnapshot(`
+
+<div class="ais-RelevantSort">
+  <div class="ais-RelevantSort-text">
+  </div>
+  <button type="button"
+          class="ais-RelevantSort-button"
+  >
+    See all results
+  </button>
+</div>
+
+`);
+  });
+});
+
+it("calls the connector's refine function with 0 and undefined", () => {
+  __setState({
+    isRelevantSorted: true,
+    isVirtualReplica: true,
+    refine: jest.fn(() => {
+      wrapper.vm.state.isRelevantSorted = !wrapper.vm.state.isRelevantSorted;
+    }),
+  });
+
+  const wrapper = mount(RelevantSort);
+
+  const button = wrapper.find('button');
+
+  button.trigger('click');
+  expect(wrapper.vm.state.refine).toHaveBeenLastCalledWith(0);
+
+  button.trigger('click');
+  expect(wrapper.vm.state.refine).toHaveBeenLastCalledWith(undefined);
+
+  button.trigger('click');
+  expect(wrapper.vm.state.refine).toHaveBeenLastCalledWith(0);
+});
diff --git a/src/components/__tests__/Stats.js b/src/components/__tests__/Stats.js
@@ -4,6 +4,7 @@ import Stats from '../Stats.vue';
 
 import { __setState } from '../../mixins/widget';
 jest.mock('../../mixins/widget');
+
 it('renders correctly', () => {
   __setState({
     hitsPerPage: 50,
@@ -20,5 +21,42 @@ it('renders correctly', () => {
   });
 
   const wrapper = mount(Stats);
-  expect(wrapper.html()).toMatchSnapshot();
+  expect(wrapper.html()).toMatchInlineSnapshot(`
+
+<div class="ais-Stats">
+  <span class="ais-Stats-text">
+    1,000 results found in 12ms
+  </span>
+</div>
+
+`);
+});
+
+it('renders correctly (relevant sort)', () => {
+  __setState({
+    areHitsSorted: true,
+    hitsPerPage: 50,
+    nbPages: 20,
+    nbHits: 1000,
+    nbSortedHits: 12,
+    page: 2,
+    processingTimeMS: 12,
+    query: 'ipho',
+    instantSearchInstance: {
+      helper: {
+        lastResults: [],
+      },
+    },
+  });
+
+  const wrapper = mount(Stats);
+  expect(wrapper.html()).toMatchInlineSnapshot(`
+
+<div class="ais-Stats">
+  <span class="ais-Stats-text">
+    12 relevant results sorted out of 1,000 found in 12ms
+  </span>
+</div>
+
+`);
 });
diff --git a/src/components/__tests__/__snapshots__/Stats.js.snap b/src/components/__tests__/__snapshots__/Stats.js.snap
diff --git a/src/widgets.js b/src/widgets.js
@@ -42,3 +42,4 @@ export {
   default as AisToggleRefinement,
 } from './components/ToggleRefinement.vue';
 export { default as AisVoiceSearch } from './components/VoiceSearch.vue';
+export { default as AisRelevantSort } from './components/RelevantSort.vue';
diff --git a/stories/RelevantSort.stories.js b/stories/RelevantSort.stories.js
@@ -0,0 +1,28 @@
+import algoliasearch from 'algoliasearch/lite';
+import { storiesOf } from '@storybook/vue';
+import { previewWrapper } from './utils';
+
+storiesOf('ais-relevant-sort', module)
+  .addDecorator(
+    previewWrapper({
+      searchClient: algoliasearch(
+        'C7RIRJRYR9',
+        '77af6d5ffb27caa5ff4937099fcb92e8'
+      ),
+      indexName: 'test_Bestbuy_vr_price_asc',
+    })
+  )
+  .add('default', () => ({
+    template: '<ais-relevant-sort></ais-relevant-sort>',
+  }))
+  .add('with custom text', () => ({
+    template: `
+      <ais-relevant-sort>
+        <template slot="text" slot-scope="{ isRelevantSorted }">
+          {{ isRelevantSorted
+               ? 'We removed some search results to show you the most relevant ones'
+               : 'Currently showing all results' }}
+        </template>
+      </ais-relevant-sort>
+    `,
+  }));
diff --git a/yarn.lock b/yarn.lock
@@ -1156,10 +1156,10 @@ algoliasearch-helper@^3.1.0:
   dependencies:
     events "^1.1.1"
 
-algoliasearch-helper@^3.3.4:
-  version "3.3.4"
-  resolved "https://registry.yarnpkg.com/algoliasearch-helper/-/algoliasearch-helper-3.3.4.tgz#4a3c56d42a2a81589d5722b73653b2deaf3e7064"
-  integrity sha512-1Ts2XcgGdjGlDrp3v6zbY8VW+X9+jJ5rBmtPBmXOQLd4b5t/LpJlaBdxoAnlMfVFjywP7KSAdmyFUNNYVHDyRQ==
+algoliasearch-helper@^3.4.4:
+  version "3.4.4"
+  resolved "https://registry.yarnpkg.com/algoliasearch-helper/-/algoliasearch-helper-3.4.4.tgz#f2eb46bc4d2f6fed82c7201b8ac4ce0a1988ae67"
+  integrity sha512-OjyVLjykaYKCMxxRMZNiwLp8CS310E0qAeIY2NaublcmLAh8/SL19+zYHp7XCLtMem2ZXwl3ywMiA32O9jszuw==
   dependencies:
     events "^1.1.1"
 
@@ -7892,13 +7892,13 @@ instantsearch.css@7.3.1:
   resolved "https://registry.yarnpkg.com/instantsearch.css/-/instantsearch.css-7.3.1.tgz#7ab74a8f355091ae040947a9cf5438f379026622"
   integrity sha512-/kaMDna5D+Q9mImNBHEhb9HgHATDOFKYii7N1Iwvrj+lmD9gBJLqVhUw67gftq2O0QI330pFza+CRscIwB1wQQ==
 
-instantsearch.js@^4.11.0:
-  version "4.11.0"
-  resolved "https://registry.yarnpkg.com/instantsearch.js/-/instantsearch.js-4.11.0.tgz#9e55426fbcf1929df9a772c53eeae282575e1a13"
-  integrity sha512-SVdS63S7skry5ebttPOq9D/BB2H61lYL2qdRiGdeuxsbrkwNssvpmtt/kAKxrnySUNxiSI2ZKTH2wa2WaMU98A==
+instantsearch.js@^4.16.1:
+  version "4.16.1"
+  resolved "https://registry.yarnpkg.com/instantsearch.js/-/instantsearch.js-4.16.1.tgz#78e00d2256c89693a94f58ebfc5f0864953b7ec8"
+  integrity sha512-NfwNOb+Ftj7Y+h6lW7iCd5SXWKIHQZ981ldSddEHbgTexbdJEyxgWhaF8c3HajCySp8wZPD2gj9KpNQy/BsUgQ==
   dependencies:
     "@types/googlemaps" "^3.39.6"
-    algoliasearch-helper "^3.3.4"
+    algoliasearch-helper "^3.4.4"
     classnames "^2.2.5"
     events "^1.1.0"
     hogan.js "^3.0.2"

Original file line number	Diff line number	Diff line change
`@@ -7,7 +7,7 @@`
`7`	`7`	`v-bind="state"`
`8`	`8`	`:results="state.instantSearchInstance.helper.lastResults"`
`9`	`9`	`>`
`10`		`- <span :class="suit('text')">{{ state.nbHits.toLocaleString() }} results found in {{ state.processingTimeMS.toLocaleString() }}ms</span>`
	`10`	`+ <span :class="suit('text')"><template v-if="state.areHitsSorted">{{ state.nbSortedHits.toLocaleString() }} relevant results sorted out of {{ state.nbHits.toLocaleString() }}</template><template v-else>{{ state.nbHits.toLocaleString() }} results</template> found in {{ state.processingTimeMS.toLocaleString() }}ms</span>`
`11`	`11`	`</slot>`
`12`	`12`	`</div>`
`13`	`13`	`</template>`