Um momento
Aula 51
Cursos / React: Componentes Controlados
Testando o Título da CheckboxList

Summary

# Resumo do Transcript

No último encontro, foi finalizada a implementação de testes para verificar a presença de checkboxes em um componente prop chamado `checkbox list`. O foco atual é validar a parte do título, que se refere a "frutos que gostam".

### Estrutura do Componente
O componente `checkbox list.js` possui um template que inclui um texto dentro de um `span`. Existem várias formas de capturar esse elemento, mas a escolha foi por capturar diretamente o `span` devido à estrutura simples do template. O objetivo é verificar se o `innerHTML` desse `span` está correto.

### Passos para o Teste
1. Capturar o `span` do componente utilizando `component.find('span')`.
2. Verificar se o texto dentro do `span` corresponde a `props.label`, que foi definido como "frutas".
3. Executar os testes com `npm test` para garantir que tudo está funcionando corretamente.

### Ajustes no Teste
Um exemplo foi dado sobre alterar o valor para reforçar os testes. Para fazer isso:
1. Usar `wrapper.setProps({ label: 'novo label' })` para mudar as props do componente.
2. Reexecutar a verificação do `span` com o novo valor, garantindo que o teste verifique se `component.find('span').text()` agora corresponde ao "novo label".

Essa abordagem garante que os testes sejam robustos e que mudanças nas props sejam devidamente capturadas e verificadas.

Video Transcript

Não anterior, nós terminamos. Queria escrever aqueles testes para verificar se tinham checkbox para cada opção foi passada como prop para o checkbox list. Então aqui nós terminamos essa parte. E o componente, esse aqui no lado direito é o checkbox list.js, aqui o template que é retornado do próprio componente. Nós checamos essa parte aqui. Agora nos resta checarmos para aquele label, aquele título, voltando aqui. Frutos que gostam, essa parte aqui, de frutos que gostam. Esse cara aqui. Então tem só um texto dentro de um span. Então vai ser bem simples para verificar esses caras. Então tem várias maneiras de capturar esse cara, não é? A gente pode capturar a Div, o primeiro filho da Div, child, né? Children. Ou pode capturar o span diretamente, dependendo da estrutura do seu template. Com estrutura assim, dessa maneira só vou capturar o span, certo? Deixar bem simples. Então vamos lá, capturar esse span, verificar se realmente o texto desse cara, o chamado innerHTML, foi... Corretamente, mostrando corretamente. Então vamos lá, escrever o teste, deve incluir um título, o título da lista, vamos dizer assim, título da lista, sei lá. Dessa maneira. E eu esqueci o sinal de mais maior. Então vamos lá, vamos capturar o span, component, find, span, dessa maneira. Aí já capturamos o span. Só nos restos a gente vai ficar o quê? Esse teste que está dentro do span, a gente vai usar o quê? ponto o quê? ponto o texto. Aí vamos esperar, expect, esse cara deve ser o quê? Se eu vi um variável e vendo props, props.label. A gente definiu isso aqui. E acima, props.label como frutas, dois pontos. Então vamos usar o mesmo cara, props.label. Salvar, certo? Vamos lá no terminal, um npm test, adicionando o novo teste que está passando. Vamos verificar se o teste está tudo ok, vamos adicionar outra coisa aqui, em vez de prop.label aqui no lado direito, no arquivo checkbox list, eu vou botar aquele teste ali. O teste foi feio, esperava que seja frutas, mas recebesse o cara. Então está funcionando corretamente. O que acontece se eu digitar frutas aqui? Desce um maneiro. O que vai acontecer? O teste passou, mas está errado, não é? É a mesma coisa de antes. Se você quiser reinforçar os seus testes, você tem que mudar o valor no seu teste e testar aquele novo valor. Por exemplo, vamos lá, quero ver você fazer e adicionar aqui um novo expect, primeiramente, muda props.label para um novo valor e adiciona o outro expect para reforçar esse teste. Eu vou deixar aqui a implementação incorreta, que o teste está passando, eu quero ver você, desculpa, o teste está passando, quero ver você fazer esse teste e falar. Tudo certo, vamos lá? Primeiro vamos mudar aqui o quê? Vamos falar compônei, vamos falar... Então vamos mudar o valor do props.label. Uma maneira de mudar as props do seu wrapper, enzyme wrapper, é dessa maneira, você chama wrapper.setProps. Essa função recebe um objeto com as propriedades que você quer mudar. Aí você pode mudar dessa maneira, props. Aí você põe o que você quiser. Props, para label, novo label. Então se eu ficar para a linha para ficar melhor de ver... Compônei set props, passou um objeto com as novas props. Ah, nem preciso disso, desculpe. O que eu estava pensando? Set props com um novo label, vamos voltar aqui. Verifique as props aqui, for definidas dessa maneira, e se eu quero mudar esse label aqui. Então vou set props do component wrapper, um novo label. Aí vou esperar o quê? Expect, component, find, span. Tem que fazer isso de novo, certo? Não põe esse cara no variável, porque se você mudar isso aqui, vai renderizar outra coisa. Se eu estou muito cuidado, tem que chamar o component, find, span, potex de novo. To be o quê? Novo label. Salvar, antes que o teste falhou, esperar o valor do novo label, recebeu frutas. Então essa é a maneira de você reforçar esse teste.
Nenhum comentário ainda (loading...)
Nenhum comentário ainda (loading...)
Gostou da aula? 😆👍
Apoie nosso trabalho com uma doação: