Skip to content

Commit 1357bf8

Browse files
jfugaldejfugalde
committed
test(search):ES-5892 Refactor Facets Tests
1 parent dc7c599 commit 1357bf8

File tree

1 file changed

+39
-164
lines changed

1 file changed

+39
-164
lines changed

‎core/tests/ui/e2e/facets.spec.ts‎

Lines changed: 39 additions & 164 deletions
Original file line numberDiff line numberDiff line change
@@ -1,215 +1,90 @@
11
import { expect, Page, test } from '~/tests/fixtures';
22

3-
// Test constants
43
const SHOP_ALL_URL = '/shop-all/';
5-
const SHOP_ALL_HEADING_PATTERN = /Shop All/;
64

7-
// Filter names
8-
const FILTER_COLOR = 'Color';
9-
const FILTER_BRAND = 'Brand';
10-
11-
// Filter values
12-
const COLOR_BLUE = 'Blue';
13-
const BRAND_OFS = 'OFS';
14-
15-
// Product names
165
const PRODUCT_LE_PARFAIT_JAR = '[Sample] 1 L Le Parfait Jar';
176
const PRODUCT_DUSTPAN_BRUSH = '[Sample] Dustpan & Brush';
187
const PRODUCT_UTILITY_CADDY = '[Sample] Utility Caddy';
198

20-
// Button labels
21-
const BUTTON_RESET_FILTERS = 'Reset filters';
22-
23-
// URL parameter names
24-
const URL_PARAM_ATTR_COLOR = 'attr_Color';
25-
const URL_PARAM_BRAND = 'brand';
26-
27-
// Expected counts
28-
const EXPECTED_OFS_BRAND_COUNT = 5;
29-
const EXPECTED_INITIAL_PRODUCT_COUNT = 13;
30-
31-
function extractNumber(text: string | null): number {
32-
if (!text) {
33-
return 0;
34-
}
35-
36-
const regex = /\d+/;
37-
const match = regex.exec(text);
38-
39-
return match ? parseInt(match[0] || '0', 10) : 0;
40-
}
41-
429
async function expandFilterIfNeeded(page: Page, filterLabel: string) {
43-
const filterButton = page.getByRole('button', { name: filterLabel }).first();
10+
const filterButton = page
11+
.getByRole('heading', { name: filterLabel, level: 3 })
12+
.getByRole('button', { name: filterLabel });
13+
4414
const isExpanded = await filterButton.getAttribute('aria-expanded');
4515

4616
if (isExpanded === 'false') {
4717
await filterButton.click();
4818
}
4919
}
5020

51-
async function clickSpecificFilterOption(
52-
page: Page,
53-
filterName: string,
54-
optionName: string,
55-
): Promise<boolean> {
56-
await expandFilterIfNeeded(page, filterName);
57-
58-
const filterButton = page.getByRole('button', { name: filterName }).first();
59-
const accordionItem = filterButton.locator('xpath=ancestor::*[@data-state]').first();
60-
const contentRegion = accordionItem.locator('[role="region"]').first();
21+
async function clickSpecificFilterOption(page: Page, filterName: string, optionName: string) {
22+
const filterButton = page
23+
.getByRole('region', { name: filterName })
24+
.getByRole('button', { name: optionName, disabled: false });
6125

62-
await expect(contentRegion).toBeVisible();
63-
64-
const buttons = contentRegion.locator('button[aria-label]');
65-
66-
const count = await buttons.count();
67-
68-
// Avoid await in loop by collecting all button data first
69-
const buttonData = await Promise.all(
70-
Array.from({ length: count }, async (_, index) => {
71-
const button = buttons.nth(index);
72-
const [ariaLabel, buttonText, isDisabled, hasDataDisabled] = await Promise.all([
73-
button.getAttribute('aria-label').catch(() => null),
74-
button.textContent().catch(() => null),
75-
button.isDisabled().catch(() => false),
76-
button.getAttribute('data-disabled').catch(() => null),
77-
]);
78-
79-
return { button, ariaLabel, buttonText, isDisabled, hasDataDisabled };
80-
}),
81-
);
82-
83-
const matchingButton = buttonData.find(
84-
({ ariaLabel, buttonText, isDisabled, hasDataDisabled }) => {
85-
const matchesLabel = ariaLabel?.includes(optionName);
86-
const matchesText = buttonText?.includes(optionName);
87-
88-
return !isDisabled && !hasDataDisabled && (matchesLabel || matchesText);
89-
},
90-
);
91-
92-
if (matchingButton) {
93-
await matchingButton.button.click();
94-
await page.waitForLoadState('networkidle');
95-
96-
return true;
97-
}
98-
99-
return false;
26+
await filterButton.click();
10027
}
10128

10229
test('Blue color filter shows expected product on shop-all page', async ({ page }) => {
30+
// Arrange
10331
await page.goto(SHOP_ALL_URL);
104-
await page.waitForLoadState('networkidle');
105-
106-
const filterApplied = await clickSpecificFilterOption(page, FILTER_COLOR, COLOR_BLUE);
32+
await expect(page.getByRole('heading', { name: 'Shop All 13' })).toBeVisible();
10733

108-
expect(filterApplied).toBeTruthy();
109-
expect(new URL(page.url()).searchParams.get(URL_PARAM_ATTR_COLOR)).toBe(COLOR_BLUE);
34+
// Act
35+
await expandFilterIfNeeded(page, 'Color');
36+
await clickSpecificFilterOption(page, 'Color', 'Blue');
11037

38+
// Assert
39+
await expect(page).toHaveURL((url) => url.searchParams.get('attr_Color') === 'Blue');
11140
await expect(page.getByRole('link', { name: PRODUCT_LE_PARFAIT_JAR })).toBeVisible();
11241
});
11342

11443
test('Brand filter shows correct products', async ({ page }) => {
11544
await page.goto(SHOP_ALL_URL);
116-
await page.waitForLoadState('networkidle');
45+
await expect(page.getByRole('heading', { name: 'Shop All 13' })).toBeVisible();
11746

118-
const heading = page.getByRole('heading', { name: SHOP_ALL_HEADING_PATTERN });
119-
const initialCountText = await heading.textContent();
120-
const initialCount = extractNumber(initialCountText);
121-
122-
const filterApplied = await clickSpecificFilterOption(page, FILTER_BRAND, BRAND_OFS);
123-
124-
expect(filterApplied).toBeTruthy();
125-
await page.waitForLoadState('networkidle');
126-
expect(new URL(page.url()).searchParams.has(URL_PARAM_BRAND)).toBeTruthy();
127-
128-
await expect(heading).toContainText(String(EXPECTED_OFS_BRAND_COUNT));
129-
130-
const filteredCountText = await heading.textContent();
131-
const filteredCount = extractNumber(filteredCountText);
132-
133-
expect(filteredCount).toBeLessThan(initialCount);
134-
expect(filteredCount).toBe(EXPECTED_OFS_BRAND_COUNT);
47+
await expandFilterIfNeeded(page, 'Brand');
48+
await clickSpecificFilterOption(page, 'Brand', 'OFS');
13549

50+
await expect(page).toHaveURL((url) => url.searchParams.has('brand'));
51+
await expect(page.getByRole('heading', { name: 'Shop All 5' })).toBeVisible();
13652
await expect(page.getByRole('link', { name: PRODUCT_DUSTPAN_BRUSH })).toBeVisible();
13753
await expect(page.getByRole('link', { name: PRODUCT_UTILITY_CADDY })).toBeVisible();
13854
await expect(page.getByRole('link', { name: PRODUCT_LE_PARFAIT_JAR })).toBeVisible();
13955
});
14056

14157
test('Multiple filters work together (Color + Brand)', async ({ page }) => {
14258
await page.goto(SHOP_ALL_URL);
143-
await page.waitForLoadState('networkidle');
144-
145-
const heading = page.getByRole('heading', { name: SHOP_ALL_HEADING_PATTERN });
146-
const initialCountText = await heading.textContent();
147-
const initialCount = extractNumber(initialCountText);
148-
149-
const colorFilterApplied = await clickSpecificFilterOption(page, FILTER_COLOR, COLOR_BLUE);
150-
151-
expect(colorFilterApplied).toBeTruthy();
152-
await page.waitForLoadState('networkidle');
153-
expect(new URL(page.url()).searchParams.get(URL_PARAM_ATTR_COLOR)).toBe(COLOR_BLUE);
154-
155-
await expect(heading).not.toContainText(String(initialCount));
156-
157-
const afterColorCountText = await heading.textContent();
158-
const afterColorCount = extractNumber(afterColorCountText);
159-
160-
expect(afterColorCount).toBeLessThan(initialCount);
161-
162-
const brandFilterApplied = await clickSpecificFilterOption(page, FILTER_BRAND, BRAND_OFS);
59+
await expect(page.getByRole('heading', { name: 'Shop All 13' })).toBeVisible();
16360

164-
expect(brandFilterApplied).toBeTruthy();
61+
await expandFilterIfNeeded(page, 'Color');
62+
await clickSpecificFilterOption(page, 'Color', 'Blue');
16563

166-
await page.waitForLoadState('networkidle');
64+
await expect(page).toHaveURL((url) => url.searchParams.get('attr_Color') === 'Blue');
16765

168-
const urlParams = new URL(page.url()).searchParams;
169-
170-
expect(urlParams.get(URL_PARAM_ATTR_COLOR)).toBe(COLOR_BLUE);
171-
expect(urlParams.has(URL_PARAM_BRAND)).toBeTruthy();
172-
173-
const afterBothCountText = await heading.textContent();
174-
const afterBothCount = extractNumber(afterBothCountText);
175-
176-
expect(afterBothCount).toBeLessThanOrEqual(afterColorCount);
66+
await expandFilterIfNeeded(page, 'Brand');
67+
await clickSpecificFilterOption(page, 'Brand', 'OFS');
17768

69+
await expect(page).toHaveURL((url) => {
70+
const params = url.searchParams;
71+
return params.get('attr_Color') === 'Blue' && params.has('brand');
72+
});
17873
await expect(page.getByRole('link', { name: PRODUCT_LE_PARFAIT_JAR })).toBeVisible();
17974
});
18075

18176
test('Removing filter restores product list', async ({ page }) => {
18277
await page.goto(SHOP_ALL_URL);
183-
await page.waitForLoadState('networkidle');
184-
185-
const heading = page.getByRole('heading', { name: SHOP_ALL_HEADING_PATTERN });
186-
const initialCountText = await heading.textContent();
187-
const initialCount = extractNumber(initialCountText);
188-
189-
const filterApplied = await clickSpecificFilterOption(page, FILTER_BRAND, BRAND_OFS);
190-
191-
expect(filterApplied).toBeTruthy();
192-
await page.waitForLoadState('networkidle');
193-
expect(new URL(page.url()).searchParams.has(URL_PARAM_BRAND)).toBeTruthy();
194-
195-
await expect(heading).not.toContainText(String(initialCount));
196-
197-
const filteredCountText = await heading.textContent();
198-
const filteredCount = extractNumber(filteredCountText);
199-
200-
expect(filteredCount).toBeLessThan(initialCount);
201-
202-
const resetButton = page.getByRole('button', { name: BUTTON_RESET_FILTERS });
203-
204-
await resetButton.click();
205-
await page.waitForLoadState('networkidle');
78+
await expect(page.getByRole('heading', { name: 'Shop All 13' })).toBeVisible();
20679

207-
expect(new URL(page.url()).searchParams.has(URL_PARAM_BRAND)).toBeFalsy();
80+
await expandFilterIfNeeded(page, 'Brand');
81+
await clickSpecificFilterOption(page, 'Brand', 'OFS');
20882

209-
await expect(heading).toContainText(String(EXPECTED_INITIAL_PRODUCT_COUNT));
83+
await expect(page).toHaveURL((url) => url.searchParams.has('brand'));
84+
await expect(page.getByRole('heading', { name: 'Shop All 5' })).toBeVisible();
21085

211-
const restoredCountText = await heading.textContent();
212-
const restoredCount = extractNumber(restoredCountText);
86+
await page.getByRole('button', { name: 'Reset filters' }).click();
21387

214-
expect(restoredCount).toBe(initialCount);
88+
await expect(page).toHaveURL((url) => !url.searchParams.has('brand'));
89+
await expect(page.getByRole('heading', { name: 'Shop All 13' })).toBeVisible();
21590
});

0 commit comments

Comments
 (0)