feat:playwright tests for tree-details page by WilsonNet · Pull Request #1719 · kernelci/dashboard

WilsonNet · 2026-01-28T19:31:29Z

Summary

Adds end-to-end tests for tree details filter functionality, covering all requirements from issue #1664. Implements a type-safe test ID system using Zod validation while maintaining generic component architecture.

Additionally, adds AI agent skills to guide future code contributions with TypeScript and React best practices.

Changes

E2E Tests (Issue #1664)

New filter tests: 2 comprehensive tests for filter functionality
- Filter drawer interaction (open/close/apply/clear)
- Filter selection via drawer (status filters)
- Filter selection via summary cards (architecture/compiler links)
- URL parameter validation after filtering
Test infrastructure improvements:
- Organized selectors into e2e/selectors/ directory with common patterns
- Reusable utilities in e2e/utils/ (navigation, filters)
- Consistent test patterns across all tree tests

AI Agent Skills (`.agents/skills/`)

Added two skills for maintaining code quality:

typescript-type-safety: Enforces Zod validation or type guards over type assertions
react-generic-components: Guidelines for building truly reusable components

How to Test

Prerequisites

Start dev server with staging API proxy (in tmux or separate terminal):
```
cd dashboard
pnpm run dev-remote-api
```
The dev server should start on http://localhost:5173 with proxy configured for /staging-api

Run Tests

Run all tests:

cd dashboard
pnpm run e2e

Run only tree details tests:

pnpm run e2e -- tree-details.spec.ts

Run only filter tests:

pnpm run e2e -- tree-details.spec.ts -g "adds filters"

Run with UI mode (interactive):

pnpm run e2e-ui

Manual Testing

Navigate to http://localhost:5173/tree/android/android-mainline/7c5912a7c78d669e825093b8cbb57e6afaa88d11
Test filter drawer:
- Click "Filters" button
- Select "FAIL" checkbox under "Build Status"
- Click "Filter" button
- Verify URL contains filter parameter (df.*FAIL)
- Open filters again and click "Clear all"
Test summary card filters:
- Click on any architecture link (e.g., "arm64")
- Verify URL changes and contains architecture filter
- Verify builds table updates to show filtered results
Test breadcrumb navigation:
- Click "Trees" link in breadcrumb
- Verify navigation back to tree listing page

Technical Details

Closes #1664

WilsonNet · 2026-02-04T19:34:49Z

dashboard/src/components/Breadcrumb/TreeBreadcrumb.tsx

+        data-test-id="breadcrumb-trees-link"
      >
-        <FormattedMessage id="tree.details" />
+        <FormattedMessage id="tree.path" />


please remove this change

dashboard/src/components/StatusChart/StatusCharts.tsx

dashboard/src/components/Table/TableComponents.tsx

Add comprehensive e2e tests covering all requirements from issue kernelci#1664: - Filter drawer interaction (open/close/apply) - Filter selection via drawer (FAIL status filter) - Filter selection via summary cards (architecture links) - URL parameter validation after filter application Implement type-safe test ID system using Zod validation: - Add ColumnMetaSchema for validating table column metadata - Pass dataTestId through column meta instead of hardcoded checks - Add data-test-id props to TreeBreadcrumb and StatusChart components All components remain generic without business-specific logic. Closes kernelci#1664

Add two skills to guide AI coding agents working on the codebase: - typescript-type-safety: Enforces runtime validation with Zod or type guards instead of unsafe type assertions - react-generic-components: Ensures components remain generic and reusable without hardcoded business logic These skills provide guidelines, examples, and decision trees for maintaining code quality and consistency across the monorepo.

alanpeixinho

Had some trouble running locally. Most likelly, due to recent changes on the deployment.
It might be good if we rebase this PR to match current deployment.

alanpeixinho · 2026-03-23T17:56:02Z

dashboard/src/components/Tabs/StatusCard.tsx

  return (
    <BaseCard
      title={title}
+      data-test-id="status-card"


are we using these ids in the base class?

there is a docs on that, ids are used when selectors get too complicated

alanpeixinho · 2026-03-23T20:09:37Z

.agents/skills/react-generic-components/SKILL.md

+
+## Anti-Patterns to Avoid
+
+### ❌ Hardcoded Business Logic


We should check what is the best approach to add skills to the repo.
Any opinions @MarceloRobert @gustavobtflores ?

And also, if possible, remote emojis.

alanpeixinho · 2026-03-23T20:12:54Z

dashboard/vite.config.ts

+  server: {
+    proxy: {
+      '/staging-api': {
+        target: 'https://staging.dashboard.kernelci.org:9000',


Wouldnt it be better to run against the local server for tests?
This way we can check if current modifications can break any e2e

running a local server is cumbersome, a lot of times frontend developers don't wanna do that unless it is needed (including myself)

imagine you just wanna contribute by fix a spacing or a quick css change, and now you see yourself battling against docker files?

WilsonNet changed the title ~~Fix Playwright tests for tree-details page~~ [draft]playwright tests for tree-details page Jan 28, 2026

MarceloRobert assigned WilsonNet Jan 29, 2026

MarceloRobert added the CI/CD Most or all of the changes are about automated tests / Github's CI label Feb 3, 2026

WilsonNet force-pushed the feat/playwright-tree-details branch from b56be97 to 9efbd26 Compare February 4, 2026 18:50

WilsonNet changed the title ~~[draft]playwright tests for tree-details page~~ feat:playwright tests for tree-details page Feb 4, 2026

WilsonNet marked this pull request as ready for review February 4, 2026 18:52

WilsonNet force-pushed the feat/playwright-tree-details branch 3 times, most recently from dc5aadb to 9948da4 Compare February 4, 2026 19:25

WilsonNet commented Feb 4, 2026

View reviewed changes

WilsonNet marked this pull request as draft February 4, 2026 19:37

WilsonNet commented Feb 4, 2026

View reviewed changes

dashboard/src/components/StatusChart/StatusCharts.tsx Outdated Show resolved Hide resolved

WilsonNet commented Feb 5, 2026

View reviewed changes

dashboard/src/components/Table/TableComponents.tsx Outdated Show resolved Hide resolved

WilsonNet force-pushed the feat/playwright-tree-details branch from 2677116 to 8623ee8 Compare February 10, 2026 12:01

WilsonNet added 2 commits February 10, 2026 09:14

WilsonNet force-pushed the feat/playwright-tree-details branch from 8623ee8 to ff1381e Compare February 10, 2026 12:18

WilsonNet marked this pull request as ready for review February 10, 2026 12:21

alanpeixinho reviewed Mar 23, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat:playwright tests for tree-details page#1719

feat:playwright tests for tree-details page#1719
WilsonNet wants to merge 2 commits intokernelci:mainfrom
WilsonNet:feat/playwright-tree-details

WilsonNet commented Jan 28, 2026 •

edited

Loading

Uh oh!

WilsonNet Feb 4, 2026

Uh oh!

Uh oh!

Uh oh!

alanpeixinho left a comment

Uh oh!

alanpeixinho Mar 23, 2026

Uh oh!

WilsonNet Apr 9, 2026

Uh oh!

alanpeixinho Mar 23, 2026

Uh oh!

alanpeixinho Mar 23, 2026

Uh oh!

alanpeixinho Mar 23, 2026

Uh oh!

WilsonNet Apr 9, 2026 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

WilsonNet commented Jan 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Changes

E2E Tests (Issue #1664)

AI Agent Skills (.agents/skills/)

How to Test

Prerequisites

Run Tests

Manual Testing

Technical Details

Uh oh!

WilsonNet Feb 4, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

alanpeixinho left a comment

Choose a reason for hiding this comment

Uh oh!

alanpeixinho Mar 23, 2026

Choose a reason for hiding this comment

Uh oh!

WilsonNet Apr 9, 2026

Choose a reason for hiding this comment

Uh oh!

alanpeixinho Mar 23, 2026

Choose a reason for hiding this comment

Uh oh!

alanpeixinho Mar 23, 2026

Choose a reason for hiding this comment

Uh oh!

alanpeixinho Mar 23, 2026

Choose a reason for hiding this comment

Uh oh!

WilsonNet Apr 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

WilsonNet commented Jan 28, 2026 •

edited

Loading

AI Agent Skills (`.agents/skills/`)

WilsonNet Apr 9, 2026 •

edited

Loading