refactor(atomic): address PR review feedback for atomic-category-facet

- Combine headless imports
- Remove InitializeBindingsMixin (use @bindings decorator directly)
- Use booleanConverter for boolean properties
- Add TODO comments for filterByBasePath and filterFacetCount deprecation
- Refactor Schema as static readonly propsSchema
- Use ValidatePropsController with throwOnError=false
- Remove unnecessary CSS @reference directive
- Remove mixin mock from tests
- Flatten single-test describe blocks in tests
- Add prop validation tests with skip for V4

Co-authored-by: fbeaudoincoveo <23503066+fbeaudoincoveo@users.noreply.github.com>

Author: Copilot

packages/atomic/src/components/search/atomic-category-facet/atomic-category-facet.spec.ts

@@ -18,16 +18,6 @@ import type {AtomicCategoryFacet} from './atomic-category-facet';
 import './atomic-category-facet';
 
 vi.mock('@coveo/headless', {spy: true});
-vi.mock('@/src/mixins/bindings-mixin', () => ({
-  InitializeBindingsMixin: vi.fn().mockImplementation((superClass) => {
-    return class extends superClass {
-      // biome-ignore lint/complexity/noUselessConstructor: <mocking the mixin for testing>
-      constructor(...args: unknown[]) {
-        super(...args);
-      }
-    };
-  }),
-}));
 
 describe('atomic-category-facet', () => {
   let mockedConsoleWarn: MockInstance;
@@ -171,120 +161,104 @@ describe('atomic-category-facet', () => {
     };
   };
 
-  describe('when first search not executed', () => {
-    it('should render placeholder', async () => {
-      const {placeholder} = await renderCategoryFacet(undefined, {
-        searchStatusState: {firstSearchExecuted: false},
-      });
-      expect(placeholder).toBeInTheDocument();
+  it('should render placeholder when first search has not been executed', async () => {
+    const {placeholder} = await renderCategoryFacet(undefined, {
+      searchStatusState: {firstSearchExecuted: false},
     });
+    expect(placeholder).toBeInTheDocument();
   });
 
-  describe('when first search executed', () => {
-    it('should render the facet container', async () => {
-      const {facet} = await renderCategoryFacet();
-      expect(facet).toBeInTheDocument();
-    });
+  it('should render the facet container when first search is executed', async () => {
+    const {facet} = await renderCategoryFacet();
+    expect(facet).toBeInTheDocument();
+  });
 
-    it('should render facet values', async () => {
-      const {valueLinks} = await renderCategoryFacet();
-      expect(valueLinks?.length).toBeGreaterThan(0);
-    });
+  it('should render facet values when first search is executed', async () => {
+    const {valueLinks} = await renderCategoryFacet();
+    expect(valueLinks?.length).toBeGreaterThan(0);
+  });
 
-    it('should render show more button when canShowMoreValues is true', async () => {
-      const {showMore} = await renderCategoryFacet(undefined, {
-        facetState: {canShowMoreValues: true},
-      });
-      expect(showMore).toBeInTheDocument();
+  it('should render show more button when canShowMoreValues is true', async () => {
+    const {showMore} = await renderCategoryFacet(undefined, {
+      facetState: {canShowMoreValues: true},
     });
+    expect(showMore).toBeInTheDocument();
+  });
 
-    it('should render show less button when canShowLessValues is true', async () => {
-      const {showLess} = await renderCategoryFacet(undefined, {
-        facetState: {canShowLessValues: true},
-      });
-      expect(showLess).toBeInTheDocument();
+  it('should render show less button when canShowLessValues is true', async () => {
+    const {showLess} = await renderCategoryFacet(undefined, {
+      facetState: {canShowLessValues: true},
     });
+    expect(showLess).toBeInTheDocument();
+  });
 
-    it('should not render show more button when canShowMoreValues is false', async () => {
-      const {showMore} = await renderCategoryFacet(undefined, {
-        facetState: {canShowMoreValues: false},
-      });
-      expect(showMore).not.toBeInTheDocument();
+  it('should not render show more button when canShowMoreValues is false', async () => {
+    const {showMore} = await renderCategoryFacet(undefined, {
+      facetState: {canShowMoreValues: false},
     });
+    expect(showMore).not.toBeInTheDocument();
   });
 
-  describe('with search enabled', () => {
-    it('should render search wrapper', async () => {
-      const {searchWrapper} = await renderCategoryFacet({withSearch: true});
-      expect(searchWrapper).toBeInTheDocument();
-    });
+  it('should render search wrapper when search is enabled', async () => {
+    const {searchWrapper} = await renderCategoryFacet({withSearch: true});
+    expect(searchWrapper).toBeInTheDocument();
   });
 
-  describe('without search enabled', () => {
-    it('should not render search wrapper', async () => {
-      const {searchWrapper} = await renderCategoryFacet({withSearch: false});
-      expect(searchWrapper).not.toBeInTheDocument();
-    });
+  it('should not render search wrapper when search is disabled', async () => {
+    const {searchWrapper} = await renderCategoryFacet({withSearch: false});
+    expect(searchWrapper).not.toBeInTheDocument();
   });
 
-  describe('when collapsed', () => {
-    it('should not render values', async () => {
-      const {values} = await renderCategoryFacet({isCollapsed: true});
-      expect(values).not.toBeInTheDocument();
-    });
+  it('should not render values when facet is collapsed', async () => {
+    const {values} = await renderCategoryFacet({isCollapsed: true});
+    expect(values).not.toBeInTheDocument();
   });
 
-  describe('when has error', () => {
-    it('should not render facet', async () => {
-      const {facet} = await renderCategoryFacet(undefined, {
-        searchStatusState: {hasError: true},
-      });
-      expect(facet).not.toBeInTheDocument();
+  it('should not render facet when there is an error', async () => {
+    const {facet} = await renderCategoryFacet(undefined, {
+      searchStatusState: {hasError: true},
     });
+    expect(facet).not.toBeInTheDocument();
   });
 
-  describe('when facet is disabled', () => {
-    it('should not render facet', async () => {
-      const {facet} = await renderCategoryFacet(undefined, {
-        facetState: {enabled: false},
-      });
-      expect(facet).not.toBeInTheDocument();
+  it('should not render facet when it is disabled', async () => {
+    const {facet} = await renderCategoryFacet(undefined, {
+      facetState: {enabled: false},
     });
+    expect(facet).not.toBeInTheDocument();
   });
 
-  describe('when no values', () => {
-    it('should not render facet', async () => {
-      const {facet} = await renderCategoryFacet(undefined, {
-        facetState: {valuesAsTrees: [], values: []},
-      });
-      expect(facet).not.toBeInTheDocument();
+  it('should not render facet when there are no values', async () => {
+    const {facet} = await renderCategoryFacet(undefined, {
+      facetState: {valuesAsTrees: [], values: []},
     });
+    expect(facet).not.toBeInTheDocument();
   });
 
   describe('when has selected value ancestry', () => {
-    it('should render all categories button', async () => {
-      const selectedAncestry = [
-        {
-          value: 'Electronics',
-          numberOfResults: 25,
-          moreValuesAvailable: true,
-          state: 'selected' as const,
-          path: ['Electronics'],
-          children: [
-            {
-              value: 'Laptops',
-              numberOfResults: 12,
-              moreValuesAvailable: false,
-              state: 'idle' as const,
-              path: ['Electronics', 'Laptops'],
-              children: [],
-              isLeafValue: true,
-            },
-          ],
-          isLeafValue: false,
-        },
-      ];
+    const selectedAncestry = [
+      {
+        value: 'Electronics',
+        numberOfResults: 25,
+        moreValuesAvailable: true,
+        state: 'selected' as const,
+        path: ['Electronics'],
+        children: [
+          {
+            value: 'Laptops',
+            numberOfResults: 12,
+            moreValuesAvailable: false,
+            state: 'idle' as const,
+            path: ['Electronics', 'Laptops'],
+            children: [],
+            isLeafValue: true,
+          },
+        ],
+        isLeafValue: false,
+      },
+    ];
 
+    it('should render all categories button', async () => {
       const {allCategoriesButton} = await renderCategoryFacet(undefined, {
         facetState: {
           selectedValueAncestry: selectedAncestry,
@@ -295,28 +269,6 @@ describe('atomic-category-facet', () => {
     });
 
     it('should render parents container', async () => {
-      const selectedAncestry = [
-        {
-          value: 'Electronics',
-          numberOfResults: 25,
-          moreValuesAvailable: true,
-          state: 'selected' as const,
-          path: ['Electronics'],
-          children: [
-            {
-              value: 'Laptops',
-              numberOfResults: 12,
-              moreValuesAvailable: false,
-              state: 'idle' as const,
-              path: ['Electronics', 'Laptops'],
-              children: [],
-              isLeafValue: true,
-            },
-          ],
-          isLeafValue: false,
-        },
-      ];
-
       const {parents} = await renderCategoryFacet(undefined, {
         facetState: {
           selectedValueAncestry: selectedAncestry,
@@ -353,16 +305,66 @@ describe('atomic-category-facet', () => {
     });
   });
 
-  describe('tabs configuration warning', () => {
-    it('should log warning when both tabsIncluded and tabsExcluded are provided', async () => {
-      await renderCategoryFacet({
-        tabsIncluded: ['tab1'],
-        tabsExcluded: ['tab2'],
+  describe('prop validation', () => {
+    // TODO V4: KIT-XXXX - Remove skip and enable validation errors
+    it.skip('should set error when field is not provided', async () => {
+      const {element} = await renderCategoryFacet({field: ''});
+      expect(element.error).toBeDefined();
+      expect(element.error.message).toMatch(/field/i);
+    });
+
+    // TODO V4: KIT-XXXX - Remove this test
+    it('should log validation warning when field is empty', async () => {
+      await renderCategoryFacet({field: ''});
+      expect(mockedConsoleWarn).toHaveBeenCalledWith(
+        expect.stringContaining('Prop validation failed'),
+        expect.anything()
+      );
+    });
+
+    // TODO V4: KIT-XXXX - Remove skip and enable validation errors
+    it.skip('should set error when numberOfValues is less than 1', async () => {
+      const {element} = await renderCategoryFacet({numberOfValues: 0});
+      expect(element.error).toBeDefined();
+      expect(element.error.message).toMatch(/numberOfValues/i);
+    });
+
+    // TODO V4: KIT-XXXX - Remove this test
+    it('should log validation warning when numberOfValues is less than 1', async () => {
+      await renderCategoryFacet({numberOfValues: 0});
+      expect(mockedConsoleWarn).toHaveBeenCalledWith(
+        expect.stringContaining('Prop validation failed'),
+        expect.anything()
+      );
+    });
+
+    // TODO V4: KIT-XXXX - Remove skip and enable validation errors
+    it.skip('should set error when sortCriteria is invalid', async () => {
+      const {element} = await renderCategoryFacet({
+        sortCriteria: 'invalid' as 'alphanumeric',
       });
+      expect(element.error).toBeDefined();
+      expect(element.error.message).toMatch(/sortCriteria/i);
+    });
 
+    // TODO V4: KIT-XXXX - Remove this test
+    it('should log validation warning when sortCriteria is invalid', async () => {
+      await renderCategoryFacet({sortCriteria: 'invalid' as 'alphanumeric'});
       expect(mockedConsoleWarn).toHaveBeenCalledWith(
-        expect.stringContaining('tabs-included')
+        expect.stringContaining('Prop validation failed'),
+        expect.anything()
       );
     });
   });
+
+  it('should log warning when both tabsIncluded and tabsExcluded are provided', async () => {
+    await renderCategoryFacet({
+      tabsIncluded: ['tab1'],
+      tabsExcluded: ['tab2'],
+    });
+
+    expect(mockedConsoleWarn).toHaveBeenCalledWith(
+      expect.stringContaining('tabs-included')
+    );
+  });
 });