mirror of https://github.com/react/react-native-devtools-frontend.git synced 2026-09-30 01:07:01 +08:00

Files

T

Tim van der Lippe 23283e110a Instrument code with Istanbul for interactions tests

All interaction tests are now lazily instrumented with Istanbul
to obtain code coverage. The interactions tests can be started
with `COVERAGE=1` to obtain coverage. For that, the Mocha hooks
perform the eventual reporting and gathering of data. The instrumentation
is performed in the components server itself.

To make sure that we perform the minimal amount of work required
(since code coverage instrumentation is computationally expensive),
we preload pages to populate the instrumentation cache. Every
interactions tests should preload an example (most likely basic.html)
to populate the cache. Every subsequent test will then use the
already-instrumented code, rather than computing the code over
and over again.

The eventual code coverage is written to /interactions-coverage.
The results will eventually be merged with /karma-coverage
to obtain the union of both unit and interaction tests coverage.

R=aerotwist@chromium.org,jacktfranklin@chromium.org

Bug: 1206705
Change-Id: I5e19b1ecef23d21107210699cb29800556e0415e
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2879986
Commit-Queue: Tim van der Lippe <tvanderlippe@chromium.org>
Reviewed-by: Jack Franklin <jacktfranklin@chromium.org>

2021-05-10 14:44:42 +00:00

BUILD.gn

Add test-suite-source-dir flag to new test runner

2021-03-18 11:19:17 +00:00

README.md

Move component_docs to ui/components/docs

2021-04-14 15:08:31 +00:00

server.js

Instrument code with Istanbul for interactions tests

2021-05-10 14:44:42 +00:00

README.md

Components dev server

This server serves up examples of the web components built within DevTools and provides a useful way to document various states of components.

For more background, see the initial proposal and design doc.

To add an example for your component:

Create front_end/ui/components/docs/DIR where DIR is the name of your component.
Within the new DIR, add HTML and TypeScript files. Each one of these is a standalone example. You should name the HTML file based on what it's documenting, e.g. basic.html or data-missing.html, and add a TypeScript file with the same name. The TypeScript file should contain all the code to import and run your component, and within the HTML file you can place any HTML or CSS you need (inline style tags are fine for examples) to render the component in the right context.
Create a BUILD.gn in your new DIR. This should contain the following code:

import("../../../scripts/build/ninja/copy.gni")
import("../../../third_party/typescript/typescript.gni")

ts_library("ts") {
  sources = [
    "basic.ts"
  ]

  deps = [
    # As an example: anything your TS code imports needs to be listed here as a dep.
    "../../ui/components/data_grid:bundle",
  ]
}

copy_to_gen("elements_breadcrumbs") {
  sources = [
    "basic.html",
    # list all other examples here
  ]

  deps = [
    ":ts"
  ]
}

Update front_end/ui/components/docs/BUILD.gn to add your new directory's BUILD.GN to the public_deps array.
Run npm run components-server to fire up a server on localhost:8090. You should now see your component listed and you can click on the link to view the examples.
Note: the server assumes your built target is Default. If not, run the server and pass the --target flag: npm run components-server -- --target=Release.