feat(middleware): add unuse method (#4708)

* feat(middleware): add unuse method

* fix lint error

* ad unuse to mocked instant search

* update names

* update test case for consistency

Author: Eunjae Lee

src/lib/InstantSearch.ts

@@ -154,7 +154,10 @@ class InstantSearch extends EventEmitter {
   public _createURL: CreateURL<UiState>;
   public _searchFunction?: InstantSearchOptions['searchFunction'];
   public _mainHelperSearch?: AlgoliaSearchHelper['search'];
-  public middleware: MiddlewareDefinition[] = [];
+  public middleware: Array<{
+    creator: Middleware;
+    instance: MiddlewareDefinition;
+  }> = [];
   public sendEventToInsights: (event: InsightsEvent) => void;
 
   public constructor(options: InstantSearchOptions) {
@@ -263,14 +266,14 @@ See ${createDocumentationLink({
 
   /**
    * Hooks a middleware into the InstantSearch lifecycle.
-   *
-   * This method is considered as experimental and is subject to change in
-   * minor versions.
    */
   public use(...middleware: Middleware[]): this {
     const newMiddlewareList = middleware.map(fn => {
       const newMiddleware = fn({ instantSearchInstance: this });
-      this.middleware.push(newMiddleware);
+      this.middleware.push({
+        creator: fn,
+        instance: newMiddleware,
+      });
       return newMiddleware;
     });
 
@@ -285,6 +288,21 @@ See ${createDocumentationLink({
     return this;
   }
 
+  /**
+   * Removes a middleware from the InstantSearch lifecycle.
+   */
+  public unuse(...middlewareToUnuse: Middleware[]): this {
+    this.middleware
+      .filter(m => middlewareToUnuse.includes(m.creator))
+      .forEach(m => m.instance.unsubscribe());
+
+    this.middleware = this.middleware.filter(
+      m => !middlewareToUnuse.includes(m.creator)
+    );
+
+    return this;
+  }
+
   // @major we shipped with EXPERIMENTAL_use, but have changed that to just `use` now
   public EXPERIMENTAL_use(...middleware: Middleware[]): this {
     warning(
@@ -456,8 +474,8 @@ See ${createDocumentationLink({
       uiState: this._initialUiState,
     });
 
-    this.middleware.forEach(m => {
-      m.subscribe();
+    this.middleware.forEach(({ instance }) => {
+      instance.subscribe();
     });
 
     mainHelper.search();
@@ -497,8 +515,8 @@ See ${createDocumentationLink({
     this.mainHelper = null;
     this.helper = null;
 
-    this.middleware.forEach(m => {
-      m.unsubscribe();
+    this.middleware.forEach(({ instance }) => {
+      instance.unsubscribe();
     });
   }
 
@@ -576,8 +594,8 @@ See ${createDocumentationLink({
   public onInternalStateChange = defer(() => {
     const nextUiState = this.mainIndex.getWidgetUiState({});
 
-    this.middleware.forEach(m => {
-      m.onStateChange({
+    this.middleware.forEach(({ instance }) => {
+      instance.onStateChange({
         uiState: nextUiState,
       });
     });

src/lib/__tests__/InstantSearch-test.js

@@ -1576,6 +1576,60 @@ describe('use', () => {
   });
 });
 
+describe('unuse', () => {
+  it('unsubscribes middleware', async () => {
+    const indexName = 'indexName';
+    const searchClient = createSearchClient();
+    const search = new InstantSearch({
+      indexName,
+      searchClient,
+    });
+    const middlewareSpy1 = {
+      onStateChange: jest.fn(),
+      subscribe: jest.fn(),
+      unsubscribe: jest.fn(),
+    };
+    const middleware1 = jest.fn(() => middlewareSpy1);
+    const middlewareSpy2 = {
+      onStateChange: jest.fn(),
+      subscribe: jest.fn(),
+      unsubscribe: jest.fn(),
+    };
+    const middleware2 = jest.fn(() => middlewareSpy2);
+
+    search.addWidgets([connectSearchBox(noop)({})]);
+    search.use(middleware1, middleware2);
+    search.start();
+
+    await runAllMicroTasks();
+
+    expect(middlewareSpy1.subscribe).toHaveBeenCalledTimes(1);
+    expect(middlewareSpy1.onStateChange).toHaveBeenCalledTimes(0);
+    expect(middlewareSpy2.subscribe).toHaveBeenCalledTimes(1);
+    expect(middlewareSpy2.onStateChange).toHaveBeenCalledTimes(0);
+
+    search.renderState[indexName].searchBox.refine('cat');
+    await runAllMicroTasks();
+    expect(middlewareSpy1.onStateChange).toHaveBeenCalledTimes(1);
+    expect(middlewareSpy2.onStateChange).toHaveBeenCalledTimes(1);
+
+    search.renderState[indexName].searchBox.refine('is');
+    await runAllMicroTasks();
+    expect(middlewareSpy1.onStateChange).toHaveBeenCalledTimes(2);
+    expect(middlewareSpy2.onStateChange).toHaveBeenCalledTimes(2);
+
+    search.unuse(middleware1);
+
+    expect(middlewareSpy1.unsubscribe).toHaveBeenCalledTimes(1);
+    expect(middlewareSpy2.unsubscribe).toHaveBeenCalledTimes(0);
+
+    search.renderState[indexName].searchBox.refine('good');
+    await runAllMicroTasks();
+    expect(middlewareSpy1.onStateChange).toHaveBeenCalledTimes(2);
+    expect(middlewareSpy2.onStateChange).toHaveBeenCalledTimes(3);
+  });
+});
+
 describe('setUiState', () => {
   beforeEach(() => {
     warning.cache = {};

test/mock/createInstantSearch.ts

@@ -51,6 +51,7 @@ export const createInstantSearch = (
     removeWidgets: jest.fn(),
     use: jest.fn(),
     EXPERIMENTAL_use: jest.fn(),
+    unuse: jest.fn(),
     // methods from EventEmitter
     addListener: jest.fn(),
     removeListener: jest.fn(),