Aula 30
Curso React: Componentes Controlados
Summary
# Resumo do Transcript
Neste trecho, discutimos a refatoração de testes em um componente, buscando melhorar sua estrutura e legibilidade.
## Estrutura de Testes
1. **Uso do `beforeEach`:**
- A função `beforeEach` é utilizada para executar um trecho de código antes de cada teste, permitindo configurar o estado inicial do componente.
- Foi sugerido recortar o código que monta o componente para que ele seja rodado a cada teste.
2. **Escopo das Variáveis:**
- O componente deve ser definido fora dos testes, utilizando `let` em vez de `const`, para que ele possa ser reassociado em cada execução do `beforeEach`.
3. **Propriedades do Componente:**
- O texto menciona a criação de "fake props" ou propriedades falsas para o componente que está sendo testado, as quais devem ser definidas antes do teste real.
- Um objeto `props` foi criado para armazenar as propriedades do componente, e o `spread operator` (`...`) foi usado para passar essas propriedades ao componente.
4. **Teste das Propriedades:**
- Um teste inicial foi estruturado para verificar se a propriedade `name` do componente está sendo configurada corretamente.
- A importância de garantir que o valor esperado da propriedade corresponda ao que foi passado para o componente é destacada.
5. **Melhorias na Manutenção dos Testes:**
- Sugestões foram feitas para evitar duplicação de valores, permitindo que um valor referenciado seja usado em várias partes dos testes, facilitando a manutenção.
6. **Disponibilidade das Propriedades:**
- Para que as propriedades fake fossem acessíveis fora do `beforeEach`, foi proposto o uso de `let` para a variável `props`, tornando-a acessível em todos os testes.
## Conclusão
A refatoração busca tornar o código de testes mais claro e eficiente, facilitando a manutenção e melhorando a estrutura dos mesmos por meio do uso adequado de variáveis e funções pré-definidas.
Video Transcript
Agora a gente vai seguir para checar as outras propriedades.
Serão passados para o input.
Mas antes disso, vamos dar uma refatorizada aqui.
Você é nórdico, a gente sempre chama a mesma coisa em cada teste.
Vamos dar uma maneira de rodar esse comando antes de cada teste.
Para isso, vamos usar o before each.
Essa função é o chamado hook.
E esse cara aqui, qualquer coisa que você definir dentro,
vai ser rodado antes de cada teste.
Before each, a gente quer rodar esse cara.
Vou recortar e vou colar aqui.
A gente quer montar o componente antes de rodar cada teste.
Então, primeiro a gente chama esse cara, depois roda esse teste.
Chama esse cara de novo, de maneira novamente.
Roda esse teste e assim por diante.
Vou remover esse cara.
Agora, vai dar erro porque esse cara não vai estar definido dentro desses testes.
Você note o escopo aqui desse cara é somente nesse bloco.
Então, esse cara não está definido dentro do bloco de teste.
Só para ilustrar, vamos lá.
NPM test.
Você note o componente não está definido.
Para isso, o que a gente vai fazer?
A gente remove const e define o componente fora.
Mas tem que usar let.
Por que let?
Porque se você usar const, essa variável aqui tem que ser definida na hora.
E isso pode ser definida uma vez, não mais de uma.
Se eu rodar, qual é o erro?
É um erro.
Certo?
Eu poderia fazer isso, por exemplo.
Também vai dar certo.
Esse cara vai montar o componente aqui só uma vez.
E põe na variável e você expect.
Não sei o que.
Eu não gosto de fazer isso.
Eu, geralmente, deixo aqui dentro do before-each para montar.
Antes de cada teste, vai montar novamente.
Então, eu dou um let do componente.
Inicialmente, o componente vai ser indefinido.
Mas quando o roda o before-each vai setar a variável para esse show, esse componente montado.
Roda o teste.
Vem aqui de novo.
Roda isso de novo.
Já seta o valor do componente para outro valor.
Então, é dar um reassign.
Então, roda esse cara e se empurre diante.
E o let deixa você definir a variável mais de uma vez.
O conste deixa você definir uma vez e nunca mais.
Certo?
Então, vamos lá.
Se não deu erro, apertar.
Tudo ok.
Agora, a gente não precisa mais digitar esse cara aqui.
Então, vamos seguindo.
A próxima propriedade é name.
Se não diga name, está se definindo a props que foram dadas ao input text.
Certo?
Normalmente, a gente não testa as propriedades que foram dadas ao input text.
Se a gente testa propriedades dadas a esses caras que estão dentro da return,
nesse caso, propriedades do input.
Diferente.
Para props, a gente vai fazer o nosso próprio fake data.
Fake props.
Tem que dar um fake props aqui.
Normalmente, tem que passar as props aqui para o input text.
E a gente vai definir esses caras um por um.
Certo?
Normalmente, você pode fazer aqui.
Deixa eu quebrar a linha para ficar mais fácil de ver.
Pode adicionar aqui, por exemplo, type.
Ops, desculpa.
Qual as propriedades que eu esqueci?
Não é desse aqui.
Não confunda com o input.
Estamos falando desse cara.
Então, as propriedades desse cara.
Qual é a que a gente espera?
Deixa eu olhar no formulário aqui que eu já esqueci.
Então, vai lá embaixo, onde está usando o input text, esse cara.
Então, a gente tem que fake esse aqui, essas propriedades.
Então, a gente tem um name.
A gente pode usar nome e assim por diante, ou qualquer coisa.
Nem precisa ser o mesmo, né?
Mas vou botar nome.
E assim por diante.
Lebo, blah, blah, blah.
Mas eu não gosto de botar tudo aqui.
Eu gosto de fazer um objeto antes do shell aqui, chamado props.
Objet.
Vai pegar esse cara aqui, põe dentro do objeto.
Vou usar single quotes, onde eu estou usando JavaScript.
Aí vai definir todas as props aqui.
Lebo vai ser qualquer coisa que você quiser.
Tudo é fake, né? Tudo é fake.
Fake props.
Value, vai ser o quê?
Sei lá.
Qual é o value do nome? Era uma string, né João? Sei lá.
You won't change.
Won't change, a gente tem que definir.
Ah, na verdade, won't change.
É, a gente tem que definir o mock.
Então, para fazer isso, a gente vai usar a função jess.fn.
Eu ia dar uma cimentação para te mostrar.
TI.
Mock function, você olha o mock function aqui.
A gente dá essa função aqui.
Se você quiser saber mais, leia aqui.
Mas esse cara vai criar a mock function.
Essa mock function, você pode examinar para ver o número de chamadas, calls, dentro desse objeto.
.mock.calls.
Vai te dizer quantas calls chamadas a função e quais argumentos foram dados à função.
Essas duas coisas vão me importar antes, quando você usa mock.
Eu vou superar da mock no won't change.
Então, deixa eu dar aqui, em cima.
Won't change, jess function.
.mock.calls.fn.
.mock.calls.fn.
Vai criar a função mock.
Certo.
E aqui vai dar a won't change.
Esse cara, é esse cara aqui, mas como a propriedade tem o mesmo nome do valor, eu posso fazer assim.
Entendeu?
.name, variable, value, won't change.
São as propriedades necessárias já.
Deixa eu dar aqui.
Entendeu essas props aqui?
Tem que ser esses aqui.
Tem que dar fake.
A gente já escreveu aqui.
E na hora passa para o componente aqui.
Como é que a gente vai passar? A gente vai fazer assim.
.props.
Com a chave.
Esquiado e é s6.
Chamado spread operator.
Espera apurei, eu vou fazer o que?
Ele copia cada propriedade e valor do objeto e passa como o propriedade.
Agora.
Mesma coisa, se eu tivesse name,
nome, level,
nome, esse input de nade vai copiar tudo para cá.
Entendeu?
Salvo aqui.
Agora a gente passou as props para o input text, essa fake props, que é só quando se fosse passando aqui.
E voltando ao input text.
O que a gente vai fazer agora?
Vai testar aqui.
Vamos lá fazer o teste.
Te desafio a começar a escrever o bloco de test.
E aí, deu certo?
Primeira describe test.
É a aptidade do prop.
Ah, sei lá.
.props.
.props.
.props.
.props.
.props.
Ah, sei lá.
.props.name ao input.
Vamos lá definir.
Primeiro, encontro o input.
.find.q.
Compone.find.input.
Depois que encontrar o input, vai checar as props.
Qual prop?
Specífica?
Props chamado que?
.name.
Agora,
essa é o nome aqui, a gente espera o que?
Expect
esse nome ser quem?
Nesse caso, a gente passou
qual nome para o input text?
Passou o nome
nome aqui.
Ah, podia ser
qualquer coisa, a gente
passou esse nome do input.
Chamar o nome.
Então, a gente espera que seja o que?
Teubi
o mesmo valor
desse cara aqui.
Nome.
Teubi
nome.
Entendeu?
Normalmente, eu não pôno o nome aqui.
O que acontece se eu mudar aqui?
Se eu mudar aqui, vai estar errado.
Então, eu tenho que mudar aqui também.
Eu não quero fazer isso todo o tempo.
Se eu mudar aqui,
eu não quero fazer isso todo o tempo.
Eu não quero fazer isso todo o tempo.
Se eu algum dia mudar o teste.
Então, o que que eu faço?
Eu removo,
eu tire esse cara aqui em vez de pô...
coisa, eu acesso
o objeto props, que tem aqui
nesse teste.
Props, ponto,
nome.
Mas como é que eu posso acessar se o cara não está
em scopo?
Scopo do props que
é só dentro do before it.
Então,
como a gente pode fazer o props
ser disponível
fora do before it
e dentro de cada teste?
Se lembra que a gente fez isso aqui?
Então, como seria para
props? Te desafio.
Deu certo?
Remove const.
Let props aqui.
Agora, o props vai ser
sempre redefinido
antes de ir de cada teste
e vai ser disponível
para ser usado aqui fora
dentro de cada teste.
Então, esse cara
Nenhum comentário ainda (loading...)
Nenhum comentário ainda (loading...)
Gostou da aula? 😆👍
Apoie nosso trabalho com uma doação: