Como escrever testes de ponta a ponta usando o Cypress em aplicativos React

O desenvolvimento de front-end envolve a criação de aplicações visualmente apelativas e funcionais para o cliente. Mas há um senão: estas aplicações têm de garantir que os utilizadores têm uma experiência perfeita.

Para validar de forma abrangente o funcionamento de uma aplicação, é imperativo efetuar testes unitários e de integração, que servem para confirmar as suas funcionalidades. No entanto, estes tipos de testes podem não abranger totalmente todos os aspectos das experiências típicas do utilizador. Para recriar com precisão o percurso de um utilizador, é necessário realizar testes de ponta a ponta que imitem fielmente as suas interacções reais com o sistema. Deste modo, é possível ter confiança no desempenho da aplicação em todas as fases do seu processo.

Introdução aos testes de ponta a ponta usando o Cypress

Um dos principais objetivos dos testes de ponta a ponta em aplicativos front-end é garantir que os resultados desejados sejam alcançados, em vez de examinar as especificidades de como a lógica comercial subjacente funciona.

Considere um formulário de início de sessão como um exemplo. O ideal seria avaliar se o ecrã de início de sessão aparece corretamente e desempenha a função pretendida, sem ter em conta as intrincadas especificações tecnológicas. Em última análise, o objetivo consiste em assumir a perspetiva do utilizador e examinar a sua experiência global.

Cypress é um ótimo framework de teste de automação que é compatível com alguns dos frameworks JavaScript mais populares. Sua capacidade de executar testes diretamente no navegador e seu conjunto abrangente de recursos de teste tornam os testes perfeitos e eficientes. Ele também suporta várias abordagens de teste, incluindo:

⭐Unit Tests

⭐End-to-End Tests

⭐Integration Tests

Para desenvolver casos de teste abrangentes que englobam todos os aspectos da funcionalidade de um aplicativo React, é essencial avaliar seu comportamento a partir de uma perspetiva do usuário final, considerando as seguintes narrativas:

Um indivíduo é capaz de perceber um campo de entrada de texto acompanhado de um botão para submissão.

Um indivíduo é capaz de digitar uma pergunta ou frase num espaço vazio designado para o efeito, designado por “campo de entrada”.

Ao clicar no botão “submeter”, espera-se que apareça uma lista de itens diretamente por baixo do campo de entrada correspondente.

Seguindo essas histórias de usuário, você pode criar um aplicativo React simples que permite que um usuário pesquise produtos. A aplicação vai buscar os dados do produto à API DummyJSON e apresentá-los na página.

O código-fonte deste projeto está alojado na conta GitHub do programador, à qual se pode aceder visitando o repositório associado.

Configurar um projeto React

Para iniciar o processo, você pode estabelecer um projeto React utilizando o Vite ou empregar o comando “create-react-app” para configurar um aplicativo React fundamental. Após a conclusão da fase de configuração, proceda ao download da biblioteca Cypress como um recurso dependente do desenvolvimento na estrutura do seu projeto.

 npm install cypress --save-dev 

De fato, é essencial revisar o arquivo package.json incorporando o script mencionado acima em seus limites.

 "test": "npx cypress open" 

Criar um componente funcional

No diretório de origem, crie uma subpasta e atribua-lhe a etiqueta “components”. Dentro desta área compartimentada, inicie o processo de criação de um novo documento textual designado por “products.jsx” e incorpore o código fornecido no seu conteúdo.

 import React, { useState, useEffect } from 'react';
import "./style.component.css"

export default function Products(prop) {
  const [products, setProducts] = useState([]);
  const [error, setError] = useState(null);
   const { searchInput } = prop;


  return (
    <div className="product-catalogue">
      {error ? (
        <p>Product not found</p>
      ) : (
        <div className="product-list">
          {products.slice(0, 6).map((product) => (
            <div className="product" key={product.id}>
              <h2>Title: {product.title}</h2>
              <p>Price: ${product.price}</p>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

No cenário apresentado, é essencial implementar um hook useEffect no componente funcional. Este gancho será responsável pela execução de uma operação assíncrona que recupera os dados do produto em resposta à consulta de pesquisa do utilizador.

  useEffect(() => {
    const fetchProducts = async () => {
      if (searchInput) {
        const apiUrl = `https://dummyjson.com/products/category/${searchInput}`;
        try {
          const response = await fetch(apiUrl);
          if (!response.ok) {
            throw new Error('Error fetching products');
          }
          const json = await response.json();
          setProducts(json.products);
          setError(null);
         } catch (error) {
          setError(error.message);
        }
      }
    };
    fetchProducts();
  }, [searchInput]); 

Atualizar o arquivo App.jsx

Atualizar o arquivo App.js incorporando o trecho de código fornecido abaixo:javascriptimport React from ‘react’;import { BrowserRouter as Router, Route, Switch } from ‘react-router-dom’;import LoginPage from ‘. /LoginPage/LoginPage’; // importar o componente da sua página de login aquiimport HomePage from ‘./HomePage/HomePage’; // importar o componente da sua página inicial aquiimport ServiceListPage from ‘. /ServiceListPage/ServiceListPage’; // importe seu componente de página de lista de serviços aquiimportar CreateAccountForm from ‘./CreateAccountForm/CreateAccountForm’; // importe seu componente de formulário de criação de conta aquiimportar { useHistory } from ‘react-router-dom’;function App() {const history = useHistory();return (

 import React, { useState,useRef } from 'react'
import './App.css'
import Products from './components/Products'

function App() {
  const [searchInput, setSearchInput] = useState('')
  const searchInputRef = useRef('');

  const handleSubmit = (e) => {
    setSearchInput(searchInputRef.current.value);
  }

  return (
    <div>
      <h1>Cypress Testing Library tutorial</h1>
        <label htmlFor="input">Input</label>
      
        <input
          id="text"
          type="text"
          ref={searchInputRef}
        />

        <button id="btn" type="button" onClick={handleSubmit}>Submit</button>
      <Products data-testid="products-component" searchInput={searchInput} />
     </div>
  )
}

export default App 

Vá em frente e inicie o servidor de desenvolvimento.

 npm run dev 

De facto, agora deve ter a capacidade de obter informações específicas da API JSON simulada com facilidade.

Configurar o ambiente de teste

Execute o script de teste usando um comando de terminal em primeira instância:

 npm run test 

Execute a ação especificada, que iniciará a estrutura de teste do Cypress. Por favor, continue clicando no botão “E2E Testing” localizado abaixo.

Clique em “Continuar” para incorporar os ficheiros de configuração Cypress.

Ao finalizar este procedimento, deve-se observar o surgimento de uma nova pasta de testes Cypress dentro do seu empreendimento. Além disso, o cliente do Cypress anexa autonomamente o documento cypress.config.js. Os utilizadores têm a prerrogativa de alterar este registo para adaptar uma série de nuances relativas ao meio de teste, ao comportamento e à configuração.

Escrever testes de ponta a ponta usando o Cypress

Para executar seu teste inicial, é necessário escolher o navegador da Web que hospedará o exame. A partir da gama de opções fornecidas na interface do Cypress, escolha uma versão que esteja de acordo com as suas preferências.

O Cypress iniciará uma iteração simplificada do navegador Web selecionado, estabelecendo um ambiente de teste orquestrado para fins de avaliação.

Para gerar um novo ficheiro de teste, seleccione a opção “Criar nova especificação” entre as opções disponíveis.

Navegue até ao seu editor de código preferido, aceda ao ficheiro “cypress/e2e/App.spec.cy.js” e faça as modificações necessárias ao seu conteúdo, incorporando o código fornecido.

 describe('App Tests', () => {
  beforeEach(() => {
    cy.visit('http://127.0.0.1:5173/');
   });

  it('Renders input field and submit button', () => {
     cy.get('#text').should('exist').should('be.visible');
    cy.get('#btn').should('exist').should('be.visible').contains('Submit');
  });

  it('Enters a search query', () => {
    const searchQuery = 'laptops';
    cy.get('#text').type(searchQuery);
  });
}); 

O presente quadro de testes valida múltiplas facetas das narrativas do utilizador acima mencionadas, assegurando que o sistema se comporta como pretendido em vários cenários, incorporando os critérios de entrada definidos em cada enredo individual.

A interface do utilizador da aplicação Web deve incluir um campo de entrada e um botão de envio, que são apresentados pelo navegador na página Web.

O utilizador tem a possibilidade de introduzir um pedido de pesquisa através da caixa de texto fornecida ou da funcionalidade de comando de voz, permitindo-lhe localizar a informação pretendida com facilidade e eficiência.

O Cypress é semelhante a outras estruturas de teste JavaScript populares, como Jest e Supertest, na medida em que utiliza uma abordagem declarativa e uma linguagem específica para criar cenários de teste.

Para executar o teste, navegue de volta para o ambiente simplificado do navegador supervisionado pelo Cypress e selecione o script de teste específico que deseja executar.

O Cypress foi concebido para executar testes e apresentar os seus resultados no painel esquerdo da interface do campo de testes, proporcionando aos utilizadores um meio prático de monitorizar o progresso dos testes.

Simulação dos processos da aplicação

Para validar a experiência completa do utilizador neste cenário específico, é crucial confirmar que a aplicação é capaz de aceitar os dados introduzidos pelo utilizador, obter as informações necessárias e, por fim, apresentar essas informações na interface do browser.

Para garantir a transparência, é possível estabelecer um ficheiro de teste separado que inclua um conjunto de testes alternativo no diretório extremo-a-extremo. Além disso, existe outra opção em que vários casos de teste que examinam um cenário específico são consolidados num único ficheiro de teste.

Crie um novo ficheiro Products.spec.cy.js no diretório e2e utilizando o fragmento de código fornecido.

 describe('Products Tests', () => {
    it(' fetches and displays the data', () => {
      const searchQuery = 'laptops';
      cy.visit('http://127.0.0.1:5173');
   
      cy.get('#text').type(searchQuery);
      cy.get('#btn').contains('Submit').click();
  
      cy.get('.product').should('have.length.greaterThan', 0);
  
      cy.get('.product').first().should('contain', 'Title');
       cy.get('.product').first().should('contain', 'Price: $');
    });

  }); 

A presente coleção de testes valida que, quando um utilizador introduz uma consulta específica, a aplicação recupera e apresenta as informações pertinentes na interface do navegador Web.

A ferramenta simula o processo de pesquisa de produtos num sítio Web de comércio eletrónico, submetendo a consulta de pesquisa e verificando se a página resultante contém informações relevantes, como títulos de artigos e preços. Isto permite avaliar a experiência de navegação do utilizador na sua totalidade, do seu ponto de vista.

Simulação de erros e respostas

Tem a capacidade de recriar uma série de situações de erro e reacções correspondentes nos seus casos de teste Cypress, proporcionando-lhe uma maior flexibilidade ao testar potenciais problemas.

Crie um novo arquivo JavaScript chamado “Error.spec.cy.js” no diretório “e2e” e incorpore o seguinte trecho de código:

 describe('Error Handling Tests', () => {
    it('Displays error message for incorrect search query', () => {
  
      cy.intercept('GET', /https:\/\/dummyjson\.com\/products\/category\/.*/, {
        statusCode: 404, // Not Found
        body: 'Product not found'
      }).as('fetchProducts');

      cy.visit('http://127.0.0.1:5173');

      const incorrectSearchQuery = 'rocket';
      cy.get('#text').type(incorrectSearchQuery);
      cy.get('#btn').click();

      cy.wait('@fetchProducts');

      cy.contains('Product not found').should('be.visible');
    });
  }); 

A implementação atual deste conjunto de testes centra-se em garantir que é gerada uma mensagem de erro percetível sempre que um utilizador introduz uma consulta de pesquisa inválida, a fim de o informar prontamente do problema e facilitar a ação correctiva adequada.

Para que o caso de teste seja considerado bem sucedido, aproveita a funcionalidade de interceção da Cypress para imitar erros de rede, simulando uma ligação de rede defeituosa. Posteriormente, quando uma consulta de pesquisa inválida é introduzida no campo de entrada designado e o processo de recuperação de dados é iniciado, o teste verifica se uma mensagem de erro visível, “Produto não encontrado”, aparece de forma proeminente na página Web.

O presente resultado sugere que o sistema de gestão de erros está a funcionar de acordo com a conceção prevista.

Utilização do Cypress no desenvolvimento orientado para os testes

Os testes são um aspeto essencial do desenvolvimento de software que requer uma atenção significativa para garantir a qualidade e a fiabilidade do produto. Embora os testes possam consumir tempo e recursos consideráveis, a utilização de ferramentas como o Cypress pode proporcionar uma sensação de satisfação ao simplificar o processo de teste e facilitar a execução eficiente dos casos de teste.

A Cypress oferece um conjunto impressionante de ferramentas para facilitar o desenvolvimento de aplicações orientadas para o teste, abrangendo uma vasta gama de funcionalidades de teste, bem como suporte para diversas metodologias de teste. Para apreciar plenamente tudo o que o Cypress tem para oferecer, mergulhe na sua documentação autorizada, onde descobrirá inúmeras possibilidades de teste adicionais.