Visual Tests

Using visual tests we could observe what changes are made when fixing bugs or adding styles. To guard against regressions and make pull request reviews easier, the CI build automatically creates screenshots of the sample pages in packages/html/src/[component]/tests/*.html for all feature branches. The sample pages contain static HTML that is the recommended rendering for components that use the theme.

Work with visual tests while developing themes

1. In the root themes folder, run npm run sass (or `npm run dart) to build all themes.
2. In the root themes folder, run npm run start to start the dev server and follow the serving URL.
3. To make changes in the components code, open /packages/{themeName}/scss/{component}. Then run npm run sass to build all themes and refresh the browser.
4. To make changes in the visual tests source, open /packages/html/src/{componentName}/tests/, edit it, save and refresh the browser.
5. To visualise your changes only in a particular theme, add a query parameter to the serving URL as follows: /packages/html/src/{componentName}/tests/{test-name}.html/?theme={themeName}.

To generate screenshots for a specific theme

1. Build the theme with npm run sass or npm run dart.
2. Run npm run create-screenshots <theme>, substituting with a theme name. These steps will create new screenshots in tests/_output. Note that due to platform differences, all of the files will be marked as changed.