Aula 45
Arquivo de Teste para o Componente CheckboxList
Summary
# Resumo do Transcript
Neste transcript, o autor descreve o processo de criação de um arquivo de testes para um componente chamado `CheckboxList`. A seguir estão os passos e conceitos discutidos:
## Estrutura do Arquivo de Teste
1. **Criação do Arquivo**:
- O arquivo de teste é nomeado `checkbox-list.test.js`, seguindo a convenção que reflete o arquivo do componente, `checkbox-list.js`.
2. **Importações Necessárias**:
- O React é importado para utilizar JSX.
- O método `shallow` é importado do `enzyme` para renderizar o componente em teste.
3. **Organização dos Testes**:
- A estrutura de testes é organizada usando um bloco `describe`, intitulado "CheckboxList component", onde todos os testes relacionados a este componente serão incluídos.
## Descrição dos Testes
- **Teste Principal**: Um dos testes envolve verificar se o número de checkboxes renderizados corresponde ao número de opções fornecidas. Este teste assegura que há um checkbox para cada opção.
## Implementação do Teste
- **Montagem do Componente**:
- O componente `CheckboxList` é montado utilizando `shallow`, armazenando o resultado em uma variável, que é convencionada como `component`.
- A importação do componente requer navegação pela estrutura de diretórios, utilizando uma notação que conta os níveis de pastas.
## Conclusão
- O autor finaliza mencionando que, após importar e montar o componente, está pronto para proceder com os testes efetivos.
Video Transcript
Vamos começar, vamos criar o arquivo de touch para o checkbox list. Vamos aqui, src-test,
barra components, barra como, vamos criar um arquivo checkbox list, ponto test.js. O
nome reflete, o mesmo arquivo checkbox list.js, é certo que tem esse suffixo aqui test.test.js.
Serta, é só a convenção que a gente está usando aqui. Então, vamos lá. Para o nosso
arquivo de test, nós vamos precisar, primeiramente, do react porque a gente vai usar jsx. Então,
vamos lá, import. React, from react. Como a gente vai usar o enzyme para poder montar aquele
valor do component, a gente vai importar o shallow. For shallow, from enzyme. Note que tem esse cara
que a gente está extraindo o shallow do próprio módulo do enzyme. Então, vamos lá. Vamos criar aquele
bloco de describe para poder organizar uns nossos testes. Vamos falar aqui checkbox list component,
é a descrição do nosso bloco de describe. Dentro desse bloco de describe, nós vamos incluir
todos os testes para esse componente. Serta, então, vamos lá. Vamos escrever todas as
descrições dos testes primeiro, em vez de fazer um puro. Vamos lá. Vamos fazer assim. Qual
é o teste? Vamos testar se o checkbox list está incluindo o número correto de checkboxes.
Inclui, deve incluir
um checkbox para cada opção.
Deixe-me abrir o checkbox aqui do lado para você ver melhor.
Vou dar o rest of wrap aqui. Quebrar a linha de checkbox. Opa, checkbox list.
Está aqui este cara. Primeiro, a gente vai verificar se o número de checkbox
idealizado está correto. Note que esse checkbox vem do checkboxes, a variável,
que por si vem uma paração de map nessa props.option. Então, a gente vai verificar se tem um número
de checkboxes correspondente ao tamanho, a length dessa lista.
Vamos lá. Deve incluir o checkbox para cada opção.
Então, sempre que a gente vai fazer os testes, primeiro tem que montar o componente.
Fazer aquele shell com o componente do enzyme. Então, como se faz? Você chama shell,
essa função. E passa o componente aqui. Esse caso vai ser o que? Checkbox list.
Note que a gente tem que importar esse componente. Então, vamos lá,
em cima. Vamos dar um import. E o checkbox list está 1, 2, 3, níveis acima,
barra components, barra common. Então, a gente vai ter que dizer os dois pontos três vezes.
Checkbox list from 2 pontos, barra, dois pontos, barra, dois pontos, barra.
Então, a gente está no comos. Vai para o component, vai para o test, vai para o src,
barra components, barra common, barra checkbox list.
Certo?
Então, depois de importar, a gente pode usar. Aqui não vai ter problema.
Então, a gente deu shell para montar esse cara.
A gente vai armazenar esse cara num variável. Vamos chamar de... Eu gosto de chamar component.
Você pode chamar o que quiser. Na verdade, esse cara retorna um enzyme wrapper.
Na documentação, eles usam a palavra wrapper. Eu vou usar aqui component.
Certo?
E a gente monta o component.
Nenhum comentário ainda (loading...)
Nenhum comentário ainda (loading...)
Gostou da aula? 😆👍
Apoie nosso trabalho com uma doação: