Um momento
Aula 82
Cursos / React: Componentes Controlados
Final do Curso Componentes Controlados

Summary

# Resumo do Transcript

Nesta sessão, o instrutor revisita a criação de testes para componentes de formulário em React. A jornada inclui a adição de um checkbox list, e agora ele propõe como exercícios a adição de testes para outros componentes, como:

- **Radio List**: Verificar a inclusão, propriedades respectivas, e testagem do evento `onChanged`.
- **Select**: Testar da mesma forma, incluindo nome e valor do select.
- **Botão de Submit**: Capturar o botão com tipo `submit` e verificar seu conteúdo.

### Objetivos dos Exercícios
- Criar testes para:
  - Inclusão do radio list com o nome "gênero" e suas opções.
  - Inclusão do select e suas opções.
  - Verificar o botão de submit que deve conter a palavra "processar".

### Ferramentas
- **GES**: Framework de testes.
- **Enzyme**: Biblioteca para facilitar a captura de componentes React.

### Encerramento
O instrutor parabeniza os alunos por chegarem até aqui, enfatiza a importância de ter criado seus próprios componentes controlados e os incentiva a seguir seus perfis nas redes sociais. Agradece pela participação e fecha a sessão.

Video Transcript

Oi pessoal, estamos de volta aqui, a gente terminou de criar test para verificar a inclusão do checkbox list no componente formulário, certo? Então, tem mais outras coisas aqui para verificar, nesse caso a inclusão do radio list, pode até verificar a inclusão do C label antes do radio list, a inclusão do select, o botão de submit e assim por diante. Como as coisas que a gente fez até agora, muito foi repetitivo, então eu não vou mais fazer testes aqui para o radio list e para o select, isso não significa que a gente não deve criar testes, na verdade eu estou deixando a criação desses testes para como exercício para você fazer. Então eu deixo como exercício para você criar testes para o radio list, a inclusão do radio list e para a inclusão do select, você também pode até testar a inclusão do botão de submit que está dentro do form. Então só vou deixar aqui explicar o exercício, você vai verificar aqui se ele incluiu esse radio list com o nome gênero, aí você vai verificar cada outra propriedade se foi definido corretamente, verifica se o options foi definido com aquela lista de objetos que definimos no constants.index, se você ver aqui no lado de cima da tela, frutas options e tem o general options, se esse objeto aqui foi exatamente igual a essas listas, essas listas de objetos foram exatamente identicas a essa lista aqui passada por options, também testa o onChanged, o onChanged vai lidar com a mudança do gênero, nesse caso a gente definiu aqui com setState e só definiu com o evento tógrafo do value, então esse cara é bem fácil, você vai criar um evento, um objeto, um evento e vai passar para um general change usando essa propriedade, onChanged do radio list, mesmo na que a gente fez anteriormente o onChanged dos outros caras, por exemplo checkbox list, aí também vai verificar o checked options se for o valor do gênero do estado, certo, vai usar que uma mesma maneira você pode usar component.state com o argumento a gênero para poder capturar o estado do wrapper, então para o select vai ser mesmo maneira, mesmo maneira que a gente fez anteriormente, captura o select com o nome país, e verifica se existe, depois vai ficar o value, onChanged, e o option, certo, da mesma maneira que a gente procedeu, e sempre o button aqui é bem fácil, você vai só capturar um button de tipo submit que está dentro de um form, certo, você pode botar component, find, button com a colchete, type, submit, ou você pode também usar o findware, certo, depende de você, pode até ser fácil, o conteúdo do botão tem a palavra processar, então por isso é isso, para o formulário, né, verificamos tudo, depois de você fazer esses exercícios, aí se também quiser testar o app, depende de você, não tem quase nada aqui para testar, só inclusão do formulário, então por isso é só para o componentes formulário, esse é o que a gente começou aprendendo a controlar esses componentes primitivos do HTML, aprendemos o input, checkbox, radio, e o select, e a gente criou os nossos próprios componentes aqui, deixa eu clicar, close pane, criamos os nossos próprios componentes e criamos o nosso próprio formulário que inclui cada componente que a gente criou, aí depois de criar todos esses carros a gente aprendeu a criar testes usando o GES, que é um framework de testes, com o Enzyme, Enzyme é uma, para facilitar a captura do componente de React, para poder selecionar o componente, verificar as propriedades e assim por diante, então aqui o nosso aplicativo aqui, a gente fez e por isso é só, parabéns para chegar até aqui, esse é o término do componentes controlados, muito obrigado por assistir e por acompanhar até o final, você pode me seguir nas redes sociais, eu estou no Twitter, meu username é o NBKhub, estou também no GitHub, NBKhope, se você não é meu inscrito ainda por favor clique no botão de se inscrever, clicar no Instagram para poder receber os últimos vídeos e também ativei o vejo na próxima então, muito obrigado e até mais, tchau!
Nenhum comentário ainda (loading...)
Nenhum comentário ainda (loading...)
Gostou da aula? 😆👍
Apoie nosso trabalho com uma doação: