Aula 56
Testando o Resto das Props do Input Type Radio
Summary
Resumo da Transcrição
Neste trecho, o autor discute uma estratégia para testar um componente de entradas (input) no React, focando na manipulação das propriedades (props) do componente. Abaixo estão os principais pontos abordados:
-
Estratégia de Teste:
- A ideia é mudar as propriedades (
props
) do input, especificamente a propriedadechecked
, definindo o oposto do que está atualmente definido.
- A ideia é mudar as propriedades (
-
Implementação do Teste:
- Inicialmente,
checked
é falso; a estratégia é inverter esse valor para verdadeiro. - O teste usa a função
expect
para verificar se a propriedadechecked
do input corresponde ao valor esperado.
- Inicialmente,
-
Uso de Variáveis:
- Para evitar confusão, o valor da propriedade
checked
é armazenado em uma variávelchecked
, permitindo reutilização no código. - A comparação no teste é feita utilizando esta variável.
- Para evitar confusão, o valor da propriedade
-
Verificação de Funcionamento:
- Após implementar a lógica, o teste falha inicialmente porque a implementação estava incorreta.
- Depois de corrigir a implementação, o teste passa, confirmando que a lógica está certa.
-
Verificação de Mudanças:
- Um teste separado verifica se a propriedade
onChange
está corretamente definida, utilizando um valor de retorno previsto.
- Um teste separado verifica se a propriedade
-
Reversão para Testes:
- O autor demonstra a reversão da implementação para forçar uma falha, confirmando que o teste está funcionando corretamente ao passar uma função que não realiza nenhuma ação.
-
Conclusão:
- O autor encerra a aula, informando que na próxima sessão será verificado se a label ao lado do input aparece corretamente.
O autor termina a aula com um tchau, indicando que a próxima discussão continuará em um tema relacionado ao componente de input.
Video Transcript
Então vamos fazer aquela mesma estratégia.
E mudar as props.
Esse cara set props o checked.
Vamos botar o oposto do que está setado agora.
Props por checked mais o oposto.
Nesse caso props por checked tem valor falso, inicialmente a gente vai reverter e inverter
para true.
Você dá o expect novamente.
Expect component, find input, prop, checked, to be ok.
Agora a gente não sabe o que é o valor que a gente reverteu.
A gente sabe que é porque a gente definiu lá, mas no caso que a gente tivesse definido
true, se a gente tivesse botado true lá estava errado.
Então o que vamos fazer?
Pegue esse cara e botar no variável.
Cons no checked.
Ou pode botar só checked.
Vamos botar o mesmo nome.
Poder reutilizar aqui.
Esse cara vai ser checked.
O checked agora mudou para o inverso.
Aí você põe aqui.
Aí como está a mesma propriedade tem o mesmo nome da variável que define o valor.
No s6 você pode tirar assim a mesma coisa.
Aí aqui no to be do expect input prop checked você vai to be checked.
Vai ser o valor invertido que a gente espera que tenha.
Vamos lá para terminar agora ver que o teste está falhando.
Porque a implementação está errada.
Check está falso.
Então vamos lá reverter para a implementação correta.
Você vê que o teste já agora passa.
Então por isso é só pelo check.
Vamos checar o on change.
Deve incluir.
Changed, setado pelos props.
Esse aqui vamos deixar bem simples.
É só checar a mesma coisa component.
Encontro input, pega prop on change e espera expect.
Esse cara seja o que props.onChange.
Que esse props referindo aquelas prop fases.
Que objetos de prop fases que a gente definiu.
Tá bom.
Vamos ver.
O teste está façando.
Vamos fazer ele falhar para verificar.
Eu vou passar uma função que não faz nada aqui.
Falhando tudo certo.
Vamos reverter a implementação para implementação correta.
E assim a gente termina os nossos testes para o componente de input dentro do radio.
Certo então por essa aula é só.
E até a próxima onde a gente vai verificar se o levo do lado direito do input está aparecendo
corretamente.
Tchau.
Nenhum comentário ainda (loading...)
Nenhum comentário ainda (loading...)
Gostou da aula? 😆👍
Apoie nosso trabalho com uma doação: