KoliBri - Visual Tests

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.

It is recommended to configure NPM via .npmrc:

# - 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:

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

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

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

• 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.

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.