Resumo da Aula de Testes Unitários
Na aula passada, foram criados testes unitários para os componentes individuais utilizados em uma página de formulário. Os componentes testados incluem:
- Input text
- Checkbox list (e cada checkbox)
- Radio list (e cada componente rádio)
- Select
Próximo Passo: Testes da Página do Formulário
Agora, o foco será criar testes para o componente de formulário como um todo. Os aspectos a serem testados incluem:
- Verificar a inclusão de cada campo do formulário:
- Um input text para o nome
- Um checkbox list para selecionar frutas
- Um radio list com opções
- Um select
Análise do Código
No arquivo formulário.js, o componente formulário possui um estado que armazena as informações. Funções para lidar com eventos de mudança (onChange) de cada controle foram definidas. Durante os testes, será verificado:
Próximos Componentes a Serem Testados
Os testes continuarão da mesma forma para:
- Checkbox List: Verificar a primeira inclusão e as propriedades do componente.
- Radio List: Testar as funcionalidades corretamente.
- Select: Garantir que o select esteja funcionando como esperado.
Conclusão
Os testes para o componente formulário serão iniciados na próxima aula.
Até lá!
As aulas passadas nós criamos testes unitários para cada componente aqui individual que
é usado nessa página com formulário.
Nós criamos testes para input text, para o checkbox list e cada checkbox também.
Não é?
Criamos também testes para o radio list e para cada componente rádio.
E terminamos com o select.
Agora nos resta a gente criar testes para a própria página do formulário.
A gente vai verificar se no componente formulário verificar a inclusão de cada campo de cada
parte do formulário.
A gente verificar se foi incluído um input text para o nome, se foi incluído um checkbox
list para selecionar as frutas, se foi incluído também o radio list com as opções.
E tem também o select.
Então vamos aqui dar um olhado no código fonte para a gente ver o que a gente vai precisar
testar.
Vamos lá no abril editor de texto.
No componente formulário.js aqui no arquivo tem um componente formulário.
Você vê que tem o estado iniciado formulário aqui.
O componente formulário ele armazena as informações do formulário no próprio estado.
Definimos funções, métodos de on change para lidar com aqueles eventos da mudança
de cada escolha ou daquilo que a gente digitou no input text ou que a gente escolheu no
checkbox list ou no radio list e no select.
Certo, então a gente vai verificar aqui dentro do método render essa visão aqui, esse modelo.
A gente vai só verificar da mesma maneira que a gente já fez antes, se o componente
input text foi incluído e se esse cara recebeu as propriedades corretamente.
Nesse caso aqui, um input text tem que ter esse name definido com essa string chamada
nome e o label tem que ser essa outra string com nome.
O valor aqui vai ser controlado do próprio estado do componente formulário.
Então a gente vai verificar se quando a gente mudar o estado, essa variável do estado
chamar nome, se realmente esse valor que foi mudado foi transmitido para esse input text.
Também vamos dar uma olhada na definição aqui do on change, do on nom change.
A gente tem que ver se realmente esse cara aqui foi definido corretamente.
Se a gente vai lá em cima aqui, voltando aqui, arrastando para a definição, a gente
vai verificar se realmente quando a gente chama o método on nom change e a gente vai
fazer um evento falso, se realmente o estado do componente formulário é modificado.
Tem um novo estado com a variável nome tendo aquele valor vindo do target do evento.
Da mesma maneira para os outros componentes, checkbox list verifica a primeira inclusão
e depois cada prop do componente.
Da mesma maneira a gente vai ver o estado aqui, esse check options vai ser controlado
pelo estado do componente formulário e o on fruit change a gente define lá em cima
essa método.
A gente vai ver se realmente o que a gente escreveu aqui, se a gente vai escrever o
teste para deixar esse cara realmente fazer as coisas que ele deve fazer.
Então vamos aqui, continuando da mesma maneira para o radio list e para o select, certo?
Então é assim que a gente vai proceder a partir de agora.
Vamos fazer testes para o componente formulário.
Então até a próxima aula onde a gente vai começar a escrever os testes.
Então tá, tchau!
Comentários
Entre para participar da conversa.
Carregando comentários…