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