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`,
});