diff --git a/docs/guidelines/visual-regression-testing.njk b/docs/guidelines/visual-regression-testing.njk new file mode 100644 index 0000000000000000000000000000000000000000..507501724532d7a558a3239e81e57f400a8c7fe1 --- /dev/null +++ b/docs/guidelines/visual-regression-testing.njk @@ -0,0 +1,29 @@ +--- +title: Visual Regression Testing +order: 105 +--- + +To be confident that we can ammend components code if needed without breaking anything we need to test against the agreed look and interaction(s) of a component. + + + +We are making use of [BackStopJS](https://github.com/garris/BackstopJS) to do this. We store the reference 'truth' on github inside the component library monorepo [vf-core](https://github.com/visual-framework/vf-core). We run this locally on our machines before pushing to the remomte repository to create a PR. + + + +## To get this working: + + + +First, make sure you have the latest `develop` branch and have `npm install`ed so everything is in place. When you get to a point in your code where you want to create a PR you will need to test your changes against the Visual Regressiong Testing (VRT) reference images. + + +## To do this: + + +1. Run `gulp frctlVRT` to create an updated static build of the component library. +2. Run `gulp vizres-test` to start the test. + +When the test is complete it will open your default browser and display the results. + +It currently fails comparisons that have a 1.0% or more difference.