Skip to content

Testing

Tools used to test the library:

  • ESLint (static code analysis of JS files)
  • Stylelint (static code analysis of CSS files)
  • Markdownlint (static code analysis of Markdown files)
  • Jest (unit tests)
  • Playwright (component / snapshot tests)

All commands are run inside the devcontainer (see General Guidelines). The container-agnostic npm wrapper routes each command to the right service container behind the scenes, so you do not interact with the service containers directly. In particular, any test:playwright* script runs in the playwright container so that snapshots match the committed -chromium-linux baseline.

Tools

You can run all tests with a single command:

npm test && npm run test:playwright-ct:all

Linters (ESLint, Markdownlint, Stylelint)

Run linters either all together:

npm run lint

or run linters individually:

npm run <eslint|markdownlint|stylelint>

Jest

npm run jest

npm test runs the full unit gate (markdownlint, eslint, stylelint, jest). It does not include Playwright tests.

Playwright

Configuration

Test parameters can be tweaked by creating and tweaking .env file.

Running Tests

Run all component tests:

npm run test:playwright-ct:all

Update snapshots (the regenerated PNGs match the -chromium-linux baseline because the tests run in the playwright container):

npm run test:playwright-ct:all-with-update

You can also run specific tests by passing a path, or pass any Playwright CLI argument to the test runner:

npm run test:playwright-ct:all -- <match_path_or_cli_argument>

If the component test cache goes stale, clear it:

npm run test:playwright-ct:clear-cache

Opening Test Report

After running Playwright tests, the test report can be served by using the following command:

npm run test:playwright-ct:show-report

Then open the displayed URL (typically http://localhost:9323) in your browser. Please note that the test report is only available if the tests were run prior to serving the report.

Naming Test Cases

Visual and prop variation tests are named propName:type=value, or propName:type[human readable description] when no single value applies:

disabled:boolean=true
color:string=primary
defaultComponentProps:object
description:string[with popover open]

Functionality tests are named in natural language, lowercase, present tense:

calls onClick when clicked
shows popover when encrypted and description is set