feat(middlewares): add middlewares prop to ais-instant-search (#939)

* feat(middlewares): add middlewares prop to ais-instant-search

* unsubscribe removed middlewares

* update bundlesize

* update instantsearch.js

Author: Eunjae Lee

package.json

@@ -46,7 +46,7 @@
   },
   "dependencies": {
     "algoliasearch-helper": "^3.1.0",
-    "instantsearch.js": "^4.16.1"
+    "instantsearch.js": "^4.20.0"
   },
   "peerDependencies": {
     "algoliasearch": ">= 3.32.0 < 5",
@@ -114,7 +114,7 @@
   "bundlesize": [
     {
       "path": "./dist/vue-instantsearch.js",
-      "maxSize": "52.50 kB"
+      "maxSize": "52.75 kB"
     },
     {
       "path": "./dist/vue-instantsearch.common.js",

src/components/InstantSearch.js

@@ -69,6 +69,10 @@ export default createInstantSearchComponent({
         return false;
       },
     },
+    middlewares: {
+      type: Array,
+      default: null,
+    },
   },
   data() {
     return {

src/components/__tests__/InstantSearch-integration.js

@@ -1,10 +1,13 @@
+import Vue from 'vue';
 import { mount } from '@vue/test-utils';
 import InstantSearch from '../InstantSearch';
 import { createWidgetMixin } from '../../mixins/widget';
 import { createFakeClient } from '../../util/testutils/client';
-
+import SearchBox from '../SearchBox.vue';
 jest.unmock('instantsearch.js/es');
 
+const wait = ms => new Promise(resolve => setTimeout(resolve, ms));
+
 it('child widgets get added to its parent instantsearch', () => {
   const widgetInstance = {
     render() {},
@@ -32,3 +35,154 @@ it('child widgets get added to its parent instantsearch', () => {
     widgetInstance
   );
 });
+
+describe('middlewares', () => {
+  const createFakeMiddleware = () => {
+    const middlewareSpy = {
+      onStateChange: jest.fn(),
+      subscribe: jest.fn(),
+      unsubscribe: jest.fn(),
+    };
+    const middleware = jest.fn(() => middlewareSpy);
+
+    return [middleware, middlewareSpy];
+  };
+
+  it('subscribes middlewares', async () => {
+    const [middleware, middlewareSpy] = createFakeMiddleware();
+
+    mount(InstantSearch, {
+      propsData: {
+        searchClient: createFakeClient(),
+        indexName: 'indexName',
+        middlewares: [middleware],
+      },
+    });
+    await Vue.nextTick();
+
+    expect(middlewareSpy.subscribe).toHaveBeenCalledTimes(1);
+  });
+
+  it('subscribes newly added middleware', async () => {
+    const [middleware1, middlewareSpy1] = createFakeMiddleware();
+
+    const wrapper = mount({
+      components: {
+        AisInstantSearch: InstantSearch,
+        AisSearchBox: SearchBox,
+      },
+      template: `
+        <ais-instant-search
+          :search-client="searchClient"
+          :index-name="indexName"
+          :middlewares="middlewares"
+        >
+          <ais-search-box />
+        </ais-instant-search>
+      `,
+      data() {
+        return {
+          searchClient: createFakeClient(),
+          indexName: 'indexName',
+          middlewares: [middleware1],
+        };
+      },
+    });
+
+    await wait(20);
+    expect(middlewareSpy1.subscribe).toHaveBeenCalledTimes(1);
+
+    await wrapper.find('input').setValue('a');
+    await Vue.nextTick();
+
+    expect(middlewareSpy1.onStateChange).toHaveBeenCalledTimes(1);
+    expect(middlewareSpy1.onStateChange).toHaveBeenCalledWith({
+      uiState: { indexName: { query: 'a' } },
+    });
+
+    const [middleware2, middlewareSpy2] = createFakeMiddleware();
+    wrapper.setData({
+      middlewares: [middleware1, middleware2],
+    });
+    await Vue.nextTick();
+
+    expect(middlewareSpy2.subscribe).toHaveBeenCalledTimes(1);
+    expect(middlewareSpy2.onStateChange).toHaveBeenCalledTimes(0);
+
+    await wrapper.find('input').setValue('b');
+    await Vue.nextTick();
+
+    expect(middlewareSpy1.onStateChange).toHaveBeenCalledTimes(2);
+    expect(middlewareSpy1.onStateChange).toHaveBeenCalledWith({
+      uiState: { indexName: { query: 'b' } },
+    });
+    expect(middlewareSpy2.onStateChange).toHaveBeenCalledTimes(1);
+    expect(middlewareSpy2.onStateChange).toHaveBeenCalledWith({
+      uiState: { indexName: { query: 'b' } },
+    });
+
+    expect(middlewareSpy1.unsubscribe).toHaveBeenCalledTimes(0);
+    expect(middlewareSpy2.unsubscribe).toHaveBeenCalledTimes(0);
+  });
+
+  it('unsubscribes removed middleware', async () => {
+    const [middleware1, middlewareSpy1] = createFakeMiddleware();
+    const [middleware2, middlewareSpy2] = createFakeMiddleware();
+
+    const wrapper = mount({
+      components: {
+        AisInstantSearch: InstantSearch,
+        AisSearchBox: SearchBox,
+      },
+      template: `
+        <ais-instant-search
+          :search-client="searchClient"
+          :index-name="indexName"
+          :middlewares="middlewares"
+        >
+          <ais-search-box />
+        </ais-instant-search>
+      `,
+      data() {
+        return {
+          searchClient: createFakeClient(),
+          indexName: 'indexName',
+          middlewares: [middleware1, middleware2],
+        };
+      },
+    });
+
+    await wait(20);
+    expect(middlewareSpy1.subscribe).toHaveBeenCalledTimes(1);
+    expect(middlewareSpy2.subscribe).toHaveBeenCalledTimes(1);
+
+    await wrapper.find('input').setValue('a');
+    await Vue.nextTick();
+
+    expect(middlewareSpy1.onStateChange).toHaveBeenCalledTimes(1);
+    expect(middlewareSpy1.onStateChange).toHaveBeenCalledWith({
+      uiState: { indexName: { query: 'a' } },
+    });
+    expect(middlewareSpy2.onStateChange).toHaveBeenCalledTimes(1);
+    expect(middlewareSpy2.onStateChange).toHaveBeenCalledWith({
+      uiState: { indexName: { query: 'a' } },
+    });
+
+    wrapper.setData({
+      middlewares: [middleware1],
+    });
+    await Vue.nextTick();
+
+    expect(middlewareSpy1.unsubscribe).toHaveBeenCalledTimes(0);
+    expect(middlewareSpy2.unsubscribe).toHaveBeenCalledTimes(1);
+
+    await wrapper.find('input').setValue('b');
+    await Vue.nextTick();
+
+    expect(middlewareSpy1.onStateChange).toHaveBeenCalledTimes(2);
+    expect(middlewareSpy1.onStateChange).toHaveBeenCalledWith({
+      uiState: { indexName: { query: 'b' } },
+    });
+    expect(middlewareSpy2.onStateChange).toHaveBeenCalledTimes(1);
+  });
+});

src/util/createInstantSearchComponent.js

@@ -34,6 +34,22 @@ export const createInstantSearchComponent = component =>
           // private InstantSearch.js API:
           this.instantSearchInstance._searchFunction = searchFunction;
         },
+        middlewares: {
+          immediate: true,
+          handler(next, prev) {
+            (prev || [])
+              .filter(middleware => (next || []).indexOf(middleware) === -1)
+              .forEach(middlewareToRemove => {
+                this.instantSearchInstance.unuse(middlewareToRemove);
+              });
+
+            (next || [])
+              .filter(middleware => (prev || []).indexOf(middleware) === -1)
+              .forEach(middlewareToAdd => {
+                this.instantSearchInstance.use(middlewareToAdd);
+              });
+          },
+        },
       },
       created() {
         const searchClient = this.instantSearchInstance.client;

yarn.lock

@@ -7892,10 +7892,10 @@ 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.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==
+instantsearch.js@^4.20.0:
+  version "4.20.0"
+  resolved "https://registry.yarnpkg.com/instantsearch.js/-/instantsearch.js-4.20.0.tgz#e7ed763a8380384ff59a88f3b56a01c5dedf0fca"
+  integrity sha512-fO3oqt/WEsUvdx8LB9Fm/MH9pLbl3gHV3ALnFOvbwdIpg+HRe5zZv3C/bE8E0SuTbZo2C6Fxg6rC0MEMTxNVGA==
   dependencies:
     "@types/googlemaps" "^3.39.6"
     algoliasearch-helper "^3.4.4"