Aula 31
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: