feat: Documentação e testes com Cypress

[spencerarq]

Contribuições deste Fork

Confirme solicitado por @PauloGoncalvesBH
Este documento detalha as automações realizadas no projeto ServeRest, neste fork.

Automação com Cypress

Foram desenvolvidos testes automatizados utilizando Cypress para validar os seguintes cenários:

1. Login válido: Valida o fluxo correto de login com credenciais válidas.
2. Exibe erro para e-mail não registrado: Verifica se é exibida a mensagem de erro ao tentar logar com um e-mail inexistente.
3. Exibe erro para senha inválida: Certifica-se de que uma mensagem de erro aparece ao informar uma senha incorreta.
4. Exibe erro para campos em branco: Garante que os campos obrigatórios não preenchidos acionem mensagens de erro.
5. Exibe erro para senha em branco: Testa especificamente o erro exibido quando a senha não é informada.
6. Cadastrar Usuário: Confirma que o link de redirecionamento funciona corretamente para levar o usuário à página de cadastro.

Métricas Alcançadas
• Tempo de execução: 17 segundos para a execução dos 6 cenários de teste automatizados.
• Resultados: 100% dos testes aprovados em menos de 20 segundos.
• Testes Manuais: 2 minutos e 15 segundos para a execução dos 6 cenários de teste.
• Redução de tempo: 87,5% de redução no tempo de execução entre testes manuais e automatizados.

Execução dos Testes Automatizados
Para garantir que os testes automatizados sejam executados corretamente, siga os seguintes passos:

1. Executar os testes com Cypress
   Existem duas opções para rodar os testes:
   • Modo interface gráfica
   o npx cypress open
   • Modo headless (sem interface gráfica)
   o npx cypress run

2. Encerramento dos testes
   • Se estiver rodando no modo headless, o processo será encerrado automaticamente ao final dos testes.
   • Se estiver rodando no modo interface gráfica, feche a janela do Cypress ou pressione Ctrl + C no terminal para interromper a execução.

Confirme solicitado por @PauloGoncalvesBH

[Copilot]

Pull Request Overview

This PR adds documentation and end-to-end tests using Cypress while refactoring several React components to functional components and updating route imports.

• Refactored ProductDetails to improve image validation and separate presentation logic.
• Converted CartButton and AddToCartButton from class-based to functional components with PropTypes updates.
• Added Cypress configuration, custom commands, and comprehensive login flow tests.

Reviewed Changes

Copilot reviewed 12 out of 14 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
src/views/client/productDetail.js	Refactored component structure and improved image validation logic.
src/component/cartButton.js	Converted to a functional component with PropTypes and ES6 improvements.
src/component/AddToCartButton.js	Converted to functional component and fixed minor formatting issues.
src/App.js	Updated import path and simplified passing of props on the ProductDetails route.
cypress/**	Added Cypress config, support files, and comprehensive login end-to-end tests.

Files not reviewed (2)

• cypress/fixtures/example.json: Language not supported
• package.json: Language not supported

[Copilot]

[nitpick] Consider using the JSX spread operator (i.e. <ProductDetails {...props} />) to pass all props instead of listing them explicitly, which would simplify the code.

Suggested change

	<Route path="/detalhesProduto/:id" render={ (props) => <ProductDetails location={ props.location } history={ props.history } match={ props.match } /> } />
	<Route path="/detalhesProduto/:id" render={ (props) => <ProductDetails {...props} /> } />

[Copilot]

Consider using a more robust data-testid selector instead of a nth-child selector to reduce brittleness and improve test reliability.

Suggested change

	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
	cy.get('[data-testid="email-error"]').should('contain', 'Email é obrigatório') // Mensagem correta para o email
	cy.get('[data-testid="password-error"]').should('contain', 'Password é obrigatório') // Mensagem correta para a senha

[Copilot]

Consider using a dedicated data-testid attribute for this element, which will make the test less dependent on the DOM structure and easier to maintain.

Suggested change

	cy.get(':nth-child(4) > :nth-child(2)').should('contain', 'Password é obrigatório') // Mensagem correta para a senha
	cy.get('[data-testid="password-error"]').should('contain', 'Password é obrigatório') // Mensagem correta para a senha