@coveo/quantic 3.14.3 → 3.15.0

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

@@ -0,0 +1,178 @@
+/* eslint-disable no-import-assign */
+import QuanticFacetManager from '../quanticFacetManager';
+// @ts-ignore
+import {createElement} from 'lwc';
+import * as mockHeadlessLoader from 'c/quanticHeadlessLoader';
+
+jest.mock('c/quanticHeadlessLoader');
+
+let isInitialized = false;
+
+const exampleEngine = {
+  id: 'exampleEngineId',
+};
+
+const defaultSearchStatusState = {
+  hasResults: true,
+  firstSearchExecuted: true,
+};
+
+let searchStatusState = defaultSearchStatusState;
+
+const defaultOptions = {
+  engineId: exampleEngine.id,
+};
+
+const selectors = {
+  initializationError: 'c-quantic-component-error',
+  facetManagerHost: '.facet-manager__host',
+};
+
+const functionsMocks = {
+  buildFacetManager: jest.fn(() => ({
+    state: {},
+    subscribe: functionsMocks.facetManagerStateSubscriber,
+  })),
+  buildSearchStatus: jest.fn(() => ({
+    state: searchStatusState,
+    subscribe: functionsMocks.searchStatusStateSubscriber,
+  })),
+  facetManagerStateSubscriber: jest.fn((cb) => {
+    cb();
+    return functionsMocks.facetManagerStateUnsubscriber;
+  }),
+  searchStatusStateSubscriber: jest.fn((cb) => {
+    cb();
+    return functionsMocks.searchStatusStateUnsubscriber;
+  }),
+  facetManagerStateUnsubscriber: jest.fn(),
+  searchStatusStateUnsubscriber: jest.fn(),
+};
+
+function createTestComponent(options = defaultOptions) {
+  const element = createElement('c-quantic-facet-manager', {
+    is: QuanticFacetManager,
+  });
+  for (const [key, value] of Object.entries(options)) {
+    element[key] = value;
+  }
+  document.body.appendChild(element);
+  return element;
+}
+
+// Helper function to wait until the microtask queue is empty.
+function flushPromises() {
+  return new Promise((resolve) => setTimeout(resolve, 0));
+}
+
+function prepareHeadlessState() {
+  // @ts-ignore
+  mockHeadlessLoader.getHeadlessBundle = () => {
+    return {
+      buildFacetManager: functionsMocks.buildFacetManager,
+      buildSearchStatus: functionsMocks.buildSearchStatus,
+    };
+  };
+}
+
+function mockSuccessfulHeadlessInitialization() {
+  // @ts-ignore
+  mockHeadlessLoader.initializeWithHeadless = (element, _, initialize) => {
+    if (element instanceof QuanticFacetManager && !isInitialized) {
+      isInitialized = true;
+      initialize(exampleEngine);
+    }
+  };
+}
+
+function mockErroneousHeadlessInitialization() {
+  // @ts-ignore
+  mockHeadlessLoader.initializeWithHeadless = (element) => {
+    if (element instanceof QuanticFacetManager) {
+      element.setInitializationError();
+    }
+  };
+}
+
+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-facet-manager', () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  describe('controller initialization', () => {
+    beforeEach(() => {
+      mockSuccessfulHeadlessInitialization();
+      prepareHeadlessState();
+    });
+
+    it('should build the facet manager controller with the proper parameters and subscribe to its state', async () => {
+      createTestComponent();
+      await flushPromises();
+
+      expect(functionsMocks.buildFacetManager).toHaveBeenCalledTimes(1);
+      expect(functionsMocks.buildFacetManager).toHaveBeenCalledWith(
+        exampleEngine
+      );
+      expect(functionsMocks.facetManagerStateSubscriber).toHaveBeenCalledTimes(
+        1
+      );
+    });
+
+    it('should build the search status controller with the proper parameters and subscribe to its state', async () => {
+      createTestComponent();
+      await flushPromises();
+
+      expect(functionsMocks.buildSearchStatus).toHaveBeenCalledTimes(1);
+      expect(functionsMocks.buildSearchStatus).toHaveBeenCalledWith(
+        exampleEngine
+      );
+      expect(functionsMocks.searchStatusStateSubscriber).toHaveBeenCalledTimes(
+        1
+      );
+    });
+  });
+
+  describe('when an initialization error occurs', () => {
+    beforeEach(() => {
+      mockErroneousHeadlessInitialization();
+    });
+
+    it('should display the initialization error component', async () => {
+      const element = createTestComponent();
+      await flushPromises();
+
+      const initializationError = element.shadowRoot.querySelector(
+        selectors.initializationError
+      );
+
+      expect(initializationError).not.toBeNull();
+    });
+  });
+
+  describe('when the component is initialized', () => {
+    beforeEach(() => {
+      mockSuccessfulHeadlessInitialization();
+      prepareHeadlessState();
+    });
+
+    it('should properly render the facet manager component', async () => {
+      const element = createTestComponent();
+      await flushPromises();
+
+      const facetManager = element.shadowRoot.querySelector(
+        selectors.facetManagerHost
+      );
+
+      expect(facetManager).not.toBeNull();
+    });
+  });
+});

package/force-app/main/default/lwc/quanticFacetManager/e2e/fixture.ts

@@ -0,0 +1,63 @@
+import {FacetManagerObject} from './pageObject';
+import {quanticBase} from '../../../../../../playwright/fixtures/baseFixture';
+import {
+  searchRequestRegex,
+  insightSearchRequestRegex,
+} from '../../../../../../playwright/utils/requests';
+import {InsightSetupObject} from '../../../../../../playwright/page-object/insightSetupObject';
+import {useCaseEnum} from '../../../../../../playwright/utils/useCase';
+import {SearchObject} from '../../../../../../playwright/page-object/searchObject';
+
+const pageUrl = 's/quantic-facet-manager';
+
+interface FacetManagerOptions {}
+
+type QuanticFacetManagerE2ESearchFixtures = {
+  facetManager: FacetManagerObject;
+  search: SearchObject;
+  options: Partial<FacetManagerOptions>;
+};
+
+type QuanticFacetManagerE2EInsightFixtures =
+  QuanticFacetManagerE2ESearchFixtures & {
+    insightSetup: InsightSetupObject;
+  };
+
+export const testSearch =
+  quanticBase.extend<QuanticFacetManagerE2ESearchFixtures>({
+    options: {},
+    search: async ({page}, use) => {
+      await use(new SearchObject(page, searchRequestRegex));
+    },
+    facetManager: async ({page, options, configuration, search}, use) => {
+      await page.goto(pageUrl);
+      configuration.configure(options);
+      await search.waitForSearchResponse();
+
+      await use(new FacetManagerObject(page));
+    },
+  });
+
+export const testInsight =
+  quanticBase.extend<QuanticFacetManagerE2EInsightFixtures>({
+    options: {},
+    search: async ({page}, use) => {
+      await use(new SearchObject(page, insightSearchRequestRegex));
+    },
+    insightSetup: async ({page}, use) => {
+      await use(new InsightSetupObject(page));
+    },
+    facetManager: async (
+      {page, options, search, configuration, insightSetup},
+      use
+    ) => {
+      await page.goto(pageUrl);
+      configuration.configure({...options, useCase: useCaseEnum.insight});
+      await insightSetup.waitForInsightInterfaceInitialization();
+      await search.performSearch();
+      await search.waitForSearchResponse();
+      await use(new FacetManagerObject(page));
+    },
+  });
+
+export {expect} from '@playwright/test';

package/force-app/main/default/lwc/quanticFacetManager/e2e/pageObject.ts

@@ -0,0 +1,23 @@
+import type {Locator, Page} from '@playwright/test';
+
+export class FacetManagerObject {
+  constructor(public page: Page) {
+    this.page = page;
+  }
+
+  get facetManager(): Locator {
+    return this.page.locator('c-quantic-facet-manager');
+  }
+
+  get facetManagerItems(): Locator {
+    return this.facetManager.getByTestId('facet-manager__item');
+  }
+
+  get itemTemplateSlot(): Locator {
+    return this.facetManager.locator('slot[name="itemTemplate"]');
+  }
+
+  getFacetManagerItemByIndex(index: number): Locator {
+    return this.facetManagerItems.nth(index);
+  }
+}

package/force-app/main/default/lwc/quanticFacetManager/e2e/quanticFacetManager.e2e.ts

@@ -0,0 +1,82 @@
+import {testSearch, testInsight, expect} from './fixture';
+import {useCaseTestCases} from '../../../../../../playwright/utils/useCase';
+
+const fixtures = {
+  search: testSearch,
+  insight: testInsight,
+};
+
+const exampleFacetsOrder = ['objecttype', 'date', 'language'];
+
+/**
+ * Filters out any facetId which contains a filter input "_input" because they are not displayed in the facet manager.
+ */
+function filterInputFacets(facets: any): string[] {
+  return facets
+    .map((facet: any) => facet.facetId)
+    .filter((id: string) => !/_input$/.test(id));
+}
+
+useCaseTestCases.forEach((useCase) => {
+  let test = fixtures[useCase.value];
+
+  test.describe(`quantic facet manager ${useCase.label}`, () => {
+    test('should load facets in the same order as in the initial search response', async ({
+      facetManager,
+      search,
+    }) => {
+      const searchResponsePromise = search.waitForSearchResponse();
+      await search.performSearch();
+
+      const searchResponse = await searchResponsePromise;
+      const {facets} = await searchResponse.json();
+      expect(facets).not.toBeNull();
+
+      const filteredIds = filterInputFacets(facets);
+
+      filteredIds.forEach(async (facetId: any, index: number) => {
+        const facetManagerItem = facetManager.getFacetManagerItemByIndex(index);
+        expect(await facetManagerItem.getAttribute('data-facet-id')).toEqual(
+          facetId
+        );
+      });
+    });
+
+    test.describe('when the facets are reordered', () => {
+      test('should load facets in the reordered order', async ({
+        facetManager,
+        search,
+      }) => {
+        await search.mockSearchFacetOrder(exampleFacetsOrder);
+        const searchResponsePromise = search.waitForSearchResponse();
+        await search.performSearch();
+
+        const searchResponse = await searchResponsePromise;
+        const {facets} = await searchResponse.json();
+        expect(facets).not.toBeNull();
+
+        exampleFacetsOrder.forEach(async (facetId: string, index: number) => {
+          const facetManagerItem =
+            facetManager.getFacetManagerItemByIndex(index);
+          expect(await facetManagerItem.getAttribute('data-facet-id')).toEqual(
+            facetId
+          );
+        });
+      });
+    });
+
+    test.describe('when an itemTemplate slot is provided', () => {
+      test('should customize the element that wraps each facet according to the itemTemplate slot', async ({
+        facetManager,
+      }) => {
+        const expectedClass = 'slds-m-around_xx-large';
+        expect(facetManager.itemTemplateSlot).not.toBeNull();
+
+        const facetManagerItems = await facetManager.facetManagerItems.all();
+        facetManagerItems.forEach(async (item: any) => {
+          expect(await item.getAttribute('class')).toContain(expectedClass);
+        });
+      });
+    });
+  });
+});

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

@@ -121,6 +121,7 @@ export default class QuanticFacetManager extends LightningElement {
       // @ts-ignore
       wrapper.setAttribute('data-facet-id', facet.facetId ?? facet.field);
       wrapper.classList.add('facet-manager__item');
+      wrapper.setAttribute('data-testid', 'facet-manager__item');
 
       wrapper.appendChild(facet);
       this.host.appendChild(wrapper);

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

@@ -7,6 +7,10 @@ import * as mockHeadlessLoader from 'c/quanticHeadlessLoader';
 let mockAnswerHeight = 250;
 let mockedConsoleWarn;
 
+const exampleItemOne = document.createElement('div');
+exampleItemOne.innerText = 'Custom error message';
+const exampleAssignedElements = [exampleItemOne];
+
 jest.mock('c/quanticHeadlessLoader');
 jest.mock('c/quanticUtils', () => ({
   AriaLiveRegion: jest.fn(() => ({
@@ -35,7 +39,8 @@ const defaultOptions = {
   maxCollapsedHeight: 250,
 };
 
-function createTestComponent(options = defaultOptions) {
+function createTestComponent(options = defaultOptions, assignedElements = []) {
+  mockSlotAssignedNodes(assignedElements);
   const element = createElement('c-quantic-generated-answer', {
     is: QuanticGeneratedAnswer,
   });
@@ -61,6 +66,8 @@ const selectors = {
   generatedAnswerCollapseToggle:
     '[data-testid="generated-answer__answer-toggle"]',
   generatedAnswerDisclaimer: '[data-testid="generated-answer__disclaimer"]',
+  generatedAnswerNoAnswerCard:
+    '[data-testid="generated-answer__no-answer-card"]',
 };
 
 const initialSearchStatusState = {
@@ -68,7 +75,7 @@ const initialSearchStatusState = {
 };
 let searchStatusState = initialSearchStatusState;
 
-const initialGeneratedAnswerState = {isVisible: true};
+const initialGeneratedAnswerState = {isVisible: true, cannotAnswer: false};
 let generatedAnswerState = initialGeneratedAnswerState;
 
 const functionsMocks = {
@@ -94,6 +101,16 @@ const functionsMocks = {
   retry: jest.fn(),
 };
 
+/**
+ * Mocks the return value of the assignedNodes method.
+ * @param {Array<Element>} assignedElements
+ */
+function mockSlotAssignedNodes(assignedElements) {
+  HTMLSlotElement.prototype.assignedNodes = function () {
+    return assignedElements;
+  };
+}
+
 // Helper function to wait until the microtask queue is empty.
 function flushPromises() {
   // eslint-disable-next-line @lwc/lwc/no-async-operation
@@ -706,7 +723,7 @@ describe('c-quantic-generated-answer', () => {
       });
     });
 
-    describe('when the answer is empty', () => {
+    describe('when the answer cannot be generated after a query is executed', () => {
       const exampleEmptyAnswer = '';
       const exampleAnswerContentFormat = 'text/markdown';
       beforeEach(() => {
@@ -715,6 +732,7 @@ describe('c-quantic-generated-answer', () => {
           isStreaming: false,
           answer: exampleEmptyAnswer,
           answerContentFormat: exampleAnswerContentFormat,
+          cannotAnswer: true,
         };
         mockSuccessfulHeadlessInitialization();
         prepareHeadlessState();
@@ -724,15 +742,41 @@ describe('c-quantic-generated-answer', () => {
         generatedAnswerState = initialGeneratedAnswerState;
       });
 
-      it('should not display the generated answer card', async () => {
-        const element = createTestComponent();
-        await flushPromises();
+      describe('when no custom error message slot is provided', () => {
+        it('should not display the generated answer card', async () => {
+          const element = createTestComponent();
+          await flushPromises();
 
-        const generatedAnswerCard = element.shadowRoot.querySelector(
-          selectors.generatedAnswerCard
-        );
+          const generatedAnswerCard = element.shadowRoot.querySelector(
+            selectors.generatedAnswerCard
+          );
+          expect(generatedAnswerCard).toBeNull();
 
-        expect(generatedAnswerCard).toBeNull();
+          const generatedAnswerCardNoAnswer = element.shadowRoot.querySelector(
+            selectors.generatedAnswerNoAnswerCard
+          );
+          expect(generatedAnswerCardNoAnswer).toBeNull();
+        });
+      });
+
+      describe('when a custom error message slot is provided', () => {
+        it('should properly display the no generated answer card', async () => {
+          const element = createTestComponent(
+            defaultOptions,
+            exampleAssignedElements
+          );
+          await flushPromises();
+
+          const generatedAnswerCard = element.shadowRoot.querySelector(
+            selectors.generatedAnswerCard
+          );
+          expect(generatedAnswerCard).toBeNull();
+
+          const generatedAnswerCardNoAnswer = element.shadowRoot.querySelector(
+            selectors.generatedAnswerNoAnswerCard
+          );
+          expect(generatedAnswerCardNoAnswer).not.toBeNull();
+        });
       });
     });
   });

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

@@ -52,9 +52,13 @@ const GENERATED_ANSWER_DATA_KEY = 'coveo-generated-answer-data';
 
 /**
  * The `QuanticGeneratedAnswer` component automatically generates an answer using Coveo machine learning models to answer the query executed by the user.
+ * This component includes a slot, "no-answer-message", which allows for rendering a custom message when no answer is generated.
  * @category Search
+ * @slot no-answer-message - Slot that allows the rendering of a custom message when no answer is generated.
  * @example
- * <c-quantic-generated-answer engine-id={engineId} with-toggle collapsible></c-quantic-generated-answer>
+ * <c-quantic-generated-answer engine-id={engineId} with-toggle collapsible>
+ *  <div slot="no-answer-message">No answer was generated.</div>
+ * </c-quantic-generated-answer>
  */
 export default class QuanticGeneratedAnswer extends LightningElement {
   /**
@@ -573,6 +577,20 @@ export default class QuanticGeneratedAnswer extends LightningElement {
     return this.state?.expanded;
   }
 
+  /**
+   * Returns whether the component has a custom message to display when no answer is generated.
+   * @returns {boolean}
+   */
+  get hasCustomNoAnswerMessage() {
+    /** @type {HTMLSlotElement} */
+    const slot = this.template.querySelector('slot[name="no-answer-message"]');
+    return !!slot?.assignedNodes()?.length;
+  }
+
+  get shouldDisplayCustomNoAnswerMessage() {
+    return this.state?.cannotAnswer && this.hasCustomNoAnswerMessage;
+  }
+
   /**
    * Sets the component in the initialization error state.
    */

package/force-app/main/default/lwc/quanticGeneratedAnswer/templates/generatedAnswer.css

@@ -10,6 +10,10 @@
   position: relative;
 }
 
+.generated-answer__content {
+  word-wrap: break-word;
+}
+
 .generated-answer__footer {
   gap: 1rem;
 }

package/force-app/main/default/lwc/quanticGeneratedAnswer/templates/generatedAnswer.html

@@ -115,4 +115,21 @@
       </template>
     </div>
   </template>
+  <template lwc:if={shouldDisplayCustomNoAnswerMessage}>
+      <div data-testid="generated-answer__no-answer-card" class="slds-box">
+        <div class="generated-answer__card-header slds-grid">
+          <span class="generated-answer__badge slds-var-p-around_x-small slds-text-title_bold"
+            >{labels.generatedAnswerForYou}</span
+          >
+        </div>
+          <div class="generated-answer__content slds-var-m-top_medium">
+            <div class={generatedAnswerClass}>
+              <slot name="no-answer-message"></slot>
+            </div>
+          </div>
+      </div>
+  </template>
+  <div class="slds-hide">
+    <slot name="no-answer-message"></slot>
+  </div>
 </template>

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

@@ -91,7 +91,7 @@ describe('c-quantic-tooltip', () => {
     expect(tooltip.classList.contains('tooltip__content--visible')).toBe(false);
   });
 
-  it('shouldnot display the tooltip when the slot content is empty', async () => {
+  it('should not display the tooltip when the slot content is empty', async () => {
     const element = createTestComponent(exampleOptions, []);
     await flushPromises();