KoliBri - Visual Tests

Utilities for screenshot based regression testing of KoliBri themes.

!contributors

Motivation

The KoliBri Visual Tests provide a way to add visual regression testing to theme modules.
It takes screenshots of every component defined in the React Sample App with the theme applied and compares them to their references.

Installation

It is recommended to configure NPM via .npmrc:

``bash


- npm

engine-strict=true
save-exact=true

- pnpm

shamefully-hoist=true # this is required for the visual tests to work
workspace-concurrency=1
`

You can install the KoliBri Visual Tests with npm, pnpm or yarn:

`bash
npm i -D @public-ui/visual-tests
pnpm i -D @public-ui/visual-tests # recommended
yarn add -D @public-ui/visual-tests
`

Usage

Add the following npm scripts to the theme's package.json:

`json
{
"scripts": {
"test": "THEME_MODULE=src/index THEME_EXPORT=THEME_NAME kolibri-visual-test",
"test:update:e2e": "THEME_MODULE=src/index THEME_EXPORT=THEME_NAME kolibri-visual-test --update-snapshots=changed"
}
}
`

$3

- THEME_MODULE: Define the relative path to the TypeScript module containing the theme definitions. Without file extension.
- THEME_EXPERT: Define the name of the export within the module. (e.g., export const THEME_NAME = {/**/};) Defaults to default.
- KOLIBRI_VISUAL_TESTS_TIMEOUT: Define the Playwright test timeout.
- KOLIBRI_VISUAL_TESTS_EXPECT_TIMEOUT: Define the Playwright expect timeout.
- KOLIBRI_VISUAL_TESTS_COLOR_SCHEME: Choose the CSS color scheme for the browser context. Supported values are light (default) and dark.

Run the tests with npm test. The first time, this will create a new folder snapshots which is supposed to be committed to the repository.
In the following runs, new screenshots will be compared to this reference.

To update the reference screenshots call npm run test:update`.

For details on theming see the default theme README.