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