test(filters): enhanced naming conventions

commercetools · Oct 30, 2024 · 2a4974f · 2a4974f
1 parent 37e1cbb
commit 2a4974f
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 29 deletions.
diff --git 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(<FilterTestComponent {...createTestProps()} />);
@@ -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(<FilterTestComponent {...createTestProps()} />);
     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
@@ -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<HTMLElement> => {
 };
 
 //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`,
   });