Skip to content

Commit cfcdae5

Browse files
WilsonNetWilsonNet
committed
wip
1 parent 0f04fef commit cfcdae5

9 files changed

Lines changed: 155 additions & 81 deletions

File tree

‎dashboard/e2e/e2e-selectors.ts‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ export const COMMON_SELECTORS = {
2929
} as const;
3030

3131
export const TREE_DETAILS_SELECTORS = {
32-
breadcrumbTreesLink: '[data-test-id="breadcrumb-link"]',
32+
breadcrumbTreesLink: '[data-test-id="breadcrumb-trees-link"]',
3333

3434
treeHeaderTable: 'table',
3535

@@ -42,8 +42,8 @@ export const TREE_DETAILS_SELECTORS = {
4242
filters: {
4343
button: 'button:has-text("Filters")',
4444
drawer: 'aside',
45-
filterButton: 'button:has-text("Filter")',
46-
cancelButton: 'button:has-text("Cancel")',
45+
filterButton: '[data-test-id="filter-button"]',
46+
cancelButton: '[data-test-id="filter-cancel-button"]',
4747
clearAllFilters: 'text="Clear all"',
4848
},
4949

@@ -52,7 +52,7 @@ export const TREE_DETAILS_SELECTORS = {
5252
statusCard: {
5353
title: '.flex-col:has(div:has-text("Build status"))',
5454
titleFirst: '.flex-col:has(div:has-text("Build status"))',
55-
statusButton: (status: string) => `button:has-text("${status}")`,
55+
statusButton: (status: string) => `[data-test-id="${status}"]`,
5656
},
5757

5858
summaryCards: {
@@ -73,7 +73,7 @@ export const TREE_DETAILS_SELECTORS = {
7373
inconclusive: 'button:has-text("Inconclusive:")',
7474
},
7575
searchInput: 'input[placeholder*="Search"]',
76-
detailsButton: 'a[href^="/build/"]',
76+
detailsButton: '[data-test-id="details-button"]',
7777
},
7878

7979
bootsTable: {
@@ -83,7 +83,7 @@ export const TREE_DETAILS_SELECTORS = {
8383
failed: 'button:has-text("Failed:")',
8484
inconclusive: 'button:has-text("Inconclusive:")',
8585
},
86-
detailsButton: 'a[href^="/test/"]',
86+
detailsButton: '[data-test-id="details-button"]',
8787
},
8888

8989
testsTable: {
@@ -94,7 +94,7 @@ export const TREE_DETAILS_SELECTORS = {
9494
inconclusive: 'button:has-text("Inconclusive:")',
9595
},
9696
testItem: 'tr',
97-
detailsButton: 'a[href^="/test/"]',
97+
detailsButton: '[data-test-id="details-button"]',
9898
},
9999

100100
configTable: {

‎dashboard/e2e/tree-details.spec.ts‎

Lines changed: 92 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import { test, expect } from '@playwright/test';
33
import {
44
TREE_DETAILS_SELECTORS,
55
TREE_LISTING_SELECTORS,
6-
COMMON_SELECTORS,
76
} from './e2e-selectors';
87

98
test.describe('Tree Details Page Tests', () => {
@@ -12,35 +11,38 @@ test.describe('Tree Details Page Tests', () => {
1211
page.setDefaultTimeout(timeout);
1312
});
1413

15-
test('adds a filter with card and clear all filters', async ({ page }) => {
16-
await page.goto('/tree/mainline/master/c072629f05d7bca1148ab17690d7922a31423984', { timeout: 30000 });
14+
test('opens and closes filter drawer', async ({ page }) => {
15+
await page.goto(
16+
'/tree/mainline/master/c072629f05d7bca1148ab17690d7922a31423984',
17+
{ timeout: 30000 },
18+
);
1719
await page.waitForLoadState('domcontentloaded');
1820

1921
const filterButton = page.locator(TREE_DETAILS_SELECTORS.filters.button);
2022
await filterButton.waitFor({ state: 'visible', timeout: 10000 });
2123
await filterButton.click();
2224

23-
await page.waitForTimeout(5000);
24-
25-
const successButton = page.locator('button').filter({ hasText: '51' }).filter({ hasText: 'Success' }).first();
26-
await successButton.waitFor({ state: 'visible', timeout: 5000 });
27-
await successButton.click();
28-
29-
await successButton.click();
30-
31-
const cancelButton = page.locator(TREE_DETAILS_SELECTORS.filters.cancelButton);
25+
const cancelButton = page.locator(
26+
TREE_DETAILS_SELECTORS.filters.cancelButton,
27+
);
3228
await expect(cancelButton).toBeVisible();
33-
3429
await cancelButton.click();
30+
31+
await expect(cancelButton).not.toBeVisible();
3532
});
3633

3734
test('clicks on details button on build table and goes back via breadcrumb', async ({
3835
page,
3936
}) => {
40-
await page.goto('/tree/mainline/master/c072629f05d7bca1148ab17690d7922a31423984', { timeout: 30000 });
37+
await page.goto(
38+
'/tree/mainline/master/c072629f05d7bca1148ab17690d7922a31423984',
39+
{ timeout: 30000 },
40+
);
4141
await page.waitForLoadState('domcontentloaded');
4242

43-
const detailsButton = page.locator(TREE_DETAILS_SELECTORS.buildTable.detailsButton).first();
43+
const detailsButton = page
44+
.locator(TREE_DETAILS_SELECTORS.buildTable.detailsButton)
45+
.first();
4446
await expect(detailsButton).toBeVisible({ timeout: 30000 });
4547

4648
await detailsButton.click();
@@ -50,21 +52,28 @@ test.describe('Tree Details Page Tests', () => {
5052
const url = page.url();
5153
expect(url).toMatch(/\/build\//);
5254

53-
const breadcrumbLink = page.locator(TREE_DETAILS_SELECTORS.breadcrumbTreesLink);
55+
const breadcrumbLink = page.locator(
56+
TREE_DETAILS_SELECTORS.breadcrumbTreesLink,
57+
);
5458
await expect(breadcrumbLink).toBeVisible();
5559
await breadcrumbLink.click();
5660

57-
await page.waitForURL(/\/tree$/, { timeout: 20000 });
58-
await expect(page).toHaveURL(/\/tree$/);
61+
await page.waitForURL(/\/tree/, { timeout: 20000 });
62+
await expect(page).toHaveURL(/\/tree/);
5963
});
6064

6165
test('clicks on an issue details button on issue card and goes back via breadcrumb', async ({
6266
page,
6367
}) => {
64-
await page.goto('/tree/mainline/master/c072629f05d7bca1148ab17690d7922a31423984', { timeout: 30000 });
68+
await page.goto(
69+
'/tree/mainline/master/c072629f05d7bca1148ab17690d7922a31423984',
70+
{ timeout: 30000 },
71+
);
6572
await page.waitForLoadState('domcontentloaded');
6673

67-
const issuesCardButton = page.locator(TREE_DETAILS_SELECTORS.issuesCard.button);
74+
const issuesCardButton = page.locator(
75+
TREE_DETAILS_SELECTORS.issuesCard.button,
76+
);
6877
const hasIssues = (await issuesCardButton.count()) > 0;
6978

7079
if (hasIssues) {
@@ -77,17 +86,22 @@ test.describe('Tree Details Page Tests', () => {
7786
const url = page.url();
7887
expect(url).toMatch(/\/issues\//);
7988

80-
const breadcrumbLink = page.locator(TREE_DETAILS_SELECTORS.breadcrumbTreesLink);
89+
const breadcrumbLink = page.locator(
90+
TREE_DETAILS_SELECTORS.breadcrumbTreesLink,
91+
);
8192
await expect(breadcrumbLink).toBeVisible();
8293
await breadcrumbLink.click();
8394

84-
await page.waitForURL(/\/tree$/, { timeout: 20000 });
85-
await expect(page).toHaveURL(/\/tree$/);
95+
await page.waitForURL(/\/tree/, { timeout: 20000 });
96+
await expect(page).toHaveURL(/\/tree/);
8697
}
8798
});
8899

89100
test('selects other tabs', async ({ page }) => {
90-
await page.goto('/tree/mainline/master/c072629f05d7bca1148ab17690d7922a31423984', { timeout: 30000 });
101+
await page.goto(
102+
'/tree/mainline/master/c072629f05d7bca1148ab17690d7922a31423984',
103+
{ timeout: 30000 },
104+
);
91105
await page.waitForLoadState('domcontentloaded');
92106

93107
const bootsTab = page.locator(TREE_DETAILS_SELECTORS.tabs.boots);
@@ -110,7 +124,10 @@ test.describe('Tree Details Page Tests', () => {
110124
test('clicks on a test item and clicks on detail button for test item', async ({
111125
page,
112126
}) => {
113-
await page.goto('/tree/mainline/master/c072629f05d7bca1148ab17690d7922a31423984', { timeout: 30000 });
127+
await page.goto(
128+
'/tree/mainline/master/c072629f05d7bca1148ab17690d7922a31423984',
129+
{ timeout: 30000 },
130+
);
114131
await page.waitForLoadState('domcontentloaded');
115132

116133
const testsTab = page.locator(TREE_DETAILS_SELECTORS.tabs.tests);
@@ -123,22 +140,36 @@ test.describe('Tree Details Page Tests', () => {
123140
const hasTestItems = (await testItems.count()) > 0;
124141

125142
if (hasTestItems) {
126-
const detailsButton = page.locator(TREE_DETAILS_SELECTORS.testsTable.detailsButton).first();
127-
await expect(detailsButton).toBeVisible({ timeout: 30000 });
143+
const firstTestItem = testItems.first();
144+
await firstTestItem.click();
128145

129-
await detailsButton.click();
146+
await page.waitForTimeout(3000);
130147

131-
await page.waitForURL(/\/test\//, { timeout: 30000 });
148+
const expandedRows = page.locator('tr:has(td[colspan])');
149+
const hasExpandedRows = (await expandedRows.count()) > 0;
132150

133-
const url = page.url();
134-
expect(url).toMatch(/\/test\//);
151+
if (hasExpandedRows) {
152+
const detailsButton = page
153+
.locator(TREE_DETAILS_SELECTORS.testsTable.detailsButton)
154+
.first();
155+
await expect(detailsButton).toBeVisible({ timeout: 10000 });
135156

136-
const breadcrumbLink = page.locator(TREE_DETAILS_SELECTORS.breadcrumbTreesLink);
137-
await expect(breadcrumbLink).toBeVisible();
138-
await breadcrumbLink.click();
157+
await detailsButton.click();
158+
159+
await page.waitForURL(/\/test\//, { timeout: 30000 });
139160

140-
await page.waitForURL(/\/tree$/, { timeout: 20000 });
141-
await expect(page).toHaveURL(/\/tree$/);
161+
const url = page.url();
162+
expect(url).toMatch(/\/test\//);
163+
164+
const breadcrumbLink = page.locator(
165+
TREE_DETAILS_SELECTORS.breadcrumbTreesLink,
166+
);
167+
await expect(breadcrumbLink).toBeVisible();
168+
await breadcrumbLink.click();
169+
170+
await page.waitForURL(/\/tree/, { timeout: 20000 });
171+
await expect(page).toHaveURL(/\/tree/);
172+
}
142173
}
143174
});
144175

@@ -150,7 +181,9 @@ test.describe('Tree Details Page Tests', () => {
150181

151182
await expect(page).toHaveURL(/\/tree$/);
152183

153-
const firstTreeLink = page.locator(TREE_LISTING_SELECTORS.firstTreeCell).first();
184+
const firstTreeLink = page
185+
.locator(TREE_LISTING_SELECTORS.firstTreeCell)
186+
.first();
154187
await expect(firstTreeLink).toBeVisible();
155188

156189
await firstTreeLink.click();
@@ -160,22 +193,31 @@ test.describe('Tree Details Page Tests', () => {
160193
const url = page.url();
161194
expect(url).toMatch(/\/tree\/[^/]+\/[^/]+\/[^/]+$/);
162195

163-
const breadcrumbLink = page.locator(TREE_DETAILS_SELECTORS.breadcrumbTreesLink);
196+
const breadcrumbLink = page.locator(
197+
TREE_DETAILS_SELECTORS.breadcrumbTreesLink,
198+
);
164199
await expect(breadcrumbLink).toBeVisible();
165200
await breadcrumbLink.click();
166201

167-
await page.waitForURL(/\/tree$/, { timeout: 20000 });
168-
await expect(page).toHaveURL(/\/tree$/);
202+
await page.waitForURL(/\/tree/, { timeout: 20000 });
203+
await expect(page).toHaveURL(/\/tree/);
169204
});
170205

171206
test('build table status filters work correctly', async ({ page }) => {
172-
await page.goto('/tree/mainline/master/c072629f05d7bca1148ab17690d7922a31423984', { timeout: 30000 });
207+
await page.goto(
208+
'/tree/mainline/master/c072629f05d7bca1148ab17690d7922a31423984',
209+
{ timeout: 30000 },
210+
);
173211
await page.waitForLoadState('domcontentloaded');
174212

175-
const allFilter = page.locator(TREE_DETAILS_SELECTORS.buildTable.statusFilters.all);
213+
const allFilter = page.locator(
214+
TREE_DETAILS_SELECTORS.buildTable.statusFilters.all,
215+
);
176216
await expect(allFilter).toBeVisible({ timeout: 30000 });
177217

178-
const successFilter = page.locator(TREE_DETAILS_SELECTORS.buildTable.statusFilters.success);
218+
const successFilter = page.locator(
219+
TREE_DETAILS_SELECTORS.buildTable.statusFilters.success,
220+
);
179221
await expect(successFilter).toBeVisible();
180222

181223
await successFilter.click();
@@ -184,10 +226,15 @@ test.describe('Tree Details Page Tests', () => {
184226
});
185227

186228
test('search input is visible and functional', async ({ page }) => {
187-
await page.goto('/tree/mainline/master/c072629f05d7bca1148ab17690d7922a31423984', { timeout: 30000 });
229+
await page.goto(
230+
'/tree/mainline/master/c072629f05d7bca1148ab17690d7922a31423984',
231+
{ timeout: 30000 },
232+
);
188233
await page.waitForLoadState('domcontentloaded');
189234

190-
const searchInput = page.locator(TREE_DETAILS_SELECTORS.buildTable.searchInput);
235+
const searchInput = page.locator(
236+
TREE_DETAILS_SELECTORS.buildTable.searchInput,
237+
);
191238
await expect(searchInput).toBeVisible({ timeout: 30000 });
192239

193240
await searchInput.fill('defconfig');

‎dashboard/src/components/Breadcrumb/Breadcrumb.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,12 +28,12 @@ type BreadcrumbLinkProps = Pick<
2828
const BreadcrumbLink = ({
2929
children,
3030
...props
31-
}: BreadcrumbLinkProps): JSX.Element => {
31+
}: BreadcrumbLinkProps & { 'data-test-id'?: string }): JSX.Element => {
3232
return (
3333
<Link
3434
{...props}
3535
className="transition-colors hover:text-slate-500 dark:hover:text-slate-50"
36-
data-test-id="breadcrumb-link"
36+
data-test-id={props['data-test-id'] ?? 'breadcrumb-link'}
3737
>
3838
{children}
3939
</Link>

‎dashboard/src/components/Breadcrumb/TreeBreadcrumb.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,8 +49,9 @@ const TreeBreadcrumb = ({
4949
params={treeParams.params}
5050
search={searchParams}
5151
state={s => s}
52+
data-test-id="breadcrumb-trees-link"
5253
>
53-
<FormattedMessage id="tree.details" />
54+
<FormattedMessage id="tree.path" />
5455
</BreadcrumbLink>
5556
),
5657
[treeParams, searchParams],

‎dashboard/src/components/Filter/Drawer.tsx‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -176,15 +176,23 @@ const Drawer = ({
176176

177177
<DrawerFooter className="text-dim-gray mt-6 flex h-20 w-full flex-row justify-end gap-x-6 bg-white">
178178
<DrawerClose asChild>
179-
<Button variant="ghost" onClick={onCancel}>
179+
<Button
180+
variant="ghost"
181+
onClick={onCancel}
182+
data-test-id="filter-cancel-button"
183+
>
180184
<FormattedMessage id={'global.cancel'} />
181185
</Button>
182186
</DrawerClose>
183187
<DrawerClose
184188
asChild
185189
className="bg-blue w-[200px] rounded-full text-white"
186190
>
187-
<Button variant="outline" onClick={onFilter}>
191+
<Button
192+
variant="outline"
193+
onClick={onFilter}
194+
data-test-id="filter-button"
195+
>
188196
<FormattedMessage id="global.filter" />
189197
</Button>
190198
</DrawerClose>

0 commit comments

Comments
 (0)