Aula 41
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: