Chromatic is a Visual Regression Test Suit: It can be used to test UI changes in Storybook. take snapshots before and after pushing, and make a comparison automaticly
It lets them visually tests stories automatically and publish their Storybook for others to reference. QA can often feel like the world's longest game of "spot the difference"
// create new angular project
ng new Angular-Storybook-Chromatic-CDD
// Initialize Storybook in your project
npx sb init-
Angular App running: localhost:4200
-
StoryBook running: localhost:6006
-
Chromatic running: https://www.chromatic.com/start
-
Setup a new project in a Repo (I used gitHub) Then
Choose your Projectfrom Chromatic and select the repo: https://github.com/leolanese/Angular-Storybook-Chromatic-CDD
// Get the Chromatic package
npm install --save-dev chromatic
// Publish your Storybook (using your token provied by Chromatic)
npx chromatic --project-token=chpt_XXXXXXXXXXXXXXXXX
// No 'chromatic' script found in your package.json
// selection 'Y' to add in the package.json
// "chromatic": "npx chromatic --project-token=chpt_XXXXXXXXXXXXXXXXX"Now, you should see a new published Storybook
Now Click: Catch a UI change to Spot UI changes
// src/stories/Header.components
Let's make a simply change: `Welcome` with `TEST`
git add --all; git commit -m 'Modified Header for testing'; git push
// Run the test publish command again to upload your UI tweaks and have Chromatic catch your changes
yarn chromatic
- Consultation with the Team + Resolving and mergin!
We will add Chromatic to out Ci/CD pipeline to automaticly publish Storybook when push
// Add a chromatic script to your package.json and replace it with
"scripts": {
"chromatic": "chromatic --project-token CHROMATIC_PROJECT_TOKEN --exit-zero-on-changes"
}// .github/workflow/chromatic.yml
name: 'Chromatic'
on: push
jobs:
test:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v1
- run: yarn
- uses: chromaui/action@v1
with:
token: ${{ secrets.GITHUB_TOKEN }}
projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}To securely provide the projectToken to Chromatic, you must configure a GitHub repository secret. First, find your project on Chromatic.com and go to Manage and then Configure.
CHROMATIC_PROJECT_TOKEN + Project Token (provied by Chromatic)
Now, we should see the Action running in GitHub!
Click on left side bar
Reviewson Chromatic, and then Install Chromatic on GitHubthen click Create reviewthis will add a new step in the Ci/CD pipeline, assign reviewers, etc. Now, chromatic will handle the PR process
These needs to work with branching strategy
Now, lets share the UI with the team! (This helps your team review components online, see past versions, and get feedback on work in progress) using Chromatic
This project was generated with Angular CLI version 17.2.3.
Run ng serve for a dev server. Navigate to http://localhost:4200/. The application will automatically reload if you change any of the source files.
Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.
Run ng build to build the project. The build artifacts will be stored in the dist/ directory.
Run ng test to execute the unit tests via Karma.
Run ng e2e to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.
