Aula 50
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: