diff --git a/packages/components/filters/src/filters.spec.tsx b/packages/components/filters/src/filters.spec.tsx index 507b28d4eb..6075481351 100644 --- 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 & - Partial & { + props: Partial & { + initialPrimaryColorValue?: string[]; + initialColorNameValue?: string; + } & Partial & { onClearAllRequest: TFiltersProps['onClearAllRequest']; renderSearchComponent: TFiltersProps['renderSearchComponent']; } ) => { - const [primaryColorValue, setPrimaryColorValue] = useState([]); - const [colorNameValue, setColorName] = useState(''); + const [primaryColorValue, setPrimaryColorValue] = useState( + props.initialPrimaryColorValue ?? [] + ); + const [colorNameValue, setColorName] = useState( + 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( ); @@ -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( ); @@ -340,12 +323,11 @@ describe('Filters', () => { expect(filterTotalBadge).toBeVisible(); }); - // it('should immediately render a filter when isPersistent is true', async () => { - // render(); - // //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(); + //Expand filter list & expect `Primary Colors` filter to be visible + await toggleFilterList(); + const primaryColorFilter = getPrimaryColorFilterButton(); + expect(primaryColorFilter).toBeVisible(); + }); });