Um momento
Aula 36
Cursos / React: Componentes Controlados
Curso React: Componentes Controlados

Summary

# Resumo do Teste de Checkbox com React

## Executando os Testes
- Iniciamos o processo rodando `npm test`.
- Foi adicionado um teste para verificar se o componente contém um input do tipo checkbox, que passou sem problemas.

## Validando a Falha do Teste
- Para garantir que o teste funcione corretamente, removemos o input do arquivo `checkbox.js` e observamos o teste falhar. 
- A falha indicou que esperávamos um input de comprimento 1, mas recebemos zero.

## Revertendo Mudanças
- Reverti a mudança ao arquivo `checkbox.js`, restaurando o input.

## Estrutura do Teste
- A próxima etapa é testar as propriedades do input. Para manter a consistência, foi decidido usar `beforeEach` para montar o componente antes de cada teste.
- A variável `component` foi movida para o escopo do bloco de `describe`, permitindo acesso a ela dentro de `beforeEach` e dos testes.

## Testes de Propriedades
- Um novo teste foi escrito para verificar se o input tem a propriedade `type` com o valor `checkbox`.
- O método `find` foi utilizado para localizar o input e verificar sua propriedade `type` com a expectativa de que seja `checkbox`.

## Execução de Testes
- Após salvar o arquivo `checkbox.js`, todos os testes passaram.
- Para ilustrar a falha, alteramos a propriedade `type` de `checkbox` para `radio`, resultando em uma falha do teste, pois a expectativa de `checkbox` não foi atendida.

## Conclusão
- O processo de testar as propriedades dos inputs continuará seguindo o mesmo formato para garantir a funcionalidade do componente.

Video Transcript

Vamos lá rodar npm test. Nós adicionamos o test para o checkbox, ele já sabe aqui e passou o test sem problema. Para poder ver se realmente o teste está funcionando, vamos remover o input do nosso implementação e ver o teste falhar. Vou aqui remover o teste da implementação, checkbox.js, aqui vou remover o input, vou salvar e ver o teste falhar. O teste falhou dizendo que a gente esperava ter um input, receber um da length do input, recebemos nada, zero. Então funcionou direitinho, vou voltar ao arquivo do checkbox e dar um comando z aqui para reverter. Esse foi o primeiro teste, deve incluir um input. Agora precisamos testar cada propriedade que foi dada ao input. Vamos lá. Como a gente vai fazer esse workflow sempre a mesma maneira, monta o componente, faz o expect, vou pegar esses caras e mover para o beforeEach. Antes de cada teste, vamos montar o componente com as propriedades falsas. BeforeEach, vamos mover aqui, pega esse cara, vou mover lá para cima, para dentro do beforeEach. Então o beforeEach, esse cara aqui é chamado, antes de cada teste, rodar, certo? Antes de cada teste, beforeEach. Então nós vamos fazer o componente, mas como o componente aqui dentro desse teste, nós temos que acessar o componente, nós precisamos fazer, esse cara aqui está definido com a const que só é acessível localmente nesse bloco. Por isso eu vou, eu vou ver o const e vou definir o próprio componente fora desse beforeEach, mas ainda dentro do bloco de describe. Dessa maneira nós vamos ter acesso a essa variável component dentro de cada bloco, seja beforeEach, seja teste. E aí dentro do beforeEach a gente define o componente, porque esse beforeEach é executado antes de cada teste, quando o teste rodar, o componente, essa variável vai estar definida e não terá nenhum problema. Não teremos nenhum problema. Então vamos lá. Criamos o primeiro teste, agora vamos fazer outro teste aqui. Esse teste será para ver se o input realmente tem a propriedade type com valor checkbox. Vamos lá. Test deve incluir um input de tipo checkbox. Então como a gente vai fazer isso? Da mesma maneira que a gente fez antes, primeiro de tudo a gente tem que encontrar o input. Buscar o input e aí a gente vai dar um lado nas props daquele input. Então vamos lá. Component que é o Enzyme Rapper, chama o método find, a gente quer encontrar um elemento, um componente chamado input. E aí o quê? Esse input nós vamos olhar na propriedade chamada type. Vamos falar ponto prop, certo? Type. Então nós esperamos que esse valor seja o quê? Seja checkbox. Então vamos lá. Expecto esse cara to be checkbox. Não é? Então preparado? Vamos lá salvar e ver os testes rodarem novamente. Ah, esqueci de salvar o arquivo do checkbox.js por isso que está aparecendo o teste falhando. Vou salvar o arquivo de novo para ele poder incluir o input. Voltando aqui ao teste. Todos os testes estão passando e o nosso novo teste aqui também. Só para ilustrar como o teste vai falhar, se a gente remover o type checkbox, vamos lá. Vamos mudar esse cara para a radio. A gente fez um erro aí e agora está a radio. Então note que o teste já sabe. Ele espera que seja um checkbox, mas recebeu rádio que está errado. Certo? Então falhou. O teste falhou. E dessa maneira nós vamos conseguir fazer todos os outros testes para as outras propriedades. Então vamos lá.
Nenhum comentário ainda (loading...)
Nenhum comentário ainda (loading...)
Gostou da aula? 😆👍
Apoie nosso trabalho com uma doação: