Skip to content

feat:playwright tests for tree-details page#1719

Open
WilsonNet wants to merge 2 commits intokernelci:mainfrom
WilsonNet:feat/playwright-tree-details
Open

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

Conversation

@WilsonNet
Copy link
Collaborator

@WilsonNet WilsonNet commented Jan 28, 2026

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:

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

How to Test

Prerequisites

  1. 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

  1. Navigate to http://localhost:5173/tree/android/android-mainline/7c5912a7c78d669e825093b8cbb57e6afaa88d11

  2. 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"
  3. 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
  4. Test breadcrumb navigation:

    • Click "Trees" link in breadcrumb
    • Verify navigation back to tree listing page

Technical Details

Closes #1664

@WilsonNet WilsonNet changed the title Fix Playwright tests for tree-details page [draft]playwright tests for tree-details page Jan 28, 2026
@MarceloRobert MarceloRobert added the CI/CD Most or all of the changes are about automated tests / Github's CI label Feb 3, 2026
@WilsonNet WilsonNet force-pushed the feat/playwright-tree-details branch from b56be97 to 9efbd26 Compare February 4, 2026 18:50
@WilsonNet WilsonNet changed the title [draft]playwright tests for tree-details page feat:playwright tests for tree-details page Feb 4, 2026
@WilsonNet WilsonNet marked this pull request as ready for review February 4, 2026 18:52
@WilsonNet WilsonNet force-pushed the feat/playwright-tree-details branch 3 times, most recently from dc5aadb to 9948da4 Compare February 4, 2026 19:25
data-test-id="breadcrumb-trees-link"
>
<FormattedMessage id="tree.details" />
<FormattedMessage id="tree.path" />
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

please remove this change

@WilsonNet WilsonNet marked this pull request as draft February 4, 2026 19:37
@WilsonNet WilsonNet force-pushed the feat/playwright-tree-details branch from 2677116 to 8623ee8 Compare February 10, 2026 12:01
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.
@WilsonNet WilsonNet force-pushed the feat/playwright-tree-details branch from 8623ee8 to ff1381e Compare February 10, 2026 12:18
@WilsonNet WilsonNet marked this pull request as ready for review February 10, 2026 12:21
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

CI/CD Most or all of the changes are about automated tests / Github's CI

Projects

None yet

Development

Successfully merging this pull request may close these issues.

e2e test treeDetails

2 participants