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

Summary

# Resumo do Transcript

O transcript discute a implementação e testes em um componente que utiliza propriedades (`props`). A principal abordagem envolve a verificação do comportamento do componente em relação às propriedades que foram passadas. 

## Principais Pontos

1. **Referência a Props:**
   - O código faz referência a `props.name` e `props.value`, que se referem às propriedades passadas ao componente.
   - O correto uso de `props` é enfatizado, com correção de erros de digitação.

2. **Testes de Propiedades:**
   - Testes são realizados para verificar se o nome e o valor esperados são retornados corretamente.
   - Erros nos testes são corrigidos, mostrando a importância de ter valores definidos.

3. **Uso de Matchers:**
   - É aconselhado usar o matcher `toBeDefined` antes de verificar se o valor corresponde ao esperado.
   - Isso serve para garantir que a propriedade foi definida antes de realizar outras verificações.

4. **Comportamento ao Remover Valores:**
   - O transcript menciona que ao remover um valor, um teste pode inadvertidamente passar, o que pode levar a confusões.

5. **Práticas Recomendadas:**
   - Definir corretamente as propriedades no mock de testes.
   - Utilizar o matcher `toBeDefined` sempre que se trabalhar com propriedades, especialmente se não forem valores hard-coded.

## Conclusão

O diálogo enfatiza a importância de testes cuidadosos e da definição precisa de valores dentro de componentes, garantindo que o código funcione como esperado.

Video Transcript

antes de cada teste e vai ser disponível para ser usado aqui fora dentro de cada teste então esse cara props.name vai se referir a esse cara aqui ah e eu errei ali tem que ser name né desculpa props.name esse cara que vai ser esse valor eu corredi entendeu então esse valor aqui vai ser substituído aqui certo salva e vamos ver passou vamos ver se falha se eu botar vamos fazer o teste falar vem aqui em vez de ser props.name a gente põe qualquer nome assim no input do input esse cara aqui está errado né então vamos salvar e ver se o teste falou falou a gente esperava que seja o nome recebeu esse blá blá blá que é SD como o nome do input mas está errado então vamos lá corrigir voltar ao normal entendeu e assim por diante o vale também vai ser a mesma coisa então como exercício vou esperar você fazer o teste deve ter dado prop vale ao input e fazer o vídeo fácil por favor e aí está tudo certo vamos lá faz um bloco de teste deve ter dado prop vale ao input define com a função de flash que uma é uma esperar que o component find input prop alted value to be o que é o valor foi passado como prop nesse caso já ser o joan a gente vai acessar props aqui props.com é prop.value certo que se props refere a fake props que a gente fez aqui em cima que está disponível porque a um lat props fora do before it e as props são passadas dadas ao input text entendeu passou vamos fazer falhar vamos fazer valor errado ali esperava ter João acho esse cara João aqui certo voltar aqui com meninzi salvar só tem um detalhe aqui para esse teste o que acontece onde definir esse cara aqui por exemplo vamos ver vale o João botar and define certo and define vamos ver o que acontece o teste passou por que porque o prop vale do input espera seja um define porque é um define esse cara foi passado aqui indefinido e você esperava que seja indefinido também porque é indefinido está dentro do props se você estiver criando os testes você tem essa responsabilidade de deixar o valor aqui fazer escrever o valor corretamente não vai dar esse problema que você nem sabe se vai testar mesmo o que o cara podia ser indefinido aqui ainda funcionar não se eu tirasse o vale por exemplo tiro o vale ele passou passou e nem tava definido mas você quer definir por exemplo to be define isso que a gente quer entendeu esse matura aqui to be defined é bom usá-lo antes de fazer o to be se não eu não sei se quando eu programei o teste eu não sei se eu passei a propriedade ou não e ainda passou o teste só não sei então normalmente se eu voltar aqui props.value voltando ao original aqui o meu quer que eu queria dizer é que você tem que definir esse props.value aqui no fake props e se você não definir o teste vai passar do mesmo jeito então eu gosto de fazer isso aqui deixa eu te mostrar vou copiar duplicar a linha como eu disse before eu uso esse matcher antes do to be se eu estiver usando props no caso estiver usando esse object props fake eu ponho o to be define antes para ter certeza que o valor foi definido o valor do import aqui esse cara aqui e ele se voltar aqui esse value tem que ser definido entendeu se eu tirar vai ser indefinido então eu uso to be defined para ter certeza que foi definido expect value ah eu esqueci de salvar entendeu salva aqui tá passando para falar remove value aqui eu removi salvei aí expect receive to be defined o valor mais receber um define então tem esse detalhe certo da mesma maneira aqui eu faria no name espero que o name seja define antes de do to be certo mas se eu tivesse o nome aqui se eu tivesse dado diretamente escrevido nome aqui sem se referir essa variável props nesse caso não precisa do to be defined porque você já tá escrito hard code né já tá escrito aqui exatamente o que você espera mas se eu tiver usando props talvez eu tenha esquecido de definir aqui então eu uso esse cara se estiver usando props mas já tiver definido aqui na hora no momento não precisa do to be define entendeu deixa eu testar aqui para testar vou remover o name tá passando remove name entendeu espero que seja nome recebeu um define certo então vamos seguir voltando ao que tinha antes salva
Nenhum comentário ainda (loading...)
Nenhum comentário ainda (loading...)
Gostou da aula? 😆👍
Apoie nosso trabalho com uma doação: