@coveo/quantic 3.11.0 → 3.11.1

package/README.md

@@ -144,7 +144,7 @@ npm run e2e:detailed
 To run Playwright tests, run:
 
 ```bash
-npm run e2e:playwright:
+npm run e2e:playwright
 ```
 
 To run Playwright tests only for the scratch org where LWS is enabled, 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/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}