Skip to content

Commit 7a94b6c

Browse files
cynthia-sgcynthia-sg
committed
Add some more e2e tests
Signed-off-by: Cintia Sánchez García <[email protected]>
1 parent c4b320f commit 7a94b6c

File tree

1 file changed

+150
-1
lines changed

1 file changed

+150
-1
lines changed

‎ui/webapp/tests/e2e/explore.spec.ts‎

Lines changed: 150 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import { expect, test } from '@playwright/test';
22

3-
import { waitForGuideData } from './utils/data';
43
import { gotoExplore } from './utils/navigation';
54

65
test.describe('Explore page', () => {
@@ -25,4 +24,154 @@ test.describe('Explore page', () => {
2524
await expect(page.getByRole('contentinfo')).toContainText('Privacy Policy');
2625
await expect(page.getByRole('contentinfo')).toContainText('Terms of Use');
2726
});
27+
28+
test('loads groups and categories', async ({ page }) => {
29+
await gotoExplore(page);
30+
31+
// Groups
32+
await expect(page.getByRole('button', { name: 'Some categories' })).toBeVisible();
33+
await expect(page.getByRole('button', { name: 'Only category 2' })).toBeVisible();
34+
35+
// Categories and subcategories
36+
await expect(page.getByText(/^Category 1/).first()).toBeVisible();
37+
await expect(page.getByText(/^Category 2/).first()).toBeVisible();
38+
await expect(page.getByText(/^Subcategory 1-1/).first()).toBeVisible();
39+
await expect(page.getByText(/^Subcategory 1-2/).first()).toBeVisible();
40+
await expect(page.getByText(/^Subcategory 2-1/).first()).toBeVisible();
41+
await expect(page.getByText(/^Subcategory 2-2/).first()).toBeVisible();
42+
});
43+
44+
test('opens second group', async ({ page }) => {
45+
await gotoExplore(page);
46+
47+
// Clicks on second group
48+
const firstGroupButton = page.getByRole('button', { name: 'Some categories' });
49+
const secondGroupButton = page.getByRole('button', { name: 'Only category 2' });
50+
await secondGroupButton.click();
51+
52+
// Second group is active and first one becomes inactive
53+
await expect(secondGroupButton).toHaveClass(/active/);
54+
await expect(firstGroupButton).not.toHaveClass(/active/);
55+
});
56+
57+
test('adds filters', async ({ page }) => {
58+
await gotoExplore(page);
59+
60+
// Opens filter modal
61+
const filterButton = page.getByRole('button', { name: 'Open Filters' });
62+
await filterButton.click();
63+
64+
// Expects filter modal to be visible
65+
const filterModal = page.getByLabel('Filters modal');
66+
await expect(filterModal).toBeVisible();
67+
await expect(filterModal.locator('div').filter({ hasText: /^Filters$/ }).nth(1)).toBeVisible();
68+
await expect(filterModal.getByText('Project', { exact: true })).toBeVisible();
69+
await expect(filterModal.getByLabel('Close')).toBeVisible();
70+
71+
// Adds a filter
72+
const filterOption = filterModal.getByLabel('Category 1', { exact: true });
73+
await filterOption.check();
74+
await expect(filterOption).toBeChecked();
75+
76+
// Applies the filter
77+
const applyButton = filterModal.getByLabel('Apply filters');
78+
await applyButton.click();
79+
await expect(filterModal).not.toBeVisible();
80+
81+
// Expects filter to be applied
82+
const activeFilter = page.getByRole('listitem').filter({ hasText: 'category:Category 1Clear icon' });
83+
await expect(activeFilter).toBeVisible();
84+
await expect(page.getByRole('button', { name: 'Remove Category 1 filter' })).toBeVisible();
85+
});
86+
87+
test('removes filters', async ({ page }) => {
88+
await gotoExplore(page, '?category=Category%201');
89+
90+
// Loads with filter applied
91+
const activeFilter = page.getByRole('listitem').filter({ hasText: 'category:Category 1Clear icon' });
92+
await expect(activeFilter).toBeVisible();
93+
94+
// Removes the filter
95+
const removeFilterButton = page.getByRole('button', { name: 'Remove Category 1 filter' });
96+
await removeFilterButton.click();
97+
98+
// Expects filter to be removed
99+
await expect(activeFilter).not.toBeVisible();
100+
});
101+
102+
test('shows no projects message when filters yield no results', async ({ page }) => {
103+
// Loads with filter that yields no results (Category 3 does not exist)
104+
await gotoExplore(page, '?category=Category%203');
105+
106+
// Loads with filter applied
107+
const activeFilter = page.getByRole('listitem').filter({ hasText: 'category:Category 3Clear icon' });
108+
await expect(activeFilter).toBeVisible();
109+
110+
// Expects no projects message to be visible
111+
const alert = page.getByRole('alert');
112+
await expect(alert).toBeVisible();
113+
await expect(alert.getByText('We couldn\'t find any items that match the criteria selected.')).toBeVisible();
114+
await expect(alert.getByRole('button', { name: 'Reset filters' })).toBeVisible();
115+
});
116+
117+
test('resets filters from no projects message', async ({ page }) => {
118+
// Loads with filter that yields no results (Category 3 does not exist)
119+
await gotoExplore(page, '?category=Category%203');
120+
121+
// Expects no projects message to be visible
122+
const alert = page.getByRole('alert');
123+
await expect(alert).toBeVisible();
124+
125+
// Resets filters
126+
const resetButton = alert.getByRole('button', { name: 'Reset filters' });
127+
await resetButton.click();
128+
129+
// Expects no projects message to be gone and filter to be removed
130+
await expect(alert).not.toBeVisible();
131+
const activeFilter = page.getByRole('listitem').filter({ hasText: 'category:Category 3Clear icon' });
132+
await expect(activeFilter).not.toBeVisible();
133+
});
134+
135+
test('shows and hides project details', async ({ page }) => {
136+
await gotoExplore(page);
137+
138+
// Opens project details
139+
const detailsButton = page.getByRole('button', { name: 'Item 1 info' });
140+
await detailsButton.click();
141+
142+
// Expects project details content to be visible
143+
const detailsSection = page.getByLabel('Item details modal');
144+
await expect(detailsSection).toBeVisible();
145+
await expect(detailsSection.getByText('Item 1', { exact: true })).toBeVisible();
146+
await expect(detailsSection.getByText('DEMO', { exact: true })).toBeVisible();
147+
await expect(detailsSection.getByText('graduated')).toBeVisible();
148+
await expect(detailsSection.locator('a').filter({ hasText: 'https://github.com/cncf/' })).toBeVisible();
149+
await expect(detailsSection.getByText('This is the description of item 1')).toBeVisible();
150+
await expect(detailsSection.getByText('Repositories')).toBeVisible()
151+
await expect(detailsSection.getByLabel('Repositories select')).toBeVisible();
152+
await expect(detailsSection.locator('a').filter({ hasText: 'https://github.com/cncf/' })).toBeVisible();
153+
154+
// Closes project details
155+
const hideDetailsButton = detailsSection.getByLabel('Close');
156+
await hideDetailsButton.click();
157+
await expect(detailsSection).not.toBeVisible();
158+
});
159+
160+
test('displays project dropdown', async ({ page }) => {
161+
await gotoExplore(page);
162+
163+
// Displays project dropdown
164+
const detailsButton = page.getByRole('button', { name: 'Item 1 info' });
165+
await detailsButton.hover();
166+
await page.waitForTimeout(2000); // Wait for the dropdown to appear
167+
168+
// Expects project dropdown to be visible
169+
const dropdown = page.getByRole('complementary');
170+
await expect(dropdown).toBeVisible();
171+
await expect(dropdown.getByRole('complementary').getByAltText('Item 1 logo')).toBeVisible();
172+
await expect(dropdown.getByText('Item 1', { exact: true })).toBeVisible();
173+
await expect(dropdown.getByText('DEMO', { exact: true })).toBeVisible();
174+
await expect(dropdown.getByText('graduated')).toBeVisible();
175+
await expect(dropdown.getByText('This is the description of item 1')).toBeVisible();
176+
});
28177
});

0 commit comments

Comments
 (0)