Aula 49
Verificando se cada Checkbox Recebe a Prop name
Summary
# Resumo do Transcript
Neste vídeo, o apresentador discute como capturar checkboxes em um componente de teste. Ele menciona que o processo é semelhante ao que foi feito anteriormente, utilizando a função `Find` do componente para localizar todos os checkboxes renderizados. A seguir, ele destaca a necessidade de verificar cada uma das propriedades dos checkboxes.
## Principais Passos:
1. **Captura dos Checkboxes**:
- Utiliza `component.find` para capturar todos os checkboxes renderizados.
2. **Checagem das Propriedades**:
- Sugere que seja feito um teste que examine todas as propriedades ou divida os testes por propriedade (como `name`, `level`, `value`, etc.).
3. **Implementação do Loop**:
- O apresentador opta por utilizar um loop baseado nas `props.options` para iterar através das opções que correspondem ao número de checkboxes.
4. **Expectativas de Teste**:
- Para cada checkbox, verifica-se se as propriedades como `name`, `onChange`, e `checked` estão corretas.
- Usa `expect` para garantir que o valor do `name` do checkbox corresponde ao valor esperado.
5. **Verificação de Resultados**:
- Demonstra como se pode modificar inadvertidamente uma propriedade (como `props.name`) para verificar se o teste falha corretamente, provando que o teste está funcional.
6. **Conclusão**:
- Explica que a abordagem escolhida garante que todos os checkboxes sejam testados com base nas opções fornecidas, ao invés de depender apenas do número de checkboxes encontrados no DOM.
O vídeo termina com a promessa de expandir a discussão sobre outras propriedades na próxima aula.
Video Transcript
Então vamos lá, como a gente vai capturar esses checkboxes?
Da mesma maneira que a gente fez anteriormente.
Component Find, o checkbox.
Esse cara aqui vai capturar todos os checkboxes que foram renderizados.
Agora a gente precisa checar cada props do checkbox, certo?
Então, nesse caso aqui a gente pode fazer um teste que já testa todas as props.
Ou você pode dividir em vários testes.
Faz um teste só para checar essa prop name, só para checar level,
só para checar vales e por diante.
Certo? Eu lhe dou a escolha de fazer o que você quiser.
Eu vou fazer tudo no mesmo teste, certo?
Mas você sinta se há vontade de dividir isso.
Então vamos aqui. O primeiro aqui checkbox.
Pegamos todos os checkboxes.
A gente precisa ir um por um, então a gente vai ter que fazer um loop aqui.
Certo?
Vamos ver, você pode dar um loop nesse próprio cara.
Ou pode dar um loop em outra variável que é referente.
Como a gente sabe que o número de opções vai dar no número de checkbox,
então eu gosto de usar esse cara em vez do próprio checkbox.
Então eu vou usar props.options.4h.
Para cada opção, certo?
Eu vou checar se a gente passou o level, o value
e vou checar as outras coisas, name, onChange, checked.
Então for each option.
Eu vou fazer alguma coisa.
Vou dar um expecto aqui, certo?
Agora vamos putar esse cara dentro da variável.
Esse checkbox tem todas as nodes com os checkboxes.
Então vamos checkboxes.
Aí você vai dar props.options.4h.
Para cada opção, adiciona também o index.
Vai precisar.
Para referenciar o checkboxes.
Então olha só, vamos começar só com o nome do checkbox.
Vamos expect checkboxes at index.
Com esse cara aqui, se refere a lista de checkboxes, as nodes,
para poder acessar uma node específica, um checkbox específico,
eu vou usar o index, que é o parâmetro aqui do for each das opções, certo?
Se lembra dos opções, a gente definiu aqui em cima.
Três opções.
Então para cada opção, eu vou checar, certo?
Aqui é o index 0, 1, 2.
Então expect checkbox at index.
Nesse caso, primeiro vai ser 0.
Depois 1, depois 2.
Aí eu vou dizer, para poder acessar o name, eu vou dar props.name.
Essa é uma maneira.
Props.
Prop.name, ele vai me dar o valor.
E a gente espera que seja 2buk.
Nesse caso, vai ser um valor constante para todos os checkboxes.
Nesse caso, props.name.
Esse props vem de quem? Vem da onde? Vem dos, das props que foram dados ao checkbox list.
Que é esse arquivo, esse, essa variável, desculpe.
Props, certo?
Props.name, que é só esse frutas, ok?
Negócio li.
Então vamos lá 2b props.name.
Esse props.name dá referência a esse cara.
Vamos ver se não deu nenhum problema aqui.
Vamos checar no terminal.
Sem problemas.
Vamos ver se falha.
Vamos botar outra coisa no props.name.
Se não orte, já esperou que seja frutas, mas recebeu a sdd.
Essa não sei o que.
O teste está funcionando corretamente.
Certo?
Então vamos dar uma olhada nisso aqui novamente.
Então você pode fazer o loop usando o próprio component.find.forEach,
mas eu escolhi o props.option.
Por que eu escolhi isso?
Eu tenho esse teste aqui que já afirma que o número de checkbox
vai ser correto antes de...
Vai ser correto, né?
Mas caso o checkbox, o número de checkbox, não seja correto,
esse cara aqui não seria testado corretamente.
Se tivesse só três opções, mas só um checkbox.
Esse caso, se a gente desce o loop no component.find.checkbox,
só ia conferir verificar aquele valor daquela única checkbox.
Não ia verificar os outros.
Na maneira que eu faço aqui, ele vai sempre verificar três vezes,
porque tem três opções.
Por isso que eu usei o forEach no props.option.invez do component.find.
Agora o que a gente fez aqui?
Vamos aqui.
A gente amazenou essa lista de checkboxes e checkboxes,
esses nodes aqui do enzyme.
Aí a gente foi para cada opção, a opção e o índice da opção,
nesse caso acess0, 1 e 2.
A gente checka o checkbox at o index da opção
para poder acessar o checkbox 0, checkbox 1, checkbox 2.
O primeiro, o segundo e o terceiro.
Aí para cada um deles a gente vai dar o acessa valor da própria name
e verifica se o valor realmente é o props.name que foi fornecido via props.
Esse caso é o frutas aqui.
Certo?
Então, para essa aula só, na próxima aula a gente vai continuar
com as outras propriedades.
Certo?
Então, até lá.
Tchau.
Nenhum comentário ainda (loading...)
Nenhum comentário ainda (loading...)
Gostou da aula? 😆👍
Apoie nosso trabalho com uma doação: