Aula 54
Verificando a Inclusão de um Componente input type radio
Summary
# Resumo do Transcript
## Introdução
O apresentador retoma a aula com o objetivo de escrever casos de teste para um componente de rádio.
## Primeira Etapa
- **Teste Inicial**: Verificar se um componente de entrada (input) do tipo "radio" está presente no componente de rádio.
- Utiliza um método para encontrar um input dentro do componente.
- Para verificar o tipo, inclui uma condição no seletor `input` (`type="radio"`).
## Implementação do Teste
- Após implementar a verificação, utiliza `expect` para assegurar que o comprimento (length) dos inputs é 1.
- Roda os testes no terminal com `npm test`.
- Primeira execução resulta em erro porque o componente `radio` não foi importado.
## Resolução de Erros
- Importa o componente `radio` corretamente após identificar que o erro é de importação, já que estava exportado com chaves.
- Após corrigir a importação, os testes passam.
## Teste Adicional
- Com o teste funcionando, o apresentador altera o tipo para "checkbox" para verificar se o teste falha.
- O teste falha como esperado ao não encontrar inputs do tipo "radio".
## Conclusão
- O apresentador reverte as alterações no componente de rádio para finalizar o teste.
- Menciona que nas próximas aulas a velocidade de explicação aumentará, pois os próximos testes serão semelhantes.
**Até a próxima aula!**
Video Transcript
Fala pessoal, estamos de volta aqui.
O próximo etapa agora é começar a escrever cada caso de teste.
Então vamos começar verificando se realmente um ímpar de componente input foi fornecido
aqui nesse componente radio.
Então vai ser o nosso primeiro teste.
Deve incluir um input de tipo radio, tá assim.
Faça aqui segundo argumento.
Deve incluir um input de tipo radio.
Então a gente vai verificar se existe um input dentro do componente radio.
Então a gente vai fazer um lá componente, a men's line wrap, find, um input.
Certo?
Esse cara vai encontrar só um input.
Se você quiser encontrar um input que tem um certo tipo, você pode fazer assim.
Olha só, vai aqui dentro do input, você põe type radio.
Dessa maneira aqui, você adiciona esse cara e ele vai buscar especificamente o input que tem o tipo radio.
Dessa maneira a gente não precisa primeiro selecionar qualquer tipo de input e verificar se a prop type é radio.
Dessa maneira vai fazer tudo a mesma coisa.
Se não achar um input type radio, isso significa que teste valeu, certo?
Então o que a gente vai fazer?
A gente espera, expect esse cara ponto length to be um.
Deixa eu dar um wrap aqui, software wrap.
Então component finding for type radio.
Ponto length significa quantos inputs type radio são incluídos no componente radio.
A gente espera que seja somente um.
Salvar e vamos lá no terminal.
Vou dar um npm test para rodar os testes novamente.
Ele já sabe que a gente criou um novo teste radio.
Radio is not defined.
Opa, o que aconteceu?
A gente esqueceu de que?
A gente está usando radio aqui, mas a gente esqueceu de importar por isso.
Está dando aquele erro. Radio is not defined.
Então vamos lá em cima, importe o radio.
Da onde?
O radio está nos três levels acima, né?
Do como?
Vai um level acima, está no components, outro level acima está no teste, outro level acima está no src.
Barra components, barra como, barra radio.
Certo, então vamos salvar e verificar os testes.
Novamente, deve incluir um input type radio.
Não pode ler o contexto de um tipo de contexto, o que aconteceu?
Outro erro, olha esse horno aqui.
Reactuate element.
You likely forgot to export.
Your components on the file is defined.
A gente já viu esse cara anteriormente, se lembra?
Isso significa que a gente deu, deve ter importado ou exportado o componente de maneira incorreta.
E foi isso que aconteceu, porque você olha aqui, eu estou importando o radio dessa maneira sem chave.
Mas olha aqui no lado direito, a definição do radio, como ele exporta, exportando com as chaves.
Então, vamos calcular as chaves ali para ver se ele saiu o radio do próprio módulo do arquivo radio.js.
Com isso a gente vai finalmente ter os testes passando.
Ver os testes aí, está passando agora.
Deve incluir um input type de tipo radio.
Tudo certo.
Com o que a gente já fez antes nos testes anteriores, vamos sempre verificar se o teste realmente está verificando tudo, está funcionando.
Vamos lá na implementação do radio e fazer...
Vamos mudar esse cara para checkbox, que está errado, mas a gente quer ver o teste falhar.
Um tipo checkbox.
Esperou que o valor do length do input type radio seja 1, mas recebeu 0, porque não tem nenhum input com tipo radio.
Por isso que recebeu 0.
Você olha aqui, radio test.js, linha 21.
Radio test.js na linha 21 é aquele expect aqui.
Com isso, vamos reverter a mudança aqui no radio.js de volta para o original, para implementação correta.
A gente terminar o primeiro teste.
Você não ouvi que a gente está indo mais rápido aqui, porque esses testes são quase a mesma coisa que a gente fez antes.
Então não vou mais explicar quase tudo o que acontece, vou mais rápido.
Até a próxima aula, onde a gente vai continuar a escrever os testes.
Tchau!
Nenhum comentário ainda (loading...)
Nenhum comentário ainda (loading...)
Gostou da aula? 😆👍
Apoie nosso trabalho com uma doação: