@coveo/quantic 3.33.0 → 3.33.2

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

@@ -0,0 +1,76 @@
+import {BreadcrumbManagerObject} 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 breadcrumbManagerUrl = 's/quantic-breadcrumb-manager';
+
+interface BreadcrumbManagerOptions {
+  categoryDivider: string;
+  collapseThreshold: number;
+}
+
+type QuanticBreadcrumbManagerE2EFixtures = {
+  breadcrumbManager: BreadcrumbManagerObject;
+  search: SearchObject;
+  options: Partial<BreadcrumbManagerOptions>;
+};
+
+type QuanticBreadcrumbManagerE2ESearchFixtures =
+  QuanticBreadcrumbManagerE2EFixtures & {
+    urlHash: string;
+  };
+
+type QuanticBreadcrumbManagerE2eInsightFixtures =
+  QuanticBreadcrumbManagerE2ESearchFixtures & {
+    insightSetup: InsightSetupObject;
+  };
+
+export const testSearch =
+  quanticBase.extend<QuanticBreadcrumbManagerE2ESearchFixtures>({
+    options: {},
+    urlHash: '',
+    search: async ({page}, use) => {
+      await use(new SearchObject(page, searchRequestRegex));
+    },
+    breadcrumbManager: async (
+      {page, options, configuration, search, urlHash},
+      use
+    ) => {
+      await page.goto(
+        urlHash ? `${breadcrumbManagerUrl}#${urlHash}` : breadcrumbManagerUrl
+      );
+      configuration.configure(options);
+      await search.waitForSearchResponse();
+      await use(new BreadcrumbManagerObject(page));
+    },
+  });
+
+export const testInsight =
+  quanticBase.extend<QuanticBreadcrumbManagerE2eInsightFixtures>({
+    options: {},
+    search: async ({page}, use) => {
+      await use(new SearchObject(page, insightSearchRequestRegex));
+    },
+    insightSetup: async ({page}, use) => {
+      await use(new InsightSetupObject(page));
+    },
+    breadcrumbManager: async (
+      {page, options, search, configuration, insightSetup},
+      use
+    ) => {
+      await page.goto(breadcrumbManagerUrl);
+      configuration.configure({...options, useCase: useCaseEnum.insight});
+      await insightSetup.waitForInsightInterfaceInitialization();
+      await search.performSearch();
+      await search.waitForSearchResponse();
+      await use(new BreadcrumbManagerObject(page));
+    },
+  });
+
+export {expect} from '@playwright/test';

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

@@ -0,0 +1,282 @@
+import type {Locator, Page, Request} from '@playwright/test';
+import {isUaSearchEvent} from '../../../../../../playwright/utils/requests';
+
+const breadcrumbElementsSelectors = {
+  regularFacet: {
+    component: 'c-quantic-facet',
+    facetValueComponent: 'c-quantic-facet-value',
+    breadcrumbElementTestId: 'facet-breadcrumb',
+    breadcrumbValueElementTestId: 'facet-breadcrumb-value',
+  },
+  numericFacet: {
+    component: 'c-quantic-numeric-facet',
+    facetValueComponent: 'c-quantic-facet-value',
+    breadcrumbElementTestId: 'numeric-facet-breadcrumb',
+    breadcrumbValueElementTestId: 'numeric-facet-breadcrumb-value',
+  },
+  categoryFacet: {
+    component: 'c-quantic-category-facet',
+    facetValueComponent: 'c-quantic-category-facet-value',
+    breadcrumbElementTestId: 'category-facet-breadcrumb',
+    breadcrumbValueElementTestId: 'category-facet-breadcrumb-value',
+  },
+  timeframeFacet: {
+    component: 'c-quantic-timeframe-facet',
+    facetValueComponent: 'c-quantic-facet-value',
+    breadcrumbElementTestId: 'date-facet-breadcrumb',
+    breadcrumbValueElementTestId: 'date-facet-breadcrumb-value',
+  },
+};
+
+export class BreadcrumbManagerObject {
+  constructor(public page: Page) {
+    this.page = page;
+  }
+
+  async countAllFacetsBreadcrumb() {
+    return (
+      (await this.allRegularFacetBreadcrumb.count()) +
+      (await this.allNumericFacetBreadcrumb.count()) +
+      (await this.allCategoryFacetBreadcrumb.count()) +
+      (await this.allTimeframeFacetBreadcrumb.count())
+    );
+  }
+
+  /** REGULAR FACET */
+  get allRegularFacetBreadcrumb(): Locator {
+    return this.page.getByTestId(
+      breadcrumbElementsSelectors.regularFacet.breadcrumbElementTestId
+    );
+  }
+
+  get firstRegularFacetBreadcrumb(): Locator {
+    return this.page
+      .getByTestId(
+        breadcrumbElementsSelectors.regularFacet.breadcrumbElementTestId
+      )
+      .first();
+  }
+
+  async clickFirstRegularFacetBreadcrumbValue(): Promise<void> {
+    await this.firstRegularFacetBreadcrumb
+      .getByTestId(
+        breadcrumbElementsSelectors.regularFacet.breadcrumbValueElementTestId
+      )
+      .click();
+  }
+
+  get firstRegularFacet(): Locator {
+    return this.page
+      .locator(breadcrumbElementsSelectors.regularFacet.component)
+      .first();
+  }
+
+  get firstRegularFacetValue(): Promise<string | null> {
+    return this.firstRegularFacet
+      .locator(breadcrumbElementsSelectors.regularFacet.facetValueComponent)
+      .first()
+      .locator('.facet__value-text')
+      .textContent();
+  }
+
+  async clickFirstRegularFacetLink(): Promise<void> {
+    await this.clickFirstFacetLink(this.firstRegularFacet);
+  }
+
+  async clickFirstFacetLink(facetLocator: Locator): Promise<void> {
+    await facetLocator
+      .locator(breadcrumbElementsSelectors.regularFacet.facetValueComponent)
+      .first()
+      .click();
+  }
+
+  /** NUMERIC FACET */
+  get allNumericFacetBreadcrumb(): Locator {
+    return this.page.getByTestId(
+      breadcrumbElementsSelectors.numericFacet.breadcrumbElementTestId
+    );
+  }
+
+  get firstNumericFacetBreadcrumb(): Locator {
+    return this.page
+      .getByTestId(
+        breadcrumbElementsSelectors.numericFacet.breadcrumbElementTestId
+      )
+      .first();
+  }
+
+  async clickFirstNumericFacetBreadcrumbValue(): Promise<void> {
+    await this.firstNumericFacetBreadcrumb
+      .getByTestId(
+        breadcrumbElementsSelectors.numericFacet.breadcrumbValueElementTestId
+      )
+      .click();
+  }
+
+  get firstNumericFacet(): Locator {
+    return this.page
+      .locator(breadcrumbElementsSelectors.numericFacet.component)
+      .first();
+  }
+
+  get firstNumericFacetValue(): Promise<string | null> {
+    return this.firstNumericFacet
+      .locator(breadcrumbElementsSelectors.numericFacet.facetValueComponent)
+      .first()
+      .locator('.facet__value-text')
+      .textContent();
+  }
+
+  async clickFirstNumericFacetLink(): Promise<void> {
+    await this.clickFirstFacetLink(this.firstNumericFacet);
+  }
+
+  /** DATE|TIMEFRAME FACET */
+  get allTimeframeFacetBreadcrumb(): Locator {
+    return this.page.getByTestId(
+      breadcrumbElementsSelectors.timeframeFacet.breadcrumbElementTestId
+    );
+  }
+
+  get firstTimeframeFacetBreadcrumb(): Locator {
+    return this.page
+      .getByTestId(
+        breadcrumbElementsSelectors.timeframeFacet.breadcrumbElementTestId
+      )
+      .first();
+  }
+
+  async clickFirstTimeframeFacetBreadcrumbValue(): Promise<void> {
+    await this.firstTimeframeFacetBreadcrumb
+      .getByTestId(
+        breadcrumbElementsSelectors.timeframeFacet.breadcrumbValueElementTestId
+      )
+      .click();
+  }
+
+  get firstTimeframeFacet(): Locator {
+    return this.page
+      .locator(breadcrumbElementsSelectors.timeframeFacet.component)
+      .first();
+  }
+
+  get firstTimeframeFacetValue(): Promise<string | null> {
+    return this.firstTimeframeFacet
+      .locator(breadcrumbElementsSelectors.timeframeFacet.facetValueComponent)
+      .first()
+      .locator('.facet__value-text')
+      .textContent();
+  }
+
+  async clickFirstTimeframeFacetLink(): Promise<void> {
+    await this.clickFirstFacetLink(this.firstTimeframeFacet);
+  }
+
+  /** CATEGORY FACET */
+  get allCategoryFacetBreadcrumb(): Locator {
+    return this.page.getByTestId(
+      breadcrumbElementsSelectors.categoryFacet.breadcrumbElementTestId
+    );
+  }
+
+  get firstCategoryFacetBreadcrumb(): Locator {
+    return this.page
+      .getByTestId(
+        breadcrumbElementsSelectors.categoryFacet.breadcrumbElementTestId
+      )
+      .first();
+  }
+
+  async clickFirstCategoryFacetBreadcrumbValue(): Promise<void> {
+    await this.firstCategoryFacetBreadcrumb
+      .getByTestId(
+        breadcrumbElementsSelectors.categoryFacet.breadcrumbValueElementTestId
+      )
+      .click();
+  }
+
+  get firstCategoryFacet(): Locator {
+    return this.page
+      .locator(breadcrumbElementsSelectors.categoryFacet.component)
+      .first();
+  }
+
+  get firstCategoryFacetValue(): Promise<string | null> {
+    return this.firstCategoryFacet
+      .locator(breadcrumbElementsSelectors.categoryFacet.facetValueComponent)
+      .first()
+      .locator('.facet__value-option')
+      .locator('span:not(.facet__number-of-results)')
+      .textContent();
+  }
+
+  async clickFirstCategoryFacetLink(): Promise<void> {
+    await this.clickFirstCategoryFacetValue(this.firstCategoryFacet);
+  }
+
+  async clickFirstCategoryFacetValue(facetLocator: Locator): Promise<void> {
+    await facetLocator
+      .locator(breadcrumbElementsSelectors.categoryFacet.facetValueComponent)
+      .first()
+      .click();
+  }
+
+  get clearAllButton(): Locator {
+    return this.page.getByRole('button', {name: /Clear All Filters/i});
+  }
+
+  async clickClearAllButton(): Promise<void> {
+    await this.clearAllButton.click();
+  }
+
+  async waitForBreadcrumbSearchUaAnalytics(
+    actionCause: string,
+    customChecker?: Function
+  ): Promise<Request> {
+    const uaRequest = this.page.waitForRequest((request) => {
+      if (isUaSearchEvent(request)) {
+        const requestBody = request.postDataJSON?.();
+        const {customData} = requestBody;
+
+        const expectedFields = {
+          actionCause: actionCause,
+        };
+        const matchesExpectedFields = Object.keys(expectedFields).every(
+          (key) => requestBody?.[key] === expectedFields[key]
+        );
+
+        return (
+          matchesExpectedFields &&
+          (customChecker ? customChecker(customData) : true)
+        );
+      }
+      return false;
+    });
+    return uaRequest;
+  }
+
+  async waitForBreadcrumbFacetUaAnalytics(
+    expectedCustomFields: Record<string, any>
+  ): Promise<Request> {
+    return this.waitForBreadcrumbSearchUaAnalytics(
+      'breadcrumbFacet',
+      (customData: Record<string, any>) => {
+        return Object.keys(expectedCustomFields).every((key) =>
+          typeof expectedCustomFields[key] === 'object'
+            ? JSON.stringify(customData?.[key]) ===
+              JSON.stringify(expectedCustomFields[key])
+            : customData?.[key] === expectedCustomFields[key]
+        );
+      }
+    );
+  }
+
+  async waitForBreadcrumbResetAllUaAnalytics(
+    customChecker?: Function
+  ): Promise<Request> {
+    return this.waitForBreadcrumbSearchUaAnalytics(
+      'breadcrumbResetAll',
+      customChecker
+    );
+  }
+}

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

@@ -0,0 +1,167 @@
+import {testSearch, testInsight} from './fixture';
+import {
+  useCaseEnum,
+  useCaseTestCases,
+} from '../../../../../../playwright/utils/useCase';
+
+const fixtures = {
+  search: testSearch,
+  insight: testInsight,
+};
+
+const datetimeFacetLabelToValue = {
+  'Past week': 'past-1-week..now',
+  'Past month': 'past-1-month..now',
+  'Past 6 months': 'past-6-month..now',
+  'Past year': 'past-1-year..now',
+  'Past decade': 'past-10-year..now',
+};
+
+useCaseTestCases.forEach((useCase) => {
+  let test = fixtures[useCase.value];
+
+  test.describe(`quantic breadcrumb manager ${useCase.label}`, () => {
+    test.describe('when de-selecting a facet value', () => {
+      test.describe('with regular facet values', () => {
+        test('should trigger a new search and log analytics', async ({
+          breadcrumbManager,
+          search,
+        }) => {
+          const firstRegularFacetValue =
+            await breadcrumbManager.firstRegularFacetValue;
+          const searchResponsePromise = search.waitForSearchResponse();
+          await breadcrumbManager.clickFirstRegularFacetLink();
+          await searchResponsePromise;
+
+          const secondSearchResponsePromise = search.waitForSearchResponse();
+          const breadcrumbAnalyticsPromise =
+            breadcrumbManager.waitForBreadcrumbFacetUaAnalytics({
+              facetValue: firstRegularFacetValue,
+            });
+          await breadcrumbManager.clickFirstRegularFacetBreadcrumbValue();
+          await secondSearchResponsePromise;
+          await breadcrumbAnalyticsPromise;
+        });
+      });
+
+      test.describe('with numeric facet values', () => {
+        test('should trigger a new search and log analytics', async ({
+          breadcrumbManager,
+          search,
+        }) => {
+          const [facetRangeStart, facetRangeEnd] =
+            (await breadcrumbManager.firstNumericFacetValue)?.split(' - ') ??
+            [];
+          const searchResponsePromise = search.waitForSearchResponse();
+          await breadcrumbManager.clickFirstNumericFacetLink();
+          await searchResponsePromise;
+
+          const secondSearchResponsePromise = search.waitForSearchResponse();
+          // We use the facet display value to compare, but the display value is localized and can contain non-numeric characters while the analytics request doesn't contain those characters.
+          const breadcrumbAnalyticsPromise =
+            breadcrumbManager.waitForBreadcrumbFacetUaAnalytics({
+              facetRangeStart: facetRangeStart.replace(/[^\d]/g, ''),
+              facetRangeEnd: facetRangeEnd.replace(/[^\d]/g, ''),
+            });
+          await breadcrumbManager.clickFirstNumericFacetBreadcrumbValue();
+          await secondSearchResponsePromise;
+          await breadcrumbAnalyticsPromise;
+        });
+      });
+
+      test.describe('with timeframe|date facet values', () => {
+        test('should trigger a new search and log analytics', async ({
+          breadcrumbManager,
+          search,
+        }) => {
+          const facetValue = await breadcrumbManager.firstTimeframeFacetValue;
+          test.expect(facetValue).not.toBeNull();
+          const searchResponsePromise = search.waitForSearchResponse();
+          await breadcrumbManager.clickFirstTimeframeFacetLink();
+          await searchResponsePromise;
+
+          const secondSearchResponsePromise = search.waitForSearchResponse();
+          // We use the facet display value to compare, but the display value is prettified and is transformed to be human readable, while the analytics request isn't.
+          const [expectedFacetRangeStart, expectedFacetRangeEnd] =
+            datetimeFacetLabelToValue[facetValue!].split('..');
+          const breadcrumbAnalyticsPromise =
+            breadcrumbManager.waitForBreadcrumbFacetUaAnalytics({
+              facetRangeStart: expectedFacetRangeStart,
+              facetRangeEnd: expectedFacetRangeEnd,
+            });
+          await breadcrumbManager.clickFirstTimeframeFacetBreadcrumbValue();
+          await secondSearchResponsePromise;
+          await breadcrumbAnalyticsPromise;
+        });
+      });
+
+      test.describe('with category facet values', () => {
+        test('should trigger a new search and log analytics', async ({
+          breadcrumbManager,
+          search,
+        }) => {
+          const facetValue = await breadcrumbManager.firstCategoryFacetValue;
+          test.expect(facetValue).not.toBeNull();
+          const searchResponsePromise = search.waitForSearchResponse();
+          await breadcrumbManager.clickFirstCategoryFacetLink();
+          await searchResponsePromise;
+
+          const secondSearchResponsePromise = search.waitForSearchResponse();
+          const expectedFacetValue = facetValue!;
+          const breadcrumbAnalyticsPromise =
+            breadcrumbManager.waitForBreadcrumbFacetUaAnalytics({
+              categoryFacetPath: [expectedFacetValue],
+            });
+          await breadcrumbManager.clickFirstCategoryFacetBreadcrumbValue();
+          await secondSearchResponsePromise;
+          await breadcrumbAnalyticsPromise;
+        });
+      });
+    });
+
+    test.describe('when clicking on the clear all filters button', () => {
+      test('should send a clear all filters analytics event and clear all selected facets values', async ({
+        breadcrumbManager,
+        search,
+      }) => {
+        const searchResponsePromise = search.waitForSearchResponse();
+        await breadcrumbManager.clickFirstRegularFacetLink();
+        await searchResponsePromise;
+
+        const searchResponsePromiseTwo = search.waitForSearchResponse();
+        await breadcrumbManager.clickFirstTimeframeFacetLink();
+        await searchResponsePromiseTwo;
+
+        await test.expect(breadcrumbManager.clearAllButton).toBeVisible();
+        const clearAllSearchResponsePromise = search.waitForSearchResponse();
+        const clearAllAnalyticsPromise =
+          breadcrumbManager.waitForBreadcrumbResetAllUaAnalytics();
+        await breadcrumbManager.clickClearAllButton();
+        await clearAllAnalyticsPromise;
+        const clearAllSearchResponse = await clearAllSearchResponsePromise;
+        const {facets} = await clearAllSearchResponse.json();
+        const activeFacets = facets.filter((facet: any) =>
+          facet.values.some((value: any) => value.state !== 'idle')
+        );
+        test.expect(activeFacets).toHaveLength(0);
+      });
+    });
+
+    if (useCase.value === useCaseEnum.search) {
+      test.describe('when loading with a facet already selected', () => {
+        const facetSelectedHash = 'f-filetype=YouTubeVideo';
+        test.use({
+          urlHash: facetSelectedHash,
+        });
+
+        test('should have a facet selected in the breadcrumb manager', async ({
+          breadcrumbManager,
+        }) => {
+          test
+            .expect(await breadcrumbManager.countAllFacetsBreadcrumb())
+            .toBe(1);
+        });
+      });
+    }
+  });
+});