Um momento
Aula 56
Cursos / React: Componentes Controlados
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:

  1. Estratégia de Teste:

    • A ideia é mudar as propriedades (props) do input, especificamente a propriedade checked, definindo o oposto do que está atualmente definido.
  2. 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 propriedade checked do input corresponde ao valor esperado.
  3. Uso de Variáveis:

    • Para evitar confusão, o valor da propriedade checked é armazenado em uma variável checked, permitindo reutilização no código.
    • A comparação no teste é feita utilizando esta variável.
  4. 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.
  5. Verificação de Mudanças:

    • Um teste separado verifica se a propriedade onChange está corretamente definida, utilizando um valor de retorno previsto.
  6. 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.
  7. 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: