Aula 47
Testando o Número de Componentes Checkbox
Summary
# Resumo da Aula
Na aula de hoje, o foco foi no teste de um componente que deve renderizar um checkbox para cada opção fornecida via `props.options`. O componente em questão é o `checkbox list`.
## Passos da Implementação:
1. **Verificação de Opções**:
- O número de checkboxes renderizados deve corresponder ao número de opções em `props.options`.
- A verificação é feita utilizando `props.options.length` para contar o número de checkboxes.
2. **Desenvolvendo o Teste**:
- O teste verifica se a quantidade de checkboxes renderizados (`componentes de checkbox length`) é igual a `props.options.length`.
- Inicialmente, o teste falhou devido a um erro de importação do componente `checkbox length`, que não foi exportado corretamente.
3. **Correção**:
- O erro foi corrigido ao adicionar chaves na importação do componente.
4. **Teste de Funcionalidade**:
- Um teste adicional foi realizado para garantir que o componente capturasse inconsistências.
- Um checkbox extra foi adicionado intencionalmente para verificar se o teste falharia ao esperar que o número de checkboxes fosse 4, quando deveria ser 3.
5. **Resultado**:
- O teste corretamente identificou a discrepância, validando que estava funcionando como esperado.
- O autor da aula então reverteu as alterações que causaram o erro, finalizando a aula com a confirmação de que o teste estava completo.
## Encerramento
Na próxima aula, será abordado como verificar se as propriedades de cada checkbox foram definidas corretamente.
Até mais!
Video Transcript
Vamos lá pessoal, nessa aula nós vamos terminar esse teste aqui para verificar se tem um
checkbox para cada opção.
Foi passado via propriedade options aqui para o checkbox list.
Nesse caso aqui options tem três opções, uma, duas, três.
Então vai ser options.link, vai nos dar um número de opções fornecidas ao checkbox list.
Então gente só precisa verificar se tem, se esse número é o mesmo número de checkbox,
componentes de checkbox aqui.
Deixa eu mostrar aqui no lado direito checkbox list.js.
Onde aqui ele faz o map no props.options.
Então vai dar o número de options, é o número de checkboxes.
Vamos verificar.
Vamos fazer isso bem simples, eu só vou lá no component.
Vamos procurar o checkbox dessa maneira aqui.
Ele vai capturar todos os checkboxes e foram renderizados.
Aí a gente vai verificar a length, quantos checkboxes tem.
Aí a gente vai comparar essa length expect, essa length to be okay.
Você tem o mesmo número de opções que vai passar, nesse caso é o options aqui.
To be options.length, dessa maneira.
Só para poder deixar mais específico, você está passando props aqui.
Eu não vou acessar diretamente options, mas vou acessar o objeto props.
Então vou falar props.options.length.
Ele está acessando esse props.options.length, que vai dar no mesmo, desse aqui.
Expect componentes de checkbox length to be props.options.length.
Nesse caso vai ser 3 aqui, a gente espera que esse número seja 3.
Vamos salvar esse teste.
Salvamos os arquivos, vamos lá no terminal agora.
Abre esse terminal.
Vamos dar npm test para ele poder rodar o gest.
Vamos ver o que aconteceu.
You cannot read proper text types, so undefined, não sei o que.
Acho que eu sei o que aconteceu aqui.
Tem um warning aqui, quando você tem C warning, type is invalid.
Vou falar desse mensagem aqui.
Você esqueceu de exportar seu componente do arquivo que foi definido.
Normalmente isso aqui, eu se refere.
Provavelmente você exportou o componente de maneira incorreta.
E eu acho que eu sei onde foi.
Vamos ver aqui.
Eu importei o checkbox length assim, note que não tem chave.
Vamos ver a definição do checkbox length aqui do lado.
Tenho o const checkbox length lá embaixo, tenho o export.
O note está exportando com chave.
Então por isso que deu esse problema.
Eu importei de maneira incorreta.
Então eu tenho que adicionar chave aqui para poder extrair do próprio modo.
Salvar, vamos lá de volta ao terminal, depois de corrigir esse erro de importação.
Agora está tudo certo.
O teste apareceu aqui para o checkbox length component.
Deve incluir um checkbox para cada opção.
Está passando o teste.
Muito bem.
E aí, a gente terminou?
Não, a gente tem que verificar se esse teste realmente está testando.
Então vamos fazer esse teste para lá.
Vamos lá no implementação checkbox length.
Vamos ver aqui nesse map, por exemplo.
Se você tem esse map aqui,
aí você dá o valor que retorna desse cara todo aqui.
É uma lista, não é?
Então vamos adicionar o outro cara para essa lista.
Aqui no final, vou adicionar com cat.
Um objeto, um id do 1, value, blah, blah.
E level, qualquer coisa aí.
Essa maneira vai adicionar um elemento a lista.
Essa lista vai ter sempre um componente 1, elemento a mais.
Então vai estar incorreto.
Vamos ver se o teste realmente está capturando isso.
Então a gente espera que o número de opções de checkbox seja 3 mais.
Está adicionando 1 a mais.
Então vai aparecer 4.
Vamos testar aqui.
O que aconteceu?
Manders call crash, e outro teste aqui.
Teve que ver o que a corrupção.
Optiques are not valid.
Reactile, o que eu quis.
Ah, me desculpa.
Eu esqueci de definir checkbox.
Isso aqui na verdade é uma lista de checkboxes.
Isso aqui só é options.
Então vamos adicionar o checkbox.
Deixa eu ver aqui checkbox.
Qualquer coisa.
Nem pode ser qualquer coisa.
Lembro qualquer coisa.
Value.
Isso aqui é brilhinho.
Só que você vê que qualquer coisa, name, variable, value.
Um change vai ser da metod...
A função aqui faz nada.
E checked.
Vou estar falso.
Vou colocar um change.
Vou colocar um change.
Vou colocar um change.
Vou colocar um change.
Não faz nada.
E checked.
Vou botar false.
Faz qualquer coisa aqui.
Certo, põe qualquer valor.
Agora está correto.
Lista de checkbox com outro checkbox.
Componentes react here.
O objeto anteriormente não era um componente.
Por isso que deu o problema.
Agora vamos ver.
Não olhada.
Ele esperou que o número de checkboxes seja 3, mas recebeu 4.
Que a gente adicionou esse extra aqui.
Então o teste realmente está capturando essa falha.
Que a gente de propósito adicionou ali.
Então está tudo ok para o teste.
Vou reverter esse que eu fiz aqui.
E terminamos.
E verificamos que o teste está funcionando corretamente.
Está capturando aquele caso.
Certo, devem incluir um checkbox para cada opção.
Então por essa aula é só.
Te vejo na próxima aula onde a gente vai aprender a verificar.
Se as propósitas de cada checkbox.
Foram definidas corretamente.
Até mais, tchau.
Nenhum comentário ainda (loading...)
Nenhum comentário ainda (loading...)
Gostou da aula? 😆👍
Apoie nosso trabalho com uma doação: