Visual Testing [Deprecated]

Components

• Run npm run storybook
• Go to http://localhost:6600

Testing

If you need to visually test a component, follow these simple steps.

Testing a feature branch

• Type npm run storybook
• Go to localhost:6600 to find the components you are testing

Automated Visual 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.

Prerequisites

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

Executing Automated Tests

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.

Updating Automated Tests

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

Adding New Components to the Automation Framework

To add new components, simply run npm run test:update. Reference images will automatically be added of any new examples added to the playground.

For more details see: Development Guidelines