Resumo da Aula de Testes Unitários

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!