@coveo/quantic 3.10.0 → 3.11.1

package/README.md

@@ -55,8 +55,8 @@ Or you can run the individual commands below.
 - Make sure you are in the `packages/quantic` root folder.
 - Run this command to create the default scratch org. `npm run scratch:create`.
 - In VS Code, press Command + Shift P, enter sfdx, and select SFDX: Create a Default Scratch Org.
-- You can also run this command from the command line. `sf org create scratch --set-default --definition-file config/project-scratch-def.json --alias "LWC"`
-- `LWC` is an alias for the scratch org that you can use in other Salesforce CLI commands. You can create any alias that you like.
+- You can also run this command from the command line. `sf org create scratch --set-default --definition-file config/lws-enabled-scratch-def.json --alias Quantic__LWS_enabled`
+- `Quantic__LWS_enabled` is an alias for the scratch org that you can use in other Salesforce CLI commands. You can create any alias that you like.
 
 #### Deploy the Quantic code
 
@@ -64,39 +64,55 @@ Or you can run the individual commands below.
 
 ## Testing
 
-### Deploy the Quantic Examples Community
+### Deploy the Quantic Examples Communities
 
-Example components are available as a Salesforce community (Digital Experience) allowing you to experiment with Quantic components.
+Example components are available as Salesforce communities (Digital Experiences), allowing you to experiment with Quantic components in two separate environments: one with Lightning Web Security (LWS) enabled and one with LWS disabled.
 
-To setup the community in the `LWC` scratch org, run:
+To set up both communities in scratch orgs, run:
 
 ```bash
 npm run setup:examples
 ```
 
-This script creates, configures, and deploys everything required to have fully working examples. The community URL is provided at the end of the script output, as in the following example:
+This script creates, configures, and deploys everything required to have fully working examples in **two scratch orgs**:
+
+- An org with **LWS enabled**.
+- An org with **LWS disabled**.
+
+At the end of the script, the URLs for the two communities are provided, as in the following example:
 
 ```
-...
 
-The 'Quantic Examples' community is ready, you can access it at the following URL:
-https://your-salesforce-scratch-org-instance.force.com/examples
+The 'Quantic Examples' community (LWS enabled) is ready, you can access it at the following URL:
+https://your-salesforce-lws-enabled-scratch-org-instance.force.com/examples
+
+The 'Quantic Examples' community (LWS disabled) is ready, you can access it at the following URL:
+https://your-salesforce-lws-disabled-scratch-org-instance.force.com/examples
 
 To open Cypress, run:
 npm run e2e:watch
 ```
 
-Once the community has been deployed, you can deploy the `main` or `example` components only when needed. To do so, run:
+Once the community has been deployed, you can deploy the `main` or `example` components to a specific org only when needed by running the corresponding commands:
+
+```bash
+npm run deploy:main --target-org Quantic__LWS_enabled
+npm run deploy:examples --target-org Quantic__LWS_enabled
+```
+
+You can replace Quantic\_\_LWS_enabled with your target org alias. For example:
 
 ```bash
-npm run deploy:main
-npm run deploy:examples
+npm run deploy:main --target-org MyCustomOrg
+npm run deploy:examples --target-org MyCustomOrg
 ```
 
 ### Run Cypress for Quantic Components
 
 **Note** Before attempting to run [Cypress](https://docs.cypress.io) tests, make sure the `Quantic Examples` community is deployed as described in the previous section.
 
+**Note** Cypress tests run on the org with **LWS enabled**, aliased as `Quantic__LWS_enabled`.
+
 To learn how to add tests, see [adding tests](./docs/adding-tests.md).
 
 - All the tests will need to be under folder `cypress/integration`.
@@ -119,6 +135,30 @@ To get the [detailed report](./docs/detailed-reporting.md), run:
 npm run e2e:detailed
 ```
 
+### Run Playwright for Quantic Components
+
+**Note** Before attempting to run [Playwright](https://playwright.dev/) tests, make sure the `Quantic Examples` community is deployed as described in the previous section in both orgs, the one where LWS is enabled and the one where it is disabled.
+
+**Note** For more information on how to add tests, please refer to our [Quantic Testing Strategy](https://github.com/coveo/ui-kit/blob/master/packages/quantic/decisions/0001-testing-strategy.md), which provides detailed guidelines on testing Quantic components.
+
+To run Playwright tests, run:
+
+```bash
+npm run e2e:playwright
+```
+
+To run Playwright tests only for the scratch org where LWS is enabled, run:
+
+```bash
+npm run e2e:playwright:lws-enabled
+```
+
+To run Playwright tests only for the scratch org where LWS is disabled, run:
+
+```bash
+npm run e2e:playwright:lws-disabled
+```
+
 ### Run LWC unit tests for Quantic Components
 
 To run LWC unit tests directly in your console, run:

package/docs/out/quantic-docs.json

@@ -6163,6 +6163,33 @@
                         "required": true,
                         "defaultValue": "",
                         "type": "string"
+                    },
+                    {
+                        "name": "userId",
+                        "attribute": "user-id",
+                        "access": "@api",
+                        "description": "<p>The ID of the user whose actions are being displayed. For example in email format &quot;someone@company.com&quot;.</p>",
+                        "required": true,
+                        "defaultValue": "",
+                        "type": "string"
+                    },
+                    {
+                        "name": "ticketCreationDateTime",
+                        "attribute": "ticket-creation-date-time",
+                        "access": "@api",
+                        "description": "<p>The date and time when the ticket was created. For example &quot;2024-01-01T00:00:00Z&quot;</p>",
+                        "required": true,
+                        "defaultValue": "",
+                        "type": "string"
+                    },
+                    {
+                        "name": "excludedCustomActions",
+                        "attribute": "excluded-custom-actions",
+                        "access": "@api",
+                        "description": "<p>The names of custom events to exclude.</p>",
+                        "required": false,
+                        "defaultValue": "[]",
+                        "type": "Array.<string>"
                     }
                 ]
             }

package/force-app/main/default/labels/CustomLabels.labels-meta.xml

@@ -1603,4 +1603,11 @@
     <protected>false</protected>
     <shortDescription>User actions</shortDescription>
   </labels>
+  <labels>
+    <fullName>quantic_CloseNotification</fullName>
+    <value>Close notification</value>
+    <language>en_US</language>
+    <protected>false</protected>
+    <shortDescription>Close notification</shortDescription>
+  </labels>
 </CustomLabels>

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

@@ -0,0 +1,341 @@
+/* eslint-disable no-import-assign */
+// @ts-ignore
+import QuanticBreadcrumbManager from 'c/quanticBreadcrumbManager';
+// @ts-ignore
+import {createElement} from 'lwc';
+import * as mockHeadlessLoader from 'c/quanticHeadlessLoader';
+
+const initialBreadcrumbManagerState = {
+  hasBreadcrumbs: false,
+  numericFacetBreadcrumbs: [],
+  categoryFacetBreadcrumbs: [],
+  dateFacetBreadcrumbs: [],
+  facetBreadcrumbs: [],
+};
+let breadcrumbManagerState = initialBreadcrumbManagerState;
+
+const initialStoreState = {};
+let storeState = initialStoreState;
+
+const functionsMocks = {
+  buildBreadcrumbManager: jest.fn(() => ({
+    state: breadcrumbManagerState,
+    subscribe: functionsMocks.subscribe,
+  })),
+  subscribe: jest.fn((cb) => {
+    cb();
+    return functionsMocks.unsubscribe;
+  }),
+  unsubscribe: jest.fn(() => {}),
+};
+
+const selectors = {
+  facetBreadcrumb: '[data-test="facet-breadcrumb"]',
+  facetBreadcrumbValue: '[data-test="facet-breadcrumb-value"]',
+  categoryFacetBreadcrumb: '[data-test="category-facet-breadcrumb"]',
+  categoryFacetBreadcrumbValue: '[data-test="category-facet-breadcrumb-value"]',
+  numericFacetBreadcrumb: '[data-test="numeric-facet-breadcrumb"]',
+  numericFacetBreadcrumbValue: '[data-test="numeric-facet-breadcrumb-value"]',
+  dateFacetBreadcrumb: '[data-test="date-facet-breadcrumb"]',
+  dateFacetBreadcrumbValue: '[data-test="date-facet-breadcrumb-value"]',
+};
+
+const exampleEngine = {
+  id: 'dummy engine',
+};
+const exampleFacetId = 'idOne';
+
+let isInitialized = false;
+
+function createTestComponent(options = {}) {
+  const element = createElement('c-quantic-breadcrumb-manager', {
+    is: QuanticBreadcrumbManager,
+  });
+  for (const [key, value] of Object.entries(options)) {
+    element[key] = value;
+  }
+
+  document.body.appendChild(element);
+  return element;
+}
+
+function prepareHeadlessState() {
+  // @ts-ignore
+  mockHeadlessLoader.getHeadlessBundle = () => {
+    return {
+      buildBreadcrumbManager: functionsMocks.buildBreadcrumbManager,
+    };
+  };
+}
+
+function mockStoreState() {
+  // @ts-ignore
+  mockHeadlessLoader.getFromStore = () => {
+    return storeState;
+  };
+}
+
+// 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 QuanticBreadcrumbManager && !isInitialized) {
+      isInitialized = true;
+      initialize(exampleEngine);
+    }
+  };
+}
+
+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-breadcrumb-manager', () => {
+  beforeEach(() => {
+    mockSuccessfulHeadlessInitialization();
+    prepareHeadlessState();
+    mockStoreState();
+  });
+
+  afterEach(() => {
+    breadcrumbManagerState = initialBreadcrumbManagerState;
+    storeState = initialStoreState;
+    cleanup();
+  });
+
+  describe('facet breadcrumbs', () => {
+    const exampleFacetBreadcrumbs = [
+      {
+        field: 'fieldOne',
+        facetId: exampleFacetId,
+        values: [{value: 'one'}, {value: 'two'}],
+      },
+    ];
+
+    beforeAll(() => {
+      breadcrumbManagerState = {
+        ...breadcrumbManagerState,
+        facetBreadcrumbs: exampleFacetBreadcrumbs,
+        hasBreadcrumbs: true,
+      };
+
+      storeState = {
+        [exampleFacetId]: {
+          facetId: exampleFacetId,
+          format: (value) => value,
+        },
+      };
+    });
+
+    it('should properly display the breadcrumb values', async () => {
+      const element = createTestComponent();
+      await flushPromises();
+
+      const facetBreadcrumbs = element.shadowRoot.querySelectorAll(
+        selectors.facetBreadcrumb
+      );
+
+      expect(facetBreadcrumbs.length).toBe(exampleFacetBreadcrumbs.length);
+      facetBreadcrumbs.forEach((facetBreadcrumb, index) => {
+        const exampleFacetBreadcrumb = exampleFacetBreadcrumbs[index];
+        const facetBreadcrumbValues = Array.from(
+          facetBreadcrumb.querySelectorAll(selectors.facetBreadcrumbValue)
+        );
+
+        expect(facetBreadcrumbValues.length).toBe(
+          exampleFacetBreadcrumb.values.length
+        );
+
+        const labels = facetBreadcrumbValues.map(
+          (facetBreadcrumbValue) => facetBreadcrumbValue.label
+        );
+        const values = exampleFacetBreadcrumb.values.map((item) => item.value);
+        expect(labels).toEqual(values);
+      });
+    });
+  });
+
+  describe('category facet breadcrumbs', () => {
+    const exampleCategoryFacetBreadcrumbs = [
+      {
+        field: exampleFacetId,
+        facetId: exampleFacetId,
+        path: [{value: 'one'}, {value: 'two'}],
+      },
+    ];
+
+    beforeAll(() => {
+      breadcrumbManagerState = {
+        ...breadcrumbManagerState,
+        categoryFacetBreadcrumbs: exampleCategoryFacetBreadcrumbs,
+        hasBreadcrumbs: true,
+      };
+
+      storeState = {
+        [exampleFacetId]: {
+          facetId: exampleFacetId,
+          format: (item) => item.value,
+        },
+      };
+    });
+
+    it('should properly display the breadcrumb values', async () => {
+      const element = createTestComponent();
+      await flushPromises();
+
+      const categoryFacetBreadcrumbs = element.shadowRoot.querySelectorAll(
+        selectors.categoryFacetBreadcrumb
+      );
+
+      expect(categoryFacetBreadcrumbs.length).toBe(
+        exampleCategoryFacetBreadcrumbs.length
+      );
+      categoryFacetBreadcrumbs.forEach((categoryFacetBreadcrumb, index) => {
+        const exampleFacetBreadcrumb = exampleCategoryFacetBreadcrumbs[index];
+        const categoryFacetBreadcrumbValues = Array.from(
+          categoryFacetBreadcrumb.querySelectorAll(
+            selectors.categoryFacetBreadcrumbValue
+          )
+        );
+
+        expect(categoryFacetBreadcrumbValues.length).toBe(1);
+
+        const labels = categoryFacetBreadcrumbValues.map(
+          (facetBreadcrumbValue) => facetBreadcrumbValue.label
+        );
+        const values = exampleFacetBreadcrumb.path.map((item) => item.value);
+        expect(labels).toEqual([values.join(' / ')]);
+      });
+    });
+  });
+
+  describe('numeric facet breadcrumbs', () => {
+    const exampleNumericFacetBreadcrumbs = [
+      {
+        field: 'fieldOne',
+        facetId: exampleFacetId,
+        values: [{value: {start: 0, end: 1}}, {value: {start: 1, end: 2}}],
+      },
+    ];
+
+    beforeAll(() => {
+      breadcrumbManagerState = {
+        ...breadcrumbManagerState,
+        numericFacetBreadcrumbs: exampleNumericFacetBreadcrumbs,
+        hasBreadcrumbs: true,
+      };
+
+      storeState = {
+        [exampleFacetId]: {
+          facetId: exampleFacetId,
+          format: (item) => `${item.start} - ${item.end}`,
+        },
+      };
+    });
+
+    it('should properly display the breadcrumb values', async () => {
+      const element = createTestComponent();
+      await flushPromises();
+
+      const numericFacetBreadcrumbs = element.shadowRoot.querySelectorAll(
+        selectors.numericFacetBreadcrumb
+      );
+
+      expect(numericFacetBreadcrumbs.length).toBe(
+        exampleNumericFacetBreadcrumbs.length
+      );
+      numericFacetBreadcrumbs.forEach((numericFacetBreadcrumb, index) => {
+        const exampleFacetBreadcrumb = exampleNumericFacetBreadcrumbs[index];
+        const facetBreadcrumbValues = Array.from(
+          numericFacetBreadcrumb.querySelectorAll(
+            selectors.numericFacetBreadcrumbValue
+          )
+        );
+
+        expect(facetBreadcrumbValues.length).toBe(
+          exampleFacetBreadcrumb.values.length
+        );
+
+        const labels = facetBreadcrumbValues.map(
+          (facetBreadcrumbValue) => facetBreadcrumbValue.label
+        );
+        const values = exampleFacetBreadcrumb.values.map(
+          (item) => `${item.value.start} - ${item.value.end}`
+        );
+        expect(labels).toEqual(values);
+      });
+    });
+  });
+
+  describe('date facet breadcrumbs', () => {
+    const exampleDateFacetBreadcrumbs = [
+      {
+        field: 'fieldOne',
+        facetId: exampleFacetId,
+        values: [
+          {value: {start: 'yesterday', end: 'today'}},
+          {value: {start: 'today', end: 'tomorrow'}},
+        ],
+      },
+    ];
+
+    beforeAll(() => {
+      breadcrumbManagerState = {
+        ...breadcrumbManagerState,
+        dateFacetBreadcrumbs: exampleDateFacetBreadcrumbs,
+        hasBreadcrumbs: true,
+      };
+
+      storeState = {
+        [exampleFacetId]: {
+          facetId: exampleFacetId,
+          format: (item) => `${item.start} - ${item.end}`,
+        },
+      };
+    });
+
+    it('should properly display the breadcrumb values', async () => {
+      const element = createTestComponent();
+      await flushPromises();
+
+      const dateFacetBreadcrumbs = element.shadowRoot.querySelectorAll(
+        selectors.dateFacetBreadcrumb
+      );
+
+      expect(dateFacetBreadcrumbs.length).toBe(
+        exampleDateFacetBreadcrumbs.length
+      );
+
+      dateFacetBreadcrumbs.forEach((dateFacetBreadcrumb, index) => {
+        const exampleFacetBreadcrumb = exampleDateFacetBreadcrumbs[index];
+        const facetBreadcrumbValues = Array.from(
+          dateFacetBreadcrumb.querySelectorAll(
+            selectors.dateFacetBreadcrumbValue
+          )
+        );
+
+        expect(facetBreadcrumbValues.length).toBe(
+          exampleFacetBreadcrumb.values.length
+        );
+
+        const labels = facetBreadcrumbValues.map(
+          (facetBreadcrumbValue) => facetBreadcrumbValue.label
+        );
+        const values = exampleFacetBreadcrumb.values.map(
+          (item) => `${item.value.start} - ${item.value.end}`
+        );
+        expect(labels).toEqual(values);
+      });
+    });
+  });
+});

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

@@ -9,12 +9,12 @@
         <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-test="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-test="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}>
@@ -26,12 +26,12 @@
               </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-test="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-test="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-test="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-test="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-test="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-test="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}>

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}