4 Steps to Visual Regression Testing

Now with a one-line command you can capture screenshot images of all components in test/render.

If you have any problems with routine-design, be sure to file bugs in the GitHub repository.

Testing ScreenshotsYou can use the Mocha test framework to write individual tests for each component directory.

Install mocha as a developer dependencynpm install –save-dev mochaCreate a new test/render.

test.

js file, where you will write your Mocha tests.

const RoutineDesign = require('routine-design');const assert = require('assert');describe('render', function() { const routineDesign = new RoutineDesign(); //TODO fill me in with code});Mocha lets you run specify code to run before all tests have run.

Tell Mocha that you want create a RoutineDesignContainer.

Also tell RoutineDesignContainer to start a Web server that renders individual components in the test/render directory.

This way, the Web server will already be running on the docker container before you take any screenshots.

let routineDesignContainer;before(async function() {const localStorage = routineDesign.

getLocalStorage(); routineDesignContainer = await localStorage.

createRoutineDesignContainer(); await routineDesignContainer.

start(); await routineDesignContainer.

run('routine-design render .

/test/render', true);});Mocha also lets you specify code to run after all tests have run, so make sure you clean up the docker container.

after(async function() { await routineDesignContainer.

cleanup();});Use the ComponentTree API to easily scrape over test/render directory.

For each directory, tell RoutineDesignContainer to pixel validate the directory.

This is a routine-design CLI command for diffing local React/Sass code against screenshots captured in image.

json.

The CLI command returns a JSON object, with allPass and debugId.

AllPass is true when all the local screenshots match their image in image.

json.

DebugId represents a Google Cloud directory with debug images.

Assert that allPass, and include an error message with a URL to the Google Cloud directory.

const directories = routineDesign.

createRoutineDesignTree('.

/test/render').

getComponentTree().

getDirectories();for (let entry of directories) { const componentDirectoryId = entry[0]; it(componentDirectoryId, async function() { const dockerCommand = 'routine-design directory pixel-validate project-id my-app-screenshots .

/test/render –component-directory='+componentDirectoryId; const jsonStr = await routineDesignContainer.

run(dockerCommand); const json = JSON.

parse(jsonStr); let gcpUrl = "https://console.

cloud.

google.

com/storage/browser/my-app-screenshots/"; if (componentDirectoryId != '') { gcpUrl += componentDirectoryId+"/"; } gcpUrl += json.

debugId+"/?project=project-id"; assert(json.

allPass, gcpUrl); });}Update your package.

json with a new test command"scripts": { "test": "mocha –timeout 60000 test/render.

test.

js", // other scripts},Now run npm test.

You should see the Mocha logging to the console that all your tests passed.

Congratulations!.You’ve just written a test suite for asserting local React/Sass code matches the images captured in image.

json!.Now with a one-line command you can test screenshot images of all components in test/render.

Continuous IntegrationTake a moment to push your code to a GitHub repository.

Next you’re going to be working with TravisCI, which is a Continuous Integration service that easily syncs with GitHub.

TravisCI can run docker.

Sign up for TravisCI (it is free).

Go to https://travis-ci.

org/account/repositories and make sure your GitHub repository is enabled in TravisCI.

Go to your repository in Travis CI.

Click More options > Settings.

Add a ROUTINE_DESIGN_GOOGLE_CREDS Environment Variable.

You can use this command echo $ROUTINE_DESIGN_GOOGLE_CREDS to print out the value.

Copy that value into the TravisCI form, quoting it with single quotes.

TraviCI Settings page, Environment Variables sectionReturn to your developer environment and make sure you have the master branch checked out.

Do a git pull to pull the latest code.

Create a new branch called infra/travis-cigit checkout -b infra/travis-ciYou only need to create a single file to set up TravisCI.

Create a new .

travis.

yml file that specifies your project is a NodeJs project.

It also enable the docker servicelanguage: node_jsnode_js: – "11"services: – dockergit add .

thengit commit -m “infra: set up TravisCI”git push –set-upstream origin infra/travis-ciThis will push a new Git branch to GitHub.

From GitHub, you should see a notification to create a new PR from the infra/travis-ci branch.

Create that PR.

From TravisCI, you should see a build kicked off for the infra/travis-ci commit.

Follow along in the logs to see TravisCI run the same npm install and npm test commands you ran locally.

You should see the Mocha tests successfully pass, along with the TravisCI job.

In GitHub, navigate to the Branches page, under Settings, for your repository.

Add a branch protection rule for the master branch.

The rule should require that the branch is up to date and status checks pass.

Check the continuous-integration/travis-ci status check.

GitHub branch settings page will status checks enabledBack in the PR you created, you should see that all checks have passed!GitHub showing all checks have passedNow you can confidently “Squash and merge” this PR into the master branch.

Now all future PRs will make sure npm test passes, before giving the PR reviewer the green light.

Lets test that CI can actually fail.

Return to your developer environment and checkout the latest version of master.

Create a new branch called experimental/black-logogit checkout -b experimental/black-logoOpen src/logo/logo.

svg and change the #61DAFB color to #000000.

If you run npm start you will see a black logo.

If you run npm run render and open localhost:8080/#/logo you will also see a black logo.

git add .

and thengit commit -m “experimental: black logo”git push –set-upstream origin experimental/black-logoAgain, from GitHub, you should see a notification to create a new PR from the experimental/black-logo branch.

Create that PR.

Inside the PR you will find a notification of the running TravisCI job.

Click on “Details”TravisCI pending job notificationFollow along in the logs of that job.

You should see the tests fail.

The tests fail because the local React/Sass code does not match the images stored in image.

json.

Mocha logs error messages for every failed test.

The error messages should contain a URL to a Google Cloud directory.

Console log of Mocha testOpen the Google Cloud URL.

You should see subdirectories for each screenshot image that failed within the directory.

Each subdirectory has a new.

png and a diff.

png.

New.

png is the screenshot of the React/Sass code in the PR.

Diff.

png is the diff between new.

png and the image saved in image.

json.

Congratulations!.You’ve collected debug information from a failed CI job.

There’s one convenient Google Cloud URL for each failed test.

If you return back to the GitHub PR, you should see the status checks fail.

So more congratulations!.You’ve given your PR reviewer a safety net against visual regressions.

GitHub showing all checks have failedScreenshot ReviewLets say we actually want to merge this black logo PR.

Return to your developer environment, on the experimental/black-logo branch.

Run npm run capture.

Remember, this process can take 45 seconds, so be patient.

Once it is finished, run git status to see which files have changed.

You should see modifications to test/render/image.

json and test/render/logo/image.

json.

Remember you can open the image URLs in the image.

json files to see the new versions of the screenshot images.

You should see images with black logos.

git add .

and thengit commit -m “capture screenshot images”Then git push.

From GitHub PR you should see a link to a new running TravisCI job.

Follow along in the logs of that job.

You should see the tests pass!If you return back to the GitHub PR, you should see the status checks pass.

Before you merge this PR, lets review it.

Click on the “Files changed” tab.

This tab shows diffs between the files on the master branch, and the files on the experimental/black-logo branch.

You should see the diffs for both test/render/image.

json and test/render/logo/image.

json.

Image.

json has URLs you can easily open to look at the differences between master and experimental/black-logo.

GitHub showing diff in image.

jsonLook at you!.You’re reviewing visual diffs before approving a PR.

If the images on experimental/black-logo branch look good compared to the images on the master branch, then merge the PR!.. More details

Leave a Reply