Um momento
Aula 73
Cursos / React: Componentes Controlados
Testando a Inclusão do InputText pro nome

Summary

# Resumo da Implementação de Testes para o Componente Formulário

## Introdução
O objetivo desta sessão é iniciar os testes para o componente de formulário, verificando a inclusão de cada um dos componentes usados na visão.

## Testes do Componente de Formulário
1. **Verificação do Input Text**:
   - O primeiro passo é garantir que o `input text` para o campo de nome foi incluído corretamente na implementação do `formulário.js`.
   - O teste envolve procurar o componente `input text` usando seu `display name` em vez de importar o componente diretamente.
   - O método `find` é utilizado para contar o número de componentes encontrados.

2. **Aprimoramento dos Testes**:
   - Recomenda-se testar se cada `input text` tem um valor único definido no atributo `name`, para garantir que não haja duplicações.
   - Uma abordagem é capturar o `input text` cujo `name` é especificado, facilitando a verificação.

3. **Validação dos Testes**:
   - Caso um nome diferente (i.e., "nome 2") seja usado, o teste deve falhar indicando que não há componentes correspondentes.

4. **Verificação do Label**:
   - Um novo teste pode ser inserido para checar a presença do `label` correspondente ao `input text`.
   - O `label` deve incluir os dois pontos e estar corretamente associado ao campo de `nome`.

5. **Ajustes Finais**:
   - O teste foi salvo e verificado para garantir que tudo funcionou corretamente.

## Conclusão
Os próximos passos incluem testar o valor e a função `onChange` do `input text`, além de potencialmente criar novos testes para validar a implementação.

Video Transcript

Tala pessoal, estamos de volta. Depois de testar o estado inicial do componente formulário, é hora de começar os testes para a inclusão de cada componente usado na visão. Vamos lá, olhando aqui na implementação do formulário.js aqui abaixo, vamos dar lá para render, return, vamos testar se o input text foi incluído corretamente. Vamos verificar primeiro se ele realmente está incluído e se suas propriedades depois cada um foi definido corretamente. Vamos lá? Então, vamos lá. Vamos aqui. Test. Deve incluir um input text para o nome, para o campo de nome. Vamos ver o que é que a gente vai ver aqui. Dá uma vez o que a gente já fez antes, aquela mesma coisa. Vamos ver o componente, find o que? O nome do cara é input text. Então, eu gosto de usar só a string aqui com o nome do componente, é chamado display name do componente de react, em vez de importar o próprio componente e fazer assim no find. Tem essa funcionalidade do enzyme, mas eu gosto de fazer dessa maneira aqui. Se você tiver algum comentário sobre isso, por favor, deixe o. Certo? Então, vamos continuar aqui. Vamos esperar que esse cara find ponto length, que a gente vai verificar o número de componentes. Nesse caso, a gente só tem um. Então, to be, o quê? C1, né? Mas se você tivesse um formulário, normalmente tem vários, vários inputs, campos de text. Então, esse teste não está muito legal dessa maneira. Então, e para a gente melhorar isso, talvez você não ache que o input text já tem um variável com o nome, né? No cada campo de text, a gente espera que tenha o name que seja um valor único e o unique, né? Que não seja repetido. Então, normalmente, a gente pode fazer dessa maneira que você vai capturar o input text, cujo name, né? O nome é o que você especificou aqui. Dessa maneira, ele vai capturar corretamente que esse cara aqui não é outro input text que você estivesse no formulário. Se é uma das maneiras de capturar o cara corretamente, certo? Então, o nome aqui. E dessa maneira também, você já vai testando esse cara aqui. Nem precisa testar mais a definição dessa própria. Certo? Então, vamos esperar que tenha um input text cujo nome é name. Name é nome. Salvar. Vamos ver se não tem nenhum problema lá nos testes. Tudo ok. Vamos ver se o cara falar, se eu botar nome 2 aqui para o nome do input text, ele não vai achar e vai dizer que receber o zero. Então, fala o teste. Certo? Tudo ok. Então, vamos continuar, reverter a essa mudança. Vamos testar agora o level. Você pode, se quiser, criar outro teste e assim por diante, certo? Vamos criar outro teste aqui. Ou você pode... Eu vou deixar esse cara no mesmo teste aqui, mas... Se você quiser, cria outro teste. Deixa eu botar outro teste aqui, no mesmo teste. Só que eu não quero digitar outro caso de teste. Input text. Devem incluir input text para o campo de nome, então, tem que ter o nome. E tem também esse cara aqui. O próprio quê? Label. Tem que ser... Opa. Tem que ser nome assim, com dois pontos. A gente espera que esse cara, que a gente captura aquele input text, o próprio label, para ser nome com os dois pontos ali. Salvar. Se o teste está ok, tudo ok. Faz o teste falar. Nome 2, 2. Eu mudei a implementação aqui. Está errada agora. Ele recebeu o errado, esperava o, correto. Então, está tudo certo. Certo? Vamos lá. Vou deixar ele no mesmo teste. E agora, a gente vai testar o value e o onChange. Na próxima aula. Até lá.
Nenhum comentário ainda (loading...)
Nenhum comentário ainda (loading...)
Gostou da aula? 😆👍
Apoie nosso trabalho com uma doação: