mirror of
https://github.com/react/react-native-devtools-frontend.git
synced 2026-10-13 01:54:52 +08:00
Philip Pfaffe
96992fe95a
Drive-by: Reorder tests when running the full set to run unittests first Bug: 333423685 Change-Id: I7ac75c7a446fa543d3063a5ac2989fe1f15381b3 Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/5688551 Commit-Queue: Simon Zünd <szuend@chromium.org> Reviewed-by: Simon Zünd <szuend@chromium.org> Auto-Submit: Philip Pfaffe <pfaffe@chromium.org>
109 lines
3.8 KiB
Markdown
109 lines
3.8 KiB
Markdown
# Testing Chromium DevTools
|
|
|
|
Follow the steps outlined in [Get the Code](get_the_code.md) to checkout the DevTools front-end code.
|
|
|
|
[TOC]
|
|
|
|
## DevTools frontend
|
|
|
|
Run tests with
|
|
|
|
```
|
|
npm test
|
|
```
|
|
|
|
This command runs all tests in the devtools frontend repo, which are the [unit tests](../test/unit/README.md),
|
|
[interactions tests](../test/interactions/README.md), [e2e tests](../test/e2e/README.md), and performance tests.
|
|
|
|
You can also run just a subset of tests like this:
|
|
|
|
```
|
|
npm test \
|
|
front_end/core/common/Color.test.ts \
|
|
front_end/core/sdk
|
|
```
|
|
|
|
|
|
The current test status can be seen at the [test waterfall](https://ci.chromium.org/p/devtools-frontend/g/main/console).
|
|
|
|
|
|
### Debugging
|
|
|
|
#### Debugging with VSCode
|
|
|
|
To run tests under the debugger, open the "Run and Debug" sidebar, select "Run unit tests in VS Code debugger" from the
|
|
dropdown, and click the start button or press F5.
|
|
|
|
Current limitations when using VSCode for e2e and interactions tests:
|
|
|
|
- VSCode only attaches to the node portion of the code (mostly the test files and the test helpers), not to Chrome.
|
|
- VSCode debugging only works with headless mode.
|
|
|
|
#### Debugging with DevTools
|
|
|
|
To run tests under the DevTools debugger use the `--debug` command line option.
|
|
|
|
For unittests this will bring up Chrome with a Karma launcher page. Wait for "Debug" button to appear and click it. A
|
|
new page will open, here you can open DevTools, set breakpoints in the tests and reload page to rerun tests.
|
|
|
|
For e2e tests, you can debug the "DevTools under test" with DevTools-on-DevTools. Use the standard DevTools key
|
|
combination to open another DevTools instance while you look at the "DevTools under test". You can set breakpoints and
|
|
inspect the status of the "DevTools under test" this way. You can debug the puppeteer side by inspecting the Node.js
|
|
process that runs the e2e suite. Either open `chrome://inspect` or click the Node.js icon in any open DevTools window to
|
|
connect to the puppeteer process. You can step through the puppeteer test code this way.
|
|
|
|
### Obtaining code coverage
|
|
|
|
We can collect code coverage for the source code that is tested: `npm run test -- --coverage`. This is available for
|
|
interactions and unit tests.
|
|
|
|
The code coverage output is written to `/karma-coverage` or `/interactions-coverage` in the repository root. The
|
|
location can be overriden with `--artifacts-dir`. You can open `/karma-coverage/index.html` in a browser to inspect
|
|
coverage for individual files.
|
|
|
|
## Useful tools
|
|
|
|
In .vscode/launch.conf there are some launch options available for running tests from within VSCode.
|
|
|
|
The following shell function allows running all tests changed in a given git commit range, in addition to all unittests
|
|
files for all changed code files. Store it in your .bashrc.
|
|
|
|
```
|
|
affected() {
|
|
ref="$1"
|
|
if [ -n "$ref" ]; then
|
|
shift 1
|
|
fi
|
|
if [ -z "$ref" -o "$ref" = "--" ]; then
|
|
ref="HEAD"
|
|
fi
|
|
if [ "$1" = "--" ]; then
|
|
shift 1
|
|
fi
|
|
affected=($(ls -d 2>/dev/null $(git diff "$ref" --name-only | sed -e 's,\(\.test\)\?\.ts,.test.ts,' | grep '\.test\.ts') | sort -u | tr '\n' ' '))
|
|
if [ -z "$affected" ]; then
|
|
return
|
|
fi
|
|
npm run test -- "${affected[@]}" $@
|
|
}
|
|
|
|
```
|
|
|
|
## Layout tests
|
|
|
|
After building content shell as part of Chromium, we can also run layout tests that are relevant for DevTools frontend:
|
|
|
|
```bash
|
|
autoninja -C out/Default content_shell
|
|
third_party/blink/tools/run_web_tests.py -t Default http/tests/devtools
|
|
```
|
|
|
|
To debug a failing layout test we can run
|
|
```bash
|
|
npm run debug-webtest -- http/tests/devtools/<path>/<to>/<test>.js
|
|
```
|
|
|
|
The script supports either default DevTools checkout inside the chromium tree or side-by-side checkouts of chromium and
|
|
DevTools. Passing `--custom-devtools-frontend` is not supported currently, meaning in the side-by-side scenario the
|
|
DevTools checkout inside the chromium tree will be used (if not symlinked).
|