devtools-testing-guidance

# Testing Guidance This guide outlines when and how to select the appropriate test suite when writing new tests in Chrome DevTools. > [!NOTE] > This skill provides guidance on **which** test suite to choose when writing tests. To learn **how** to run tests, build targets, or execute linters, refer to the `devtools-verification` skill. ## Choosing a Test Suite ### 1. Unit Tests **Default choice:** The vast majority of tests in DevTools should be unit tests. Use unit tests for isolated testing of individual functions, classes, models, helpers, and UI components. - **Utilities & Framework:** - Use `TestUniverse` (and foundation test helpers) for easy, isolated setup of required dependencies and models. - For testing UI widgets, use stubbed view functions and screenshot assertions rather than spinning up heavy DOM/browser infrastructure. - **Location:** Co-located next to their implementation files (e.g. `TimelinePanel.ts` and `TimelinePanel.test.ts`). - **BUILD.gn**: test file should be added to `devtools_ui_module("unittests")` or `devtools_foundation_module("foundation_unittests")` target in the corresponding `BUILD.gn` file. --- ### 2. API Tests Use API tests for integration tests that verify business logic requiring more complex setups or extensive CDP (Chrome DevTools Protocol) traffic, without needing the full DevTools frontend UI. - **When to use:** - Evaluating JavaScript expressions in the target page (e.g. via `Runtime.evaluate`). - Complex source map setups and symbolization. - Multi-context or target setups (workers, iframes, OOPIFs). - Tests that require extensive CDP mock setup. - Verifying the "foundational layer" of DevTools models against a real browser/web page. - **Location:** Defined in `front_end/` with `.test.api.ts` extension (e.g. `Universe.test.api.ts`). - **BUILD.gn**: test file should be added to `devtools_api_test_module("api_tests")` target in the corresponding `BUILD.gn` file. --- ### 3. End-to-End (E2E) Tests Use E2E tests to verify real end-to-end user stories and user journeys. - **When to use:** - Verifying full user journeys across DevTools panels and drawers. - Complex UI behaviors that require extensive user interaction setup and benefit from a complete DevTools frontend page connected to an inspected target page over CDP. - **Location:** Defined in `test/e2e/` (e.g. `test/e2e/console/console-log.test.ts`). - **BUILD.gn**: test file should be added to `ts_e2e_library(ts_e2e_library)` target in the corresponding `BUILD.gn` file. And `node_ts_library` in `test/e2e/BUILD.gn` for its dependencies.