diff --git a/packages/components/filters/src/filters.spec.tsx b/packages/components/filters/src/filters.spec.tsx index 07185fdaec..b1682d3b68 100644 --- a/packages/components/filters/src/filters.spec.tsx +++ b/packages/components/filters/src/filters.spec.tsx @@ -5,11 +5,11 @@ import { PrimaryColorsInput, ColorNameTextInput } from './fixtures/inputs'; import { fireEvent, render, screen } from '../../../../test/test-utils'; import { getAddFilterButton, - getBadgeStatus, + getBadgeElement, getClearAllFiltersButton, openAddFilterDialog, - displayedChips, - selectFilter, + getDisplayedChipsForFilter, + selectFilterOption, selectFilterValues, toggleFilterList, } from './filters.spec.utils'; @@ -99,11 +99,6 @@ const FilterTestComponent = ( ); }; -//! should the add filter button be disabled once all possible filters are applied? -//! check on 1 applied filter badge - posed q in figma -//! user vs fireEvent? -//? assert chips are visible even before we escape filter dialog - describe('Filters', () => { it('should expand & collapse the filter list when `filters` button is clicked', async () => { render(); @@ -126,16 +121,16 @@ describe('Filters', () => { const addFilterDialog = await openAddFilterDialog(); //Filter 1 - Select Primary Colors filter & apply a single value - await selectFilter(addFilterDialog, 'Primary Colors'); + await selectFilterOption(addFilterDialog, 'Primary Colors'); await selectFilterValues([/green/i]); //Expect chips to display selected filter values - const chips = displayedChips('primaryColors'); + const chips = getDisplayedChipsForFilter('primaryColors'); expect(chips).toEqual(['green']); //Filter 2 - Select Color Name filter & enter a value const addFilterDialog2 = await openAddFilterDialog(); - await selectFilter(addFilterDialog2, 'Color Name'); + await selectFilterOption(addFilterDialog2, 'Color Name'); const textbox = await screen.findByPlaceholderText(/enter a color name/i); fireEvent.change(textbox, { target: { @@ -144,7 +139,7 @@ describe('Filters', () => { }); //Expect badge to not display if filter list is expanded - let filterTotalBadge = getBadgeStatus(); + let filterTotalBadge = getBadgeElement(); expect(filterTotalBadge).toBeNull(); //Collapse filter list & expect filterDialogs to be hidden @@ -153,7 +148,7 @@ describe('Filters', () => { expect(addFilterDialog2).not.toBeVisible(); //Recapture the badge el - filterTotalBadge = getBadgeStatus(); + filterTotalBadge = getBadgeElement(); //Expect badge to display count of applied filters visible expect(filterTotalBadge).toHaveTextContent('2'); @@ -168,7 +163,7 @@ describe('Filters', () => { const addFilterDialog = await openAddFilterDialog(); //Select Primary Colors filter & apply multiple values - await selectFilter(addFilterDialog, 'Primary Colors'); + await selectFilterOption(addFilterDialog, 'Primary Colors'); await selectFilterValues([ /blue/i, /green/i, @@ -178,16 +173,15 @@ describe('Filters', () => { ]); //Expect chips to display selected filter values - const chips = displayedChips('primaryColors'); + const chips = getDisplayedChipsForFilter('primaryColors'); expect(chips).toEqual(['blue', 'green', 'pink', 'lavender', 'azure']); //Collapse filter list & expect no badge to display await toggleFilterList(); - const filterTotalBadge = getBadgeStatus(); + const filterTotalBadge = getBadgeElement(); expect(filterTotalBadge).toBeNull(); }); - //!is this needed? it('should render search component', () => { render(); const searchInput = screen.getByPlaceholderText('Search Placeholder'); @@ -202,16 +196,16 @@ describe('Filters', () => { const addFilterDialog = await openAddFilterDialog(); //Filter 1 - Select Primary Colors filter & apply a single value - await selectFilter(addFilterDialog, 'Primary Colors'); + await selectFilterOption(addFilterDialog, 'Primary Colors'); await selectFilterValues([/green/i]); // Expect chips to display selected filter values - const chips = displayedChips('primaryColors'); + const chips = getDisplayedChipsForFilter('primaryColors'); expect(chips).toEqual(['green']); //Filter 2 - Select Colors Name filter & enter a text value const addFilterDialog2 = await openAddFilterDialog(); - await selectFilter(addFilterDialog2, 'Color Name'); + await selectFilterOption(addFilterDialog2, 'Color Name'); const textbox = await screen.findByPlaceholderText(/enter a color name/i); fireEvent.change(textbox, { target: { @@ -243,11 +237,11 @@ describe('Filters', () => { const addFilterDialog = await openAddFilterDialog(); //Filter 1 - select primary colors & apply a single value - await selectFilter(addFilterDialog, 'Primary Colors'); + await selectFilterOption(addFilterDialog, 'Primary Colors'); await selectFilterValues([/green/i]); //Expect chips to display selected filter values - const chips = displayedChips('primaryColors'); + const chips = getDisplayedChipsForFilter('primaryColors'); expect(chips).toEqual(['green']); //Expect Clear all` button to not be accessible @@ -263,11 +257,11 @@ describe('Filters', () => { const addFilterDialog = await openAddFilterDialog(); //Select Primary Colors filter & apply a single value - await selectFilter(addFilterDialog, 'Primary Colors'); + await selectFilterOption(addFilterDialog, 'Primary Colors'); await selectFilterValues([/green/i]); //Expect chips to display selected filter values - const chips = displayedChips('primaryColors'); + const chips = getDisplayedChipsForFilter('primaryColors'); expect(chips).toEqual(['green']); //Click the filter remove button & expect filter to be removed from list diff --git a/packages/components/filters/src/filters.spec.utils.tsx b/packages/components/filters/src/filters.spec.utils.tsx index 85a9084b82..75f6efe646 100644 --- a/packages/components/filters/src/filters.spec.utils.tsx +++ b/packages/components/filters/src/filters.spec.utils.tsx @@ -19,7 +19,7 @@ export const getClearAllFiltersButton = (): HTMLElement | null => { }); }; -export const getBadgeStatus = (): HTMLElement | null => { +export const getBadgeElement = (): HTMLElement | null => { // Query matcher used here to cover positive & negative assertions return screen.queryByRole('status'); }; @@ -38,7 +38,10 @@ export const openAddFilterDialog = async (): Promise => { }; //Select filter to apply -export const selectFilter = async (dialog: HTMLElement, optionText: string) => { +export const selectFilterOption = async ( + dialog: HTMLElement, + optionText: string +) => { const option = within(dialog).getByText(optionText); fireEvent.click(option); }; @@ -56,9 +59,10 @@ export const selectFilterValues = async ( return !screen.queryByRole('dialog'); }; -// Retrieves selected values (chips) for a given filter -//! find better fn name -export const displayedChips = (filterName: string | null): string[] => { +// Retrieves selected values (in chips) for a given filter +export const getDisplayedChipsForFilter = ( + filterName: string | null +): string[] => { const selectedValues = screen.getByRole('list', { name: `${filterName} selected values`, });