@coveo/quantic 3.33.0 → 3.33.2

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

@@ -0,0 +1,341 @@
+/* eslint-disable jest/no-conditional-expect */
+/* eslint-disable no-import-assign */
+import QuanticSmartSnippet from '../quanticSmartSnippet';
+// @ts-ignore
+import {createElement} from 'lwc';
+import * as mockHeadlessLoader from 'c/quanticHeadlessLoader';
+
+let mockAnswerHeight = 300;
+
+jest.mock('c/quanticHeadlessLoader');
+jest.mock('c/quanticUtils', () => ({
+  getAbsoluteHeight: jest.fn(() => {
+    return mockAnswerHeight;
+  }),
+  I18nUtils: {
+    format: jest.fn(),
+  },
+  LinkUtils: {
+    bindAnalyticsToLink: jest.fn(),
+  },
+}));
+
+jest.mock(
+  '@salesforce/label/c.quantic_SmartSnippetShowMore',
+  () => ({default: 'Show more'}),
+  {
+    virtual: true,
+  }
+);
+
+jest.mock(
+  '@salesforce/label/c.quantic_SmartSnippetShowLess',
+  () => ({default: 'Show less'}),
+  {
+    virtual: true,
+  }
+);
+
+let isInitialized = false;
+
+const exampleEngine = {
+  id: 'exampleEngineId',
+};
+
+const defaultOptions = {
+  engineId: exampleEngine.id,
+};
+
+const selectors = {
+  initializationError: 'c-quantic-component-error',
+  smartSnippet: 'c-quantic-smart-snippet',
+  smartSnippetAnswer: 'c-quantic-smart-snippet-answer',
+  smartSnippetToggleButton: '[data-testid="smart-snippet__toggle-button"]',
+  smartSnippetSource: 'c-quantic-smart-snippet-source',
+  smartSnippetFeedback: 'c-quantic-feedback',
+};
+
+const defaultSearchStatusState = {
+  hasResults: true,
+  firstSearchExecuted: true,
+};
+
+let searchStatusState = defaultSearchStatusState;
+
+const mockSmartSnippetSource = {
+  title: 'The Lord of the Rings',
+  uri: 'https://en.wikipedia.org/wiki/The_Lord_of_the_Rings',
+};
+
+const defaultSmartSnippetState = {
+  question: 'Where was Gondor when Westfold fell?',
+  answer: 'Gondor was obviously busy with other things.',
+  documentId: '1',
+  expanded: false,
+  answerFound: true,
+  liked: false,
+  disliked: false,
+  feedbackModalOpen: false,
+  source: mockSmartSnippetSource,
+};
+
+let smartSnippetState = defaultSmartSnippetState;
+
+const functionsMocks = {
+  buildSmartSnippet: jest.fn(() => ({
+    state: smartSnippetState,
+    subscribe: functionsMocks.smartSnippetStateSubscriber,
+    expand: functionsMocks.expand,
+    collapse: functionsMocks.collapse,
+  })),
+  buildSearchStatus: jest.fn(() => ({
+    state: searchStatusState,
+    subscribe: functionsMocks.searchStatusStateSubscriber,
+  })),
+  smartSnippetStateSubscriber: jest.fn((cb) => {
+    cb();
+    return functionsMocks.smartSnippetStateUnsubscriber;
+  }),
+  searchStatusStateSubscriber: jest.fn((cb) => {
+    cb();
+    return functionsMocks.searchStatusStateUnsubscriber;
+  }),
+  smartSnippetStateUnsubscriber: jest.fn(),
+  searchStatusStateUnsubscriber: jest.fn(),
+  expand: jest.fn(),
+  collapse: jest.fn(),
+};
+
+function createTestComponent(options = defaultOptions) {
+  const element = createElement('c-quantic-smart-snippet', {
+    is: QuanticSmartSnippet,
+  });
+  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 {
+      buildSmartSnippet: functionsMocks.buildSmartSnippet,
+      buildSearchStatus: functionsMocks.buildSearchStatus,
+    };
+  };
+}
+
+function mockSuccessfulHeadlessInitialization() {
+  // @ts-ignore
+  mockHeadlessLoader.initializeWithHeadless = (element, _, initialize) => {
+    if (element instanceof QuanticSmartSnippet && !isInitialized) {
+      isInitialized = true;
+      initialize(exampleEngine);
+    }
+  };
+}
+
+function mockErroneousHeadlessInitialization() {
+  // @ts-ignore
+  mockHeadlessLoader.initializeWithHeadless = (element) => {
+    if (element instanceof QuanticSmartSnippet) {
+      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-smart-snippet', () => {
+  afterEach(() => {
+    smartSnippetState = defaultSmartSnippetState;
+    searchStatusState = defaultSearchStatusState;
+    cleanup();
+  });
+
+  describe('controller initialization', () => {
+    beforeEach(() => {
+      mockSuccessfulHeadlessInitialization();
+      prepareHeadlessState();
+    });
+
+    it('should build the smart snippet controller with the proper parameters and subscribe to its state change', async () => {
+      createTestComponent();
+      await flushPromises();
+
+      expect(functionsMocks.buildSmartSnippet).toHaveBeenCalledTimes(1);
+      expect(functionsMocks.buildSmartSnippet).toHaveBeenCalledWith(
+        exampleEngine
+      );
+      expect(functionsMocks.smartSnippetStateSubscriber).toHaveBeenCalledTimes(
+        1
+      );
+    });
+
+    it('should build the search status controller with the proper parameters and subscribe to its state change', 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 query does not return a smart snippet', () => {
+    beforeAll(() => {
+      smartSnippetState = {...defaultSmartSnippetState, answerFound: false};
+    });
+    it('should not display the smart snippet component', async () => {
+      const element = createTestComponent();
+      await flushPromises();
+
+      const smartSnippet = element.shadowRoot.querySelector(
+        selectors.smartSnippet
+      );
+      expect(smartSnippet).toBeNull();
+    });
+  });
+
+  describe('when the query returns a smart snippet', () => {
+    beforeEach(() => {
+      mockSuccessfulHeadlessInitialization();
+      prepareHeadlessState();
+      smartSnippetState = defaultSmartSnippetState;
+    });
+
+    afterEach(() => {
+      smartSnippetState = defaultSmartSnippetState;
+    });
+
+    it('should properly display the smart snippet', async () => {
+      const element = createTestComponent();
+      await flushPromises();
+
+      const smartSnippetAnswer = element.shadowRoot.querySelector(
+        selectors.smartSnippetAnswer
+      );
+
+      expect(smartSnippetAnswer).not.toBeNull();
+      expect(smartSnippetAnswer.answer).toEqual(smartSnippetState.answer);
+
+      const smartSnippetSource = element.shadowRoot.querySelector(
+        selectors.smartSnippetSource
+      );
+      expect(smartSnippetSource).not.toBeNull();
+      expect(smartSnippetSource.source).toEqual(smartSnippetState.source);
+
+      const smartSnippetFeedback = element.shadowRoot.querySelector(
+        selectors.smartSnippetFeedback
+      );
+      expect(smartSnippetFeedback).not.toBeNull();
+    });
+
+    describe('when the smart snippet exceeds the maximum height', () => {
+      describe('when the smart snippet is collapsed', () => {
+        it('should properly display the toggle button of the smart snippet component', async () => {
+          const expectedShowMoreLabel = 'Show more';
+          const expectedShowMoreIcon = 'utility:chevrondown';
+          const element = createTestComponent();
+          await flushPromises();
+
+          const smartSnippetToggleButton = element.shadowRoot.querySelector(
+            selectors.smartSnippetToggleButton
+          );
+
+          expect(smartSnippetToggleButton).not.toBeNull();
+          expect(smartSnippetToggleButton.label).toBe(expectedShowMoreLabel);
+          expect(smartSnippetToggleButton.iconName).toBe(expectedShowMoreIcon);
+        });
+
+        describe('when clicking on the smart snippet toggle button', () => {
+          it('should call the expand method from the smartSnippet controller', async () => {
+            const element = createTestComponent();
+            await flushPromises();
+
+            const smartSnippetToggleButton = element.shadowRoot.querySelector(
+              selectors.smartSnippetToggleButton
+            );
+            expect(smartSnippetToggleButton).not.toBeNull();
+
+            await smartSnippetToggleButton.click();
+            await flushPromises();
+
+            expect(functionsMocks.expand).toHaveBeenCalledTimes(1);
+          });
+        });
+      });
+
+      describe('when the smart snippet is expanded', () => {
+        beforeEach(() => {
+          smartSnippetState = {...defaultSmartSnippetState, expanded: true};
+        });
+
+        it('should properly display the smart snippet component', async () => {
+          const expectedShowLessLabel = 'Show less';
+          const expectedShowLessIcon = 'utility:chevronup';
+          const element = createTestComponent();
+          await flushPromises();
+
+          const smartSnippetToggleButton = element.shadowRoot.querySelector(
+            selectors.smartSnippetToggleButton
+          );
+          expect(smartSnippetToggleButton).not.toBeNull();
+          expect(smartSnippetToggleButton.label).toBe(expectedShowLessLabel);
+          expect(smartSnippetToggleButton.iconName).toBe(expectedShowLessIcon);
+        });
+
+        describe('when clicking on the smart snippet toggle button', () => {
+          it('should call the collapse method from the smartSnippet controller', async () => {
+            const element = createTestComponent();
+            await flushPromises();
+
+            const smartSnippetToggleButton = element.shadowRoot.querySelector(
+              selectors.smartSnippetToggleButton
+            );
+
+            await smartSnippetToggleButton.click();
+            await flushPromises();
+
+            expect(functionsMocks.collapse).toHaveBeenCalledTimes(1);
+          });
+        });
+      });
+    });
+  });
+});

package/force-app/main/default/lwc/quanticSmartSnippet/e2e/data.ts

@@ -0,0 +1,21 @@
+import {QuestionAnswerData} from '../../../../../../playwright/page-object/searchObjectWithSmartSnippet';
+
+const exampleQuestion = 'Where was Gondor when the Westfold fell?';
+const exampleAnswerSnippet = `<a href="#">Gondor</a> was on the brink of destruction when the Westfold fell. Gondor did not come to Rohan's aid when the Westfold fell because it was overwhelmed by its own dire circumstances and unable to spare resources or manpower. The alliance between the two kingdoms, forged by the Oath of Eorl, was based on a promise of mutual defense in times of extreme need. However, by the time of the War of the Ring, Gondor was facing unprecedented threats from Sauron, whose forces in Mordor were massing for a full-scale assault on Minas Tirith. The Steward of Gondor, Denethor II, was deeply concerned about the security of his own kingdom and could not afford to weaken its defenses to send aid across the vast distances that separated Gondor from the Westfold. Even if assistance had been feasible, the logistical challenge of moving troops through potentially hostile territory would have delayed their arrival, rendering their efforts ineffective. Moreover, the threat to Rohan came not only from Sauron's influence but also from the unexpected betrayal of Saruman, who, until then, had been perceived as an ally. His treachery, combined with the swiftness and brutality of his attacks, left Rohan vulnerable and isolated, as neither Rohan nor Gondor had anticipated such aggression from Isengard. While the alliance between the two realms remained strong in spirit, Gondor's immediate need to safeguard its own survival against the growing shadow of Mordor took precedence, leaving Rohan to fend for itself during the fall of the Westfold.`;
+const exampleScore = 0.42;
+const exampleContentIdKey = 'permanentid';
+const mockPermanentId = '1234';
+const exampleContentIdValue = mockPermanentId;
+
+const smartSnippetData: QuestionAnswerData = {
+  answerFound: true,
+  question: exampleQuestion,
+  answerSnippet: exampleAnswerSnippet,
+  documentId: {
+    contentIdKey: exampleContentIdKey,
+    contentIdValue: exampleContentIdValue,
+  },
+  score: exampleScore,
+};
+
+export default smartSnippetData;

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

@@ -0,0 +1,91 @@
+import {SmartSnippetObject} from './pageObject';
+import {quanticBase} from '../../../../../../playwright/fixtures/baseFixture';
+import {
+  SearchObjectWithSmartSnippet,
+  QuestionAnswerData,
+} from '../../../../../../playwright/page-object/searchObjectWithSmartSnippet';
+import {
+  searchRequestRegex,
+  insightSearchRequestRegex,
+} from '../../../../../../playwright/utils/requests';
+import {InsightSetupObject} from '../../../../../../playwright/page-object/insightSetupObject';
+import {useCaseEnum} from '../../../../../../playwright/utils/useCase';
+import smartSnippetData from './data';
+
+const pageUrl = 's/quantic-smart-snippet';
+
+interface SmartSnippetOptions {
+  maximumSnippetHeight: number;
+}
+
+type QuanticSmartSnippetE2ESearchFixtures = {
+  smartSnippetData: QuestionAnswerData;
+  smartSnippet: SmartSnippetObject;
+  search: SearchObjectWithSmartSnippet;
+  options: Partial<SmartSnippetOptions>;
+};
+
+type QuanticSmartSnippetE2EInsightFixtures =
+  QuanticSmartSnippetE2ESearchFixtures & {
+    insightSetup: InsightSetupObject;
+  };
+
+export const testSearch =
+  quanticBase.extend<QuanticSmartSnippetE2ESearchFixtures>({
+    smartSnippetData,
+    options: {},
+    search: async ({page}, use) => {
+      await use(new SearchObjectWithSmartSnippet(page, searchRequestRegex));
+    },
+    smartSnippet: async (
+      {page, options, configuration, search, smartSnippetData: data},
+      use
+    ) => {
+      const smartSnippetObject = new SmartSnippetObject(page);
+
+      await page.goto(pageUrl);
+      await search.mockSearchWithSmartSnippetResponse(data);
+
+      configuration.configure(options);
+      await search.waitForSearchResponse();
+      await use(smartSnippetObject);
+    },
+  });
+
+export const testInsight =
+  quanticBase.extend<QuanticSmartSnippetE2EInsightFixtures>({
+    smartSnippetData,
+    options: {},
+    search: async ({page}, use) => {
+      await use(
+        new SearchObjectWithSmartSnippet(page, insightSearchRequestRegex)
+      );
+    },
+    insightSetup: async ({page}, use) => {
+      await use(new InsightSetupObject(page));
+    },
+    smartSnippet: async (
+      {
+        page,
+        options,
+        search,
+        configuration,
+        insightSetup,
+        smartSnippetData: data,
+      },
+      use
+    ) => {
+      const smartSnippetObject = new SmartSnippetObject(page);
+
+      await page.goto(pageUrl);
+      await search.mockSearchWithSmartSnippetResponse(data);
+
+      configuration.configure({...options, useCase: useCaseEnum.insight});
+      await insightSetup.waitForInsightInterfaceInitialization();
+      await search.performSearch();
+      await search.waitForSearchResponse();
+      await use(smartSnippetObject);
+    },
+  });
+
+export {expect} from '@playwright/test';

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

@@ -0,0 +1,196 @@
+import type {Locator, Page, Request} from '@playwright/test';
+import {
+  isUaClickEvent,
+  isUaCustomEvent,
+} from '../../../../../../playwright/utils/requests';
+
+export class SmartSnippetObject {
+  constructor(public page: Page) {
+    this.page = page;
+  }
+
+  get smartSnippet(): Locator {
+    return this.page.locator('c-quantic-smart-snippet');
+  }
+
+  get smartSnippetSourceTitle(): Locator {
+    return this.page.getByTestId('smart-snippet__source-title');
+  }
+
+  get smartSnippetSourceUri(): Locator {
+    return this.page.getByTestId('smart-snippet__source-uri');
+  }
+
+  get smartSnippetAnwerInlineLink(): Locator {
+    return this.page.locator('[data-testid="smart-snippet-answer"] > a');
+  }
+
+  get smartSnippetToggleButton(): Locator {
+    return this.page.getByTestId('smart-snippet__toggle-button');
+  }
+
+  get likeButton(): Locator {
+    return this.page.getByTestId('feedback__like-button');
+  }
+
+  get dislikeButton(): Locator {
+    return this.page.getByTestId('feedback__dislike-button');
+  }
+
+  get explainWhyButton(): Locator {
+    return this.page.getByTestId('feedback__explain-why-button');
+  }
+
+  get feedbackModalCancelButton(): Locator {
+    return this.page.getByTestId('feedback-modal-footer__cancel');
+  }
+
+  get feedbackModalDoneButton(): Locator {
+    return this.page.getByTestId('feedback-modal-footer__done');
+  }
+
+  get firstFeedbackOptionLabel(): Locator {
+    const labelFirstOption = "Didn't answer my question at all";
+    return this.page.getByText(labelFirstOption);
+  }
+
+  get feedbackSubmitButton(): Locator {
+    return this.page.getByTestId('feedback-modal-footer__submit');
+  }
+
+  async clickToggleButton(): Promise<void> {
+    await this.smartSnippetToggleButton.click();
+  }
+
+  async clickOnSourceTitle(): Promise<void> {
+    await this.smartSnippetSourceTitle.click();
+  }
+
+  async clickOnSourceUri(): Promise<void> {
+    await this.smartSnippetSourceUri.click();
+  }
+
+  async clickOnFirstInlineLink(): Promise<void> {
+    await this.smartSnippetAnwerInlineLink.first().click();
+  }
+
+  async clickLikeButton(): Promise<void> {
+    await this.likeButton.click();
+  }
+
+  async clickDislikeButton(): Promise<void> {
+    await this.dislikeButton.click();
+  }
+
+  async clickExplainWhyButton(): Promise<void> {
+    await this.explainWhyButton.click();
+  }
+
+  async clickFeedbackModalCancelButton(): Promise<void> {
+    await this.feedbackModalCancelButton.click();
+  }
+
+  async selectFirstFeedbackOptionLabel(): Promise<void> {
+    await this.firstFeedbackOptionLabel.click({force: true});
+  }
+
+  async clickFeedbackSubmitButton(): Promise<void> {
+    await this.feedbackSubmitButton.click();
+  }
+
+  async clickFeedbackModalDoneButton(): Promise<void> {
+    await this.feedbackModalDoneButton.click();
+  }
+
+  async waitForExpandSmartSnippetUaAnalytics(): Promise<Request> {
+    return this.waitForSmartSnippetCustomUaAnalytics('expandSmartSnippet');
+  }
+
+  async waitForCollapseSmartSnippetUaAnalytics(): Promise<Request> {
+    return this.waitForSmartSnippetCustomUaAnalytics('collapseSmartSnippet');
+  }
+
+  async waitForLikeSmartSnippetUaAnalytics(): Promise<Request> {
+    return this.waitForSmartSnippetCustomUaAnalytics('likeSmartSnippet');
+  }
+
+  async waitForDislikeSmartSnippetUaAnalytics(): Promise<Request> {
+    return this.waitForSmartSnippetCustomUaAnalytics('dislikeSmartSnippet');
+  }
+
+  async waitForOpenFeedbackModalUaAnalytics(): Promise<Request> {
+    return this.waitForSmartSnippetCustomUaAnalytics(
+      'openSmartSnippetFeedbackModal'
+    );
+  }
+
+  async waitForCloseFeedbackModalUaAnalytics(): Promise<Request> {
+    return this.waitForSmartSnippetCustomUaAnalytics(
+      'closeSmartSnippetFeedbackModal'
+    );
+  }
+
+  async waitForFeedbackSubmitUaAnalytics(
+    expectedReason: string
+  ): Promise<Request> {
+    return this.waitForSmartSnippetCustomUaAnalytics(
+      'sendSmartSnippetReason',
+      expectedReason
+    );
+  }
+
+  async waitForSmartSnippetSourceClickUaAnalytics(): Promise<Request> {
+    return this.waitForSmartSnippetClickUaAnalytics('openSmartSnippetSource');
+  }
+
+  async waitForSmartSnippetInlineLinkClickUaAnalytics(): Promise<Request> {
+    return this.waitForSmartSnippetClickUaAnalytics(
+      'openSmartSnippetInlineLink'
+    );
+  }
+
+  async waitForSmartSnippetClickUaAnalytics(
+    actionCause: string
+  ): Promise<Request> {
+    const uaRequest = this.page.waitForRequest((request) => {
+      if (isUaClickEvent(request)) {
+        const requestBody = request.postDataJSON?.();
+        const requestData = JSON.parse(requestBody.clickEvent);
+
+        const expectedFields: Record<string, any> = {
+          actionCause,
+        };
+
+        return requestData?.actionCause === expectedFields.actionCause;
+      }
+      return false;
+    });
+    return uaRequest;
+  }
+
+  async waitForSmartSnippetCustomUaAnalytics(
+    eventValue: any,
+    reason?: string
+  ): Promise<Request> {
+    const uaRequest = this.page.waitForRequest((request) => {
+      if (isUaCustomEvent(request)) {
+        const requestBody = request.postDataJSON?.();
+        const expectedFields: Record<string, any> = {
+          eventType: 'smartSnippet',
+          eventValue: eventValue,
+        };
+
+        const matchesExpectedFields = Object.keys(expectedFields).every(
+          (key) => requestBody?.[key] === expectedFields[key]
+        );
+
+        const customData = requestBody?.customData;
+        const matchesReason = customData?.reason === reason;
+
+        return matchesExpectedFields && matchesReason;
+      }
+      return false;
+    });
+    return uaRequest;
+  }
+}