feat: Documentação e testes com Cypress

.gitignore

@@ -1,27 +1,30 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-
-# testing
-/coverage
-
-# production
-/build
-
-# misc
-.DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-
-# contract testing
-logs/
-pacts/
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# contract testing
+logs/
+pacts/
+
+# log video cypress
+cypress-ui.log

CNAME

@@ -1 +1 @@
-serverest.netlify.app
+serverest.netlify.app

cypress.config.ts

@@ -0,0 +1,9 @@
+import { defineConfig } from "cypress";
+
+export default defineConfig({
+  e2e: {
+    setupNodeEvents(on, config) {
+      // implement node event listeners here
+    },
+  },
+});

cypress/e2e/login.spec.cy.ts

@@ -0,0 +1,70 @@
+describe('login spec', () => {
+   const baseUrl = 'https://front.serverest.dev/login'
+
+  // Cenário 1: Login válido
+  it('Deve logar com sucesso', () => {
+    cy.visit(baseUrl) // Navegar para a página de login
+    cy.get('input[name=email]').type('[email protected]') // Digitar email válido
+    cy.get('input[name=password]').type('1234') // Digitar senha válida
+    cy.get('button[type=submit]').click() // Clicar no botão de login
+
+    // Validar redirecionamento para a URL esperada
+    cy.url().should('include', '/admin/home') // Verifica se a URL contém '/admin/home'
+  })
+
+  // Cenário 2: Login com e-mail não registrado
+  it('Exibe erro para email não registrado', () => {
+    cy.visit(baseUrl)
+    cy.get('input[name=email]').type('[email protected]')
+    cy.get('input[name=password]').type('teste')
+    cy.get('button[type=submit]').click()
+    cy.contains('Email e/ou senha inválidos').should('be.visible') // Validação
+  })
+
+  // Cenário 3: Login com e-mail válido e senha inválida
+  it('Exibe erro para senha inválida', () => {
+    cy.visit(baseUrl)
+    cy.get('input[name=email]').type('[email protected]')
+    cy.get('input[name=password]').type('senhaerrada')
+    cy.get('button[type=submit]').click()
+    cy.contains('Email e/ou senha inválidos').should('be.visible') // Validação
+  })
+
+  // Cenário 4: Login com todos os campos em branco
+  it('Exibe erro para campos em branco', () => {
+    cy.visit(baseUrl) // Navegar para a página de login
+    cy.get('button[type=submit]').click() // Clicar no botão de login sem preencher os campos
+
+    // Validar mensagens de erro exibidas
+    cy.get('.form > :nth-child(3)').should('contain', 'Email é obrigatório') // Mensagem correta para o email
+    cy.get(':nth-child(4) > :nth-child(2)').should('contain', 'Password é obrigatório') // Mensagem correta para a senha
+  })
+
+  // Cenário 5: Login com senha em branco
+  it('Exibe erro para senha em branco', () => {
+    cy.visit(baseUrl) // Navegar para a página de login
+    cy.get('input[name=email]').type('[email protected]') // Digitar email válido
+    cy.get('button[type=submit]').click() // Clicar no botão de login sem preencher a senha
+
+    // Validar mensagem de erro exibida para senha em branco
+    cy.get('.alert > :nth-child(2)').should('contain', 'Password é obrigatório') // Mensagem correta
+  })
+
+  // Cenário 6: Acessar página de cadastro pelo botão "Cadastre-se"
+  it('Redireciona para página de cadastro', () => {
+    cy.visit(baseUrl) // Navegar para a página de login
+
+    // Clicar no botão "Cadastre-se" usando o data-testid correto
+    cy.get('[data-testid="cadastrar"]').click()
+
+    // Validar redirecionamento para a URL de cadastro
+    cy.url().should('include', '/cadastrarusuarios')
+
+    // Validar presença dos campos e elementos na página de cadastro
+    cy.get('[data-testid="nome"]').should('exist') // Campo "Nome"
+    cy.get('[data-testid="email"]').should('exist') // Campo "Email"
+    cy.get('[data-testid="password"]').should('exist') // Campo "Senha"
+    cy.get('.form-check-label').should('contain', 'Cadastrar como administrador?') // Texto de checkbox
+    cy.get('[data-testid="cadastrar"]').should('exist') // Botão "Cadastrar"
+  })
+})

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.ts

@@ -0,0 +1,37 @@
+/// <reference types="cypress" />
+// ***********************************************
+// This example commands.ts 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) => { ... })
+//
+// declare global {
+//   namespace Cypress {
+//     interface Chainable {
+//       login(email: string, password: string): Chainable<void>
+//       drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
+//     }
+//   }
+// }

cypress/support/e2e.ts

@@ -0,0 +1,17 @@
+// ***********************************************************
+// This example support/e2e.ts 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'