@coveo/quantic 3.33.0 → 3.33.1

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

@@ -0,0 +1,127 @@
+import {testSearch, testInsight} from './fixture';
+import {useCaseTestCases} from '../../../../../../playwright/utils/useCase';
+import smartSnippetSuggestionsData from './data';
+
+const fixtures = {
+  search: testSearch,
+  insight: testInsight,
+};
+
+useCaseTestCases.forEach((useCase) => {
+  let test = fixtures[useCase.value];
+
+  test.describe(`quantic smart snippet suggestions ${useCase.label}`, () => {
+    test.use({
+      smartSnippetSuggestionsData,
+    });
+    test.describe('when expanding and collapsing the smart snippet suggestions', () => {
+      test('should send the expand and collapse analytics events', async ({
+        smartSnippetSuggestions,
+      }) => {
+        const smartSnippetSuggestionIndex = 0;
+        const {question, answerSnippet} =
+          smartSnippetSuggestionsData.relatedQuestions[
+            smartSnippetSuggestionIndex
+          ];
+        const expandSmartSnippetSuggestionsPromise =
+          smartSnippetSuggestions.waitForExpandSmartSnippetSuggestionUaAnalytics(
+            {
+              question,
+              answerSnippet,
+            }
+          );
+
+        await smartSnippetSuggestions.clickOnSmartSnippetSuggestionHeading(
+          smartSnippetSuggestionIndex
+        );
+        await expandSmartSnippetSuggestionsPromise;
+
+        const collapseSmartSnippetSuggestionsPromise =
+          smartSnippetSuggestions.waitForCollapseSmartSnippetSuggestionUaAnalytics(
+            {
+              question,
+              answerSnippet,
+            }
+          );
+
+        await smartSnippetSuggestions.clickOnSmartSnippetSuggestionHeading(
+          smartSnippetSuggestionIndex
+        );
+        await collapseSmartSnippetSuggestionsPromise;
+      });
+    });
+
+    test.describe('when clicking on elements of the smart snippet suggestion', () => {
+      test.beforeEach(async ({smartSnippetSuggestions}) => {
+        await smartSnippetSuggestions.clickOnSmartSnippetSuggestionHeading(0);
+      });
+
+      test('should send the source title analytics event when the title is clicked', async ({
+        smartSnippetSuggestions,
+      }) => {
+        const smartSnippetSuggestionIndex = 0;
+        const {question, answerSnippet} =
+          smartSnippetSuggestionsData.relatedQuestions[
+            smartSnippetSuggestionIndex
+          ];
+        const smartSnippetSuggestionsTitleClickPromise =
+          smartSnippetSuggestions.waitForSmartSnippetSuggestionSourceClickUaAnalytics(
+            {
+              question,
+              answerSnippet,
+            }
+          );
+
+        await smartSnippetSuggestions.clickOnSmartSnippetSuggestionSourceTitle(
+          smartSnippetSuggestionIndex
+        );
+        await smartSnippetSuggestionsTitleClickPromise;
+      });
+
+      test('should send the source uri analytics event when the uri is clicked', async ({
+        smartSnippetSuggestions,
+      }) => {
+        const smartSnippetSuggestionIndex = 0;
+        const {question, answerSnippet} =
+          smartSnippetSuggestionsData.relatedQuestions[
+            smartSnippetSuggestionIndex
+          ];
+
+        const smartSnippetSuggestionsSourceUriClickPromise =
+          smartSnippetSuggestions.waitForSmartSnippetSuggestionSourceClickUaAnalytics(
+            {
+              question,
+              answerSnippet,
+            }
+          );
+
+        await smartSnippetSuggestions.clickOnSmartSnippetSuggestionSourceUri(
+          smartSnippetSuggestionIndex
+        );
+        await smartSnippetSuggestionsSourceUriClickPromise;
+      });
+
+      test('should send the inline link analytics event when an inline link is clicked', async ({
+        smartSnippetSuggestions,
+      }) => {
+        const smartSnippetSuggestionIndex = 0;
+        const {question, answerSnippet} =
+          smartSnippetSuggestionsData.relatedQuestions[
+            smartSnippetSuggestionIndex
+          ];
+        const smartSnippetSuggestionsInlineLinkClickPromise =
+          smartSnippetSuggestions.waitForSmartSnippetSuggestionInlineLinkClickUaAnalytics(
+            {
+              question,
+              answerSnippet,
+            }
+          );
+
+        await smartSnippetSuggestions.clickOnSmartSnippetSuggestionInlineLink(
+          smartSnippetSuggestionIndex
+        );
+        await smartSnippetSuggestionsInlineLinkClickPromise;
+      });
+    });
+  });
+});

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

@@ -0,0 +1,416 @@
+/* eslint-disable jest/no-conditional-expect */
+/* eslint-disable no-import-assign */
+import QuanticSort from 'c/quanticSort';
+// @ts-ignore
+import {createElement} from 'lwc';
+import * as mockHeadlessLoader from 'c/quanticHeadlessLoader';
+
+const selectors = {
+  lightningCombobox: 'lightning-combobox',
+  componentError: 'c-quantic-component-error',
+  sortDropdown: '[data-testid="sort-dropdown"]',
+  initializationError: 'c-quantic-component-error',
+};
+
+const sortVariants = {
+  default: {
+    name: 'default',
+    labelContainerSelector: '.sort__header',
+    labelSelector: 'lightning-formatted-text',
+    dropdownContainerSelector: '.sort__container',
+  },
+  wide: {
+    name: 'wide',
+    labelContainerSelector: '.sort__container',
+    labelSelector: '[data-testid="filters-title"]',
+    dropdownContainerSelector: 'lightning-layout-item',
+  },
+};
+
+const sortByLabel = 'Sort By';
+
+jest.mock('c/quanticHeadlessLoader');
+jest.mock(
+  '@salesforce/label/c.quantic_SortBy',
+  () => ({default: sortByLabel}),
+  {
+    virtual: true,
+  }
+);
+
+function mockBueno(shouldError = false) {
+  // @ts-ignore
+  mockHeadlessLoader.getBueno = () => {
+    // @ts-ignore
+    global.Bueno = {
+      isString: jest
+        .fn()
+        .mockImplementation(
+          (value) => Object.prototype.toString.call(value) === '[object String]'
+        ),
+      StringValue: jest.fn(),
+      RecordValue: jest.fn(),
+      Schema: jest.fn(() => ({
+        validate: () => {
+          if (shouldError) {
+            throw new Error();
+          }
+          jest.fn();
+        },
+      })),
+    };
+    return new Promise((resolve) => resolve());
+  };
+}
+
+let isInitialized = false;
+
+const exampleEngine = {
+  id: 'exampleEngineId',
+};
+
+const defaultSearchStatusState = {
+  hasResults: true,
+};
+let searchStatusState = defaultSearchStatusState;
+
+const functionsMocks = {
+  buildSort: jest.fn(() => ({
+    state: {},
+    subscribe: functionsMocks.sortStateSubscriber,
+    sortBy: functionsMocks.sortBy,
+  })),
+  buildSearchStatus: jest.fn(() => ({
+    state: searchStatusState,
+    subscribe: functionsMocks.searchStatusStateSubscriber,
+  })),
+  buildCriterionExpression: jest.fn((criterion) => criterion),
+  buildRelevanceSortCriterion: jest.fn(() => 'relevance'),
+  buildDateSortCriterion: jest.fn(() => 'date'),
+  sortStateSubscriber: jest.fn((cb) => {
+    cb();
+    return functionsMocks.sortStateUnsubscriber;
+  }),
+  searchStatusStateSubscriber: jest.fn((cb) => {
+    cb();
+    return functionsMocks.searchStatusStateUnsubscriber;
+  }),
+  sortStateUnsubscriber: jest.fn(),
+  searchStatusStateUnsubscriber: jest.fn(),
+  sortBy: jest.fn(),
+};
+
+const defaultOptions = {
+  engineId: exampleEngine.id,
+  variant: 'default',
+};
+
+/**
+ * Mocks the return value of the assignedNodes method.
+ * @param {Array<Element>} assignedElements
+ */
+function mockSlotAssignedNodes(assignedElements) {
+  HTMLSlotElement.prototype.assignedNodes = function () {
+    return assignedElements;
+  };
+}
+
+function createTestComponent(options = defaultOptions, assignedElements = []) {
+  prepareHeadlessState();
+  mockSlotAssignedNodes(assignedElements);
+
+  const element = createElement('c-quantic-sort', {
+    is: QuanticSort,
+  });
+  for (const [key, value] of Object.entries(options)) {
+    element[key] = value;
+  }
+  document.body.appendChild(element);
+  return element;
+}
+
+function prepareHeadlessState() {
+  // @ts-ignore
+  mockHeadlessLoader.getHeadlessBundle = () => {
+    return {
+      buildSort: functionsMocks.buildSort,
+      buildCriterionExpression: functionsMocks.buildCriterionExpression,
+      buildSearchStatus: functionsMocks.buildSearchStatus,
+      buildRelevanceSortCriterion: functionsMocks.buildRelevanceSortCriterion,
+      buildDateSortCriterion: functionsMocks.buildDateSortCriterion,
+      SortOrder: {
+        Descending: 'descending',
+        Ascending: 'ascending',
+      },
+    };
+  };
+}
+
+// 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));
+}
+
+function mockSuccessfulHeadlessInitialization() {
+  // @ts-ignore
+  mockHeadlessLoader.initializeWithHeadless = (element, _, initialize) => {
+    if (element instanceof QuanticSort && !isInitialized) {
+      isInitialized = true;
+      initialize(exampleEngine);
+    }
+  };
+}
+
+function mockErroneousHeadlessInitialization() {
+  // @ts-ignore
+  mockHeadlessLoader.initializeWithHeadless = (element) => {
+    if (element instanceof QuanticSort) {
+      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-sort', () => {
+  beforeEach(() => {
+    mockSuccessfulHeadlessInitialization();
+    mockBueno();
+  });
+
+  afterEach(() => {
+    cleanup();
+    searchStatusState = defaultSearchStatusState;
+  });
+
+  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('controller initialization', () => {
+    it('should subscribe to the headless sort and search status state changes', async () => {
+      createTestComponent();
+      await flushPromises();
+
+      expect(functionsMocks.sortStateSubscriber).toHaveBeenCalledTimes(1);
+      expect(functionsMocks.searchStatusStateSubscriber).toHaveBeenCalledTimes(
+        1
+      );
+    });
+  });
+
+  describe('when no results are found', () => {
+    beforeAll(() => {
+      searchStatusState = {...defaultSearchStatusState, hasResults: false};
+    });
+
+    it('should not display the sort dropdown', async () => {
+      const element = createTestComponent();
+      await flushPromises();
+
+      const sortDropdown = element.shadowRoot.querySelector(
+        selectors.sortDropdown
+      );
+
+      expect(sortDropdown).toBeNull();
+    });
+  });
+
+  describe('when a sort option is selected', () => {
+    it('should call the sortBy method of the sort controller', async () => {
+      const element = createTestComponent();
+      await flushPromises();
+
+      const lightningCombobox = element.shadowRoot.querySelector(
+        selectors.lightningCombobox
+      );
+      const exampleDefaultSortOptionValue = 'relevance';
+      expect(lightningCombobox).not.toBeNull();
+
+      lightningCombobox.dispatchEvent(
+        new CustomEvent('change', {
+          detail: {value: exampleDefaultSortOptionValue},
+        })
+      );
+
+      expect(functionsMocks.sortBy).toHaveBeenCalledTimes(1);
+      expect(functionsMocks.sortBy).toHaveBeenCalledWith(
+        exampleDefaultSortOptionValue
+      );
+    });
+  });
+
+  describe('when custom sort options are passed', () => {
+    const exampleSlot = {
+      value: 'example value',
+      label: 'example label',
+      criterion: {
+        by: 'example field',
+        order: 'example order',
+      },
+    };
+    const exampleAssignedElements = [exampleSlot];
+
+    it('should build the controller with the correct sort option and display the custom sort options', async () => {
+      const element = createTestComponent(
+        defaultOptions,
+        exampleAssignedElements
+      );
+      await flushPromises();
+
+      expect(functionsMocks.buildSort).toHaveBeenCalledTimes(1);
+      expect(functionsMocks.buildSort).toHaveBeenCalledWith(exampleEngine, {
+        initialState: {
+          criterion: {
+            by: 'example field',
+            order: 'example order',
+          },
+        },
+      });
+      const lightningCombobox = element.shadowRoot.querySelector(
+        selectors.lightningCombobox
+      );
+
+      expect(lightningCombobox.options).toEqual([exampleSlot]);
+    });
+  });
+
+  describe('when invalid sort options are passed', () => {
+    beforeEach(() => {
+      mockBueno(true);
+      jest.spyOn(console, 'error').mockImplementation(() => {});
+    });
+
+    const invalidExampleSlot = {
+      value: 'example value',
+      label: '',
+      criterion: {
+        by: 'example field',
+        order: 'example order',
+      },
+    };
+    const exampleAssignedElements = [invalidExampleSlot];
+
+    it('should display the component error', async () => {
+      const element = createTestComponent(
+        defaultOptions,
+        exampleAssignedElements
+      );
+      await flushPromises();
+
+      expect(functionsMocks.buildSort).toHaveBeenCalledTimes(1);
+      expect(functionsMocks.buildSort).toHaveBeenCalledWith(exampleEngine, {
+        initialState: {
+          criterion: {
+            by: 'example field',
+            order: 'example order',
+          },
+        },
+      });
+      const componentError = element.shadowRoot.querySelector(
+        selectors.componentError
+      );
+
+      expect(componentError).not.toBeNull();
+      expect(console.error).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('when passing the "default" variant', () => {
+    const variant = sortVariants.default;
+
+    it('should render the component with the default width', async () => {
+      const element = createTestComponent();
+      await flushPromises();
+
+      const defaultLabelContainer = element.shadowRoot.querySelector(
+        variant.labelContainerSelector
+      );
+      const defaultVariantDropdownContainer = element.shadowRoot.querySelector(
+        variant.dropdownContainerSelector
+      );
+
+      expect(defaultLabelContainer.classList).toContain(
+        'slds-var-p-right_small'
+      );
+      expect(defaultVariantDropdownContainer.classList).not.toContain(
+        'slds-size_1-of-1'
+      );
+    });
+
+    it('should properly render the label', async () => {
+      const element = createTestComponent({
+        ...defaultOptions,
+        variant: variant.name,
+      });
+      await flushPromises();
+
+      const sortLabel = element.shadowRoot.querySelector(variant.labelSelector);
+
+      expect(sortLabel.value).toBe(sortByLabel);
+    });
+  });
+
+  describe('when passing the "wide" variant', () => {
+    const variant = sortVariants.wide;
+
+    it('should render the component with the wide width', async () => {
+      const element = createTestComponent({
+        ...defaultOptions,
+        variant: variant.name,
+      });
+      await flushPromises();
+
+      const wideVariantLabelContainer = element.shadowRoot.querySelector(
+        variant.labelContainerSelector
+      );
+      const wideVariantDropdownContainer = element.shadowRoot.querySelector(
+        variant.dropdownContainerSelector
+      );
+
+      expect(wideVariantLabelContainer.classList).toContain(
+        'sort__container--wide'
+      );
+      expect(wideVariantDropdownContainer.classList).toContain(
+        'slds-size_1-of-1'
+      );
+      expect(wideVariantDropdownContainer.classList).not.toContain(
+        'slds-var-p-right_small'
+      );
+    });
+
+    it('should properly render the label', async () => {
+      const element = createTestComponent({
+        ...defaultOptions,
+        variant: variant.name,
+      });
+      await flushPromises();
+
+      const sortLabel = element.shadowRoot.querySelector(variant.labelSelector);
+
+      expect(sortLabel.textContent).toBe(sortByLabel);
+      expect(sortLabel.classList).toContain('slds-text-heading_small');
+    });
+  });
+});

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

@@ -0,0 +1,61 @@
+import {SortObject} from './pageObject';
+import {quanticBase} from '../../../../../../playwright/fixtures/baseFixture';
+import {SearchObject} from '../../../../../../playwright/page-object/searchObject';
+import {
+  searchRequestRegex,
+  insightSearchRequestRegex,
+} from '../../../../../../playwright/utils/requests';
+import {InsightSetupObject} from '../../../../../../playwright/page-object/insightSetupObject';
+import {useCaseEnum} from '../../../../../../playwright/utils/useCase';
+
+const sortUrl = 's/quantic-sort';
+
+interface SortOptions {}
+
+type QuanticSortE2EFixtures = {
+  sort: SortObject;
+  search: SearchObject;
+  options: Partial<SortOptions>;
+};
+
+type QuanticSortE2ESearchFixtures = QuanticSortE2EFixtures & {
+  urlHash: string;
+};
+
+type QuanticSortE2EInsightFixtures = QuanticSortE2EFixtures & {
+  insightSetup: InsightSetupObject;
+};
+
+export const testSearch = quanticBase.extend<QuanticSortE2ESearchFixtures>({
+  options: {},
+  urlHash: '',
+  search: async ({page}, use) => {
+    await use(new SearchObject(page, searchRequestRegex));
+  },
+  sort: async ({page, options, configuration, search, urlHash}, use) => {
+    await page.goto(urlHash ? `${sortUrl}#${urlHash}` : sortUrl);
+    configuration.configure(options);
+    await search.waitForSearchResponse();
+    await use(new SortObject(page));
+  },
+});
+
+export const testInsight = quanticBase.extend<QuanticSortE2EInsightFixtures>({
+  options: {},
+  search: async ({page}, use) => {
+    await use(new SearchObject(page, insightSearchRequestRegex));
+  },
+  insightSetup: async ({page}, use) => {
+    await use(new InsightSetupObject(page));
+  },
+  sort: async ({page, options, search, configuration, insightSetup}, use) => {
+    await page.goto(sortUrl);
+    configuration.configure({...options, useCase: useCaseEnum.insight});
+    await insightSetup.waitForInsightInterfaceInitialization();
+    await search.performSearch();
+    await search.waitForSearchResponse();
+    await use(new SortObject(page));
+  },
+});
+
+export {expect} from '@playwright/test';

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

@@ -0,0 +1,89 @@
+import type {Locator, Page, Request} from '@playwright/test';
+import {isUaSearchEvent} from '../../../../../../playwright/utils/requests';
+
+export class SortObject {
+  constructor(public page: Page) {
+    this.page = page;
+  }
+
+  get sortDropDown(): Locator {
+    return this.page.getByRole('combobox', {name: 'Sort by'});
+  }
+
+  get sortPreviewButton(): Locator {
+    return this.page.getByRole('button', {name: 'Preview'});
+  }
+
+  sortButton(buttonName: string): Locator {
+    return this.page.getByRole('option', {name: buttonName});
+  }
+
+  async clickSortDropDown(): Promise<void> {
+    await this.sortDropDown.click();
+  }
+
+  async focusSortDropDown(): Promise<void> {
+    await this.sortPreviewButton.click();
+    await this.page.keyboard.press('Tab');
+  }
+
+  async clickSortButton(buttonName: string): Promise<void> {
+    await this.sortButton(buttonName).click();
+  }
+
+  async openSortDropdownUsingKeyboardEnter(useEnter = true): Promise<void> {
+    if (useEnter) {
+      await this.page.keyboard.press('Enter');
+    } else {
+      await this.page.keyboard.press('Space');
+    }
+    await this.sortButton('Oldest').isVisible();
+    await this.page.waitForTimeout(500);
+  }
+
+  async waitForSortUaAnalytics(eventValue: any): Promise<Request> {
+    const uaRequest = this.page.waitForRequest((request) => {
+      if (isUaSearchEvent(request)) {
+        const requestBody = request.postDataJSON();
+        const expectedFields = {
+          actionCause: 'resultsSort',
+          customData: {
+            resultsSortBy: eventValue,
+          },
+        };
+
+        const validateObject = (obj: any, expectedResult: any): boolean =>
+          Object.entries(expectedResult).every(([key, value]) =>
+            value && typeof value === 'object'
+              ? validateObject(obj?.[key], value)
+              : obj?.[key] === value
+          );
+
+        return validateObject(requestBody, expectedFields);
+      }
+      return false;
+    });
+    return uaRequest;
+  }
+
+  async allSortLabelOptions() {
+    const options = await this.page
+      .locator('div[part="dropdown overlay"]')
+      .allInnerTexts();
+    const arrSort = options[0].split('\n');
+    return arrSort;
+  }
+
+  async getSortLabelValue() {
+    const arrSort = await this.allSortLabelOptions();
+    const sortLabelwithValueList = await Promise.all(
+      arrSort.map(async (item) => ({
+        label: item,
+        value: await this.page
+          .getByRole('option', {name: item})
+          .getAttribute('data-value'),
+      }))
+    );
+    return sortLabelwithValueList;
+  }
+}