fix(headless commerce): did you mean wasAutomaticallyCorrected should…

… only be true when query was auto-corrected (#4476) https://coveord.atlassian.net/browse/KIT-3615
coveo · Oct 7, 2024 · ec06f49 · ec06f49
1 parent aca3516
commit ec06f49
Show file tree

Hide file tree

Showing 8 changed files with 1,177 additions and 483 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/headless/src/controllers/commerce/search/did-you-mean/headless-did-you-mean.test.ts b/packages/headless/src/controllers/commerce/search/did-you-mean/headless-did-you-mean.test.ts
@@ -20,35 +20,130 @@ describe('did you mean', () => {
     initDidYouMean();
   });
 
+  it('initializes', () => {
+    expect(didYouMean).toBeTruthy();
+  });
+
   it('exposes a #subscribe method', () => {
     expect(didYouMean.subscribe).toBeTruthy();
   });
 
-  it('adds the correct reducers to engine', () => {
+  it('adds the correct reducer to engine', () => {
     expect(engine.addReducers).toHaveBeenCalledWith({
       didYouMean: didYouMeanReducer,
     });
   });
 
-  it('state should reflect correction state', () => {
-    engine[stateKey].didYouMean = {
-      originalQuery: 'original query',
-      wasCorrectedTo: 'corrected query',
-      queryCorrection: {
-        correctedQuery: 'corrected query',
-        wordCorrections: [],
-      },
-    };
-
-    expect(didYouMean.state).toEqual({
-      originalQuery: 'original query',
-      wasCorrectedTo: 'corrected query',
-      queryCorrection: {
-        correctedQuery: 'corrected query',
-        wordCorrections: [],
-      },
-      hasQueryCorrection: true,
-      wasAutomaticallyCorrected: true,
+  describe('#state', () => {
+    it('#originalQuery reflects originalQuery from engine state', () => {
+      engine[stateKey].didYouMean = {
+        originalQuery: 'original query',
+        wasCorrectedTo: '',
+        queryCorrection: {
+          correctedQuery: '',
+          wordCorrections: [],
+        },
+      };
+
+      expect(didYouMean.state.originalQuery).toEqual('original query');
+    });
+
+    it('#wasCorrectedTo reflects wasCorrectedTo from engine state', () => {
+      engine[stateKey].didYouMean = {
+        originalQuery: '',
+        wasCorrectedTo: 'corrected query',
+        queryCorrection: {
+          correctedQuery: '',
+          wordCorrections: [],
+        },
+      };
+
+      expect(didYouMean.state.wasCorrectedTo).toEqual('corrected query');
+    });
+
+    it('#queryCorrection reflects queryCorrection from engine state', () => {
+      engine[stateKey].didYouMean = {
+        originalQuery: '',
+        wasCorrectedTo: '',
+        queryCorrection: {
+          correctedQuery: 'correctedQuery',
+          wordCorrections: [
+            {correctedWord: 'abc', originalWord: 'abd', length: 3, offset: 2},
+          ],
+        },
+      };
+
+      expect(didYouMean.state.queryCorrection).toEqual({
+        correctedQuery: 'correctedQuery',
+        wordCorrections: [
+          {correctedWord: 'abc', originalWord: 'abd', length: 3, offset: 2},
+        ],
+      });
+    });
+
+    it('#hasQueryCorrection is true if queryCorrection.correctedQuery is not an empty string and wasCorrectedTo is an empty string in the engine state', () => {
+      engine[stateKey].didYouMean = {
+        originalQuery: '',
+        wasCorrectedTo: '',
+        queryCorrection: {
+          correctedQuery: 'correctedQuery',
+          wordCorrections: [],
+        },
+      };
+
+      expect(didYouMean.state.hasQueryCorrection).toEqual(true);
+    });
+
+    it('#hasQueryCorrection is true if queryCorrection.correctedQuery is an empty string and wasCorrectedTo is not an empty string in the engine state', () => {
+      engine[stateKey].didYouMean = {
+        originalQuery: '',
+        wasCorrectedTo: '',
+        queryCorrection: {
+          correctedQuery: 'correctedQuery',
+          wordCorrections: [],
+        },
+      };
+
+      expect(didYouMean.state.hasQueryCorrection).toEqual(true);
+    });
+
+    it('#hasQueryCorrection is false if both queryCorrection.correctedQuery and wasCorrectedTo are empty strings in the engine state', () => {
+      engine[stateKey].didYouMean = {
+        originalQuery: '',
+        wasCorrectedTo: '',
+        queryCorrection: {
+          correctedQuery: '',
+          wordCorrections: [],
+        },
+      };
+
+      expect(didYouMean.state.hasQueryCorrection).toEqual(false);
+    });
+
+    it('#wasAutomaticallyCorrected is true if wasCorrectedTo is not an empty string in the state', () => {
+      engine[stateKey].didYouMean = {
+        originalQuery: '',
+        wasCorrectedTo: 'corrected query',
+        queryCorrection: {
+          correctedQuery: '',
+          wordCorrections: [],
+        },
+      };
+
+      expect(didYouMean.state.wasAutomaticallyCorrected).toEqual(true);
+    });
+
+    it('#wasAutomaticallyCorrected is false if wasCorrectedTo is an empty string in the state', () => {
+      engine[stateKey].didYouMean = {
+        originalQuery: '',
+        wasCorrectedTo: '',
+        queryCorrection: {
+          correctedQuery: '',
+          wordCorrections: [],
+        },
+      };
+
+      expect(didYouMean.state.wasAutomaticallyCorrected).toEqual(false);
     });
   });
 });
diff --git a/packages/headless/src/controllers/commerce/search/did-you-mean/headless-did-you-mean.ts b/packages/headless/src/controllers/commerce/search/did-you-mean/headless-did-you-mean.ts
@@ -50,7 +50,7 @@ export function buildDidYouMean(engine: CommerceEngine): DidYouMean {
         wasCorrectedTo: state.wasCorrectedTo,
         queryCorrection: state.queryCorrection,
         hasQueryCorrection: hasQueryCorrection(),
-        wasAutomaticallyCorrected: hasQueryCorrection(),
+        wasAutomaticallyCorrected: state.wasCorrectedTo !== '',
       };
     },
   };

diff --git a/packages/samples/headless-react/package.json b/packages/samples/headless-react/package.json
@@ -4,6 +4,9 @@
   "version": "0.0.0",
   "private": true,
   "type": "module",
+  "engines": {
+    "node": "^20.9.0"
+  },
   "dependencies": {
     "@coveo/auth": "2.0.1",
     "@coveo/headless": "3.2.0",
@@ -47,13 +50,13 @@
     ]
   },
   "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^7.0.0",
-    "@vitejs/plugin-react": "3.1.0",
+    "@typescript-eslint/eslint-plugin": "8.7.0",
+    "@vitejs/plugin-react": "4.3.2",
     "cypress": "13.13.1",
     "cypress-repeat": "2.3.5",
     "gts": "5.3.1",
     "patch-package": "6.4.7",
-    "vite": "4.5.3",
-    "vitest": "0.30.1"
+    "vite": "5.4.8",
+    "vitest": "2.1.1"
   }
 }
diff --git a/packages/samples/headless-react/src/App.test.tsx b/packages/samples/headless-react/src/App.test.tsx
@@ -3,13 +3,10 @@ import {
   getSampleSearchEngineConfiguration,
 } from '@coveo/headless';
 import {render} from '@testing-library/react';
-import {vi, SpyInstance} from 'vitest';
+import {vi, MockInstance} from 'vitest';
 import App from './App';
 
-let errorSpy: SpyInstance<
-  [message?: unknown, ...optionalParams: unknown[]],
-  void
->;
+let errorSpy: MockInstance;
 
 beforeEach(() => {
   errorSpy = vi.spyOn(global.console, 'error');

diff --git a/packages/samples/headless-react/src/index.tsx b/packages/samples/headless-react/src/index.tsx
@@ -1,20 +1,10 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
+import {createRoot} from 'react-dom/client';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 
-const strictMode = true;
-
-ReactDOM.hydrate(
-  strictMode ? (
-    <React.StrictMode>
-      <App />
-    </React.StrictMode>
-  ) : (
-    <App />
-  ),
-  document.getElementById('root')
-);
+const container = document.getElementById('root')!;
+const root = createRoot(container);
+root.render(<App />);
 
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))

diff --git a/packages/samples/headless-react/src/pages/SearchPage.tsx b/packages/samples/headless-react/src/pages/SearchPage.tsx
@@ -168,7 +168,7 @@ declare global {
   }
 }
 
-const isServerSideRendered = !!global.window?.HEADLESS_STATE;
+const isServerSideRendered = globalThis.window?.HEADLESS_STATE;
 
 const [KB, MB, GB] = [1e3, 1e6, 1e9];
 

diff --git a/packages/samples/headless-react/tsconfig.json b/packages/samples/headless-react/tsconfig.json
@@ -1,7 +1,7 @@
 {
   "extends": "../../../tsconfig.json",
   "compilerOptions": {
-    "jsx": "react",
+    "jsx": "react-jsx",
     "esModuleInterop": true,
     "lib": ["dom", "dom.iterable", "esnext"],
     "module": "esnext",