This repository contains the code as presented in the talk on EmberFest 2022 titled Automated Visual Testing in Ember. It contains a dummy Ember application which visualizes holidays of multiple users on a calendar. It serves as an example on how visual testing can be set up and made to run reliably.
Ember gives developers the power to write tests and be confident about deployments. But have you ever made a change that broke your application layout while still passing all tests? In this talk we’ll explore the world of visual testing to keep your app pixel perfect and have that peace of mind when deploying. By the end, you should be able to understand how visual testing works and how to set it up in a reliable way, even for applications with complex data structures and time dependent logic.
git clone <repository-url>
this repositorycd ember-automated-visual-testing
npm install
ember serve
- Visit your app at http://localhost:4200.
- Visit your tests at http://localhost:4200/tests.
Example response data can be adjusted in holidays.json.
First create a Percy project to view your rendered screenshots online. Then run the visual tests with the Percy token as environment variable.
PERCY_TOKEN=your-percy-token npm run test:visual
npm run lint
npm run lint:fix
ember build
(development)ember build --environment production
(production)