e2e: Test suits for WDS TreeView Canvas

[Arpit529Srivastava]

Description

This PR adds comprehensive end-to-end tests for the TreeViewCanvas component using Playwright. The tests cover all major functionality including view switching, zoom controls, node interactions, empty states, and canvas interactions (zoom, pan). The implementation includes browser-specific optimizations for Chromium, Webkit, and Firefox to handle different rendering behaviors and event handling quirks.

Related Issue

Under #2159

Changes Made

The test suite includes 16 test cases covering:

1. Basic Rendering

   • Displays TreeViewCanvas in tiles view
   • Displays loading skeleton initially
   • Displays empty state when no workloads
   • Empty state create workload button works

2. View Management

   • Switches between tiles and list view
   • Context dropdown works
   • Filters work in tiles view

3. Zoom Controls

   • Displays zoom controls
   • Zoom controls work correctly (zoom in/out/reset)
   • Zoom preset menu works
   • Canvas supports mouse wheel zoom

4. Canvas Interactions

   • Node selection opens details panel
   • Canvas supports panning
   • Edge type toggle works

5. UI Controls

   • Collapse and expand all buttons work
   • Fullscreen toggle works

• Updated ...
• Refactored ...
• Fixed ...
• Added tests for TreeViewCanvas

Checklist

Please ensure the following before submitting your PR:

• I have reviewed the project's contribution guidelines.
• I have written unit tests for the changes (if applicable).
• I have updated the documentation (if applicable).
• I have tested the changes locally and ensured they work as expected.
• My code follows the project's coding standards.

Screenshots or Logs (if applicable)

Additional Notes

This PR depends on PR #2198 for the ReactFlowHelper utility

[kubestellar-prow]

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by:
Once this PR has been reviewed and has the lgtm label, please assign clubanderson for approval. For more information see the Kubernetes Code Review Process.

The full list of commands accepted by this bot can be found here.

Needs approval from an approver in each of these files:

• OWNERS

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

[Arpit529Srivastava]

Time Taken:
Firfox: 1.7min
Safari: 2 min
Chromium: 2.3min

[Copilot]

Pull Request Overview

This PR introduces comprehensive end-to-end tests for the TreeViewCanvas component, implementing 16 test cases that cover rendering, view switching, zoom controls, canvas interactions, and empty states. The implementation includes a new ReactFlowHelper utility class with WebSocket mocking capabilities and browser-specific optimizations for Chromium, Webkit, and Firefox.

Key Changes:

• Added ReactFlowHelper utility class for React Flow testing with WebSocket mocking
• Created empty state mock handlers (workloadsEmpty, workloadsEmptyRel) and wdsEmpty scenario
• Implemented 16 test cases covering TreeViewCanvas functionality
• Added browser-specific handling for different rendering behaviors

Reviewed Changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 8 comments.

Show a summary per file

File	Description
frontend/src/mocks/handlers.ts	Adds empty workloads mock handlers for testing empty state scenarios
frontend/src/mocks/browser.ts	Adds wdsEmpty scenario and reorders handlers in wdsSuccess scenario
frontend/e2e/pages/utils/ReactFlowHelper.ts	New utility class providing React Flow testing helpers, WebSocket mocking, and browser-specific wait methods
frontend/e2e/pages/index.ts	Exports the new ReactFlowHelper utility and its types
frontend/e2e/pages/WDSPage.ts	Reduces timeout values for tiles view waiting (20s→15s, 2s→1s, 1s→500ms)
frontend/e2e/TreeViewCanvas.spec.ts	New comprehensive test suite with 16 test cases covering all TreeViewCanvas functionality

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Arpit529Srivastava]

/cc @btwshivam
ptal

[btwshivam]

@Arpit529Srivastava Its common for Wds and Wecs??
whats test time??
this much test is needed? 1500 loc!!

[Arpit529Srivastava]

will take a look into this.
Thank you

[btwshivam]

fix it.. reduce flasky test.. keep important one only!

[kubestellar-prow]

@Arpit529Srivastava: The following tests failed, say /retest to rerun all failed tests or /retest-required to rerun all mandatory failed tests:

Test name	Commit	Details	Required	Rerun command
pull-kubestellar-ui-verify	1aa32ca	link	true	/test pull-kubestellar-ui-verify
pull-kubestellar-ui-build	1aa32ca	link	true	/test pull-kubestellar-ui-build

Full PR test history

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes-sigs/prow repository. I understand the commands that are listed here.