Um momento
Aula 41
Cursos / React: Componentes Controlados
Curso React: Componentes Controlados

Summary

# Resumo da Aula sobre Teste de Label

Na aula, aprendemos a criar um teste para verificar se o texto do label está posicionado corretamente ao lado direito de um input. O processo é explicado passo a passo:

1. **Captura do Label**: O label possui dois filhos (children): um input e o texto do label. Precisamos capturar o texto do label, que é o segundo child.

2. **Criando o Teste**: No arquivo `checkbox.test.js`, o teste é definido com uma descrição que diz que o texto do label deve estar ao lado direito do input.

3. **Função Anônima**: Usamos uma função anônima (arrow function) como segundo argumento ao definir o teste.

4. **Utilizando Enzyme**:
   - Criamos um wrapper chamado `component` usando Enzyme.
   - Encontramos o label e acessamos seus children.
   - Para capturar o texto do label, usamos o método `.at(1)`, pois ele é o segundo child (índice 1).

5. **Console Log**: Um `console.log` é adicionado para verificar se capturamos o texto corretamente.

6. **Executando o Teste**: Para rodar apenas esse teste, adicionamos `.only` na função de teste e utilizamos `npm test` para executar os testes já configurados com Jest.

Essa metodologia ajuda a garantir que a interface do usuário esteja conforme o esperado, validando a posição e a visibilidade dos elementos.

Video Transcript

Nessa aula nós vamos aprender a criar um teste para verificar se o texto do label realmente está localizado no lado direito do input. Então vamos lá? Então lança aqui ao seguinte, nós vamos primeiro ter que capturar esse cara aqui, mas como vai fazer? A gente vai fazer. Então note que o um teste do label tem dois children, children, isto é, as crianças, né? Tem um input que é o primeiro child e tem esse texto que é o segundo child. Então a gente vai capturar esse cara, esse texto, vindo do label certo? A gente vai verificar se esse cara realmente está aparecendo como a segunda criança do label lado direito do input. Então vamos lá? Vamos criar um teste aqui no arquivo checkbox.test.js, aquela mesma coisa de antes. Chama o teste, primeiro argumento é a descrição do label. Deve incluir o texto do label no lado direito do input. Vamos com o segundo argumento, passar a função anônima, usar a função de felaixa ou seta, error function. Então aqui vamos lá? Primeiro vamos pegar o enzyme wrapper que eu chamo de component. Find, vamos encontrar que vamos começar do label. Aí do label para você poder ter acesso ao children, as crianças do label, você vai usar o dot children, certo? Agora, com esse cara aqui tem vários children, a gente tem que especificar qual das children a gente vai que acessar, a gente quer acessar qual. Então a gente vai usar aqui o dot at para especificar o índice, o índice começa do zero. Então a primeira criança tem índices zero. Então a segunda que é o label vai ter índice um. Então a gente já vai botar at1, um e esse vai capturar esse cara. Certo? Então vamos dar um console log aqui para ver se realmente a gente capturou a coisa corretamente. Vamos dar um console log. Ops, deixa eu aumentar essa tela. Vamos largar. Dá o console log nesse cara aqui. Vou mudar debug só para ver o que acontece. Aí também vamos só rodar esse teste. Como é que a gente roda só esse teste? Você lembra? Vai aqui no teste adiciona ponto only, somente rode esse cara. Então vamos aqui, deixa eu abrir o terminal. Os testes já estão rodando com o npm test, que está rodando o jest.
Nenhum comentário ainda (loading...)
Nenhum comentário ainda (loading...)
Gostou da aula? 😆👍
Apoie nosso trabalho com uma doação: