test(filters): add defaults

commercetools · Oct 31, 2024 · 1d4611b · 1d4611b
1 parent 0977dd5
commit 1d4611b
Showing 1 changed file with 23 additions and 41 deletions.
diff --git a/packages/components/filters/src/filters.spec.tsx b/packages/components/filters/src/filters.spec.tsx
@@ -37,14 +37,20 @@ const createTestProps = (
 });
 
 const FilterTestComponent = (
-  props: Partial<TFiltersProps> &
-    Partial<TFilterConfiguration> & {
+  props: Partial<TFiltersProps> & {
+    initialPrimaryColorValue?: string[];
+    initialColorNameValue?: string;
+  } & Partial<TFilterConfiguration> & {
       onClearAllRequest: TFiltersProps['onClearAllRequest'];
       renderSearchComponent: TFiltersProps['renderSearchComponent'];
     }
 ) => {
-  const [primaryColorValue, setPrimaryColorValue] = useState<string[]>([]);
-  const [colorNameValue, setColorName] = useState<string>('');
+  const [primaryColorValue, setPrimaryColorValue] = useState<string[]>(
+    props.initialPrimaryColorValue ?? []
+  );
+  const [colorNameValue, setColorName] = useState<string>(
+    props.initialColorNameValue ?? ''
+  );
 
   const clearPrimaryColorFilter = () => setPrimaryColorValue([]);
   const clearColorNameFilter = () => setColorName('');
@@ -287,20 +293,10 @@ describe('Filters', () => {
   });
 
   it('should render a filter on initial page load when appliedFilters prop is passed', async () => {
-    // Pass in an initial appliedFilter
-    const appliedPrimaryColorFilter = [
-      {
-        filterKey: 'primaryColors',
-        values: [
-          { label: 'Lavender', value: 'lavender' },
-          { label: 'Cobalt', value: 'cobalt' },
-        ],
-      },
-    ];
-
     render(
       <FilterTestComponent
-        {...createTestProps({ appliedFilters: appliedPrimaryColorFilter })}
+        {...createTestProps()}
+        initialPrimaryColorValue={['lavender', 'cobalt']}
       />
     );
 
@@ -309,28 +305,15 @@ describe('Filters', () => {
 
     //Expect chips to display selected filter values on initial render
     const chips = getDisplayedChipsForFilter('primaryColors');
-    expect(chips).toEqual(['Lavender', 'Cobalt']);
+    expect(chips).toEqual(['lavender', 'cobalt']);
   });
 
   it('should render a badge on initial page load when >=2 appliedFilters are passed', async () => {
-    // Pass in initial appliedFilters
-    const appliedColorFilters = [
-      {
-        filterKey: 'primaryColors',
-        values: [
-          { label: 'Lavender', value: 'lavender' },
-          { label: 'Cobalt', value: 'cobalt' },
-        ],
-      },
-      {
-        filterKey: 'colorName',
-        values: [{ label: 'Green', value: 'green' }],
-      },
-    ];
-
     render(
       <FilterTestComponent
-        {...createTestProps({ appliedFilters: appliedColorFilters })}
+        {...createTestProps()}
+        initialPrimaryColorValue={['lavender', 'cobalt']}
+        initialColorNameValue="green"
       />
     );
 
@@ -340,12 +323,11 @@ describe('Filters', () => {
     expect(filterTotalBadge).toBeVisible();
   });
 
-  // it('should immediately render a filter when isPersistent is true', async () => {
-  //   render(<FilterTestComponent {...createTestProps()} isPersistent={true} />);
-  //   //Expand filter list & expect `Primary Colors` filter to be visible
-  //   await toggleFilterList();
-  //   const primaryColorFilter = getPrimaryColorFilterButton();
-
-  //   expect(primaryColorFilter).toBeVisible();
-  // });
+  it('should immediately render a filter when isPersistent is true', async () => {
+    render(<FilterTestComponent {...createTestProps()} isPersistent={true} />);
+    //Expand filter list & expect `Primary Colors` filter to be visible
+    await toggleFilterList();
+    const primaryColorFilter = getPrimaryColorFilterButton();
+    expect(primaryColorFilter).toBeVisible();
+  });
 });