From 723642161429145ac322d3b6b33fc2913ee1b793 Mon Sep 17 00:00:00 2001
From: erocheleau <erocheleau@coveo.com>
Date: Fri, 3 Jan 2025 15:16:17 -0500
Subject: [PATCH 1/4] added multiple Jest unit tests

---
 .../quanticBreadcrumbManager.test.js          | 369 +++++++++++++++---
 .../quanticBreadcrumbManager.html             |   8 +-
 2 files changed, 322 insertions(+), 55 deletions(-)

diff --git a/packages/quantic/force-app/main/default/lwc/quanticBreadcrumbManager/__tests__/quanticBreadcrumbManager.test.js b/packages/quantic/force-app/main/default/lwc/quanticBreadcrumbManager/__tests__/quanticBreadcrumbManager.test.js
index 0a17eeee327..d5c79c6f6ec 100644
--- a/packages/quantic/force-app/main/default/lwc/quanticBreadcrumbManager/__tests__/quanticBreadcrumbManager.test.js
+++ b/packages/quantic/force-app/main/default/lwc/quanticBreadcrumbManager/__tests__/quanticBreadcrumbManager.test.js
@@ -30,8 +30,12 @@ const functionsMocks = {
 };
 
 const selectors = {
-  facetBreadcrumb: '[data-test="facet-breadcrumb"]',
-  facetBreadcrumbValue: '[data-test="facet-breadcrumb-value"]',
+  initializationError: 'c-quantic-component-error',
+  breadcrumbShowMoreButton: '[data-testid="breadcrumb-manager__more-button"]',
+  breadcrumbClearAllFiltersButton:
+    '[data-testid="breadcrumb-manager__clear-button"]',
+  facetBreadcrumb: '[data-testid="facet-breadcrumb"]',
+  facetBreadcrumbValue: '[data-testid="facet-breadcrumb-value"]',
   categoryFacetBreadcrumb: '[data-test="category-facet-breadcrumb"]',
   categoryFacetBreadcrumbValue: '[data-test="category-facet-breadcrumb-value"]',
   numericFacetBreadcrumb: '[data-test="numeric-facet-breadcrumb"]',
@@ -43,8 +47,7 @@ const selectors = {
 const exampleEngine = {
   id: 'dummy engine',
 };
-const exampleFacetId = 'idOne';
-
+const defaultCollapseThreshold = 5;
 let isInitialized = false;
 
 function createTestComponent(options = {}) {
@@ -91,6 +94,15 @@ function mockSuccessfulHeadlessInitialization() {
   };
 }
 
+function mockErroneousHeadlessInitialization() {
+  // @ts-ignore
+  mockHeadlessLoader.initializeWithHeadless = (element) => {
+    if (element instanceof QuanticBreadcrumbManager) {
+      element.setInitializationError();
+    }
+  };
+}
+
 function cleanup() {
   // The jsdom instance is shared across test cases in a single file so reset the DOM
   while (document.body.firstChild) {
@@ -101,6 +113,47 @@ function cleanup() {
 }
 
 describe('c-quantic-breadcrumb-manager', () => {
+  afterEach(() => {
+    breadcrumbManagerState = initialBreadcrumbManagerState;
+    storeState = initialStoreState;
+    cleanup();
+  });
+
+  describe('when an initialization error occurs', () => {
+    beforeEach(() => {
+      mockErroneousHeadlessInitialization();
+    });
+
+    it('should display the initialization error component', async () => {
+      const element = createTestComponent();
+      await flushPromises();
+
+      const errorComponent = element.shadowRoot.querySelector(
+        selectors.initializationError
+      );
+
+      expect(errorComponent).not.toBeNull();
+    });
+  });
+
+  describe('controller initialization', () => {
+    beforeEach(() => {
+      mockSuccessfulHeadlessInitialization();
+      prepareHeadlessState();
+    });
+
+    it('should build the breadcrumb manager and subscribe to state', async () => {
+      createTestComponent();
+      await flushPromises();
+
+      expect(functionsMocks.buildBreadcrumbManager).toHaveBeenCalledTimes(1);
+      expect(functionsMocks.buildBreadcrumbManager).toHaveBeenCalledWith(
+        exampleEngine
+      );
+      expect(functionsMocks.subscribe).toHaveBeenCalledTimes(1);
+    });
+  });
+
   beforeEach(() => {
     mockSuccessfulHeadlessInitialization();
     prepareHeadlessState();
@@ -113,28 +166,33 @@ describe('c-quantic-breadcrumb-manager', () => {
     cleanup();
   });
 
-  describe('facet breadcrumbs', () => {
+  describe('facet breadcrumbs rendering', () => {
     const exampleFacetBreadcrumbs = [
       {
         field: 'fieldOne',
-        facetId: exampleFacetId,
-        values: [{value: 'one'}, {value: 'two'}],
+        facetId: 'facetIdOne',
+        values: [{value: {value: 'one'}}, {value: {value: 'two'}}],
+      },
+      {
+        field: 'fieldTwo',
+        facetId: 'facetIdTwo',
+        values: [{value: {value: 'three'}}, {value: {value: 'four'}}],
       },
     ];
 
-    beforeAll(() => {
+    beforeEach(() => {
       breadcrumbManagerState = {
         ...breadcrumbManagerState,
         facetBreadcrumbs: exampleFacetBreadcrumbs,
         hasBreadcrumbs: true,
       };
-
-      storeState = {
-        [exampleFacetId]: {
-          facetId: exampleFacetId,
+      storeState = exampleFacetBreadcrumbs.reduce((acc, breadcrumb) => {
+        acc[breadcrumb.facetId] = {
+          facetId: breadcrumb.facetId,
           format: (value) => value,
-        },
-      };
+        };
+        return acc;
+      }, {});
     });
 
     it('should properly display the breadcrumb values', async () => {
@@ -161,32 +219,195 @@ describe('c-quantic-breadcrumb-manager', () => {
         );
         const values = exampleFacetBreadcrumb.values.map((item) => item.value);
         expect(labels).toEqual(values);
+
+        const breadcrumbClearAllFiltersButton =
+          element.shadowRoot.querySelector(
+            selectors.breadcrumbClearAllFiltersButton
+          );
+        expect(breadcrumbClearAllFiltersButton).not.toBeNull();
+      });
+    });
+
+    describe('when the number of values exceeds the collapse threshold', () => {
+      const testManyFacetBreadcrumbs = [
+        {
+          field: 'fieldOne',
+          facetId: 'facetIdOne',
+          values: [
+            {value: {value: 'one'}},
+            {value: {value: 'two'}},
+            {value: {value: 'three'}},
+            {value: {value: 'four'}},
+            {value: {value: 'five'}},
+            {value: {value: 'six'}},
+          ],
+        },
+      ];
+
+      beforeEach(() => {
+        breadcrumbManagerState = {
+          ...breadcrumbManagerState,
+          facetBreadcrumbs: testManyFacetBreadcrumbs,
+          hasBreadcrumbs: true,
+        };
+        storeState = testManyFacetBreadcrumbs.reduce((acc, breadcrumb) => {
+          acc[breadcrumb.facetId] = {
+            facetId: breadcrumb.facetId,
+            format: (value) => value,
+          };
+          return acc;
+        }, {});
+      });
+      it('should collapse the values and display a show more button', async () => {
+        const element = createTestComponent();
+        await flushPromises();
+
+        const facetBreadcrumbs = element.shadowRoot.querySelectorAll(
+          selectors.facetBreadcrumb
+        );
+        expect(facetBreadcrumbs.length).toBe(testManyFacetBreadcrumbs.length);
+
+        const firstFacetBreadcrumb = facetBreadcrumbs[0];
+        const facetBreadcrumbValues = Array.from(
+          firstFacetBreadcrumb.querySelectorAll(selectors.facetBreadcrumbValue)
+        );
+        expect(facetBreadcrumbValues.length).toBe(defaultCollapseThreshold);
+        facetBreadcrumbValues.forEach((facetBreadcrumbValue, index) => {
+          const facetValueLabel = facetBreadcrumbValue.label.value;
+          expect(facetValueLabel).toBe(
+            testManyFacetBreadcrumbs[0].values[index].value.value
+          );
+        });
+
+        const breadcrumbShowMoreButton = element.shadowRoot.querySelector(
+          selectors.breadcrumbShowMoreButton
+        );
+        expect(breadcrumbShowMoreButton).not.toBeNull();
+      });
+
+      it('should expand the values when the show more button is clicked', async () => {
+        const element = createTestComponent();
+        await flushPromises();
+
+        const facetBreadcrumbs = element.shadowRoot.querySelectorAll(
+          selectors.facetBreadcrumb
+        );
+        const firstFacetBreadcrumb = facetBreadcrumbs[0];
+
+        const facetBreadcrumbValues = Array.from(
+          firstFacetBreadcrumb.querySelectorAll(selectors.facetBreadcrumbValue)
+        );
+        expect(facetBreadcrumbValues.length).toBe(defaultCollapseThreshold);
+
+        const breadcrumbShowMoreButton = element.shadowRoot.querySelector(
+          selectors.breadcrumbShowMoreButton
+        );
+        expect(breadcrumbShowMoreButton).not.toBeNull();
+
+        breadcrumbShowMoreButton.click();
+        await flushPromises();
+
+        const facetBreadcrumbValuesAfterClick = Array.from(
+          firstFacetBreadcrumb.querySelectorAll(selectors.facetBreadcrumbValue)
+        );
+        expect(facetBreadcrumbValuesAfterClick.length).toBe(
+          testManyFacetBreadcrumbs[0].values.length
+        );
+        const breadcrumbShowMoreButtonAfterClick =
+          element.shadowRoot.querySelector(selectors.breadcrumbShowMoreButton);
+        expect(breadcrumbShowMoreButtonAfterClick).toBeNull();
+      });
+    });
+
+    describe('with a custom collapse threshold', () => {
+      const customCollapseThreshold = 3;
+      const testManyFacetBreadcrumbs = [
+        {
+          field: 'fieldOne',
+          facetId: 'facetIdOne',
+          values: [
+            {value: {value: 'one'}},
+            {value: {value: 'two'}},
+            {value: {value: 'three'}},
+            {value: {value: 'four'}},
+            {value: {value: 'five'}},
+            {value: {value: 'six'}},
+          ],
+        },
+      ];
+
+      beforeEach(() => {
+        breadcrumbManagerState = {
+          ...breadcrumbManagerState,
+          facetBreadcrumbs: testManyFacetBreadcrumbs,
+          hasBreadcrumbs: true,
+        };
+        storeState = testManyFacetBreadcrumbs.reduce((acc, breadcrumb) => {
+          acc[breadcrumb.facetId] = {
+            facetId: breadcrumb.facetId,
+            format: (value) => value,
+          };
+          return acc;
+        }, {});
+      });
+      it('should collapse the values over the custom collapse threshold and display a show more button', async () => {
+        const element = createTestComponent({
+          collapseThreshold: customCollapseThreshold,
+        });
+        await flushPromises();
+
+        const facetBreadcrumbs = element.shadowRoot.querySelectorAll(
+          selectors.facetBreadcrumb
+        );
+        expect(facetBreadcrumbs.length).toBe(testManyFacetBreadcrumbs.length);
+
+        const firstFacetBreadcrumb = facetBreadcrumbs[0];
+        const facetBreadcrumbValues = Array.from(
+          firstFacetBreadcrumb.querySelectorAll(selectors.facetBreadcrumbValue)
+        );
+        expect(facetBreadcrumbValues.length).toBe(customCollapseThreshold);
+        facetBreadcrumbValues.forEach((facetBreadcrumbValue, index) => {
+          const facetValueLabel = facetBreadcrumbValue.label.value;
+          expect(facetValueLabel).toBe(
+            testManyFacetBreadcrumbs[0].values[index].value.value
+          );
+        });
+
+        const breadcrumbShowMoreButton = element.shadowRoot.querySelector(
+          selectors.breadcrumbShowMoreButton
+        );
+        expect(breadcrumbShowMoreButton).not.toBeNull();
       });
     });
   });
 
   describe('category facet breadcrumbs', () => {
-    const exampleCategoryFacetBreadcrumbs = [
+    const testCategoryFacetBreadcrumbs = [
       {
-        field: exampleFacetId,
-        facetId: exampleFacetId,
+        field: 'fieldOne',
+        facetId: 'facetIdOne',
         path: [{value: 'one'}, {value: 'two'}],
       },
+      {
+        field: 'fieldTwo',
+        facetId: 'facetIdTwo',
+        path: [{value: 'three'}, {value: 'four'}],
+      },
     ];
 
-    beforeAll(() => {
+    beforeEach(() => {
       breadcrumbManagerState = {
         ...breadcrumbManagerState,
-        categoryFacetBreadcrumbs: exampleCategoryFacetBreadcrumbs,
+        categoryFacetBreadcrumbs: testCategoryFacetBreadcrumbs,
         hasBreadcrumbs: true,
       };
-
-      storeState = {
-        [exampleFacetId]: {
-          facetId: exampleFacetId,
+      storeState = testCategoryFacetBreadcrumbs.reduce((acc, breadcrumb) => {
+        acc[breadcrumb.facetId] = {
+          facetId: breadcrumb.facetId,
           format: (item) => item.value,
-        },
-      };
+        };
+        return acc;
+      }, {});
     });
 
     it('should properly display the breadcrumb values', async () => {
@@ -198,10 +419,10 @@ describe('c-quantic-breadcrumb-manager', () => {
       );
 
       expect(categoryFacetBreadcrumbs.length).toBe(
-        exampleCategoryFacetBreadcrumbs.length
+        testCategoryFacetBreadcrumbs.length
       );
       categoryFacetBreadcrumbs.forEach((categoryFacetBreadcrumb, index) => {
-        const exampleFacetBreadcrumb = exampleCategoryFacetBreadcrumbs[index];
+        const exampleFacetBreadcrumb = testCategoryFacetBreadcrumbs[index];
         const categoryFacetBreadcrumbValues = Array.from(
           categoryFacetBreadcrumb.querySelectorAll(
             selectors.categoryFacetBreadcrumbValue
@@ -217,30 +438,70 @@ describe('c-quantic-breadcrumb-manager', () => {
         expect(labels).toEqual([values.join(' / ')]);
       });
     });
+
+    describe('with a custom category divider', () => {
+      it('should display the breadcrumb values with the custom divider', async () => {
+        const customCategoryDivider = '*';
+        const element = createTestComponent({
+          categoryDivider: customCategoryDivider,
+        });
+        await flushPromises();
+
+        const categoryFacetBreadcrumbs = element.shadowRoot.querySelectorAll(
+          selectors.categoryFacetBreadcrumb
+        );
+
+        expect(categoryFacetBreadcrumbs.length).toBe(
+          testCategoryFacetBreadcrumbs.length
+        );
+
+        categoryFacetBreadcrumbs.forEach((categoryFacetBreadcrumb, index) => {
+          const exampleFacetBreadcrumb = testCategoryFacetBreadcrumbs[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(` ${customCategoryDivider} `)]);
+        });
+      });
+    });
   });
 
   describe('numeric facet breadcrumbs', () => {
-    const exampleNumericFacetBreadcrumbs = [
+    const testNumericFacetBreadcrumbs = [
       {
         field: 'fieldOne',
-        facetId: exampleFacetId,
+        facetId: 'facetIdOne',
         values: [{value: {start: 0, end: 1}}, {value: {start: 1, end: 2}}],
       },
+      {
+        field: 'fieldTwo',
+        facetId: 'facetIdTwo',
+        values: [{value: {start: 10, end: 11}}, {value: {start: 20, end: 21}}],
+      },
     ];
 
     beforeAll(() => {
       breadcrumbManagerState = {
         ...breadcrumbManagerState,
-        numericFacetBreadcrumbs: exampleNumericFacetBreadcrumbs,
+        numericFacetBreadcrumbs: testNumericFacetBreadcrumbs,
         hasBreadcrumbs: true,
       };
-
-      storeState = {
-        [exampleFacetId]: {
-          facetId: exampleFacetId,
+      storeState = testNumericFacetBreadcrumbs.reduce((acc, breadcrumb) => {
+        acc[breadcrumb.facetId] = {
+          facetId: breadcrumb.facetId,
           format: (item) => `${item.start} - ${item.end}`,
-        },
-      };
+        };
+        return acc;
+      }, {});
     });
 
     it('should properly display the breadcrumb values', async () => {
@@ -252,10 +513,10 @@ describe('c-quantic-breadcrumb-manager', () => {
       );
 
       expect(numericFacetBreadcrumbs.length).toBe(
-        exampleNumericFacetBreadcrumbs.length
+        testNumericFacetBreadcrumbs.length
       );
       numericFacetBreadcrumbs.forEach((numericFacetBreadcrumb, index) => {
-        const exampleFacetBreadcrumb = exampleNumericFacetBreadcrumbs[index];
+        const exampleFacetBreadcrumb = testNumericFacetBreadcrumbs[index];
         const facetBreadcrumbValues = Array.from(
           numericFacetBreadcrumb.querySelectorAll(
             selectors.numericFacetBreadcrumbValue
@@ -278,30 +539,38 @@ describe('c-quantic-breadcrumb-manager', () => {
   });
 
   describe('date facet breadcrumbs', () => {
-    const exampleDateFacetBreadcrumbs = [
+    const testDateFacetBreadcrumbs = [
       {
         field: 'fieldOne',
-        facetId: exampleFacetId,
+        facetId: 'facetIdOne',
         values: [
           {value: {start: 'yesterday', end: 'today'}},
           {value: {start: 'today', end: 'tomorrow'}},
         ],
       },
+      {
+        field: 'fieldTwo',
+        facetId: 'facetIdTwo',
+        values: [
+          {value: {start: 'last week', end: 'today'}},
+          {value: {start: 'tomorrow', end: 'next week'}},
+        ],
+      },
     ];
 
     beforeAll(() => {
       breadcrumbManagerState = {
         ...breadcrumbManagerState,
-        dateFacetBreadcrumbs: exampleDateFacetBreadcrumbs,
+        dateFacetBreadcrumbs: testDateFacetBreadcrumbs,
         hasBreadcrumbs: true,
       };
-
-      storeState = {
-        [exampleFacetId]: {
-          facetId: exampleFacetId,
+      storeState = testDateFacetBreadcrumbs.reduce((acc, breadcrumb) => {
+        acc[breadcrumb.facetId] = {
+          facetId: breadcrumb.facetId,
           format: (item) => `${item.start} - ${item.end}`,
-        },
-      };
+        };
+        return acc;
+      }, {});
     });
 
     it('should properly display the breadcrumb values', async () => {
@@ -312,12 +581,10 @@ describe('c-quantic-breadcrumb-manager', () => {
         selectors.dateFacetBreadcrumb
       );
 
-      expect(dateFacetBreadcrumbs.length).toBe(
-        exampleDateFacetBreadcrumbs.length
-      );
+      expect(dateFacetBreadcrumbs.length).toBe(testDateFacetBreadcrumbs.length);
 
       dateFacetBreadcrumbs.forEach((dateFacetBreadcrumb, index) => {
-        const exampleFacetBreadcrumb = exampleDateFacetBreadcrumbs[index];
+        const exampleFacetBreadcrumb = testDateFacetBreadcrumbs[index];
         const facetBreadcrumbValues = Array.from(
           dateFacetBreadcrumb.querySelectorAll(
             selectors.dateFacetBreadcrumbValue
diff --git a/packages/quantic/force-app/main/default/lwc/quanticBreadcrumbManager/quanticBreadcrumbManager.html b/packages/quantic/force-app/main/default/lwc/quanticBreadcrumbManager/quanticBreadcrumbManager.html
index 32c7eacbd6b..02a18d9a4af 100644
--- a/packages/quantic/force-app/main/default/lwc/quanticBreadcrumbManager/quanticBreadcrumbManager.html
+++ b/packages/quantic/force-app/main/default/lwc/quanticBreadcrumbManager/quanticBreadcrumbManager.html
@@ -9,17 +9,17 @@
         <div class="slds-col slds-truncate slds-col_bump-right breadcrumb-manager__column">
           <ul>
             <template for:each={facetBreadcrumbValues} for:item="breadcrumb">
-              <li data-test="facet-breadcrumb" 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 data-test="facet-breadcrumb-value" 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>
@@ -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>

From f8c615bc22602ebc6cc41452b2fc895a9c8713a0 Mon Sep 17 00:00:00 2001
From: erocheleau <erocheleau@coveo.com>
Date: Fri, 3 Jan 2025 18:04:35 -0500
Subject: [PATCH 2/4] first playwright tests

---
 .../quanticBreadcrumbManager.test.js          |  13 +-
 .../quanticBreadcrumbManager/e2e/fixture.ts   |  76 +++++++
 .../e2e/pageObject.ts                         | 209 ++++++++++++++++++
 .../e2e/quanticBreadcrumbManager.e2e.ts       |  65 ++++++
 .../quanticBreadcrumbManager.html             |  12 +-
 5 files changed, 363 insertions(+), 12 deletions(-)
 create mode 100644 packages/quantic/force-app/main/default/lwc/quanticBreadcrumbManager/e2e/fixture.ts
 create mode 100644 packages/quantic/force-app/main/default/lwc/quanticBreadcrumbManager/e2e/pageObject.ts
 create mode 100644 packages/quantic/force-app/main/default/lwc/quanticBreadcrumbManager/e2e/quanticBreadcrumbManager.e2e.ts

diff --git a/packages/quantic/force-app/main/default/lwc/quanticBreadcrumbManager/__tests__/quanticBreadcrumbManager.test.js b/packages/quantic/force-app/main/default/lwc/quanticBreadcrumbManager/__tests__/quanticBreadcrumbManager.test.js
index d5c79c6f6ec..8ed1048b631 100644
--- a/packages/quantic/force-app/main/default/lwc/quanticBreadcrumbManager/__tests__/quanticBreadcrumbManager.test.js
+++ b/packages/quantic/force-app/main/default/lwc/quanticBreadcrumbManager/__tests__/quanticBreadcrumbManager.test.js
@@ -36,12 +36,13 @@ const selectors = {
     '[data-testid="breadcrumb-manager__clear-button"]',
   facetBreadcrumb: '[data-testid="facet-breadcrumb"]',
   facetBreadcrumbValue: '[data-testid="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"]',
+  categoryFacetBreadcrumb: '[data-testid="category-facet-breadcrumb"]',
+  categoryFacetBreadcrumbValue:
+    '[data-testid="category-facet-breadcrumb-value"]',
+  numericFacetBreadcrumb: '[data-testid="numeric-facet-breadcrumb"]',
+  numericFacetBreadcrumbValue: '[data-testid="numeric-facet-breadcrumb-value"]',
+  dateFacetBreadcrumb: '[data-testid="date-facet-breadcrumb"]',
+  dateFacetBreadcrumbValue: '[data-testid="date-facet-breadcrumb-value"]',
 };
 
 const exampleEngine = {
diff --git a/packages/quantic/force-app/main/default/lwc/quanticBreadcrumbManager/e2e/fixture.ts b/packages/quantic/force-app/main/default/lwc/quanticBreadcrumbManager/e2e/fixture.ts
new file mode 100644
index 00000000000..fb28a695457
--- /dev/null
+++ b/packages/quantic/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';
diff --git a/packages/quantic/force-app/main/default/lwc/quanticBreadcrumbManager/e2e/pageObject.ts b/packages/quantic/force-app/main/default/lwc/quanticBreadcrumbManager/e2e/pageObject.ts
new file mode 100644
index 00000000000..451755a8e2f
--- /dev/null
+++ b/packages/quantic/force-app/main/default/lwc/quanticBreadcrumbManager/e2e/pageObject.ts
@@ -0,0 +1,209 @@
+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;
+  }
+
+  /** REGULAR FACET */
+  get allRegularFacetBreadcrumb(): Locator {
+    return this.page.getByTestId(
+      breadcrumbElementsSelectors.regularFacet.breadcrumbElementTestId
+    );
+  }
+
+  getAllRegularFacetBreadcrumbValuesForFacet(
+    regularFacetBreadcrumb: Locator
+  ): Locator {
+    return regularFacetBreadcrumb.getByTestId(
+      breadcrumbElementsSelectors.regularFacet.breadcrumbValueElementTestId
+    );
+  }
+
+  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
+    );
+  }
+
+  getAllNumericFacetBreadcrumbValuesForFacet(
+    numericFacetBreadcrumb: Locator
+  ): Locator {
+    return numericFacetBreadcrumb.getByTestId(
+      breadcrumbElementsSelectors.numericFacet.breadcrumbValueElementTestId
+    );
+  }
+
+  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);
+  }
+
+  get firstTimeframeFacet(): Locator {
+    return this.page
+      .locator(breadcrumbElementsSelectors.timeframeFacet.component)
+      .first();
+  }
+
+  get firstCategoryFacet(): Locator {
+    return this.page
+      .locator(breadcrumbElementsSelectors.categoryFacet.component)
+      .first();
+  }
+
+  async selectFirstCategoryFacetValue(facetLocator: Locator): Promise<void> {
+    await facetLocator
+      .locator(breadcrumbElementsSelectors.categoryFacet.facetValueComponent)
+      .first()
+      .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>) => {
+        console.log('customData', customData);
+        console.log('expectedCustomFields', expectedCustomFields);
+        return Object.keys(expectedCustomFields).every(
+          (key) => customData?.[key] === expectedCustomFields[key]
+        );
+      }
+    );
+  }
+
+  async waitForBreadcrumbResetAllUaAnalytics(
+    customChecker?: Function
+  ): Promise<Request> {
+    return this.waitForBreadcrumbSearchUaAnalytics(
+      'breadcrumbResetAll',
+      customChecker
+    );
+  }
+}
diff --git a/packages/quantic/force-app/main/default/lwc/quanticBreadcrumbManager/e2e/quanticBreadcrumbManager.e2e.ts b/packages/quantic/force-app/main/default/lwc/quanticBreadcrumbManager/e2e/quanticBreadcrumbManager.e2e.ts
new file mode 100644
index 00000000000..23fe964035a
--- /dev/null
+++ b/packages/quantic/force-app/main/default/lwc/quanticBreadcrumbManager/e2e/quanticBreadcrumbManager.e2e.ts
@@ -0,0 +1,65 @@
+import {testSearch, testInsight} from './fixture';
+import {useCaseTestCases} from '../../../../../../playwright/utils/useCase';
+
+const fixtures = {
+  search: testSearch,
+  insight: testInsight,
+};
+
+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('the clear all filters button', () => {
+    //   test('should send a clear all filters analytics event and clear all selected facets values', async ({}) => {});
+    // });
+  });
+});
diff --git a/packages/quantic/force-app/main/default/lwc/quanticBreadcrumbManager/quanticBreadcrumbManager.html b/packages/quantic/force-app/main/default/lwc/quanticBreadcrumbManager/quanticBreadcrumbManager.html
index 02a18d9a4af..ee204e37ef2 100644
--- a/packages/quantic/force-app/main/default/lwc/quanticBreadcrumbManager/quanticBreadcrumbManager.html
+++ b/packages/quantic/force-app/main/default/lwc/quanticBreadcrumbManager/quanticBreadcrumbManager.html
@@ -26,12 +26,12 @@
               </li>
             </template>
             <template for:each={numericFacetBreadcrumbsValues} for:item="breadcrumb">
-              <li data-test="numeric-facet-breadcrumb" 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 data-test="numeric-facet-breadcrumb-value" 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 data-test="category-facet-breadcrumb" 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 data-test="category-facet-breadcrumb-value" 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 data-test="date-facet-breadcrumb" 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 data-test="date-facet-breadcrumb-value" 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}>

From 3e1d2836a992715f0a760566bbea587f9d9392bc Mon Sep 17 00:00:00 2001
From: erocheleau <erocheleau@coveo.com>
Date: Mon, 6 Jan 2025 17:31:09 -0500
Subject: [PATCH 3/4] Tests completed

---
 .../e2e/pageObject.ts                         | 115 +++++++++++++++++-
 .../e2e/quanticBreadcrumbManager.e2e.ts       | 110 ++++++++++++++++-
 2 files changed, 216 insertions(+), 9 deletions(-)

diff --git a/packages/quantic/force-app/main/default/lwc/quanticBreadcrumbManager/e2e/pageObject.ts b/packages/quantic/force-app/main/default/lwc/quanticBreadcrumbManager/e2e/pageObject.ts
index 451755a8e2f..c55dbaa55a8 100644
--- a/packages/quantic/force-app/main/default/lwc/quanticBreadcrumbManager/e2e/pageObject.ts
+++ b/packages/quantic/force-app/main/default/lwc/quanticBreadcrumbManager/e2e/pageObject.ts
@@ -33,6 +33,15 @@ export class BreadcrumbManagerObject {
     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(
@@ -138,25 +147,120 @@ export class BreadcrumbManagerObject {
     await this.clickFirstFacetLink(this.firstNumericFacet);
   }
 
+  /** DATE|TIMEFRAME FACET */
+  get allTimeframeFacetBreadcrumb(): Locator {
+    return this.page.getByTestId(
+      breadcrumbElementsSelectors.timeframeFacet.breadcrumbElementTestId
+    );
+  }
+
+  getAllTimeframeFacetBreadcrumbValuesForFacet(
+    timeframeFacetBreadcrumb: Locator
+  ): Locator {
+    return timeframeFacetBreadcrumb.getByTestId(
+      breadcrumbElementsSelectors.timeframeFacet.breadcrumbValueElementTestId
+    );
+  }
+
+  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
+    );
+  }
+
+  getAllCategoryFacetBreadcrumbValuesForFacet(
+    categoryFacetBreadcrumb: Locator
+  ): Locator {
+    return categoryFacetBreadcrumb.getByTestId(
+      breadcrumbElementsSelectors.categoryFacet.breadcrumbValueElementTestId
+    );
+  }
+
+  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();
   }
 
-  async selectFirstCategoryFacetValue(facetLocator: Locator): Promise<void> {
+  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
@@ -189,10 +293,11 @@ export class BreadcrumbManagerObject {
     return this.waitForBreadcrumbSearchUaAnalytics(
       'breadcrumbFacet',
       (customData: Record<string, any>) => {
-        console.log('customData', customData);
-        console.log('expectedCustomFields', expectedCustomFields);
-        return Object.keys(expectedCustomFields).every(
-          (key) => customData?.[key] === expectedCustomFields[key]
+        return Object.keys(expectedCustomFields).every((key) =>
+          typeof expectedCustomFields[key] === 'object'
+            ? JSON.stringify(customData?.[key]) ===
+              JSON.stringify(expectedCustomFields[key])
+            : customData?.[key] === expectedCustomFields[key]
         );
       }
     );
diff --git a/packages/quantic/force-app/main/default/lwc/quanticBreadcrumbManager/e2e/quanticBreadcrumbManager.e2e.ts b/packages/quantic/force-app/main/default/lwc/quanticBreadcrumbManager/e2e/quanticBreadcrumbManager.e2e.ts
index 23fe964035a..1702cf0ec98 100644
--- a/packages/quantic/force-app/main/default/lwc/quanticBreadcrumbManager/e2e/quanticBreadcrumbManager.e2e.ts
+++ b/packages/quantic/force-app/main/default/lwc/quanticBreadcrumbManager/e2e/quanticBreadcrumbManager.e2e.ts
@@ -1,11 +1,22 @@
 import {testSearch, testInsight} from './fixture';
-import {useCaseTestCases} from '../../../../../../playwright/utils/useCase';
+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];
 
@@ -57,9 +68,100 @@ useCaseTestCases.forEach((useCase) => {
           await breadcrumbAnalyticsPromise;
         });
       });
+
+      test.describe('with timefrate|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('the clear all filters button', () => {
-    //   test('should send a clear all filters analytics event and clear all selected facets values', async ({}) => {});
-    // });
+
+    test.describe('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);
+        });
+      });
+    }
   });
 });

From 2f4eb2e819c8b32c98ef97d4d2ad8bf9c35b9a81 Mon Sep 17 00:00:00 2001
From: erocheleau <erocheleau@coveo.com>
Date: Thu, 9 Jan 2025 19:39:54 -0500
Subject: [PATCH 4/4] PR comments

---
 .../quanticBreadcrumbManager.test.js          |  3 +-
 .../e2e/pageObject.ts                         | 32 -------------------
 .../e2e/quanticBreadcrumbManager.e2e.ts       |  4 +--
 3 files changed, 4 insertions(+), 35 deletions(-)

diff --git a/packages/quantic/force-app/main/default/lwc/quanticBreadcrumbManager/__tests__/quanticBreadcrumbManager.test.js b/packages/quantic/force-app/main/default/lwc/quanticBreadcrumbManager/__tests__/quanticBreadcrumbManager.test.js
index 8ed1048b631..f5530407bb4 100644
--- a/packages/quantic/force-app/main/default/lwc/quanticBreadcrumbManager/__tests__/quanticBreadcrumbManager.test.js
+++ b/packages/quantic/force-app/main/default/lwc/quanticBreadcrumbManager/__tests__/quanticBreadcrumbManager.test.js
@@ -229,7 +229,7 @@ describe('c-quantic-breadcrumb-manager', () => {
       });
     });
 
-    describe('when the number of values exceeds the collapse threshold', () => {
+    describe('when the number of selected values for one facet exceeds the collapse threshold', () => {
       const testManyFacetBreadcrumbs = [
         {
           field: 'fieldOne',
@@ -259,6 +259,7 @@ describe('c-quantic-breadcrumb-manager', () => {
           return acc;
         }, {});
       });
+
       it('should collapse the values and display a show more button', async () => {
         const element = createTestComponent();
         await flushPromises();
diff --git a/packages/quantic/force-app/main/default/lwc/quanticBreadcrumbManager/e2e/pageObject.ts b/packages/quantic/force-app/main/default/lwc/quanticBreadcrumbManager/e2e/pageObject.ts
index c55dbaa55a8..d4bb658bd5e 100644
--- a/packages/quantic/force-app/main/default/lwc/quanticBreadcrumbManager/e2e/pageObject.ts
+++ b/packages/quantic/force-app/main/default/lwc/quanticBreadcrumbManager/e2e/pageObject.ts
@@ -49,14 +49,6 @@ export class BreadcrumbManagerObject {
     );
   }
 
-  getAllRegularFacetBreadcrumbValuesForFacet(
-    regularFacetBreadcrumb: Locator
-  ): Locator {
-    return regularFacetBreadcrumb.getByTestId(
-      breadcrumbElementsSelectors.regularFacet.breadcrumbValueElementTestId
-    );
-  }
-
   get firstRegularFacetBreadcrumb(): Locator {
     return this.page
       .getByTestId(
@@ -105,14 +97,6 @@ export class BreadcrumbManagerObject {
     );
   }
 
-  getAllNumericFacetBreadcrumbValuesForFacet(
-    numericFacetBreadcrumb: Locator
-  ): Locator {
-    return numericFacetBreadcrumb.getByTestId(
-      breadcrumbElementsSelectors.numericFacet.breadcrumbValueElementTestId
-    );
-  }
-
   get firstNumericFacetBreadcrumb(): Locator {
     return this.page
       .getByTestId(
@@ -154,14 +138,6 @@ export class BreadcrumbManagerObject {
     );
   }
 
-  getAllTimeframeFacetBreadcrumbValuesForFacet(
-    timeframeFacetBreadcrumb: Locator
-  ): Locator {
-    return timeframeFacetBreadcrumb.getByTestId(
-      breadcrumbElementsSelectors.timeframeFacet.breadcrumbValueElementTestId
-    );
-  }
-
   get firstTimeframeFacetBreadcrumb(): Locator {
     return this.page
       .getByTestId(
@@ -203,14 +179,6 @@ export class BreadcrumbManagerObject {
     );
   }
 
-  getAllCategoryFacetBreadcrumbValuesForFacet(
-    categoryFacetBreadcrumb: Locator
-  ): Locator {
-    return categoryFacetBreadcrumb.getByTestId(
-      breadcrumbElementsSelectors.categoryFacet.breadcrumbValueElementTestId
-    );
-  }
-
   get firstCategoryFacetBreadcrumb(): Locator {
     return this.page
       .getByTestId(
diff --git a/packages/quantic/force-app/main/default/lwc/quanticBreadcrumbManager/e2e/quanticBreadcrumbManager.e2e.ts b/packages/quantic/force-app/main/default/lwc/quanticBreadcrumbManager/e2e/quanticBreadcrumbManager.e2e.ts
index 1702cf0ec98..5e92bfb403c 100644
--- a/packages/quantic/force-app/main/default/lwc/quanticBreadcrumbManager/e2e/quanticBreadcrumbManager.e2e.ts
+++ b/packages/quantic/force-app/main/default/lwc/quanticBreadcrumbManager/e2e/quanticBreadcrumbManager.e2e.ts
@@ -69,7 +69,7 @@ useCaseTestCases.forEach((useCase) => {
         });
       });
 
-      test.describe('with timefrate|date facet values', () => {
+      test.describe('with timeframe|date facet values', () => {
         test('should trigger a new search and log analytics', async ({
           breadcrumbManager,
           search,
@@ -119,7 +119,7 @@ useCaseTestCases.forEach((useCase) => {
       });
     });
 
-    test.describe('the clear all filters button', () => {
+    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,