fix(onStateChange): propagate change to middleware (#4796)

* chore: create a regression test showcasing onStateChange regression * fix(onStateChange): still call internal state change * simplify test * better test titles Co-authored-by: Youcef Mammar <[email protected]> Co-authored-by: François Chalifour <[email protected]>
algolia · Jun 29, 2021 · 57c32c0 · 57c32c0
1 parent 2481834
commit 57c32c0
Show file tree

Hide file tree

Showing 2 changed files with 73 additions and 1 deletion.
diff --git a/src/lib/InstantSearch.ts b/src/lib/InstantSearch.ts
@@ -597,6 +597,7 @@ See ${createDocumentationLink({
     setIndexHelperState(this.mainIndex);
 
     this.scheduleSearch();
+    this.onInternalStateChange();
   }
 
   public getUiState(): UiState {

diff --git a/src/lib/__tests__/InstantSearch-integration-test.ts b/src/lib/__tests__/InstantSearch-integration-test.ts
@@ -1,8 +1,10 @@
 import { getByText, fireEvent } from '@testing-library/dom';
 import instantsearch from '../../index.es';
-import { configure } from '../../widgets';
+import { configure, searchBox } from '../../widgets';
 import { connectConfigure } from '../../connectors';
 import { createSearchClient } from '../../../test/mock/createSearchClient';
+import { MiddlewareDefinition } from '../../types';
+import { runAllMicroTasks } from '../../../test/utils/runAllMicroTasks';
 
 describe('configure', () => {
   it('provides up-to-date uiState to onStateChange', () => {
@@ -44,3 +46,72 @@ describe('configure', () => {
     });
   });
 });
+
+describe('middleware', () => {
+  it("runs middlewares' onStateChange when uiState changes", async () => {
+    const container = document.createElement('div');
+    const search = instantsearch({
+      indexName: 'instant_search',
+      searchClient: createSearchClient(),
+    });
+
+    const middlewareDefinition: MiddlewareDefinition = {
+      onStateChange: jest.fn(),
+      subscribe: jest.fn(),
+      unsubscribe: jest.fn(),
+    };
+
+    search.use(() => middlewareDefinition);
+
+    search.addWidgets([
+      searchBox({
+        container,
+        placeholder: 'search',
+      }),
+    ]);
+
+    search.start();
+
+    fireEvent.input(container.querySelector('input')!, {
+      target: { value: 'q' },
+    });
+
+    await runAllMicroTasks();
+    expect(middlewareDefinition.onStateChange).toHaveBeenCalledTimes(1);
+  });
+
+  it("runs middlewares' onStateChange when uiState changes with user-provided onStateChange param", async () => {
+    const container = document.createElement('div');
+    const search = instantsearch({
+      indexName: 'instant_search',
+      searchClient: createSearchClient(),
+      onStateChange({ uiState, setUiState }) {
+        setUiState(uiState);
+      },
+    });
+
+    const middlewareDefinition: MiddlewareDefinition = {
+      onStateChange: jest.fn(),
+      subscribe: jest.fn(),
+      unsubscribe: jest.fn(),
+    };
+
+    search.use(() => middlewareDefinition);
+
+    search.addWidgets([
+      searchBox({
+        container,
+        placeholder: 'search',
+      }),
+    ]);
+
+    search.start();
+
+    fireEvent.input(container.querySelector('input')!, {
+      target: { value: 'q' },
+    });
+
+    await runAllMicroTasks();
+    expect(middlewareDefinition.onStateChange).toHaveBeenCalledTimes(1);
+  });
+});