Um momento
Aula 57
Cursos / React: Componentes Controlados
Verificando o label do Radio

Summary

# Resumo da Aula sobre Testes do Componente Radio

Nesta aula, o objetivo foi concluir os testes do componente radio, focando na verificação da estrutura do HTML e se os elementos estavam posicionados corretamente.

## Estrutura do Teste
- O input está incluído dentro de um elemento `level`, e o texto deve ser um sibling (irmão) do input.
- Verificamos se o `level` é o pai do input e se o texto aparece corretamente à direita do input.

## Etapas dos Testes
1. **Verificação do Pai do Input**: 
   - Confirmamos que o `level` é o elemento pai do input utilizando `.parent`.
   - Teste passou, pois o `level` foi encontrado corretamente.

2. **Alteração do Input**:
   - O input foi temporariamente movido para fora do `level` e o teste falhou, indicando que agora o pai era um elemento `div`.
   - O código foi revertido para a implementação correta.

3. **Verificação do Texto ao Lado do Input**:
   - Confirmamos que o texto no nível (nodo) desejado está corretamente posicionado à direita do input, utilizando a função `child` para buscar o sibling.
   - O teste passou ao confirmar que o texto corresponde à propriedade `props.level`.

## Conclusão
- Os testes unitários foram criados com sucesso para o componente radio.
- Verificou-se que o input de tipo radio e suas props estavam corretamente definidas.
- O teste finalizou com uma confirmação de que a posição e o texto do componente estavam corretos.
- O instrutor mencionou que não irá testar o estilo, mas que os alunos podem explorar essa opção se quiserem.

Fica a mensagem de que a repetição de conceitos já aprendidos é importante para a fixação do conhecimento.

**Até a próxima!**

Video Transcript

Pessoal, nessa aula nós vamos terminar de testar o componente radio e vamos verificar se esse level aqui do lado direito que aparece do lado direito dessa cico aqui realmente aparece corretamente vamos lá, voltando editor de texto, vamos criar um novo teste, novo teste, devem incluir, vamos ver a estrutura aqui antes disso, o input está dentro do level e o teste está do lado direito do input, então a gente pode verificar se o input realmente é um filho, children, child do level, um input aqui tem como pai, parent o level e se o texto aparece como um seblis, como o irmão do input, nesse caso vai ser o primeiro, segundo child do level, então vamos ver aqui, sei lá, como primeiro, vamos verificar se tem um level como pai do input, deve incluir um level como pai, parent do input, nesse caso aqui o level encobre o input como a gente já escreveu antes em outros test do checkbox, então vamos ver, vamos verificar se o parent do input tem o nome de level, vamos achar o input, do input vai para o dot parent, ponto parent para pegar o pai, nesse caso deve ser o level, a gente espera que seja o level, aí desse caso a gente pega o nome, o nome daquele gente, espera que o nome seja level, vamos ver teste, no terminal, passou, vamos fazer isso, pega o input, põe para fora, não é mais filho do level, salva, teste parou, esperava que o pai do input do level, agora o pai do input é a dev, que faz sentido, o input tem como pai dev, parent, então vamos reverter, a interpretação está tudo ok e vamos continuar, vamos agora verificar se o teste está aparecendo do lado direito do input, test deve incluir o texto do level no lado direito, é no lado direito, do lado direito, do level, do input, agora é só ver, vamos pegar, capturar o level e ver o segundo, primeiro, segundo, child, criança, esperamos que o texto dessa node seja props.level, vamos lá, oponente find, quem, level, do child, para pegar as crianças do level, nesse caso tem uma, duas nodes, primeira sendo o input, segunda sendo o teste, para poder selecionar quais dessas nodes vamos usar o at, começa do zero, conta do zero, o zero é o input e o índice um é o segundo cara e desse cara a gente quer o quê? quer o texto, quer o texto dessa node to be props.level, salva, passou, vamos fazer o teste para lá agora, ego level, sei lá, adiciona alguma coisa aqui, ah, ah, esperou que vai ser masculino, recebeu isso, então o teste realmente ficou, o texto foi incluído corretamente, revertei a implementação para, implementação correta e assim a gente termina os nossos testes, eu não vou testar esse style, não me importo muito, mas se você quiser você pode também testar. Certo então recapitulando aqui o que a gente fez, criamos testes unitais para o componente radial, verificamos se existe, foi incluído o input de type radial, aí verificamos se as props desse input foram corretamente definidas, em seguida verificamos se o input está corretamente, pelo level, e se o level realmente tem o texto do lado direito do input, certo, por isso é só a gente foi rapidinho, porque a gente aprendeu muitos desses conceitos anteriormente nos outros testes, então fica aqui a repetição, mas mesmo que seja repetido, você vai aprendendo o que repete várias vezes. Espero que você tenha gostado dos vídeos e até a próxima, tchau!
Nenhum comentário ainda (loading...)
Nenhum comentário ainda (loading...)
Gostou da aula? 😆👍
Apoie nosso trabalho com uma doação: