Um momento
Aula 61
Cursos / React: Componentes Controlados
Testamos se as props `label` e `value` são passadas corretamente pro RadioList

Summary

# Resumo da Transcrição

Neste vídeo, o apresentador continua a escrever testes para um componente de lista de rádio (`radio list`). Já foram testadas algumas propriedades, incluindo o número correto de componentes e a propriedade `name`. O apresentador menciona que não é necessário testar a acessibilidade da propriedade `Ponto` do Enzyme, pois o React irá gerar um erro se a propriedade não for adicionada.

Para prosseguir com os testes, o apresentador considera duas abordagens: a primeira é continuar com a mesma estrutura de testes utilizada para a lista de checkboxes, enquanto a segunda é criar testes separados para diferentes propriedades. Optando pela segunda abordagem, ele decide criar um caso de teste para cada propriedade.

### Primeiros Casos de Teste

1. **Testar o label**:
   - O teste verifica se cada rádio inclui o label correspondente definido na opção. Um loop é utilizado para checar se o componente `radio` no índice correto possui a prop `label`.

2. **Testar o value**:
   - Este teste assegura que cada rádio possui o valor adequado, usando um processo semelhante ao anterior, mas focando na prop `value`.

### Verificações de Teste

O apresentador valida que todos os testes estão passando e demonstra como modificar incorretamente um label ou value para verificar se os testes falham conforme esperado. Após reverter as mudanças, os testes voltam a estar corretos.

### Próximos Passos

Por fim, o apresentador planeja continuar os testes para as propriedades restantes: `check` e `onChange`, que serão abordados na próxima aula.

Até a próxima aula!

Video Transcript

Olá pessoal, vamos continuar escrevendo esse teste para o radio list. A gente já testou o número correto de componente radio e a propriedade name. Note que a gente não testou aqui, que a gente já viu isso anteriormente, que aqui não é acessível usando essa ponto prop do Enzyme, né? A gente não precisa testar aqui porque o React já vai reclamar, que não tem aqui, no console, se você não adicionar aqui, se lembra? Se eu remover aqui e você dá uma olhada lá na implementação aqui no browser, né? No navegador, seja a node que ele já mostra o erro. Então a gente não precisa testar isso, certo? Então vamos lá reverter isso e continuar. Agora para continuar para os testes, a gente, voltando aqui no teste para o checkbox list, que foi parecido, você note que a gente fez quase todos os testes no mesmo caso do teste, no mesmo loop aqui, certo? Então tem duas maneiras de você continuar os testes para o radio list. Você pode continuar da maneira que a gente fez do checkbox list, fazendo todas as suas checks das outras propres no próprio teste, ou pode dividir em outros testes, depende de você, certo? Se a gente dividir outros testes, a gente vai ter que fazer o loop novamente para cada teste. Então você pode ter que pensar nisso também. Então como eu quero fazer algo diferente para você, eu não vou fazer da mesma maneira que a gente fez para o checkbox list. Eu vou fazer da outra maneira, então vou fazer um caso de teste para cada propriedade, certo? Então voltando aqui no radio list, teste, eu vou fazer outro teste aqui. Deve incluir o label de cada rádio de acordo com o label definido pela opção, né? Cada opção tem a propriedade chamada label, né? Então a gente vai proceder da mesma maneira, faz aquele loop e espera que cada componente de rádio no add index, a prop, nesse caso vai ser label, né? Que tem o valor, o que? Tem o valor da opção, ponto label. Simplesmente assim. Então eu vou te dar aqui um tempinho para você fazer aí. E a gente vai continuar já, já. Então pause o vídeo e faça aí. E aí, tudo certo? Vamos continuar? Vamos lá. Vai dar um loop, props, multiple options for each, para cada option. Vamos botar um index, que a gente pode usar o index aqui para poder selecionar o componente de rádio corretamente. Vamos dar o expect to be. Então o expect vai ser o que? O componente find rádio no index add index, qual é a prop? Vai ser label. Então esse cara expect to be okay. To be prop, não, não a prop, desculpa. To be okay, esse option, o option está disponível, um variável local aqui desse loop for each, option, ponto label. E caso, vai ser o que? Para cada um vai ser masculino, para o outro vai ser feminino. Vamos salvar. Vamos lá ver o teste. Certo, o teste está tudo okay. Vamos testar se realmente está funcionando, só fazer uma implementação errada ali, mudo o label para uma coisa errada, você note que está errado. Vamos reverter, do lado direito da tela que é o radio list, o JTS. Vou salvar e os testes estão passando novamente. Então é assim, vai ser a mesma coisa para os outros, certo? Então se você quiser, dá uma pausa aí, fazer cada um aí, você próprio. E depois confira as respostas, você pode fazer. Certo, vamos continuar, vou continuar aqui. O próximo vai ser o que? Deve incluir o value, o valor de cada radio rádio de acordo com o valor, o value definido pela opção. Aí vai ser aquela mesma coisa, props options, que são as opções que foram recebidas, para cada opção com index. Vamos expectar alguma coisa que seja outro valor aqui. Component, find, radio, no index, esse cara prop value, que seja o que? Que seja o valor option.value, cada option tem um value. Nesse caso você note que lá em cima vai ser masculino ou feminino, todos as letras minúsculas. Voltando aqui ao teste, salvar, vamos lá para o terminal verificando o teste está passando. Vamos fazer o teste para lá aqui, pega esse value, adiciona um número, para falter, deixar tudo errado. O teste realmente está verificando se o teste está correto. Tudo ok, reverse, salvo, tudo certo? Já fizemos name, label, value, agora só falta o check e o on change. Vamos fazer esse cara na próxima aula. Até mais, tchau!
Nenhum comentário ainda (loading...)
Nenhum comentário ainda (loading...)
Gostou da aula? 😆👍
Apoie nosso trabalho com uma doação: