Skip to content

Commit

Permalink
chore: add visual tests
Browse files Browse the repository at this point in the history
  • Loading branch information
tiagoporto committed Jan 23, 2025
1 parent 292e136 commit 403ca3b
Show file tree
Hide file tree
Showing 10 changed files with 1,393 additions and 103 deletions.
49 changes: 48 additions & 1 deletion .github/workflows/e2e-tests.yml
Original file line number Diff line number Diff line change
Expand Up @@ -27,9 +27,56 @@ jobs:
- name: Install pnpm
uses: pnpm/action-setup@v4

- name: Cypress run
- name: Run E2E tests
uses: cypress-io/github-action@v6
env:
ELECTRON_EXTRA_LAUNCH_ARGS: '--remote-debugging-port=9222'
with:
install-command: pnpm install --frozen-lockfile
start: pnpm start
wait-on: 'http://[::1]:8080'

- name: Upload test results
uses: actions/upload-artifact@v4
with:
name: test-results
path: ./cypress/downloads
retention-days: 30

visual_tests:
runs-on: ubuntu-latest
needs: [e2e_tests]

steps:
- name: Checkout
uses: actions/checkout@v4
with:
fetch-depth: 0

- name: Install pnpm
uses: pnpm/action-setup@v4

- name: Setup node
uses: actions/setup-node@v4
with:
node-version-file: '.nvmrc'
cache: 'pnpm'

- name: Install Dependencies
run: pnpm install --frozen-lockfile --ignore-scripts

- name: Download Cypress test results
uses: actions/download-artifact@v4
with:
name: test-results
path: ./cypress/downloads

- name: Run Visual tests
uses: chromaui/action@v1
env:
CHROMATIC_ARCHIVE_LOCATION: ./cypress/downloads
with:
cypress: true
projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
skip: 'dependabot/**'
exitZeroOnChanges: false
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -71,3 +71,4 @@ package/

website/
dist/
/cypress/downloads/
1 change: 1 addition & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
4 changes: 3 additions & 1 deletion cypress.config.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { installPlugin } from '@chromatic-com/cypress'
import webpackPreprocessor from '@cypress/webpack-preprocessor'
import { defineConfig } from 'cypress'

Expand All @@ -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',
Expand Down
49 changes: 33 additions & 16 deletions cypress/e2e/generate.spec.ts
Original file line number Diff line number Diff line change
@@ -1,23 +1,40 @@
import { elements } from './helpers/elements'
import { validate as validadeCpf } from '../../packages/gerador-validador-cpf'

describe('generate', async () => {
it('should generate only valid cpfs', () => {
cy.visit('/')
const generateCpf = () => {
cy.visit('/')

cy.get(elements.inputGenerateCpf)
.invoke('val')
.should(($cpf) => {
// @ts-expect-error: Accepts string
expect(validadeCpf($cpf)).to.equal(true)
})

cy.get(elements.inputGenerateCpf)
.invoke('val')
.should(($cpf) => {
// @ts-expect-error: Accepts string
expect(validadeCpf($cpf)).to.equal(true)
})
cy.get(elements.generateCpfButton).click()
cy.get(elements.inputGenerateCpf)
.invoke('val')
.should(($cpf) => {
// @ts-expect-error: Accepts string
expect(validadeCpf($cpf)).to.equal(true)
})
}

cy.get(elements.generateCpfButton).click()
cy.get(elements.inputGenerateCpf)
.invoke('val')
.should(($cpf) => {
// @ts-expect-error: Accepts string
expect(validadeCpf($cpf)).to.equal(true)
})
describe('generate (desktop)', () => {
it('should generate only valid cpfs', () => {
generateCpf()
})
})

describe(
'generate (mobile)',
{
viewportHeight: 1000,
viewportWidth: 400,
},
() => {
it('should generate only valid cpfs', () => {
generateCpf()
})
},
)
126 changes: 80 additions & 46 deletions cypress/e2e/validate.spec.ts
Original file line number Diff line number Diff line change
@@ -1,57 +1,91 @@
import { elements } from './helpers/elements'

describe('validate', () => {
it('inserting a cpf missing digits should return a incomplete message', () => {
cy.visit('/')
cy.get(elements.validateMessage).should('have.text', '...')

cy.get(elements.enLocaleButton).click()
cy.get(elements.inputValidateCpf).type('137.686.36-63')
cy.get(elements.validateMessage).should('have.text', 'incomplete')

cy.get(elements.ptLocaleButton).click()
cy.get(elements.inputValidateCpf).clear()
cy.get(elements.inputValidateCpf).type('50.016.460-88')
cy.get(elements.validateMessage).should('have.text', 'incompleto')

cy.get(elements.esLocaleButton).click()
cy.get(elements.inputValidateCpf).clear()
cy.get(elements.inputValidateCpf).type('740846005')
cy.get(elements.validateMessage).should('have.text', 'incompleto')
})
const incompleteCpf = () => {
cy.visit('/')
cy.get(elements.validateMessage).should('have.text', '...')

it('inserting a valid CPF should return a valid message', () => {
cy.visit('/')
cy.get(elements.enLocaleButton).click()
cy.get(elements.inputValidateCpf).type('137.686.36-63')
cy.get(elements.validateMessage).should('have.text', 'incomplete')

cy.get(elements.enLocaleButton).click()
cy.get(elements.inputValidateCpf).type('137.686.636-63')
cy.get(elements.validateMessage).should('have.text', 'Valid CPF')
cy.get(elements.ptLocaleButton).click()
cy.get(elements.inputValidateCpf).clear()
cy.get(elements.inputValidateCpf).type('50.016.460-88')
cy.get(elements.validateMessage).should('have.text', 'incompleto')

cy.get(elements.ptLocaleButton).click()
cy.get(elements.inputValidateCpf).clear()
cy.get(elements.inputValidateCpf).type('506.016.460-88')
cy.get(elements.validateMessage).should('have.text', 'CPF Válido')
cy.get(elements.esLocaleButton).click()
cy.get(elements.inputValidateCpf).clear()
cy.get(elements.inputValidateCpf).type('740846005')
cy.get(elements.validateMessage).should('have.text', 'incompleto')
}

cy.get(elements.esLocaleButton).click()
cy.get(elements.inputValidateCpf).clear()
cy.get(elements.inputValidateCpf).type('74082746005')
cy.get(elements.validateMessage).should('have.text', 'CPF Válido')
})
it('inserting a invalid CPF should return a invalid message', () => {
cy.visit('/')
const validCpf = () => {
cy.visit('/')

cy.get(elements.enLocaleButton).click()
cy.get(elements.inputValidateCpf).type('137.686.636-63')
cy.get(elements.validateMessage).should('have.text', 'Valid CPF')

cy.get(elements.ptLocaleButton).click()
cy.get(elements.inputValidateCpf).clear()
cy.get(elements.inputValidateCpf).type('506.016.460-88')
cy.get(elements.validateMessage).should('have.text', 'CPF Válido')

cy.get(elements.esLocaleButton).click()
cy.get(elements.inputValidateCpf).clear()
cy.get(elements.inputValidateCpf).type('74082746005')
cy.get(elements.validateMessage).should('have.text', 'CPF Válido')
}

const invalidCpf = () => {
cy.visit('/')

cy.get(elements.enLocaleButton).click()
cy.get(elements.inputValidateCpf).type('137.986.656-63')
cy.get(elements.validateMessage).should('have.text', 'Invalid CPF')

cy.get(elements.enLocaleButton).click()
cy.get(elements.inputValidateCpf).type('137.986.656-63')
cy.get(elements.validateMessage).should('have.text', 'Invalid CPF')
cy.get(elements.ptLocaleButton).click()
cy.get(elements.inputValidateCpf).clear()
cy.get(elements.inputValidateCpf).type('11111111111')
cy.get(elements.validateMessage).should('have.text', 'CPF Inválido')

cy.get(elements.ptLocaleButton).click()
cy.get(elements.inputValidateCpf).clear()
cy.get(elements.inputValidateCpf).type('11111111111')
cy.get(elements.validateMessage).should('have.text', 'CPF Inválido')
cy.get(elements.esLocaleButton).click()
cy.get(elements.inputValidateCpf).clear()
cy.get(elements.inputValidateCpf).type('96783567825')
cy.get(elements.validateMessage).should('have.text', 'CPF no válido')
}

cy.get(elements.esLocaleButton).click()
cy.get(elements.inputValidateCpf).clear()
cy.get(elements.inputValidateCpf).type('96783567825')
cy.get(elements.validateMessage).should('have.text', 'CPF no válido')
describe('validate (desktop)', () => {
it('inserting a cpf missing digits should return a incomplete message', () => {
incompleteCpf()
})

it('inserting a valid CPF should return a valid message', () => {
validCpf()
})

it('inserting a invalid CPF should return a invalid message', () => {
invalidCpf()
})
})

describe(
'validate (mobile)',
{
viewportHeight: 1000,
viewportWidth: 400,
},
() => {
it('inserting a cpf missing digits should return a incomplete message', () => {
incompleteCpf()
})

it('inserting a valid CPF should return a valid message', () => {
validCpf()
})

it('inserting a invalid CPF should return a invalid message', () => {
invalidCpf()
})
},
)
3 changes: 3 additions & 0 deletions cypress/support/e2e.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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'
4 changes: 3 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
"test:watch": "npm test -- --watch",
"test:package": "jest --config jest.config.package.mjs",
"test:mutation": "stryker run",
"test:e2e": "start-server-and-test start http-get://localhost:8080 'cypress run --e2e'",
"test:e2e": "ELECTRON_EXTRA_LAUNCH_ARGS=--remote-debugging-port=9222 start-server-and-test start http-get://localhost:8080 'cypress run --e2e'",
"test:e2e:dev": "start-server-and-test start http-get://localhost:8080 'cypress open --e2e'"
},
"dependencies": {
Expand All @@ -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",
Expand All @@ -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",
Expand Down
Loading

0 comments on commit 403ca3b

Please sign in to comment.