issue with date filter and numeric filters when used with dependant f…

…acet fixed
coveo · Nov 15, 2024 · 2160749 · 2160749
1 parent 9771d76
commit 2160749
Show file tree

Hide file tree

Showing 10 changed files with 229 additions and 47 deletions.
diff --git a/...ic/force-app/main/default/lwc/quanticCategoryFacet/__tests__/quanticCategoryFacet.test.js b/...ic/force-app/main/default/lwc/quanticCategoryFacet/__tests__/quanticCategoryFacet.test.js
@@ -50,7 +50,10 @@ function createTestComponent(options = defaultOptions) {
 
 const functionsMocks = {
   buildCategoryFacet: jest.fn(() => categoryFacetControllerMock),
-  buildFacetConditionsManager: jest.fn(),
+  stopWatching: jest.fn(),
+  buildFacetConditionsManager: jest.fn(() => ({
+    stopWatching: functionsMocks.stopWatching,
+  })),
   buildSearchStatus: jest.fn(() => ({
     subscribe: jest.fn((callback) => callback()),
     state: {},
@@ -194,4 +197,24 @@ describe('c-quantic-category-facet', () => {
       );
     });
   });
+
+  describe('when the component is disconnected', () => {
+    it('should make the condition manager stop watching the facet', async () => {
+      const exampleFacetDependency = {
+        parentFacetId: 'filetype',
+        expectedValue: 'txt',
+      };
+      const element = createTestComponent({
+        ...defaultOptions,
+        dependsOn: exampleFacetDependency,
+      });
+      await flushPromises();
+      expect(functionsMocks.buildFacetConditionsManager).toHaveBeenCalledTimes(
+        1
+      );
+
+      document.body.removeChild(element);
+      expect(functionsMocks.stopWatching).toHaveBeenCalledTimes(1);
+    });
+  });
 });
diff --git a/packages/quantic/force-app/main/default/lwc/quanticCategoryFacet/quanticCategoryFacet.js b/packages/quantic/force-app/main/default/lwc/quanticCategoryFacet/quanticCategoryFacet.js
@@ -28,6 +28,7 @@ import {api, LightningElement, track} from 'lwc';
 /** @typedef {import("coveo").CategoryFacetValue} CategoryFacetValue */
 /** @typedef {import("coveo").SearchStatus} SearchStatus */
 /** @typedef {import("coveo").SearchEngine} SearchEngine */
+/** @typedef {import("coveo").FacetConditionsManager} FacetConditionsManager */
 /** @typedef {import('../quanticUtils/facetDependenciesUtils').DependsOn} DependsOn */
 /**
  * @typedef FocusTarget
@@ -219,6 +220,8 @@ export default class QuanticCategoryFacet extends LightningElement {
   focusShouldBeInFacet = false;
   /** @type {boolean} */
   hasInitializationError = false;
+  /** @type {FacetConditionsManager} */
+  categoryfacetConditionsManager;
 
   labels = {
     clear,
@@ -256,6 +259,7 @@ export default class QuanticCategoryFacet extends LightningElement {
   disconnectedCallback() {
     this.unsubscribe?.();
     this.unsubscribeSearchStatus?.();
+    this.categoryfacetConditionsManager?.stopWatching();
   }
 
   /**
@@ -327,15 +331,13 @@ export default class QuanticCategoryFacet extends LightningElement {
   }
 
   initFacetConditionManager(engine) {
-    this.facetConditionsManager = this.headless.buildFacetConditionsManager(
-      engine,
-      {
+    this.categoryfacetConditionsManager =
+      this.headless.buildFacetConditionsManager(engine, {
         facetId: this.facet.state.facetId,
         conditions: generateFacetDependencyConditions({
           [this.dependsOn.parentFacetId]: this.dependsOn.expectedValue,
         }),
-      }
-    );
+      });
   }
 
   get values() {

diff --git a/...es/quantic/force-app/main/default/lwc/quanticDateFacet/__tests__/quanticDateFacet.test.js b/...es/quantic/force-app/main/default/lwc/quanticDateFacet/__tests__/quanticDateFacet.test.js
@@ -47,7 +47,10 @@ function createTestComponent(options = defaultOptions) {
 
 const functionsMocks = {
   buildDateFacet: jest.fn(() => dateFacetControllerMock),
-  buildFacetConditionsManager: jest.fn(),
+  stopWatching: jest.fn(),
+  buildFacetConditionsManager: jest.fn(() => ({
+    stopWatching: functionsMocks.stopWatching,
+  })),
   buildSearchStatus: jest.fn(() => ({
     subscribe: jest.fn((callback) => callback()),
     state: {},
@@ -189,4 +192,24 @@ describe('c-quantic-date-facet', () => {
       functionsMocks.buildDateFacet.mockReturnValue(dateFacetControllerMock);
     });
   });
+
+  describe('when the component is disconnected', () => {
+    it('should make the condition manager stop watching the facet', async () => {
+      const exampleFacetDependency = {
+        parentFacetId: 'filetype',
+        expectedValue: 'txt',
+      };
+      const element = createTestComponent({
+        ...defaultOptions,
+        dependsOn: exampleFacetDependency,
+      });
+      await flushPromises();
+      expect(functionsMocks.buildFacetConditionsManager).toHaveBeenCalledTimes(
+        1
+      );
+
+      document.body.removeChild(element);
+      expect(functionsMocks.stopWatching).toHaveBeenCalledTimes(1);
+    });
+  });
 });
diff --git a/packages/quantic/force-app/main/default/lwc/quanticDateFacet/quanticDateFacet.js b/packages/quantic/force-app/main/default/lwc/quanticDateFacet/quanticDateFacet.js
@@ -23,6 +23,7 @@ import {LightningElement, track, api} from 'lwc';
 /** @typedef {import("coveo").DateFacetValue} DateFacetValue */
 /** @typedef {import("coveo").SearchStatus} SearchStatus */
 /** @typedef {import("coveo").SearchEngine} SearchEngine */
+/** @typedef {import("coveo").FacetConditionsManager} FacetConditionsManager */
 /** @typedef {import('../quanticUtils/facetDependenciesUtils').DependsOn} DependsOn */
 /**
  * @typedef FocusTarget
@@ -160,6 +161,8 @@ export default class QuanticDateFacet extends LightningElement {
   focusShouldBeInFacet = false;
   /** @type {boolean} */
   hasInitializationError = false;
+  /** @type {FacetConditionsManager} */
+  dateFacetConditionsManager;
 
   labels = {
     clearFilter,
@@ -214,6 +217,7 @@ export default class QuanticDateFacet extends LightningElement {
   disconnectedCallback() {
     this.unsubscribe?.();
     this.unsubscribeSearchStatus?.();
+    this.dateFacetConditionsManager?.stopWatching();
   }
 
   updateState() {
@@ -235,7 +239,7 @@ export default class QuanticDateFacet extends LightningElement {
   }
 
   initFacetConditionManager(engine) {
-    this.facetConditionsManager = this.headless.buildFacetConditionsManager(
+    this.dateFacetConditionsManager = this.headless.buildFacetConditionsManager(
       engine,
       {
         facetId: this.facet.state.facetId,

diff --git a/packages/quantic/force-app/main/default/lwc/quanticFacet/__tests__/quanticFacet.test.js b/packages/quantic/force-app/main/default/lwc/quanticFacet/__tests__/quanticFacet.test.js
@@ -47,7 +47,10 @@ function createTestComponent(options = defaultOptions) {
 
 const functionsMocks = {
   buildFacet: jest.fn(() => facetControllerMock),
-  buildFacetConditionsManager: jest.fn(),
+  stopWatching: jest.fn(),
+  buildFacetConditionsManager: jest.fn(() => ({
+    stopWatching: functionsMocks.stopWatching,
+  })),
   buildSearchStatus: jest.fn(() => ({
     subscribe: jest.fn((callback) => callback()),
     state: {},
@@ -210,4 +213,24 @@ describe('c-quantic-facet', () => {
       functionsMocks.buildFacet.mockReturnValue(facetControllerMock);
     });
   });
+
+  describe('when the component is disconnected', () => {
+    it('should make the condition manager stop watching the facet', async () => {
+      const exampleFacetDependency = {
+        parentFacetId: 'filetype',
+        expectedValue: 'txt',
+      };
+      const element = createTestComponent({
+        ...defaultOptions,
+        dependsOn: exampleFacetDependency,
+      });
+      await flushPromises();
+      expect(functionsMocks.buildFacetConditionsManager).toHaveBeenCalledTimes(
+        1
+      );
+
+      document.body.removeChild(element);
+      expect(functionsMocks.stopWatching).toHaveBeenCalledTimes(1);
+    });
+  });
 });
diff --git a/packages/quantic/force-app/main/default/lwc/quanticFacet/quanticFacet.js b/packages/quantic/force-app/main/default/lwc/quanticFacet/quanticFacet.js
@@ -29,6 +29,7 @@ import {LightningElement, track, api} from 'lwc';
 /** @typedef {import("coveo").FacetValue} FacetValue */
 /** @typedef {import("coveo").SearchStatus} SearchStatus */
 /** @typedef {import("coveo").SearchEngine} SearchEngine */
+/** @typedef {import("coveo").FacetConditionsManager} FacetConditionsManager */
 /** @typedef {import('../quanticUtils/facetDependenciesUtils').DependsOn} DependsOn */
 /**
  * @typedef FocusTarget
@@ -229,6 +230,8 @@ export default class QuanticFacet extends LightningElement {
   focusShouldBeInFacet = false;
   /** @type {boolean} */
   hasInitializationError = false;
+  /** @type {FacetConditionsManager} */
+  facetConditionsManager;
 
   labels = {
     showMore,
@@ -319,6 +322,7 @@ export default class QuanticFacet extends LightningElement {
   disconnectedCallback() {
     this.unsubscribe?.();
     this.unsubscribeSearchStatus?.();
+    this.facetConditionsManager?.stopWatching();
   }
 
   updateState() {

diff --git a/...ntic/force-app/main/default/lwc/quanticNumericFacet/__tests__/quanticNumericFacet.test.js b/...ntic/force-app/main/default/lwc/quanticNumericFacet/__tests__/quanticNumericFacet.test.js
@@ -20,6 +20,7 @@ const selectors = {
 };
 
 const exampleFacetId = 'example facet id';
+const exampleFilterId = `${exampleFacetId}_input`;
 const defaultOptions = {
   field: 'example field',
 };
@@ -47,7 +48,16 @@ function createTestComponent(options = defaultOptions) {
 
 const functionsMocks = {
   buildNumericFacet: jest.fn(() => numericFacetControllerMock),
-  buildFacetConditionsManager: jest.fn(),
+  buildNumericFilter: jest.fn(() => ({
+    subscribe: jest.fn((callback) => callback()),
+    state: {
+      facetId: exampleFilterId,
+    },
+  })),
+  stopWatching: jest.fn(),
+  buildFacetConditionsManager: jest.fn(() => ({
+    stopWatching: functionsMocks.stopWatching,
+  })),
   buildSearchStatus: jest.fn(() => ({
     subscribe: jest.fn((callback) => callback()),
     state: {},
@@ -59,6 +69,7 @@ function prepareHeadlessState() {
   mockHeadlessLoader.getHeadlessBundle = () => {
     return {
       buildNumericFacet: functionsMocks.buildNumericFacet,
+      buildNumericFilter: functionsMocks.buildNumericFilter,
       buildSearchStatus: functionsMocks.buildSearchStatus,
       buildFacetConditionsManager: functionsMocks.buildFacetConditionsManager,
     };
@@ -113,29 +124,40 @@ describe('c-quantic-numeric-facet', () => {
       createTestComponent({
         ...defaultOptions,
         dependsOn: exampleFacetDependency,
+        withInput: true,
       });
       await flushPromises();
 
       expect(functionsMocks.buildNumericFacet).toHaveBeenCalledTimes(1);
+      expect(functionsMocks.buildNumericFilter).toHaveBeenCalledTimes(1);
       expect(functionsMocks.buildFacetConditionsManager).toHaveBeenCalledTimes(
-        1
+        2
       );
       expect(functionsMocks.buildFacetConditionsManager).toHaveBeenCalledWith(
         exampleEngine,
         {
           facetId: exampleFacetId,
         }
       );
+      expect(functionsMocks.buildFacetConditionsManager).toHaveBeenCalledWith(
+        exampleEngine,
+        {
+          facetId: exampleFilterId,
+        }
+      );
 
-      expect(generateFacetDependencyConditions).toHaveBeenCalledTimes(1);
+      expect(generateFacetDependencyConditions).toHaveBeenCalledTimes(2);
       expect(generateFacetDependencyConditions).toHaveBeenCalledWith({
         [exampleFacetDependency.parentFacetId]:
           exampleFacetDependency.expectedValue,
       });
     });
 
     it('should not build the controller when the dependsOn property is not set', async () => {
-      createTestComponent();
+      createTestComponent({
+        ...defaultOptions,
+        withInput: true,
+      });
       await flushPromises();
 
       expect(functionsMocks.buildNumericFacet).toHaveBeenCalledTimes(1);
@@ -191,4 +213,25 @@ describe('c-quantic-numeric-facet', () => {
       );
     });
   });
+
+  describe('when the component is disconnected', () => {
+    it('should make the condition manager stop watching the facet', async () => {
+      const exampleFacetDependency = {
+        parentFacetId: 'filetype',
+        expectedValue: 'txt',
+      };
+      const element = createTestComponent({
+        ...defaultOptions,
+        dependsOn: exampleFacetDependency,
+        withInput: true,
+      });
+      await flushPromises();
+      expect(functionsMocks.buildFacetConditionsManager).toHaveBeenCalledTimes(
+        2
+      );
+
+      document.body.removeChild(element);
+      expect(functionsMocks.stopWatching).toHaveBeenCalledTimes(2);
+    });
+  });
 });