Um momento
Aula 48
Cursos / React: Componentes Controlados
Setup com o beforeEach

Summary

Resumo da Aula sobre Testes de Checkbox List

Nesta aula, o foco é realizar testes para assegurar que cada checkbox do componente esteja recebendo as propriedades corretas (Key, Name, Label, Value e Change checked). A implementação do checkbox list está no lado direito, enquanto o arquivo de testes, checkboxlist.test.js, está à esquerda.

Estrutura do Teste

  • O primeiro teste deve garantir que haja um checkbox para cada opção.
  • É essencial que as propriedades sejam passadas corretamente para cada checkbox.

Refatoração do Código

  • Utilizou-se o Enzyme para criar o wrapper do componente.
  • Para evitar repetição de código, a definição e chamada do setup foram movidas para um bloco beforeEach, que é executado antes de cada teste.
  • As variáveis como component e props foram definidas no bloco describe, utilizando let em vez de const, pois o componente e as propriedades precisam ser redefinidos antes de cada teste.

Acesso a Variáveis

  • As variáveis definidas em beforeEach não são acessíveis fora desse bloco.
  • Portanto, let é utilizado para permitir que as variáveis sejam redefinidas conforme necessário.

Continuação do Desenvolvimento do Teste

  • Com o setup já realizado e as variáveis acessíveis, a aula avança para a expectativa do segundo teste, que pode agora ser escrito de forma mais eficiente.

O objetivo geral é garantir que o componente de checkbox funcione corretamente, sem redundâncias no código de teste, otimizando o processo de manutenção e legibilidade.

Video Transcript

Nessa aula nós vamos começar os testes para verificar se cada checkbox recebeu as propas corretamente Key, Name, Label, Value ou Change checked. Então vamos lá. Vou responder tudo aqui e do lado direito temos a implementação do checkbox list. Lado esquerdo temos o arquivo de testes checkboxlist. checkboxlist.tas.js Então terminamos esse teste aqui deve incluir um checkbox para cada opção. Escreveu outro teste aqui. Neve, Cui, corretamente para cada checkbox. Devem cui as propas corretamente para cada checkbox. Então vai ser o mesmo lance de antes a gente ter que primeiro usar o shellam para poder criar o Enzyme Rapper. E a gente ter que passar as propas para o componente fazer aquelas propas para o shellam. Como a gente vai fazer a mesma coisa que a gente fez no teste anterior, eu não quero copiar e colar aqui. Eu quero extrair esse cara de uma maneira que a gente não precisa repetir o código sempre. Então vamos fazer aquela mesma estratégia que a gente fez nos arquivos de testes que a gente criou anteriormente. Vamos pegar e extrair essa definição, essa chamada do shellam para o bloco de beforeEach. BeforeEach aqui em cima. BeforeEach. Faço uma função, vou usar a função de flash. Esse bloco é executado antes de cada teste. BeforeEach. Antes de cada teste. Então vamos mover essa parte aqui. Do primeiro teste, vamos começar a refatoriação desse primeiro teste antes de fazer o segundo. Vamos mover esse cara para cima dessa maneira. Agora se a gente usar, definir as variáveis localmente no bloco beforeEach, não dá para acessar em outros lugares. Só é acessível nesse bloco, por isso a gente tem que extrair esse cara e vamos definir as variáveis no bloco assim. Nesse caso no bloco de describe. Se a gente definir, por exemplo, o component que a gente está usando aqui no teste, vamos definir o component aqui em cima, para ele poder ser acessível em cada teste e não precisa definir, declarar o component aqui. Mas se eu pô, const component, note que beforeEach roda antes de cada teste. Não tem só um teste, tem dois testes agora. Então o component vai ser redefinido, por isso que a gente não pode usar const aqui. Porque o const só permite a definição do variável uma vez. Se você quiser redefinir a variável depois da primeira definição, tem que usar o let. Por isso que a gente vai usar let. Essa maneira o component sempre vai ser redefinido antes de cada teste. Certo? Com isso a gente resolve o problema de acessar component nesse primeiro teste. Vamos ver se tem outra variável que ele está referenciando, que não é acessível. Component to be props. Essa variável props não está definida nesse bloco de teste, nem no bloco do describe. Então a gente vai precisar disponibilizar esse props, essa variável aqui. Em outras partes do programa, por isso, vamos fazer a mesma estratégia. Pegue aqui os props e define o props no before each. Mas como a gente vai redefinir o props sempre, não pode usar const, porque usar let. Então dessa maneira o props que é definido before each, antes de cada teste, vai ser acessível também em cada teste aqui. Então esses outros aqui não precisam fazer, que já está embutido no prop props. Então a gente pode referenciar usando props.options e props.checkoptions. Com esse problema já resolvido para poder não ter que copiar e colar código todo o tempo. A gente já tem um setup aqui no before each, só nos resta escrever e continuar escrevendo o segundo teste. Já tem o componente definido, a gente já pode começar a nossa expectativa.
Nenhum comentário ainda (loading...)
Nenhum comentário ainda (loading...)
Gostou da aula? 😆👍
Apoie nosso trabalho com uma doação: