@coveo/quantic 3.33.0 → 3.33.1

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

@@ -0,0 +1,21 @@
+const facetData = {
+  facetId: 'objecttype',
+  field: 'objecttype',
+  moreValuesAvailable: true,
+  values: [
+    {
+      value: 'foo',
+      state: 'idle',
+      numberOfResults: 10,
+    },
+    {
+      value: 'bar',
+      state: 'idle',
+      numberOfResults: 20,
+    },
+  ],
+  indexScore: 0.40500903971252294,
+  label: 'Object type',
+};
+
+export default facetData;

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

@@ -0,0 +1,73 @@
+import {FacetObject} from './pageObject';
+import {useCaseEnum} from '../../../../../../playwright/utils/useCase';
+import {InsightSetupObject} from '../../../../../../playwright/page-object/insightSetupObject';
+import {
+  searchRequestRegex,
+  insightSearchRequestRegex,
+} from '../../../../../../playwright/utils/requests';
+import {BaseFacetObject} from '../../../../../../playwright/page-object/baseFacetObject';
+import facetData from './data';
+import {facetBase} from '../../../../../../playwright/fixtures/baseFacetFixture';
+
+const pageUrl = 's/quantic-facet';
+
+interface FacetOptions {
+  value?: string;
+  caption?: string;
+}
+
+type QuanticFacetE2EFixtures = {
+  facet: FacetObject;
+  options: Partial<FacetOptions>;
+  insightSetup?: InsightSetupObject;
+};
+
+export const testSearch = facetBase.extend<QuanticFacetE2EFixtures>({
+  options: {},
+  facetResponseMock: [facetData],
+  baseFacet: async ({page}, use) => {
+    await use(new BaseFacetObject(page, searchRequestRegex));
+  },
+  facet: async (
+    {page, options, configuration, baseFacet, urlHash, facetResponseMock},
+    use
+  ) => {
+    await page.goto(
+      `${pageUrl}${options.caption ? '-with-captions' : ''}#${urlHash ? urlHash : ''}`
+    );
+    if (facetResponseMock) {
+      await baseFacet.mockSearchWithFacetResponse(facetResponseMock);
+    }
+    configuration.configure(options);
+    await baseFacet.waitForSearchResponse();
+
+    await use(new FacetObject(page));
+  },
+});
+
+export const testInsight = facetBase.extend<QuanticFacetE2EFixtures>({
+  options: {},
+  facetResponseMock: [facetData],
+  baseFacet: async ({page}, use) => {
+    await use(new BaseFacetObject(page, insightSearchRequestRegex));
+  },
+  insightSetup: async ({page}, use) => {
+    await use(new InsightSetupObject(page));
+  },
+  facet: async (
+    {page, options, baseFacet, configuration, insightSetup, facetResponseMock},
+    use
+  ) => {
+    await page.goto(`${pageUrl}${options.caption ? '-with-captions' : ''}`);
+    if (facetResponseMock) {
+      await baseFacet.mockSearchWithFacetResponse(facetResponseMock);
+    }
+    configuration.configure({...options, useCase: useCaseEnum.insight});
+    await insightSetup?.waitForInsightInterfaceInitialization();
+    await baseFacet.performSearch();
+    await baseFacet.waitForSearchResponse();
+    await use(new FacetObject(page));
+  },
+});
+
+export {expect} from '@playwright/test';

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

@@ -0,0 +1,67 @@
+import type {Locator, Page} from '@playwright/test';
+
+export class FacetObject {
+  constructor(public page: Page) {
+    this.page = page;
+  }
+
+  get facet(): Locator {
+    return this.page.locator('c-quantic-facet');
+  }
+
+  get facetValue(): Locator {
+    return this.facet.getByTestId('facet__value');
+  }
+
+  get facetValueInput(): Locator {
+    return this.facet.getByRole('checkbox', {name: 'Facet value option'});
+  }
+
+  get showMoreFacetValuesButton(): Locator {
+    return this.facet.getByRole('button', {
+      name: /Show more values for the .* facet/i,
+    });
+  }
+
+  get showLessFacetValuesButton(): Locator {
+    return this.facet.getByRole('button', {
+      name: /Show less values for the .* facet/i,
+    });
+  }
+
+  get facetSearchBoxInput(): Locator {
+    return this.facet.getByTestId('facet__searchbox-input').locator('input');
+  }
+
+  get facetBreadcrumb(): Locator {
+    return this.page.getByTestId('facet-breadcrumb');
+  }
+
+  get clearSelectionButton(): Locator {
+    return this.page.getByTestId('clear-selection-button');
+  }
+
+  facetBreadcrumbValueByIndex(index: number): Locator {
+    return this.facetBreadcrumb.locator('c-quantic-pill').nth(index);
+  }
+
+  async clickOnFacetValue(index: number): Promise<void> {
+    await this.facetValue.nth(index).click();
+  }
+
+  async clickOnShowMoreFacetValuesButton(): Promise<void> {
+    await this.showMoreFacetValuesButton.click();
+  }
+
+  async clickOnShowLessFacetValuesButton(): Promise<void> {
+    await this.showLessFacetValuesButton.click();
+  }
+
+  async fillFacetSearchBoxInput(query: string): Promise<void> {
+    await this.facetSearchBoxInput.fill(query);
+  }
+
+  async clickOnClearSelectionButton(): Promise<void> {
+    await this.clearSelectionButton.click();
+  }
+}

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

@@ -0,0 +1,208 @@
+import {testSearch, testInsight, expect} from './fixture';
+import {
+  useCaseEnum,
+  useCaseTestCases,
+} from '../../../../../../playwright/utils/useCase';
+import facetData from './data';
+
+const fixtures = {
+  search: testSearch,
+  insight: testInsight,
+};
+
+useCaseTestCases.forEach((useCase) => {
+  let test = fixtures[useCase.value];
+  test.describe(`quantic facet ${useCase.label}`, () => {
+    test.describe('when selecting and deselecting a facet value', () => {
+      test('should trigger a new search and log the corresponding UA analytics events', async ({
+        baseFacet,
+        facet,
+      }) => {
+        const selectedIndex = 0;
+        const {facetId, field, values} = facetData;
+        const facetSelectUaRequest = baseFacet.waitForFacetSelectUaAnalytics({
+          facetId,
+          facetField: field,
+          facetValue: values[selectedIndex].value,
+        });
+        let searchResponsePromise = baseFacet.waitForSearchResponse();
+
+        await facet.clickOnFacetValue(selectedIndex);
+
+        await facetSelectUaRequest;
+        let searchResponse = await searchResponsePromise;
+        const {analytics: analyticsForFacetSelect} =
+          baseFacet.extractDataFromResponse(searchResponse);
+        expect(analyticsForFacetSelect.actionCause).toEqual('facetSelect');
+
+        const facetDeselectUaRequest =
+          baseFacet.waitForFacetDeselectUaAnalytics({
+            facetId,
+            facetField: field,
+            facetValue: values[selectedIndex].value,
+          });
+        searchResponsePromise = baseFacet.waitForSearchResponse();
+
+        await facet.clickOnFacetValue(selectedIndex);
+
+        await facetDeselectUaRequest;
+        searchResponse = await searchResponsePromise;
+        const {analytics: analyticsForFacetDeselect} =
+          baseFacet.extractDataFromResponse(searchResponse);
+        expect(analyticsForFacetDeselect.actionCause).toEqual('facetDeselect');
+      });
+    });
+
+    test.describe('when selecting a facet value and clicking the clear filter button', () => {
+      test('should trigger a new search and log the corresponding UA analytics events', async ({
+        baseFacet,
+        facet,
+      }) => {
+        const selectedIndex = 0;
+        const {facetId, field, values} = facetData;
+        const facetSelectUaRequest = baseFacet.waitForFacetSelectUaAnalytics({
+          facetId,
+          facetField: field,
+          facetValue: values[selectedIndex].value,
+        });
+        let searchResponsePromise = baseFacet.waitForSearchResponse();
+
+        await facet.clickOnFacetValue(selectedIndex);
+
+        await facetSelectUaRequest;
+        let searchResponse = await searchResponsePromise;
+        const {analytics: analyticsForFacetSelect} =
+          baseFacet.extractDataFromResponse(searchResponse);
+        expect(analyticsForFacetSelect.actionCause).toEqual('facetSelect');
+
+        const clearAllUaRequest = baseFacet.waitForFacetClearAllUaAnalytics({
+          facetId,
+          facetField: field,
+        });
+        searchResponsePromise = baseFacet.waitForSearchResponse();
+
+        await facet.clickOnClearSelectionButton();
+
+        await clearAllUaRequest;
+        searchResponse = await searchResponsePromise;
+        const {analytics: analyticsForFacetDeselect} =
+          baseFacet.extractDataFromResponse(searchResponse);
+        expect(analyticsForFacetDeselect.actionCause).toEqual('facetClearAll');
+      });
+    });
+
+    test.describe('when expanding and collapsing facet values using Show More/Less buttons', () => {
+      test('should fetch additional facet values and send correct UA analytics', async ({
+        baseFacet,
+        facet,
+      }) => {
+        const {facetId, field} = facetData;
+        const uaRequest = baseFacet.waitForShowMoreFacetResultsUaAnalytics({
+          facetId,
+          facetField: field,
+        });
+        let searchResponsePromise = baseFacet.waitForSearchResponse();
+
+        await facet.clickOnShowMoreFacetValuesButton();
+
+        await uaRequest;
+        let searchResponse = await searchResponsePromise;
+        const {analytics: analyticsForShowMore} =
+          baseFacet.extractDataFromResponse(searchResponse);
+        expect(analyticsForShowMore.actionCause).toEqual(
+          'showMoreFacetResults'
+        );
+
+        const showLessUaRequest =
+          baseFacet.waitForShowLessFacetResultsUaAnalytics({
+            facetId,
+            facetField: field,
+          });
+        searchResponsePromise = baseFacet.waitForSearchResponse();
+
+        await facet.clickOnShowLessFacetValuesButton();
+
+        await showLessUaRequest;
+        searchResponse = await searchResponsePromise;
+        const {analytics: analyticsForShowLess} =
+          baseFacet.extractDataFromResponse(searchResponse);
+        expect(analyticsForShowLess.actionCause).toEqual(
+          'showLessFacetResults'
+        );
+      });
+    });
+
+    test.describe('when a custom caption is provided', () => {
+      const exampleCaption = 'example caption';
+      const facetValueIndex = 0;
+
+      test.use({
+        options: {
+          caption: exampleCaption,
+          value: facetData.values[facetValueIndex].value,
+        },
+      });
+      test('should display the custom caption instead of the raw facet value', async ({
+        baseFacet,
+        facet,
+      }) => {
+        expect(facet.facetValue.nth(facetValueIndex)).toHaveText(
+          new RegExp(exampleCaption)
+        );
+        const {facetId, field, values} = facetData;
+        const uaRequest = baseFacet.waitForFacetSelectUaAnalytics({
+          facetId,
+          facetField: field,
+          facetValue: values[facetValueIndex].value,
+        });
+        const searchResponsePromise = baseFacet.waitForSearchResponse();
+
+        await facet.clickOnFacetValue(facetValueIndex);
+
+        await uaRequest;
+        await searchResponsePromise;
+        expect(facet.facetBreadcrumbValueByIndex(facetValueIndex)).toHaveText(
+          exampleCaption
+        );
+      });
+    });
+
+    if (useCase.value === useCaseEnum.search) {
+      test.describe('when typing in the facet search box input', () => {
+        test('should fetch facet values according to the query typed', async ({
+          baseFacet,
+          facet,
+        }) => {
+          const {field: expectedField} = facetData;
+          const exampleQuery = 'test';
+          const facetSearchResponsePromise =
+            baseFacet.waitForFacetSearchResponse();
+
+          await facet.fillFacetSearchBoxInput(exampleQuery);
+
+          const facetSearchResponse = await facetSearchResponsePromise;
+          const {field, query} =
+            baseFacet.extractDataFromResponse(facetSearchResponse);
+          expect(field).toEqual(expectedField);
+          expect(query).toContain(exampleQuery);
+        });
+      });
+
+      test.describe('with a selected value in the URL', () => {
+        const selectedIndex = 0;
+        const {field, values} = facetData;
+        test.use({
+          urlHash: `f-${field}=${values[selectedIndex].value}`,
+          facetResponseMock: undefined,
+        });
+
+        test('should select the correct facet value', async ({facet}) => {
+          await expect(facet.facetValueInput.nth(selectedIndex)).toBeChecked();
+          expect(facet.facetValue.nth(selectedIndex)).toHaveText(
+            new RegExp(values[selectedIndex].value)
+          );
+        });
+      });
+    }
+  });
+});

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

@@ -0,0 +1,28 @@
+// @ts-ignore
+import {createElement} from 'lwc';
+import QuanticFacetCaption from '../quanticFacetCaption';
+
+function createTestComponent(options) {
+  const element = createElement('c-quantic-facet-caption', {
+    is: QuanticFacetCaption,
+  });
+
+  for (const [key, value] of Object.entries(options)) {
+    element[key] = value;
+  }
+
+  document.body.appendChild(element);
+  return element;
+}
+
+describe('c-quantic-facet-caption', () => {
+  it('should expose captions through the `captions` property', () => {
+    const value = 'the-facet-value';
+    const caption = 'The custom caption';
+    const element = createTestComponent({value, caption});
+
+    const captions = element.captions;
+
+    expect(captions[value]).toBe(caption);
+  });
+});

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,64 @@
+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();
+      const searchResponsePromise = search.waitForSearchResponse();
+      await search.performSearch();
+      await searchResponsePromise;
+      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);
+  }
+}