Um momento
Aula 42
Cursos / React: Componentes Controlados
Curso React: Componentes Controlados

Summary

# Resumo do Transcrição

O responsável pelo código está realizando um teste em um componente que exibe um rótulo (label) com texto. Aqui estão os principais pontos discutidos:

1. **Captura do Texto**:
   - O console retornou "banana" como valor de texto esperado.
   - O texto é capturado através da propriedade `props.label`.

2. **Atualização do Teste**:
   - O código é ajustado para verificar se o texto corresponde a `props.label`.
   - Com o rótulo definido como "banana", o teste inicialmente falha ao não capturar correctamente o valor de texto, exigindo a adição de `.text()` para obter o valor real.

3. **Feedback do Teste**:
   - O teste passa quando a modificação é feita.
   - O autor explora a alteração da propriedade para "maçã", observando que o teste agora retorna um erro, que mostra uma discrepância entre o valor esperado e o recebido.

4. **Verificação da Posição**:
   - O autor move o input e observa que o teste falha ao buscar o texto devido à nova posição do rótulo.
   - O teste efetivamente valida a existência e posição do texto.

5. **Testando Propriedades de Estilo**:
   - O autor sugere testar as propriedades de estilo do componente, como `fontWeight` e `color`.
   - Um novo teste é adicionado para verificar se o estilo do rótulo é negrito e azul.
   - O código para capturar e testar essas propriedades de estilo é estruturado para evitar repetição.

6. **Consolidação dos Testes**:
   - Todos os testes são salvos e passam com sucesso após ajustes.
   - O autor reafirma a importância de documentar e validar as mudanças para garantir a funcionalidade do componente.

O autor termina mencionando que sempre deve-se fazer verificações adequadas para manter a integridade dos testes no código.

Video Transcript

Vamos aqui, vou salvar, já rodou o teste lá, deve incluir o texto, não sei o que, está aqui o console log daquele debug e retornou o que? Retornou o banana. Esse aqui é o texto daquele cara. Aqui a gente era o label, é chamado banana. Então, voltando aqui, a gente capturou o cara corretamente. Agora só falta a gente verificar se esse cara expect, vamos expect, vamos tirar o debug, se eu deixar só assim, vamos ver se funciona. Tem um detalhe aí, talvez se a gente tenha que lidar. Então expect esse cara to be o que? Vai ser o props.label, note que ele está pegando essa propriedade label que vem como props. A gente já passou aquela props falsa aqui, deixou. Aqui lá em cima se lembra o label banana. Então vai ser a mesma coisa que se refere propriedade props lá de cima, ponto label. Certo? Agora vamos salvar ver o que acontece. Opa! Meu Deus, o que é isso? Então, por isso esse cara aqui, que a gente recebeu, é esse cara aqui. Mas como não era banana? Então a gente tem que dizer o que? Ponto text, porque aqui ele está capturando a node, o do enzyme. Mas não está capturando realmente o valor de texto que está contido. Por isso a gente tem que falar ponto text. Então vamos salvar e o teste passa corretamente. Certo? Tem esse detalhe, não se esqueça, ponto text. Então vamos revolver o teste only, tirar esse only, vamos salvar. Certo? Tudo passando corretamente. Vamos fazer o teste falar, vamos revolver esse cara aqui. Vamos botar outra coisa diferente, sei lá, maçã. Você note que o teste falou, recebeu maçã, mas esperava que banana. Agora vamos reverter e vamos mudar a posição. Espera aí, tudo passando. Agora vamos pegar esse input e vamos botar, vamos mover para baixo. Agora o label está no lado esquerdo, vamos salvar e ver o que acontece. Olha aí o que aconteceu. O teste falou, esperava que banana recebeu nada. Ele tentou pegar o texto do input, ele achou, pegou o input, que é o at1, ponto text, mas não tem nada. Então vamos reverter o teste realmente está perificando a posição e a existência do texto. Certo? Então por isso é só para o teste do label. Agora você também pode testar, se quiser, opcional, essa propriedade style aqui e vai fazer proceder da mesma maneira, interiormente. É sempre a mesma maneira, achar esse cara, verificar prop style e a prop aqui tem um objeto. Então você vai falar o que é, style.pont, esse prop style ponto o que? Point font weight, verificar esse valor seja bordo. Da mesma maneira, prop style ponto color, verificar esse valor to be blue. Então vamos lá, vamos tentar fazer isso, só para ver como é que é. Vamos lá aqui, adicionar o novo teste. Deve definir o estilo para o label em negrito e por do texto azul. Uma coisa assim. Vamos lá, vamos pegar a component, find, achar o label, pegamos o label. Aí você vai dar a prop style, esse cara que vai capturar aquela prop style, vai capturar esse objeto. Como você vai testar uma, duas propriedades, eu recomendo você poder primeiro esse cara dentro de uma variável para poder trabalhar, não ter que repetir o código. Vamos fazer aqui const, label style, vamos falar assim. Aí o que a gente vai fazer? A gente vai testar primeiro o font weight. Então o label style ponto font weight, esse cara, a gente espera, expect, to be bold, negrito. Certo? Aí faz a coisa para color, o label style, que é esse objeto aqui, a ponto color, que vai pegar esse valor aqui. Aí você espera que o valor seja to be blue. Dessa maneira. Vamos salvar o teste foi adicionado e está passando. Vamos fazer o teste falar? Sempre assim.
Nenhum comentário ainda (loading...)
Nenhum comentário ainda (loading...)
Gostou da aula? 😆👍
Apoie nosso trabalho com uma doação: