Video Transcript
O terceiro teste vai ser para verificar a inclusão da propriedade name no input.
Vamos lá fazer o teste.
Deve incluir um input, cujo propriedade name.
Vamos ver cujo propriedade, que recebe uma propriedade name, que recebe uma propriedade
name do propriedade name.
Deve cujo input que recebe uma propriedade name, que recebe um propriedade name.
Vamos lá.
Vamos lá.
Primeiro de tudo encontrar o input component, nosso enzyme wrapper, chama o method define,
input, qual é a propriedade nesse caso?
Name.
Essa propriedade do input se refere a esse aqui.
Name.
Agora, esse valor aqui se refere a esse cara aqui, certo?
Então não confunda os dois.
Então vamos lá.
Esse valor a gente espera que seja o quê?
Espect.
Nesse caso, como a gente fez uns propriedades falsas?
Vamos olhar lá em cima, lá em cima no before each.
O name é frutas com esses caras aqui.
Então nós esperamos que esse valor seja to be assim.
Frutas, certo?
Vamos salvar e ver o teste aqui.
Ah, esqueci de remover o erro que a gente fez antes, simulado.
Vamos mudar o type do input para checkbox novo, que está correto, e voltar aqui.
Componente is not defined.
Qual o problema aqui?
Eu escrevi o componente em português.
Então não tem é.
Certo, então o teste deve incluir o input que recebe o propriedade name do componente.
Então esse cara aqui deve ter valor que é recebido como props do pai, nesse caso aqui
e aqui.
Como a gente definiu props aqui?
Se você não quiser mais digitar esse cara aqui, por exemplo, se nos seus testes você
estiver sempre olhando no valor de name e se tiver muito teste que tem o mesmo name
aqui e se de repente você mudar esse valor aqui em cima, por exemplo, banana ou qualquer
coisa assim, aí você vai ter que mudar todos os testes para ser banana.
Nesse caso só tem um, mas tiver vários que você teria que mudar nesse caso aqui para
banana e assim por diante.
Por causa disso, normalmente eu gosto de usar o valor da própria props que a gente definiu
lá em cima, em vez do valor aqui mesmo.
O problema, um detalhe em usar isso é que você tem que realmente definir os props corretamente,
senão ele vai pensar aqui, mesmo que seja indefinido, ainda vai passar o teste, como
a gente já deu uma olhada muito tempo atrás quando a gente estava olhando os testes para
o input.
Certo?
Então não se esqueça de definir os props aqui e o que eu vou fazer para poder usar esse
valor aqui.
Sem, eu não quero usar frutos aqui, eu vou usar props.name, esse cara props.name se
referir a props definida aqui que foi passada ao componente injetado no checkbox.
Mas como o props está definido com a variável local no before each, nós precisamos fazer
o que?
Isso mesmo, vamos remover o const e definir o props um nível acima no block que está
no bloco exterior.
Agora está no block de describe que é disponível a variável props tanto como no before each
como em cada teste.
Então antes de cada teste ele define a props e nós podemos usar aqui props.name que é
na verdade o valor frutos.
Certo?
Só esse detalhe.
Vamos salvar e ver se o teste não falhou.
Tudo ok.
Então vamos lá e fazer outro teste.
Certo?
Vamos ver aqui.
Teste para a propriedade value.
Deve incluir um input de value.
Tem o props do py, alguma coisa assim.
Opponent, find, input, prop, qual é a prop value?
Esperamos que esse cara seja o que?
To be props.q.
Esse props é o props que a gente definiu aqui em cima.
Ponto value que vai ser banana.
Certo?
Então props.value esse cara na verdade é banana.
Certo?
Passando o teste.
Agora se esse cara for outra coisa sei lá.
Vamos ver aqui.
Só um detalhe aqui para explicar.
Esse teste está bom ou mais?
Incluir.
Isso a gente tivesse digitado banana aqui mesmo.
Vamos valor estático.
E passar o teste ainda.
O teste ainda passa.
Isso não é bom.
Então vamos fazer esse teste.
Ficar mais forte assim.
Melhorar esse teste.
Então vamos primeiro definir o valor e depois vamos mudar o valor.
Mudar a prop.
E quando a prop mudar esse cara vale também tem que mudar.
Nesse caso não vai mudar, né?
Porque a banana é estática.
Então vamos fazer aqui dentro do próprio teste fazer assim.
Component.
Agora esse component é o enzyme wrapper.
Tem um método chamado set props.
Para você poder setar as props de novo.
Certo?
Vamos fazer o caso set props.
A prop que você está nesse caso é value.
Eu quero definir o novo valor.
Quero passar o novo valor para o checkbox, certo?
O valor que a gente tem é banana, mas eu quero mudar esse valor.
Value para outra coisa.
Vamos colocar laranja.
Certo?
Então esse cara vai mudar a prop.value para ser laranja, certo?
Dentro do próprio wrapper.
Note que eu não estou mudando a variável prop.
Eu estou mudando as props do componente do enzyme wrapper, certo?
Então vamos aqui.
Depois que mudar isso, eu espero, expect, que o componente find input prop value.
Eu espero que seja o quê?
Agora que seja laranja.
O que mudou deve mudar.
Se mudar, então está errado.
Certo?
Então vamos lá e ver se o teste funciona ou não.
O que é que eu fiz errado?
Que o parêntese tem que ser aqui, certo?
Então o teste falhou.
Nós esperávamos que o valor seja laranja porque a gente mudou a prop.
Mas ainda está a banana, recebeu banana.
Por quê?
Porque está o valor estático.
Agora o teste está funcionando melhor.
Agora nós sabemos que a gente não pode aceitar o valor estático aqui.
O ponto de valor tem que mudar com a prop, props.value, que é passada como o pai.
Então a gente vê o ponto de volta prop.value para poder passar o teste.
Certo?
Agora o teste está bem melhor e vai identificar aquele erro do value ser um valor estático.
Uma constante.
Certo?
Certo?