chore: add visual tests

.github/workflows/e2e-tests.yml

@@ -27,9 +27,14 @@ jobs:
       - name: Install pnpm
         uses: pnpm/action-setup@v4
 
-      - name: Cypress run
+      - name: Run E2E tests
         uses: cypress-io/github-action@v6
         with:
           install-command: pnpm install --frozen-lockfile
           start: pnpm start
           wait-on: 'http://[::1]:8080'
+
+      - name: Run Visual tests
+        uses: chromaui/action@v1
+        with:
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}

.gitignore

@@ -71,3 +71,4 @@ package/
 
 website/
 dist/
+/cypress/downloads/

README.md

@@ -53,6 +53,7 @@ Read in other languages: [English](packages/gerador-validador-cpf/README.en.md),
 ![Rollup](https://img.shields.io/badge/rollup-%231B1B1F?style=for-the-badge&logo=rollup.js)
 ![Jest](https://img.shields.io/badge/jest-%23C21325?style=for-the-badge&logo=jest)
 ![Cypress](https://img.shields.io/badge/cypress-%2369D3A7?style=for-the-badge&logo=cypress&logoColor=white)
+![Chromatic](https://img.shields.io/badge/chromatic-%23FFF?style=for-the-badge&logo=chromatic)
 ![Stryker](https://img.shields.io/badge/stryker-%23E74C3C?style=for-the-badge&logo=stryker&logoColor=white)
 
 ![EditorConfig](https://img.shields.io/badge/EditorConfig-%23E0EFEF.svg?style=for-the-badge&logo=editorconfig&logoColor=black)

cypress.config.ts

@@ -1,3 +1,4 @@
+import { installPlugin } from '@chromatic-com/cypress'
 import webpackPreprocessor from '@cypress/webpack-preprocessor'
 import { defineConfig } from 'cypress'
 
@@ -6,8 +7,9 @@ import webpackConfig from './webpack.config.prod.mjs'
 
 export default defineConfig({
   e2e: {
-    setupNodeEvents(on) {
+    setupNodeEvents(on, config) {
       // implement node event listeners here
+      installPlugin(on, config)
 
       on(
         'file:preprocessor',

cypress/support/e2e.ts

@@ -13,5 +13,8 @@
 // https://on.cypress.io/configuration
 // ***********************************************************
 
+// cypress/support/e2e.js
+import '@chromatic-com/cypress/support'
+
 // Import commands.js using ES2015 syntax:
 import './commands'

package.json

@@ -48,6 +48,7 @@
     "react-toastify": "^11.0.2"
   },
   "devDependencies": {
+    "@chromatic-com/cypress": "^0.9.1",
     "@commitlint/cli": "^19.6.1",
     "@commitlint/config-conventional": "^19.6.0",
     "@cypress/webpack-preprocessor": "^6.0.2",
@@ -70,6 +71,7 @@
     "@types/react-dom": "^19.0.2",
     "@types/react-syntax-highlighter": "^15.5.13",
     "@types/webpack-env": "^1.18.5",
+    "chromatic": "^11.25.1",
     "copy-webpack-plugin": "^12.0.2",
     "css-loader": "^6.11.0",
     "css-minimizer-webpack-plugin": "^7.0.0",