From 4fe5745c3dc8b95a8952b272f3e139295fb42820 Mon Sep 17 00:00:00 2001 From: Eunjae Lee Date: Wed, 3 Mar 2021 14:25:04 +0100 Subject: [PATCH] feat(ais-relevant-sort): add widget (#918) * 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 --- package.json | 6 +- src/components/RelevantSort.vue | 51 ++++++++++++ src/components/Stats.vue | 2 +- src/components/__tests__/RelevantSort.js | 80 +++++++++++++++++++ src/components/__tests__/Stats.js | 40 +++++++++- .../__tests__/__snapshots__/Stats.js.snap | 11 --- src/widgets.js | 1 + stories/RelevantSort.stories.js | 28 +++++++ yarn.lock | 18 ++--- 9 files changed, 212 insertions(+), 25 deletions(-) create mode 100644 src/components/RelevantSort.vue create mode 100644 src/components/__tests__/RelevantSort.js delete mode 100644 src/components/__tests__/__snapshots__/Stats.js.snap create mode 100644 stories/RelevantSort.stories.js diff --git a/package.json b/package.json index 4d045ba72..e5e0e961e 100644 --- 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 new file mode 100644 index 000000000..6de407e26 --- /dev/null +++ b/src/components/RelevantSort.vue @@ -0,0 +1,51 @@ + + + diff --git a/src/components/Stats.vue b/src/components/Stats.vue index 555d74150..caa5d065c 100644 --- a/src/components/Stats.vue +++ b/src/components/Stats.vue @@ -7,7 +7,7 @@ v-bind="state" :results="state.instantSearchInstance.helper.lastResults" > - {{ state.nbHits.toLocaleString() }} results found in {{ state.processingTimeMS.toLocaleString() }}ms + found in {{ state.processingTimeMS.toLocaleString() }}ms diff --git a/src/components/__tests__/RelevantSort.js b/src/components/__tests__/RelevantSort.js new file mode 100644 index 000000000..f90d1b96a --- /dev/null +++ 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(` + +
+
+
+ +
+ +`); + }); + + test('relevant sorted', () => { + __setState({ + isVirtualReplica: true, + isRelevantSorted: true, + }); + const wrapper = mount(RelevantSort); + expect(wrapper.html()).toMatchInlineSnapshot(` + +
+
+
+ +
+ +`); + }); +}); + +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 index acee5049e..dfbd375db 100644 --- 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(` + +
+ + 1,000 results found in 12ms + +
+ +`); +}); + +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(` + +
+ + 12 relevant results sorted out of 1,000 found in 12ms + +
+ +`); }); diff --git a/src/components/__tests__/__snapshots__/Stats.js.snap b/src/components/__tests__/__snapshots__/Stats.js.snap deleted file mode 100644 index 7808b0b4c..000000000 --- a/src/components/__tests__/__snapshots__/Stats.js.snap +++ /dev/null @@ -1,11 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`renders correctly 1`] = ` - -
- - 1,000 results found in 12ms - -
- -`; diff --git a/src/widgets.js b/src/widgets.js index b651625a5..5b966dbbb 100644 --- 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 new file mode 100644 index 000000000..219815c39 --- /dev/null +++ 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: '', + })) + .add('with custom text', () => ({ + template: ` + + + + `, + })); diff --git a/yarn.lock b/yarn.lock index 1da73c40a..bba0fc143 100644 --- 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"