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 <youcef.mammar@algolia.com>
Co-authored-by: François Chalifour <francoischalifour@users.noreply.github.com>

Author: 3 people

src/lib/InstantSearch.ts

@@ -597,6 +597,7 @@ See ${createDocumentationLink({
     setIndexHelperState(this.mainIndex);
 
     this.scheduleSearch();
+    this.onInternalStateChange();
   }
 
   public getUiState(): UiState {

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);
+  });
+});