Um momento
Aula 50
Cursos / React: Componentes Controlados
Testando as Props de cada Checkbox

Summary

# Resumo da Aula de Testes com Checkbox

Nesta aula, continuamos a verificar se cada propriedade do checkbox em uma lista foi definida corretamente. Iniciamos os testes com a propriedade `name`, usando o Enzyme, mas observamos que houve um aviso de que algo não era uma propriedade. Esse aviso vinha do React, o que nos levou a concluir que não era necessário testar.

## Estrutura dos Testes

1. **Teste do `label`**:
   - A expectativa é que o `label` do checkbox corresponda ao `option.label`.
   - Realizamos o teste e, ao modificar o valor, confirmamos que o teste falhou, mostrando que o valor esperado não correspondeu.

2. **Teste do `value`**:
   - Repetimos o processo para testar a propriedade `value`, que deve corresponder ao `option.value`.
   - Realizamos uma alteração que causou a falha do teste, permitindo identificar a linha e coluna exatas do erro.

3. **Teste do `onChange`**:
   - Verificamos se o `onChange` corresponde à função esperada.
   - Alteramos a implementação para provocar uma falha, confirmando o correto funcionamento do teste.

4. **Teste do `checked`**:
   - Utilizamos a expectativa de que o estado do checkbox no índice deve corresponder à propriedade `options.checked`.
   - Implementamos várias situações para garantir que o teste era robusto, considerando diferentes valores.

## Refatoração dos Testes

Durante os testes, notamos uma repetição no código. Assim, decidimos criar uma variável para armazenar o checkbox e simplificar nossa anotação, reduzindo erros no futuro.

Além disso, discutimos uma maneira alternativa de acessar as propriedades do componente através de um objeto `props` que contém todas as propriedades.

## Conclusão

Com isso, realizamos uma série de testes para garantir que os checkboxes estavam recebendo as propriedades de maneira correta. A aula encerrou-se com agradecimentos e a promessa de um próximo encontro para continuar o aprendizado.

Video Transcript

Nessa aula nós vamos continuar verificar se cada prop de checkbox de cada opção foi definido corretamente. Na lutaerio nós fizemos o teste para testar esse próprio chamado name passado do textbox. Note que eu não fiz o teste para aqui. Então vamos tentar acessar aqui com o enzime. Vamos fazer a mesma na checkboxes ad index para poder capturar o checkbox individual. Vamos chamar a prop no que veio o que acontece. Vamos dar um console log dessa maneira aqui. Você note que apareceu esse warning. Que is not a prop. O que não é uma prop. Então tem esse detalhe né. Por isso que eu não testei o que porque o que não é a prop. Quando é o negócio interno do react então não precisa testar isso porque você note que se você não tiver aqui ele já vai dar um erro aquele warning no navegador no console. Então nem precisa testar certo. Se você tiver algum comentário sobre isso por favor deixa o link. Então vamos continuar. E vamos em vez de prop que vamos pegar o levo. Vamos ver expectativa que expect. Então a gente vai ver esse cara aqui. A gente espera que esse levo seja o que o opção ponto levo a opção. Esse levo que está dentro da opção nesse caso a gente está dando um loop no opção de estar aqui pode acessar a opção nessa variável opção. Então é só verificar se se o que opção ponto levo esse opção aqui esse cara aqui. Salvar o teste passou. Vamos tentar falar o teste. Vou botar não sei o que. Então vamos olhar lá no terminal. Quando eu salvar. Falhou. Expecto do vale. O valor não é esse vale aqui. Não confundo. Expecto do levo. Do levo seja a mão né mas recebeu esse a sd a sd não sei o que. Então teste realmente está escrito correto. Corretamente. Então vamos reverter esse cara. Note que se você quiser ver qual linha do teste foi. Falhou porque eu tenho vários expect. Vamos ter vários expect nesse mesmo teste. Por isso é importante saber qual o expect que falhou. Você não se confundir. O primeiro segundo terceiro assim por diante você olha aqui no seu que. Você olha que se o como checkbox lê esse ponto test para a s linha 51 coluna 50. Então linha 51 coluna 50 certo. Então aqui então essa linha aqui que falou não foi a outra mais essa é assim que a gente vê se o que vale o expect. Então continuando vamos reverter a implementação para o versão correta novamente e continuar a gente fez o levo agora vamos fazer o vale da mesma maneira. Então vou esperar você fazer aí pausa e vídeo e vamos conferir agora. Então deu tudo certo vamos lá expect. Vamos lá pegar o checkbox index e pega o próprio dele chamada vale to be ok. Option ponto vale. Salvar teste passou vamos tentar falhar o teste. Muda o vale para qualquer coisa. O teste falhou esperava receber mamão todas as letras minúsculas. Agora recebeu esse cara em qual linha 50 e 2. Linha 52 esse expect que falhou. Então tudo ok. Eu vou salvar. Está tudo certo. E até que sim da mesma maneira para as outras expect. Então vamos fazer do own changelê. Expect checkbox index não acho que eu estou repetindo esse cara várias vezes pode até criar uma variável que não fazer já já repatorização para deixar esse cara melhor. Então vamos deixar assim mesmo no começo. Então vamos verificar o change agora. O change e espero que seja o que que vem do próprio ponto onde a gente certo não props ponto onde a gente esse props aqui sempre se lembra que se refere a esse cara aqui que foi passado como o próprio pro checkbox list. Por isso que a gente está usando dessa maneira é o mesmo nome aqui mas esse cara se refere a local de ferência. Esse próprio que vem desse próprio do checkbox list que é na verdade que a gente passou então eu sempre põe os nomes iguais para ficar melhor assim para programar o teste para você não ter escrevido nome diferente mas entenda que o próprio aqui vem de outro lugar. Vai dar no mesmo mas você está se referindo nesse próprio aqui desse próprio aqui. Foi confuso que eu falei. Vamos lá continuar. Tá bom então vamos verificar se o teste passou. Tá passando vamos falhar o teste. Vou pegar aqui onde change eu defini uma função que não faz nada. Agora o teste falha. Esperava receber aquela moca de moca e agora receber essa função anônimo aqui que não faz nada. Então qual é a linha. Linhas 53. Esse expect aqui que falhou. Então vamos reverter a implementação do checkbox para ver se é um correto e o teste está novamente passando. Os teste passam. Então só para terminar vamos fazer o check. Esse cara aqui. Mesmo maneira de antes. Expecto que checkboxes. At o index. Qual é a própria. Check. Se viu que agora esse cara meio um pouco meio complicado. Vamos ver o que estou sendo aqui. Então ele pega o próprio check options. Isso refere a propriedade options do opção do contrário que vem do opção. Então a gente vai ter que fazer a mesma coisa. É só vai aqui. Vamos ver o que é. Vamos ver o que é. Que vai pegar a capturar quem o próprio check options que a gente definiu como esse aqui. Que vai pegar esse objeto. Dentro desse objeto ele está usando o que é esse. Square brackets ali para poder capturar uma propriedade. O nome da propriedade vem do opção ponto vale. Nesse caso seria mamão depois banana depois morando. Então é só pular captura usando o opção que vem do que a gente está lupando fazendo a interação aqui do das opções ponto vale. Eu salvo. Não olhada tudo ok. Vamos mudar de novo. A implementação. Sei lá. Vou estar false. Note que esse cara vai passar aquele mesmo detalhe que a gente já viu antes que o teste não está muito forte porque a gente definiu os caras todos como falsos. Vou botar truque um deles vai falar o da banana vai falar certo. Vector value to be true. Então você tem várias opções pode mudar o valor aqui como eu fiz eu pode fazer um teste mais forte mudando o valor aqui no próprio teste depende de você qualquer coisa certo então eu vou deixar assim eu vou botar só um deles true. Vector aqui está passando está passando tudo ok. Certo então vamos dar um olhar aqui o que a gente fez nesse teste deu um loop cada opção e esperou que o checkbox do index da opção a prop tinha um valor correto. Eu falei antes a gente pode dar um re-fatorização assim note que eu estou usando a mesma coisa aqui então vamos pegar e criar variável para esse cara. Vamos falar checkbox só aí em vez de ter esses caras aqui você põe só checkbox dessa maneira certo. Tem uma variável para poder armazenar aquele cara só para não poder não ter que digitar aqui os outros tempos. Então ele vale aqui se você fizer alguma coisa mudar algum próprio no componente do checkbox list eu vou fazer alguma coisa que chama a função render de novo. Toma muito cuidado com essa referência aqui da variável porque ela não vai se referir a as coisas corretamente se você mudar o componente checkbox list muda as prop essas coisas que causa uma outra chamada do render então toma muito cuidado quando você fizer isso se você não fizer nenhuma mudança pode usar assim essa maneira sem problemas assim lembre disso certo só para terminar aqui esse cara tem também outra maneira de acessar os props do componente que eu não falei aqui eu usei eu gosto de usar essa prop com o nome da prop você pode também fazer dessa maneira assim você chama props assim e ponha o nome da prop esse cara aqui quando você chama props ele retorna todas as prop aí nesse objeto com todas as prop se referir a prop name vamos salvar e ver se não deu problema certo funciona da mesma maneira então você tem também essa outra opção de escrever esse cara eu pessoalmente gosto de fazer esse cara nessa situação nesse contexto então vou deixar daquela maneira certo com isso é só por essa aula nosso teste para verificar se cara checkbox recebeu as prop corretamente então obrigado por assistir 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: