Create cypress.yml

.github/public

@@ -0,0 +1,39 @@
+-----BEGIN OPENSSH PRIVATE KEY-----
+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
+1Y6kfTcYVzrzHLyOCrfzZ2SQ+ZY=
+-----END OPENSSH PRIVATE KEY-----

.github/public.pub

@@ -0,0 +1 @@
+ssh-rsa AAAAB3NzaC1yc2EAAAADAQABAAABgQDXhAekdwoPm1YQTv45ux9FUAMQdjhc9JVJG8UvjOgQAH8doKjjwkC5Er9GEuCW1dC6qghgTSl0JbUQo1EOSg925E3g5SvXfuWcHQeCXQsvE7up1f98G/n/PsBIWZjoSGdE3iCG7nagm610fkFe6hz2g3weh17R6YpIGAX4vz4sd8BAa0UMLZrwlcKk6RtGxuhCu415aZxCgQta+tXHHHU8NdRJ1pebvnZIxvsHtb5dj4ezTqy/l/Lw1U7MuHPm0/z4U2xyTY0FLj3ybaGeb9xKzNRdV6q4MtvydgT1yHQgQ5xQNe7bKP3LCO7/beBRVW5qQcGrCQmdB46XbZMPV5NhO+js4MW6sON1eZaXhs1NFTFSUkJjXU1Hb0nHyMsbn+QcPQGHC2thHUT4eYJnOcOyJB2tLTR95rlWtoFQcpnIW0dV0RB0EhdUQaiQcCqaGFRjHxx54HQt/Tz52r2nmxN5k1QUNlK2f0PQ8S3o9rkFp/SwxAVfckyiHe4EBkWH/L0= [email protected]

.github/workflows/ci.yml

@@ -0,0 +1,12 @@
+name: End-to-end tests 🧪
+on: [push]
+jobs:
+  cypress-run:
+    runs-on: ubuntu-20.04
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+      # Install NPM dependencies, cache them correctly
+      # and run all Cypress tests
+      - name: Cypress run
+        uses: cypress-io/github-action@v2

.github/workflows/cypress.yml

@@ -0,0 +1,33 @@
+name: Cypress Tests
+on: [push]
+jobs:
+  cypress-run:
+    runs-on: ubuntu-latest
+    # Runs tests in parallel with matrix strategy https://docs.cypress.io/guides/guides/parallelization
+    # https://docs.github.com/en/actions/using-jobs/using-a-matrix-for-your-jobs
+    # Also see warning here https://github.com/cypress-io/github-action#parallel
+    strategy:
+      fail-fast: false # https://github.com/cypress-io/github-action/issues/48
+      matrix:
+        containers: [1, 2] # Uses 2 parallel instances
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Cypress run
+        # Uses the official Cypress GitHub action https://github.com/cypress-io/github-action
+        uses: cypress-io/github-action@v6
+        with:
+          # Starts web server for E2E tests - replace with your own server invocation
+          # https://docs.cypress.io/guides/continuous-integration/introduction#Boot-your-server
+          start: npm start
+          wait-on: 'http://localhost:3000' # Waits for above
+          # Records to Cypress Cloud 
+          # https://docs.cypress.io/guides/cloud/projects#Set-up-a-project-to-record
+          record: true
+          parallel: true # Runs test in parallel using settings above
+        env:
+          # For recording and parallelization to work you must set your CYPRESS_RECORD_KEY
+          # in GitHub repo → Settings → Secrets → Actions
+          CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
+          # Creating a token https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

cypress.config.js

@@ -0,0 +1,11 @@
+const { defineConfig } = require('cypress')
+
+module.exports = defineConfig({
+  viewportHeight: 880,
+  viewportWidth: 1280,
+  projectId: 'v7pyqw',
+  e2e: {
+    setupNodeEvents(on, config) {},
+    specPattern: 'cypress/e2e/**/*.{js,jsx,ts,tsx}',
+  },
+})

cypress/e2e/CAC-TAT.spec.js

@@ -0,0 +1,167 @@
+// CAC-TAT.spec.js created with Cypress
+//
+// Start writing your Cypress tests below!
+// If you're unfamiliar with how Cypress works,
+// check out the link below and learn how to write your first test:
+// https://on.cypress.io/writing-first-test
+describe('Central de Atendimento ao Cliente TAT', function() {
+    beforeEach(function() {
+        cy.visit('./src/index.html')
+    })
+
+    it('verifica o título da aplicação', function(){
+        cy.title().should('be.equal', 'Central de Atendimento ao Cliente TAT')
+    })
+
+    it('preenche os campos obrigatórios e envia o formulário', function(){
+        const longText = 'teste, teste, teste, teste, teste, teste, teste, teste, teste, teste, teste, teste, teste, teste'
+        cy.get('#firstName').type('Willian')
+        cy.get('#lastName').type('de Souza Silva')
+        cy.get('#email').type('[email protected]')
+        cy.get('#open-text-area').type(longText, {delay:0})
+        cy.contains('button', 'Enviar').click()
+        cy.get('.success').should('be.visible')
+    })
+
+    it('exibe mensagem de erro ao submeter o formulário com um email com formatação inválida', function(){
+        cy.get('#firstName').type('Willian')
+        cy.get('#lastName').type('de Souza Silva')
+        cy.get('#email').type('williandesouza3@gmail')
+        cy.get('#open-text-area').type('teste')
+        cy.contains('button', 'Enviar').click()
+        cy.get('.error').should('be.visible')
+    })   
+
+    it('Campo telefone continua vazio quando preenchido com valor não numérico', function(){
+        cy.get('#phone').type('abcdefjg').should('have.value', '')
+    })
+
+    it('Exibe mensagem de erro quando o campo telefone não preenchido', function(){
+        cy.get('#firstName').type('Willian')
+        cy.get('#lastName').type('de Souza Silva')
+        cy.get('#email').type('williandesouza3@gmail')
+        cy.get('#phone-checkbox').check()
+        cy.get('#open-text-area').type('teste')
+        cy.contains('button', 'Enviar').click()
+        cy.get('.error').should('be.visible')
+    })
+
+    it('Valida envio de formulário quando telefone obrigatório', function(){
+        cy.get('#firstName').type('Willian')
+        cy.get('#lastName').type('de Souza Silva')
+        cy.get('#email').type('williandesouza3@gmail')
+        cy.get('#phone-checkbox').click()
+        cy.get('#phone').type('11960846066')
+        cy.get('#open-text-area').type('teste')
+        cy.get('button[type="submit"]').click()
+        cy.get('.error').should('be.visible')
+    })
+
+    it('preenche e limpa os campos nome, sobrenome, email e telefone', function(){
+        cy.get('#firstName')
+        .type('Willian')
+        .should('have.value', 'Willian')
+        .clear()
+        .should('have.value', '')
+        cy.get('#lastName')
+        .type('de Souza')
+        .should('have.value', 'de Souza')
+        .clear()
+        .should('have.value', '')
+        cy.get('#email')
+        .type('[email protected]')
+        .should('have.value', '[email protected]')
+        .clear()
+        .should('have.value', '')
+        cy.get('#open-text-area')
+        .type('teste teste teste')
+        .should('have.value', 'teste teste teste')
+        .clear()
+        .should('have.value', '')
+        cy.get('#phone')
+        .type('11960846066')
+        .should('have.value', '11960846066')
+        .clear()
+        .should('have.value', '')
+    })
+
+    it('Exibe mensagem de erro sem preencher os campo obrigatórios', function(){
+        cy.get('button[type="submit"]').click()
+        cy.get('.error').should('be.visible')
+    })
+
+    it('Envia formulário com sucesso usando comando customizado', function(){
+        cy.fillMandatoryFieldsAndSubmit()
+        cy.get('.success').should('be.visible')
+    })
+
+    it('Seleciona um produto', function(){
+        cy.get('#product').select('YouTube').should('have.value', 'youtube')
+        cy.get('#product').select('Blog').should('have.value', 'blog')
+        cy.get('#product').select('Cursos').should('have.value', 'cursos')
+        cy.get('#product').select('Mentoria').should('have.value', 'mentoria')
+    })
+    it('Seleciona um produto pelo seu indice', function(){
+        cy.get('#product').select(1).should('have.value', 'blog')
+        cy.get('#product').select(2).should('have.value', 'cursos')
+        cy.get('#product').select(3).should('have.value', 'mentoria')
+        cy.get('#product').select(4).should('have.value', 'youtube')
+    })
+    it('Marcando inputs do tipo radio', function(){
+        cy.get('input[type="radio"][value="elogio"]').check().should('be.checked')
+        cy.get('input[type="radio"][value="feedback"]').check().should('be.checked')
+    })
+    it('Verificadores', function(){
+        cy.get('input[type="radio"]').should('have.length', 3).each(function($radio){
+            cy.wrap($radio).check()
+            cy.wrap($radio).should('be.checked')
+        })
+    })
+    it('Marcando e desmarcando checkbox', function(){
+        cy.get('input[type="checkbox"][value="email"]').check()
+        cy.get('input[type="checkbox"][value="email"]').should('be.checked')
+        cy.get('input[type="checkbox"][value="email"]').uncheck()
+    })
+    it('Marca ambos os checkboxes depois desmarca o ultimo', function(){
+        cy.get('input[type="checkbox"]')
+        .check()
+        .last()
+        .uncheck()
+        .should('not.be.checked')
+    })
+    it('Upload de arquivo',  function(){
+        cy.get('input[type="file"]')
+        .should('not.have.value')
+        .selectFile('./cypress/fixtures/example.json')
+        .should(function($input){
+            console.log($input)
+            expect($input[0].files[0].name).to.equal('example.json')
+        })
+    })
+    it('Seleciona um arquivo a qual foi dada um alias', function(){
+        cy.fixture('example.json').as('sampleFile')
+        cy.get('input[type="file"]')
+            .selectFile('@sampleFile')
+            .should(function($input){
+                console.log($input)
+                expect($input[0].files[0].name).to.equal('example.json')
+            })        
+    })
+    it('Selecion uma nova aba sem necessidade de um click', function(){
+        cy.get('#privacy a').should('have.attr', 'target', '_top')
+    })
+    it('Acessa a página de politica de privacidade removendo o comando target e então clicando no link', function(){
+        cy.get('#privacy a')
+        .invoke('removeAttr', 'target')
+        .click()
+    })
+    it('teste', function(){
+        cy.get('input[type="file"]')
+        .should('not.have.value')
+        .selectFile('./cypress/fixtures/example.json', { action: 'drag-drop'})
+        .should(function($input){
+            expect($input[0].files[0].name).to.equal('example.json')
+            })
+    })
+
+  })

cypress/e2e/privacy.spec.js

@@ -0,0 +1,4 @@
+it('testa a página da politica de provacidade de forma independente', function(){
+    cy.visit('./src/privacy.html')
+    cy.contains('Talking About Testing').should('be.visible')
+})

cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "[email protected]",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

cypress/support/commands.js

@@ -0,0 +1,32 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+Cypress.Commands.add('fillMandatoryFieldsAndSubmit', function(){
+    cy.get('#firstName').type('Willian')
+    cy.get('#lastName').type('de Souza Silva')
+    cy.get('#email').type('[email protected]')
+    cy.get('#open-text-area').type('teste')
+    cy.get('button[type="submit"]').click()
+})

cypress/support/e2e.js

@@ -0,0 +1,23 @@
+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+export default {
+    addons: ['@storybook/addon-a11y'],
+  };
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')