fix(atomic): prevent facets from closing when active values are selected (#6208)

Author: nsalleron-coveo

packages/atomic/src/components/commerce/atomic-commerce-facets/atomic-commerce-facets.spec.ts

@@ -371,4 +371,110 @@ describe('atomic-commerce-facets', () => {
     expect(categoryFacet).not.toBeInTheDocument();
     expect(timeframeFacet).not.toBeInTheDocument();
   });
+
+  describe('#shouldCollapseFacet', () => {
+    it('should not collapse facets with active values even when exceeding collapseFacetsAfter', async () => {
+      mockedRegularFacet = buildFakeRegularFacet({
+        state: {
+          displayName: 'Regular Facet',
+          hasActiveValues: true,
+        },
+      });
+      mockedNumericFacet = buildFakeNumericFacet({
+        state: {
+          displayName: 'Numeric Facet',
+          hasActiveValues: false,
+        },
+      });
+      mockedCategoryFacet = buildFakeCategoryFacet({
+        state: {
+          displayName: 'Category Facet',
+          hasActiveValues: true,
+        },
+      });
+      mockedDateFacet = buildFakeDateFacet({
+        state: {
+          displayName: 'Date Facet',
+          hasActiveValues: false,
+        },
+      });
+
+      mockedFacetGenerator = buildFakeFacetGenerator({
+        state: [
+          mockedRegularFacet,
+          mockedNumericFacet,
+          mockedCategoryFacet,
+          mockedDateFacet,
+        ].map((facet) => facet.state.facetId),
+        implementation: {
+          facets: [
+            mockedRegularFacet,
+            mockedNumericFacet,
+            mockedCategoryFacet,
+            mockedDateFacet,
+          ],
+        },
+      });
+
+      const {header} = await renderCommerceFacets({
+        collapseFacetsAfter: 2,
+        isAppLoaded: true,
+      });
+
+      // First facet has active values, should stay expanded
+      await expect
+        .element(header('Regular Facet'))
+        .toHaveAttribute('aria-expanded', 'true');
+      // Second facet has no active values, should stay expanded (within limit)
+      await expect
+        .element(header('Numeric Facet'))
+        .toHaveAttribute('aria-expanded', 'true');
+      // Third facet has active values, should stay expanded even though it exceeds the limit
+      await expect
+        .element(header('Category Facet'))
+        .toHaveAttribute('aria-expanded', 'true');
+      // Fourth facet has no active values and exceeds limit, should collapse
+      await expect
+        .element(header('Date Facet'))
+        .toHaveAttribute('aria-expanded', 'false');
+    });
+
+    it('should keep all facets with active values expanded when collapseFacetsAfter is 0', async () => {
+      mockedRegularFacet = buildFakeRegularFacet({
+        state: {
+          displayName: 'Regular Facet',
+          hasActiveValues: true,
+        },
+      });
+      mockedNumericFacet = buildFakeNumericFacet({
+        state: {
+          displayName: 'Numeric Facet',
+          hasActiveValues: false,
+        },
+      });
+
+      mockedFacetGenerator = buildFakeFacetGenerator({
+        state: [mockedRegularFacet, mockedNumericFacet].map(
+          (facet) => facet.state.facetId
+        ),
+        implementation: {
+          facets: [mockedRegularFacet, mockedNumericFacet],
+        },
+      });
+
+      const {header} = await renderCommerceFacets({
+        collapseFacetsAfter: 0,
+        isAppLoaded: true,
+      });
+
+      // Facet with active values should stay expanded even when collapseFacetsAfter is 0
+      await expect
+        .element(header('Regular Facet'))
+        .toHaveAttribute('aria-expanded', 'true');
+      // Facet without active values should collapse
+      await expect
+        .element(header('Numeric Facet'))
+        .toHaveAttribute('aria-expanded', 'false');
+    });
+  });
 });

packages/atomic/src/components/commerce/atomic-commerce-facets/atomic-commerce-facets.ts

@@ -28,6 +28,10 @@ import '../atomic-commerce-facet/atomic-commerce-facet';
 import type {CommerceBindings} from '../atomic-commerce-interface/atomic-commerce-interface';
 import '../atomic-commerce-numeric-facet/atomic-commerce-numeric-facet';
 import '../atomic-commerce-timeframe-facet/atomic-commerce-timeframe-facet';
+import type {
+  FacetType,
+  MappedGeneratedFacetController,
+} from '@coveo/headless/commerce';
 import {keyed} from 'lit/directives/keyed.js';
 import {bindStateToController} from '@/src/decorators/bind-state';
 import {LightDomMixin} from '@/src/mixins/light-dom';
@@ -92,8 +96,11 @@ export class AtomicCommerceFacets
     });
   }
 
-  private shouldCollapseFacet(index: number): boolean {
-    if (this.collapseFacetsAfter === -1) {
+  private shouldCollapseFacet(
+    index: number,
+    facet: MappedGeneratedFacetController[FacetType]
+  ): boolean {
+    if (this.collapseFacetsAfter === -1 || facet.state.hasActiveValues) {
       return false;
     }
     return this.collapseFacetsAfter
@@ -106,8 +113,8 @@ export class AtomicCommerceFacets
       Array.from({length: this.collapseFacetsAfter}),
       () =>
         html`<atomic-facet-placeholder
-          value-count="8"
-        ></atomic-facet-placeholder>`
+            value-count="8"
+          ></atomic-facet-placeholder>`
     );
   }
 
@@ -117,20 +124,20 @@ export class AtomicCommerceFacets
         return nothing;
       }
 
-      const isCollapsed = this.shouldCollapseFacet(index);
+      const isCollapsed = this.shouldCollapseFacet(index, facet);
 
       switch (facet.state.type) {
         case 'regular':
           return html`${keyed(
             facet.state.facetId,
             html`
-          <atomic-commerce-facet
-            .isCollapsed=${isCollapsed}
-            .summary=${this.summary}
-            .facet=${facet as RegularFacet}
-            .field=${facet.state.field}
-          ></atomic-commerce-facet>
-          `
+              <atomic-commerce-facet
+                .isCollapsed=${isCollapsed}
+                .summary=${this.summary}
+                .facet=${facet as RegularFacet}
+                .field=${facet.state.field}
+              ></atomic-commerce-facet>
+            `
           )} `;
         case 'numericalRange':
           return html`${keyed(