-
Notifications
You must be signed in to change notification settings - Fork 56
Visual Testing
The component test framework loads only core.scss and individual component .scss files. The HTML created here will be used on the documentation site.
- Run
npm run start:playground - Go to
localhost:3030
To get started add a new directory matching the component block with an index.njk file inside.
templates/
card/
index.njk
The index file should minimally contain the following template:
{% extends "layout.njk" %}
{% block content %}
//HTML goes here
{% endblock %}
Then view component at localhost:3030/BLOCK_NAME, e.g., localhost:3030/tile.
Additionally, create a macro and generate the HTML based on a data object.
Full pages can be built in the pages directory, served by the file name key, e.g., /pages/starter.
Start at localhost:3030/pages
This area is to test compositions of components with layout and base UI elements.
If you need to visually test a component, follow these simple steps.
- Type
npm run start:playground - Go to localhost:3030 to find the components you are testing
A visual testing framework is available for automated testing. The framework examines screenshots of individual components against expected screenshots, and the associated test will fail where visual differences occur.
- Docker must be installed on the host machine. Docker is used to ensure consistent screenshot comparisons when run locally on different platforms, and when run as part of a CI build.
From the root of the project, execute npm run test. This will compare components that have screenshots defined against those in your current build. After the build runs, a browser should launch detailing the test results.
If you have visually changed a component and are happy that the changes are as desired, you need to run the following command to update the reference screenshots: npm run test:update.
- Note: You will need to commit the updated reference screenshots as part of your PR
To add new components, simply run npm run test:update. Reference images will automatically be added of any new examples added to the playground.
The automation is using BackstopJS as the test framework. For details on how to add new tests please see https://github.com/garris/BackstopJS.
For more details see: Development Guidelines