@coveo/quantic 3.11.0 → 3.12.0

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;
+
+        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);
+        });
+      });
+    }
+  });
+});

package/force-app/main/default/lwc/quanticBreadcrumbManager/quanticBreadcrumbManager.html

@@ -9,29 +9,29 @@
         <div class="slds-col slds-truncate slds-col_bump-right breadcrumb-manager__column">
           <ul>
             <template for:each={facetBreadcrumbValues} for:item="breadcrumb">
-              <li key={breadcrumb.facetId} class="slds-list_horizontal breadcrumb-manager__facet-list breadcrumb-manager__line">
+              <li data-testid="facet-breadcrumb" key={breadcrumb.facetId} class="slds-list_horizontal breadcrumb-manager__facet-list breadcrumb-manager__line">
                 <span class="slds-col breadcrumb-manager__field-name">{breadcrumb.label}{labels.colon} </span>
                 <ul class="slds-col slds-truncate slds-list_horizontal slds-grid slds-wrap">
                   <template for:each={breadcrumb.values} for:item="breadcrumbValue">
                     <li key={breadcrumbValue.value.value} class="breadcrumb__container">
-                      <c-quantic-pill label={breadcrumbValue.formattedValue} onquantic__deselect={breadcrumbValue.deselect} group-name={breadcrumb.label} action-name={labels.clearFilter}></c-quantic-pill>
+                      <c-quantic-pill data-testid="facet-breadcrumb-value" label={breadcrumbValue.formattedValue} onquantic__deselect={breadcrumbValue.deselect} group-name={breadcrumb.label} action-name={labels.clearFilter}></c-quantic-pill>
                     </li>
                   </template>
                   <template if:true={breadcrumb.showMoreButton}>
                     <li>
-                      <button onclick={breadcrumb.expandButtonClick} class="slds-grid slds-button slds-var-m-around_xxx-small slds-p-horizontal_x-small slds-p-vertical_xx-small slds-text-color_default breadcrumb-manager__more-button">{breadcrumb.showMoreButtonText}</button>
+                      <button onclick={breadcrumb.expandButtonClick} data-testid="breadcrumb-manager__more-button" class="slds-grid slds-button slds-var-m-around_xxx-small slds-p-horizontal_x-small slds-p-vertical_xx-small slds-text-color_default breadcrumb-manager__more-button">{breadcrumb.showMoreButtonText}</button>
                     </li>
                   </template>
                 </ul>
               </li>
             </template>
             <template for:each={numericFacetBreadcrumbsValues} for:item="breadcrumb">
-              <li key={breadcrumb.facetId} class="slds-list_horizontal breadcrumb-manager__numeric-facet-list breadcrumb-manager__line">
+              <li data-testid="numeric-facet-breadcrumb" key={breadcrumb.facetId} class="slds-list_horizontal breadcrumb-manager__numeric-facet-list breadcrumb-manager__line">
                 <span class="slds-col breadcrumb-manager__field-name">{breadcrumb.label}{labels.colon} </span>
                 <ul class="slds-col slds-truncate slds-list_horizontal slds-grid slds-wrap">
                   <template for:each={breadcrumb.values} for:item="breadcrumbValue">
                     <li key={breadcrumbValue.value} class="breadcrumb__container">
-                      <c-quantic-pill label={breadcrumbValue.formattedValue} onquantic__deselect={breadcrumbValue.deselect} group-name={breadcrumb.label} action-name={labels.clearFilter}></c-quantic-pill>
+                      <c-quantic-pill data-testid="numeric-facet-breadcrumb-value" label={breadcrumbValue.formattedValue} onquantic__deselect={breadcrumbValue.deselect} group-name={breadcrumb.label} action-name={labels.clearFilter}></c-quantic-pill>
                     </li>
                   </template>
                   <template if:true={breadcrumb.showMoreButton}>
@@ -43,22 +43,22 @@
               </li>
             </template>
             <template for:each={categoryFacetBreadcrumbsValues} for:item="breadcrumbValue">
-              <li key={breadcrumbValue.facetId} class="slds-list_horizontal breadcrumb-manager__category-facet-list breadcrumb-manager__line">
+              <li data-testid="category-facet-breadcrumb" key={breadcrumbValue.facetId} class="slds-list_horizontal breadcrumb-manager__category-facet-list breadcrumb-manager__line">
                 <span class="slds-col breadcrumb-manager__field-name">{breadcrumbValue.label}{labels.colon} </span>
                 <ul class="slds-col slds-truncate slds-list_horizontal slds-grid slds-wrap">
                   <li class="breadcrumb__container">
-                    <c-quantic-pill label={breadcrumbValue.value} onquantic__deselect={breadcrumbValue.deselect} group-name={breadcrumbValue.label} action-name={labels.clearFilter}></c-quantic-pill>
+                    <c-quantic-pill data-testid="category-facet-breadcrumb-value" label={breadcrumbValue.value} onquantic__deselect={breadcrumbValue.deselect} group-name={breadcrumbValue.label} action-name={labels.clearFilter}></c-quantic-pill>
                   </li>
                 </ul>
               </li>
             </template>
             <template for:each={dateFacetBreadcrumbsValues} for:item="breadcrumb">
-              <li key={breadcrumb.facetId} class="slds-list_horizontal breadcrumb-manager__date-facet-list breadcrumb-manager__line">
+              <li data-testid="date-facet-breadcrumb" key={breadcrumb.facetId} class="slds-list_horizontal breadcrumb-manager__date-facet-list breadcrumb-manager__line">
                 <span class="slds-col breadcrumb-manager__field-name">{breadcrumb.label}{labels.colon} </span>
                 <ul class="slds-col slds-truncate slds-list_horizontal slds-grid slds-wrap">
                   <template for:each={breadcrumb.values} for:item="breadcrumbValue">
                     <li key={breadcrumbValue.value} class="breadcrumb__container">
-                      <c-quantic-pill label={breadcrumbValue.value} onquantic__deselect={breadcrumbValue.deselect} group-name={breadcrumb.label} action-name={labels.clearFilter}></c-quantic-pill>
+                      <c-quantic-pill data-testid="date-facet-breadcrumb-value" label={breadcrumbValue.value} onquantic__deselect={breadcrumbValue.deselect} group-name={breadcrumb.label} action-name={labels.clearFilter}></c-quantic-pill>
                     </li>
                   </template>
                   <template if:true={breadcrumb.showMoreButton}>
@@ -74,7 +74,7 @@
         <div class="slds-col breadcrumb-manager__column slds-nowrap breadcrumb-manager__clear-button slds-m-left_small slds-shrink-none">
           <ul class="slds-m-around_xx-small">
             <li>
-              <button class="slds-button slds-var-m-around_xxx-small" onclick={deselectAll}>{labels.clearAllFilters}</button>
+              <button class="slds-button slds-var-m-around_xxx-small" data-testid="breadcrumb-manager__clear-button" onclick={deselectAll}>{labels.clearAllFilters}</button>
             </li>
           </ul>
         </div>

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

@@ -120,18 +120,18 @@ export default class QuanticBreadcrumbManager extends LightningElement {
     const data = getFromStore(this.engineId, Store.facetTypes.NUMERICFACETS);
     return {
       ...breadcrumb,
-      label: data ? data[breadcrumb.field]?.label : breadcrumb.field,
+      label: data ? data[breadcrumb.facetId]?.label : breadcrumb.field,
       values: breadcrumb.values.map((range) => ({
         ...range,
         value: `${range.value.start} - ${range.value.end}`,
-        formattedValue: data[breadcrumb.field]?.format(range.value),
+        formattedValue: data[breadcrumb.facetId]?.format(range.value),
       })),
     };
   }
 
   formatCategoryBreadcrumbValue(breadcrumb) {
     const data = getFromStore(this.engineId, Store.facetTypes.CATEGORYFACETS);
-    const format = data[breadcrumb.field]?.format ?? ((item) => item.value);
+    const format = data[breadcrumb.facetId]?.format ?? ((item) => item.value);
 
     if (breadcrumb.path.length <= 3) {
       return breadcrumb.path.map((breadcrumbValue) => format(breadcrumbValue));
@@ -175,10 +175,10 @@ export default class QuanticBreadcrumbManager extends LightningElement {
     const data = getFromStore(this.engineId, Store.facetTypes.DATEFACETS);
     return {
       ...breadcrumb,
-      label: data ? data[breadcrumb.field]?.label : breadcrumb.field,
+      label: data ? data[breadcrumb.facetId]?.label : breadcrumb.field,
       values: breadcrumb.values.map((range) => ({
         ...range,
-        value: data[breadcrumb.field]?.format(range.value),
+        value: data[breadcrumb.facetId]?.format(range.value),
       })),
     };
   }
@@ -187,10 +187,10 @@ export default class QuanticBreadcrumbManager extends LightningElement {
     const data = getFromStore(this.engineId, Store.facetTypes.FACETS);
     return {
       ...breadcrumb,
-      label: data ? data[breadcrumb.field]?.label : breadcrumb.field,
+      label: data ? data[breadcrumb.facetId]?.label : breadcrumb.field,
       values: breadcrumb.values.map((item) => ({
         ...item,
-        formattedValue: data[breadcrumb.field]?.format(item.value),
+        formattedValue: data[breadcrumb.facetId]?.format(item.value),
       })),
     };
   }
@@ -266,7 +266,7 @@ export default class QuanticBreadcrumbManager extends LightningElement {
         return {
           facetId: breadcrumb.facetId,
           field: breadcrumb.field,
-          label: data ? data[breadcrumb.field]?.label : breadcrumb.field,
+          label: data ? data[breadcrumb.facetId]?.label : breadcrumb.field,
           deselect: breadcrumb.deselect,
           value: breadcrumbValues.join(` ${this.categoryDivider} `),
         };

package/force-app/main/default/lwc/quanticFeedbackModalQna/templates/quanticFeedbackModalQna.html

@@ -17,6 +17,7 @@
             <div
               class="slds-grid slds-grid_align-spread slds-grid_vertical-align-start slds-var-p-bottom_x-small feedback-modal-qna__question"
               key={question.id}
+              data-testid={question.id}
             >
               <div class="slds-col slds-var-p-top_x-small">
                 {question.question}