@coveo/quantic 3.15.4-pre.da198077a0 → 3.15.4

package/docs/out/quantic-docs.json

@@ -1027,8 +1027,8 @@
                         "attribute": "answer-configuration-id",
                         "access": "@api",
                         "description": "<p>The unique identifier of the answer configuration to use to generate the answer.</p>",
-                        "required": true,
-                        "defaultValue": "",
+                        "required": false,
+                        "defaultValue": "{undefined}",
                         "type": "string"
                     },
                     {

package/force-app/main/default/lwc/quanticCategoryFacet/quanticCategoryFacet.js

@@ -311,6 +311,11 @@ export default class QuanticCategoryFacet extends LightningElement {
       facetId: this.facet.state.facetId,
       format: this.remoteGetValueCaption,
       element: this.template.host,
+      metadata: {
+        customCaptions: Object.entries(this.customCaptions).map(
+          ([key, label]) => ({value: key, caption: label})
+        ),
+      },
     });
   };
 

package/force-app/main/default/lwc/quanticFacet/quanticFacet.js

@@ -313,6 +313,11 @@ export default class QuanticFacet extends LightningElement {
       facetId: this.facet.state.facetId,
       format: this.remoteGetValueCaption,
       element: this.template.host,
+      metadata: {
+        customCaptions: Object.entries(this.customCaptions).map(
+          ([key, label]) => ({value: key, caption: label})
+        ),
+      },
     });
     if (this.dependsOn) {
       this.validateDependsOnProperty();

package/force-app/main/default/lwc/quanticGeneratedAnswer/quanticGeneratedAnswer.js

@@ -92,6 +92,7 @@ export default class QuanticGeneratedAnswer extends LightningElement {
    * The unique identifier of the answer configuration to use to generate the answer.
    * @api
    * @type {string}
+   * @default {undefined}
    */
   @api answerConfigurationId;
   /**

package/force-app/main/default/lwc/quanticRefineModalContent/__tests__/quanticRefineModalContent.test.js

@@ -0,0 +1,501 @@
+/* eslint-disable no-import-assign */
+// @ts-ignore
+import {createElement} from 'lwc';
+import QuanticRefineModalContent from 'c/quanticRefineModalContent';
+import * as mockHeadlessLoader from 'c/quanticHeadlessLoader';
+
+jest.mock('c/quanticHeadlessLoader');
+
+/** @type {{disableDynamicNavigation: boolean}} */
+const defaultOptions = {
+  disableDynamicNavigation: false,
+};
+
+function createTestComponent(options = defaultOptions) {
+  const element = createElement('c-quantic-refine-modal-content', {
+    is: QuanticRefineModalContent,
+  });
+  for (const [key, value] of Object.entries(options)) {
+    element[key] = value;
+  }
+
+  document.body.appendChild(element);
+  return element;
+}
+
+const selectors = {
+  quanticFacet: 'c-quantic-facet',
+  quanticCategoryFacet: 'c-quantic-category-facet',
+  quanticFacetCaption: 'c-quantic-facet-caption',
+};
+
+const initialSearchStatusState = {
+  hasError: false,
+};
+let searchStatusState = initialSearchStatusState;
+
+const initialBreadcrumbManagerState = {};
+let breadcrumbManagerState = initialBreadcrumbManagerState;
+
+const functionsMocks = {
+  buildBreadcrumbManager: jest.fn(() => ({
+    state: breadcrumbManagerState,
+    subscribe: functionsMocks.breadcrumbManagerStateSubscriber,
+  })),
+  buildSearchStatus: jest.fn(() => ({
+    state: searchStatusState,
+    subscribe: functionsMocks.searchStatusStateSubscriber,
+  })),
+  breadcrumbManagerStateSubscriber: jest.fn((cb) => {
+    cb();
+    return functionsMocks.breadcrumbManagerStateUnsubscriber;
+  }),
+  searchStatusStateSubscriber: jest.fn((cb) => {
+    cb();
+    return functionsMocks.searchStatusStateUnsubscriber;
+  }),
+  breadcrumbManagerStateUnsubscriber: jest.fn(),
+  searchStatusStateUnsubscriber: jest.fn(),
+  retry: jest.fn(),
+};
+
+// Helper function to wait until the microtask queue is empty.
+function flushPromises() {
+  // eslint-disable-next-line @lwc/lwc/no-async-operation
+  return new Promise((resolve) => setTimeout(resolve, 0));
+}
+
+const exampleEngine = {
+  id: 'dummy engine',
+};
+let isInitialized = false;
+
+function prepareHeadlessState() {
+  // @ts-ignore
+  mockHeadlessLoader.getHeadlessBundle = () => {
+    return {
+      buildBreadcrumbManager: functionsMocks.buildBreadcrumbManager,
+      buildSearchStatus: functionsMocks.buildSearchStatus,
+    };
+  };
+}
+
+function prepareQuanticStore(facetData) {
+  // @ts-ignore
+  mockHeadlessLoader.getAllFacetsFromStore = () => {
+    return facetData;
+  };
+}
+
+function mockSuccessfulHeadlessInitialization() {
+  // @ts-ignore
+  mockHeadlessLoader.initializeWithHeadless = (element, _, initialize) => {
+    if (element instanceof QuanticRefineModalContent && !isInitialized) {
+      isInitialized = true;
+      initialize(exampleEngine);
+    }
+  };
+}
+
+function cleanup() {
+  // The jsdom instance is shared across test cases in a single file so reset the DOM
+  while (document.body.firstChild) {
+    document.body.removeChild(document.body.firstChild);
+  }
+  jest.clearAllMocks();
+  isInitialized = false;
+}
+
+describe('c-quantic-refine-modal-content', () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  describe('when the dynamic navigation feature is enabled', () => {
+    describe('standard facet', () => {
+      const exampleFacetAttributes = {
+        facetId: 'filetype',
+        field: 'filetype',
+        label: 'File Type',
+        numberOfValues: '8',
+        sortCriteria: 'occurrences',
+        noSearch: 'true',
+        displayValuesAs: 'link',
+        noFilterFacetCount: 'false',
+        injectionDepth: '1000',
+        customSort: 'YouTubeVideo,PDF,HTML',
+        dependsOn: '',
+      };
+
+      beforeEach(() => {
+        mockSuccessfulHeadlessInitialization();
+        prepareHeadlessState();
+        prepareQuanticStore({
+          filetype: {
+            label: 'File Type',
+            facetId: 'filetype',
+            element: {
+              localName: 'c-quantic-facet',
+              ...exampleFacetAttributes,
+            },
+          },
+        });
+      });
+
+      it('should display the quantic facet with its attributes and without custom captions', async () => {
+        const element = createTestComponent();
+        await flushPromises();
+
+        const quanticFacet = element.shadowRoot.querySelector(
+          selectors.quanticFacet
+        );
+        expect(quanticFacet).not.toBeNull();
+
+        Object.entries(exampleFacetAttributes).forEach(([key, value]) => {
+          expect(quanticFacet[key]).toBe(value);
+        });
+
+        const quanticFacetCaption = element.shadowRoot.querySelector(
+          selectors.quanticFacetCaption
+        );
+        expect(quanticFacetCaption).toBeNull();
+      });
+
+      describe('when a standard facet is registered in the store with custom captions', () => {
+        const exampleCaption = {
+          value: 'YouTubeVideo',
+          caption: 'YouTube Video',
+        };
+
+        beforeEach(() => {
+          mockSuccessfulHeadlessInitialization();
+          prepareHeadlessState();
+          prepareQuanticStore({
+            filetype: {
+              label: 'File Type',
+              facetId: 'filetype',
+              element: {
+                localName: 'c-quantic-facet',
+                ...exampleFacetAttributes,
+              },
+              metadata: {
+                customCaptions: [exampleCaption],
+              },
+            },
+          });
+        });
+
+        it('should display the quantic facet with its custom captions and attributes', async () => {
+          const element = createTestComponent();
+          await flushPromises();
+
+          const quanticFacet = element.shadowRoot.querySelector(
+            selectors.quanticFacet
+          );
+          expect(quanticFacet).not.toBeNull();
+
+          const quanticFacetCaption = element.shadowRoot.querySelector(
+            selectors.quanticFacetCaption
+          );
+          expect(quanticFacetCaption).not.toBeNull();
+          expect(quanticFacetCaption.value).toBe(exampleCaption.value);
+          expect(quanticFacetCaption.caption).toBe(exampleCaption.caption);
+        });
+      });
+    });
+
+    describe('category facet', () => {
+      const exampleCategoryFacetAttributes = {
+        facetId: 'country',
+        field: 'country',
+        label: 'Country',
+        basePath: 'North America',
+        noFilterByBasePath: 'false',
+        noFilterFacetCount: 'false',
+        delimitingCharacter: '>',
+        numberOfValues: '10',
+        sortCriteria: 'alphanumeric',
+        withSearch: 'true',
+        dependsOn: '',
+      };
+
+      beforeEach(() => {
+        mockSuccessfulHeadlessInitialization();
+        prepareHeadlessState();
+        prepareQuanticStore({
+          country: {
+            label: 'Country',
+            facetId: 'country',
+            element: {
+              localName: 'c-quantic-category-facet',
+              ...exampleCategoryFacetAttributes,
+            },
+          },
+        });
+      });
+
+      it('should display the quantic category facet with its attributes and without custom captions', async () => {
+        const element = createTestComponent();
+        await flushPromises();
+
+        const quanticCategoryFacet = element.shadowRoot.querySelector(
+          selectors.quanticCategoryFacet
+        );
+        expect(quanticCategoryFacet).not.toBeNull();
+
+        Object.entries(exampleCategoryFacetAttributes).forEach(
+          ([key, value]) => {
+            expect(quanticCategoryFacet[key]).toBe(value);
+          }
+        );
+
+        const quanticFacetCaption = element.shadowRoot.querySelector(
+          selectors.quanticFacetCaption
+        );
+        expect(quanticFacetCaption).toBeNull();
+      });
+
+      describe('when a category facet is registered in the store with custom captions', () => {
+        const exampleCaption = {
+          value: 'Ca',
+          caption: 'Canada',
+        };
+
+        beforeEach(() => {
+          mockSuccessfulHeadlessInitialization();
+          prepareHeadlessState();
+          prepareQuanticStore({
+            country: {
+              label: 'Country',
+              facetId: 'country',
+              element: {
+                localName: 'c-quantic-category-facet',
+                ...exampleCategoryFacetAttributes,
+              },
+              metadata: {
+                customCaptions: [exampleCaption],
+              },
+            },
+          });
+        });
+
+        it('should display the quantic category facet with its custom captions', async () => {
+          const element = createTestComponent();
+          await flushPromises();
+
+          const quanticCategoryFacet = element.shadowRoot.querySelector(
+            selectors.quanticCategoryFacet
+          );
+          expect(quanticCategoryFacet).not.toBeNull();
+
+          const quanticFacetCaption = element.shadowRoot.querySelector(
+            selectors.quanticFacetCaption
+          );
+          expect(quanticFacetCaption).not.toBeNull();
+          expect(quanticFacetCaption.value).toBe(exampleCaption.value);
+          expect(quanticFacetCaption.caption).toBe(exampleCaption.caption);
+        });
+      });
+    });
+  });
+
+  describe('when the dynamic navigation feature is disabled', () => {
+    describe('standard facet', () => {
+      const exampleFacetAttributes = {
+        facetId: 'filetype',
+        field: 'filetype',
+        label: 'File Type',
+        numberOfValues: '8',
+        sortCriteria: 'occurrences',
+        noSearch: 'true',
+        displayValuesAs: 'link',
+        noFilterFacetCount: 'false',
+        injectionDepth: '1000',
+        customSort: 'YouTubeVideo,PDF,HTML',
+        dependsOn: '',
+      };
+
+      beforeEach(() => {
+        mockSuccessfulHeadlessInitialization();
+        prepareHeadlessState();
+        prepareQuanticStore({
+          filetype: {
+            label: 'File Type',
+            facetId: 'filetype',
+            element: {
+              localName: 'c-quantic-facet',
+              ...exampleFacetAttributes,
+            },
+          },
+        });
+      });
+
+      it('should display the quantic facet with its attributes and without custom captions', async () => {
+        const element = createTestComponent({
+          ...defaultOptions,
+          disableDynamicNavigation: true,
+        });
+        await flushPromises();
+
+        const quanticFacet = element.shadowRoot.querySelector(
+          selectors.quanticFacet
+        );
+        expect(quanticFacet).not.toBeNull();
+
+        Object.entries(exampleFacetAttributes).forEach(([key, value]) => {
+          expect(quanticFacet[key]).toBe(value);
+        });
+
+        const quanticFacetCaption = element.shadowRoot.querySelector(
+          selectors.quanticFacetCaption
+        );
+        expect(quanticFacetCaption).toBeNull();
+      });
+
+      describe('when a standard facet is registered in the store with custom captions', () => {
+        const exampleCaption = {
+          value: 'YouTubeVideo',
+          caption: 'YouTube Video',
+        };
+
+        beforeEach(() => {
+          mockSuccessfulHeadlessInitialization();
+          prepareHeadlessState();
+          prepareQuanticStore({
+            filetype: {
+              label: 'File Type',
+              facetId: 'filetype',
+              element: {
+                localName: 'c-quantic-facet',
+                ...exampleFacetAttributes,
+              },
+              metadata: {
+                customCaptions: [exampleCaption],
+              },
+            },
+          });
+        });
+
+        it('should display the quantic facet with its custom captions and attributes', async () => {
+          const element = createTestComponent({
+            ...defaultOptions,
+            disableDynamicNavigation: true,
+          });
+          await flushPromises();
+
+          const quanticFacet = element.shadowRoot.querySelector(
+            selectors.quanticFacet
+          );
+          expect(quanticFacet).not.toBeNull();
+
+          const quanticFacetCaption = element.shadowRoot.querySelector(
+            selectors.quanticFacetCaption
+          );
+          expect(quanticFacetCaption).not.toBeNull();
+          expect(quanticFacetCaption.value).toBe(exampleCaption.value);
+          expect(quanticFacetCaption.caption).toBe(exampleCaption.caption);
+        });
+      });
+    });
+
+    describe('category facet', () => {
+      const exampleCategoryFacetAttributes = {
+        facetId: 'country',
+        field: 'country',
+        label: 'Country',
+        basePath: 'North America',
+        noFilterByBasePath: 'false',
+        noFilterFacetCount: 'false',
+        delimitingCharacter: '>',
+        numberOfValues: '10',
+        sortCriteria: 'alphanumeric',
+        withSearch: 'true',
+        dependsOn: '',
+      };
+
+      beforeEach(() => {
+        mockSuccessfulHeadlessInitialization();
+        prepareHeadlessState();
+        prepareQuanticStore({
+          country: {
+            label: 'Country',
+            facetId: 'country',
+            element: {
+              localName: 'c-quantic-category-facet',
+              ...exampleCategoryFacetAttributes,
+            },
+          },
+        });
+      });
+
+      it('should display the quantic category facet with its attributes and without custom captions', async () => {
+        const element = createTestComponent({
+          ...defaultOptions,
+          disableDynamicNavigation: true,
+        });
+        await flushPromises();
+
+        const quanticCategoryFacet = element.shadowRoot.querySelector(
+          selectors.quanticCategoryFacet
+        );
+        expect(quanticCategoryFacet).not.toBeNull();
+
+        Object.entries(exampleCategoryFacetAttributes).forEach(
+          ([key, value]) => {
+            expect(quanticCategoryFacet[key]).toBe(value);
+          }
+        );
+
+        const quanticFacetCaption = element.shadowRoot.querySelector(
+          selectors.quanticFacetCaption
+        );
+        expect(quanticFacetCaption).toBeNull();
+      });
+
+      describe('when a category facet is registered in the store with custom captions', () => {
+        const exampleCaption = {
+          value: 'Ca',
+          caption: 'Canada',
+        };
+
+        beforeEach(() => {
+          mockSuccessfulHeadlessInitialization();
+          prepareHeadlessState();
+          prepareQuanticStore({
+            country: {
+              label: 'Country',
+              facetId: 'country',
+              element: {
+                localName: 'c-quantic-category-facet',
+                ...exampleCategoryFacetAttributes,
+              },
+              metadata: {
+                customCaptions: [exampleCaption],
+              },
+            },
+          });
+        });
+
+        it('should display the quantic category facet with its custom captions', async () => {
+          const element = createTestComponent({
+            ...defaultOptions,
+            disableDynamicNavigation: true,
+          });
+          await flushPromises();
+
+          const quanticCategoryFacet = element.shadowRoot.querySelector(
+            selectors.quanticCategoryFacet
+          );
+          expect(quanticCategoryFacet).not.toBeNull();
+
+          const quanticFacetCaption = element.shadowRoot.querySelector(
+            selectors.quanticFacetCaption
+          );
+          expect(quanticFacetCaption).not.toBeNull();
+          expect(quanticFacetCaption.value).toBe(exampleCaption.value);
+          expect(quanticFacetCaption.caption).toBe(exampleCaption.caption);
+        });
+      });
+    });
+  });
+});

package/force-app/main/default/lwc/quanticRefineModalContent/quanticRefineModalContent.js

@@ -184,6 +184,12 @@ export default class QuanticRefineModalContent extends LightningElement {
   toDefaultFacet = (facetObject) => {
     return {
       isDefault: true,
+      customCaptions: facetObject.metadata?.customCaptions?.map?.(
+        (caption, index) => ({
+          ...caption,
+          index,
+        })
+      ),
       ...this.extractFacetDataFromElement(
         facetObject.element,
         QuanticFacet.attributes
@@ -199,6 +205,12 @@ export default class QuanticRefineModalContent extends LightningElement {
   toCategoryFacet = (facetObject) => {
     return {
       isCategory: true,
+      customCaptions: facetObject.metadata?.customCaptions?.map?.(
+        (caption, index) => ({
+          ...caption,
+          index,
+        })
+      ),
       ...this.extractFacetDataFromElement(
         facetObject.element,
         QuanticCategoryFacet.attributes
@@ -272,7 +284,7 @@ export default class QuanticRefineModalContent extends LightningElement {
    * @returns {Array<SortOption>}
    */
   get sortOptions() {
-    return this.sortData.length > 0 ? this.sortData : [];
+    return this.sortData?.length > 0 ? this.sortData : [];
   }
 
   get shouldDisplayFiltersTitle() {

package/force-app/main/default/lwc/quanticRefineModalContent/templates/disabledDynamicNavigation.html

@@ -72,7 +72,16 @@
             key={facet.field}
             depends-on={facet.dependsOn}
             is-collapsed
-          ></c-quantic-category-facet>
+          >
+            <template for:each={facet.customCaptions} for:item="caption">
+              <c-quantic-facet-caption
+                key={caption.index}
+                slot="captions"
+                value={caption.value}
+                caption={caption.caption}
+              ></c-quantic-facet-caption>
+            </template>
+          </c-quantic-category-facet>
         </template>
         <template if:true={facet.isTimeframe}>
           <c-quantic-timeframe-facet
@@ -127,7 +136,16 @@
             custom-sort={facet.customSort}
             depends-on={facet.dependsOn}
             is-collapsed
-          ></c-quantic-facet>
+          >
+            <template for:each={facet.customCaptions} for:item="caption">
+              <c-quantic-facet-caption
+                key={caption.index}
+                slot="captions"
+                value={caption.value}
+                caption={caption.caption}
+              ></c-quantic-facet-caption>
+            </template>
+          </c-quantic-facet>
         </template>
       </template>
     </template>

package/force-app/main/default/lwc/quanticRefineModalContent/templates/dynamicNavigation.html

@@ -73,7 +73,16 @@
               key={facet.field}
               depends-on={facet.dependsOn}
               is-collapsed
-            ></c-quantic-category-facet>
+            >
+              <template for:each={facet.customCaptions} for:item="caption">
+                <c-quantic-facet-caption
+                  key={caption.index}
+                  slot="captions"
+                  value={caption.value}
+                  caption={caption.caption}
+                ></c-quantic-facet-caption>
+              </template>
+            </c-quantic-category-facet>
           </template>
           <template if:true={facet.isTimeframe}>
             <c-quantic-timeframe-facet
@@ -128,7 +137,16 @@
               custom-sort={facet.customSort}
               depends-on={facet.dependsOn}
               is-collapsed
-            ></c-quantic-facet>
+            >
+              <template for:each={facet.customCaptions} for:item="caption">
+                <c-quantic-facet-caption
+                  key={caption.index}
+                  slot="captions"
+                  value={caption.value}
+                  caption={caption.caption}
+                ></c-quantic-facet-caption>
+              </template>
+            </c-quantic-facet>
           </template>
         </template>
       </c-quantic-facet-manager>