From 57c32c0a43bd2c6cbdd3f8ea7eac8109e3024f2a Mon Sep 17 00:00:00 2001
From: Haroen Viaene <hello@haroen.me>
Date: Tue, 29 Jun 2021 10:57:23 +0200
Subject: [PATCH] fix(onStateChange): propagate change to middleware (#4796)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 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 <youcef.mammar@algolia.com>
Co-authored-by: François Chalifour <francoischalifour@users.noreply.github.com>
---
 src/lib/InstantSearch.ts                      |  1 +
 .../InstantSearch-integration-test.ts         | 73 ++++++++++++++++++-
 2 files changed, 73 insertions(+), 1 deletion(-)

diff --git a/src/lib/InstantSearch.ts b/src/lib/InstantSearch.ts
index 26bbba88bb..b16facc38d 100644
--- 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
index 5c69562b52..abd709852e 100644
--- 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);
+  });
+});