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

Summary

# Resumo da Transcrição

O teste realizado consiste em verificar a estrutura de um componente que contém um `<label>` e um `<input>`. A abordagem adotada é garantir que o `<label>` envolva o `<input>`, confirmando que o `<input>` é filho do `<label>`.

## Passos do Teste

1. **Configuração Inicial**: O teste começa em um componente onde há um `<label>` e um `<input>`.
2. **Verificação do Pai**: Em vez de apenas procurar pelo `<label>`, o teste encontra o `<input>` e, em seguida, verifica se o seu pai é um `<label>`.
3. **Debugging**: Um `console.log` foi adicionado para confirmar se o pai do `<input>` era realmente o `<label>`.
4. **Uso do `.only`**: Para executar apenas um teste específico, foi utilizado o método `teste.only`, que permitiu a execução isolada deste teste.
5. **Expectativa**: O teste espera que o nome do pai do `<input>` seja `'label'`.

## Resultados do Teste

- Depois de mover o `<input>` para ser um irmão do `<label>`, o teste falhou, confirmando a correta captura da estrutura onde o `<label>` é o pai do `<input>`.
- Em caso de falha, o teste retornou que o pai era uma `<div>` ao invés do `<label>`, indicando que a estrutura estava errada.
- Após corrigir a estrutura, o teste passou corretamente.

## Considerações Finais

- Importante remover o `only` após completar a escrita dos testes para evitar problemas na execução de testes futuros.
- O próximo passo será verificar se o texto do `<label>` aparece corretamente.

Até a próxima aula!

Video Transcript

Agora terminamos o teste para o cara. Vamos fazer o teste do label aqui. Vamos verificar se tem um label. Como fazemos isso? Vamos fazer a mesma maneira que fizemos anteriormente. Deve incluir o input. Vamos lá. No teste, deve incluir um label. Que encobre o input, sabe isso? Note que o label está em... o input é filho do label. Então, a gente pode testar a existência do label como pai do input. Entendeu? Então, vamos lá. Vamos pegar component. Se eu dar o find no label, ele não vai saber se o label está como pai do input. Ou se o label é irmão do input, está do lado a lado, por exemplo. Então, se eu dar o find só no label, ele não vai saber como é que está a estrutura aqui. E eu quero verificar realmente se o label está encobrindo o input. Isto é o input é o filho do label. Para fazer isso, eu vou fazer aqui. Eu vou usar... Primeiro, eu vou encontrar, vou dar um find para o input. Aí, eu vou olhar no pai do input, no parent. O pai do input, neste caso, é o label. Então, vou verificar a existência do pai do input, que seja um label. Então, vamos lá. Component, find, input, vai pegar esse cara. Aí, eu posso dizer ponto parent. Ponto parent vai ser filho do pai desse cara, que é o label. Mas eu quero verificar se é realmente um label, como é que a gente vai fazer. Vamos dar um console log aqui para ver o que é que é esse cara. Vou dar um console log nesse cara e vou mudar o ponto debug aqui. Esse cara vai mostrar realmente o que é que... Que componente é esse que a gente capturou. Então, eu vou rodar só esse teste aqui. Se você quiser só rodar esse teste, você pode botar teste.only. Dessa maneira. Então, teste.only só vai rodar esse teste. Os outros testes serão as que param, né? Então, você note que só rodou o teste que a gente queria e os outros foram skipped. Então, certo? Então, olha o console log aqui. Console log da linha 49 do teste. E esse debug retorna o que a gente capturou no formato aqui HTML que está mostrando no JTX. Desculpa. Então, note que a gente capturou realmente o label e dentro desse cara tem o input. Então, vamos... como é que a gente pega, verifica se é realmente o label. Vamos ver o nome do cara. Vamos tentar capturar o nome desse label. Voltando aqui ao editor de texto. Vamos remover esse debug e no lugar do debug eu vou botar name. Vamos ver se funciona. Voltando aqui ao terminal, o console log mostrou o label. Está correto agora. Certo? Então, a gente captura o parent do input que é o label. Aí, pede, pergunta qual é o nome desse cara. A gente quer que esse cara seja o quê? A gente expect, vou botar expect, que o nome seja, to be, label, né? Espero que seja label. Vamos retornar aqui no terminal para ver o teste passou. Certo? Para demonstrar como o teste realmente está capturando essa estrutura, vamos mover o input aqui para ser um irmão, o sibling do label. Eu vou mover esse cara para cima. Olha lá. Agora, esse cara está o quê? Está lado a lado com o label. Vamos salvar e ver o que acontece no teste. Salvar. Agora, expect a value to be label, mas recebeu div. Então, realmente o teste falhou, então, capturou aquela estrutura do label ser o pai do input. Nesse caso aqui, nessa estrutura que a gente tem, a gente pegou o pai do input que é a div, que está errado. Então, vamos voltar para a nossa implementação correta. Certo? Salvar, teste está ok. Então, a gente terminou esse teste, vamos remover aquele only, certo? Nunca esqueça de remover o only, certo? Eu já me deparei em código e às vezes as pessoas, os desenvolvedores, esquecem de remover esse only. Aí, os testes não rodam, aí, alguma coisa acontece, então, nunca esqueça de remover o only depois que vou terminar de escrever o teste, certo? Então, está lá, only. Agora, vamos partir para a próxima. A próxima é, vamos ver aqui, se o label realmente tem o texto, está aparecendo em uma necrotamente. Então, vamos fazer isso na próxima aula. Que tal? Então, até mais. Tchau.
Nenhum comentário ainda (loading...)
Nenhum comentário ainda (loading...)
Gostou da aula? 😆👍
Apoie nosso trabalho com uma doação: