Voicila Ionut
3e9fcee4d3
The new supported pseudo classes are: enable, disable, valid, invalid, user-valid, user-invalid, required, optional, read-only, read-write, in-range, out-of-range, checked, indeterminate, placeholder-shown, autofill. Also changed the old table to a `grid` container. Bug:40280012 Change-Id: I0802a1f7660aee28b3878f067ccfe15497b3cd0d Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/5692026 Commit-Queue: Ionuț Marius Voicilă <ionutvoicila@google.com> Reviewed-by: Ergün Erdoğmuş <ergunsh@chromium.org> Reviewed-by: Philip Pfaffe <pfaffe@chromium.org>
Unit Testing
goo.gle/devtools-testing-guide
Follow the steps outlined in Get the Code to checkout the DevTools front-end code.
[TOC]
DevTools front-end tests
The devtools-frontend repository contains a variety of test suites, check
out the individual guides below:
You can use
npm test
to run all tests in the devtools frontend repo. 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.
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:
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
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).