Flutter: aplicando testes de unidade, de Widget e Mocks

Entendendo o projeto - Apresentação

Você quer aprender uma habilidade nova? E que tal uma habilidade que vai ser o diferencial para o mercado de trabalho?

Pois é, você que quer ser desenvolvedor de Flutter ou desenvolvedora em Flutter e já está fazendo os nossos cursos há um tempo. Chegou a hora de nós elevarmos um pouco o nosso nível e aprender sobre testes.

Nesse curso nós vamos aprender vários tipos de testes, entender para que servem os testes. Nós vamos usar esse projeto do Alura Bank para testar, onde ele tem uma API, tem os botões, algumas interações. Bem tranquilo.

Nesse curso nós também vamos aprender o que são teste de unidades, o que são testes de widgets e explorar esses dois mundos incríveis para podermos produzir um projeto de qualidade.

Então, se você quer ser mais profissional na sua área, o ideal é fazer projetos profissionais, e projetos profissionais precisam de testes.

Entendendo o projeto - Compreendendo os testes

Quer dizer que você já tem conhecimento suficiente para criar um grande aplicativo de celular? Ótimo, isso é perfeito, mas chegou a hora de nós elevarmos um pouco o nosso nível para podermos entrar no mercado de trabalho.

E para poderem entrar no mercado de trabalho, serem programadores, desenvolvedores, desenvolvedoras ou programadoras de alta qualidade, nós temos que entender conceitos específicos e especiais.

E um desses conceitos é o conceito de testes. O que são testes? Para que servem testes? É o que nós vamos ver agora. Então, só para nós não perdermos o costume, vamos dar uma organizada em como essa aula vai funcionar.

Primeiro nós temos que entender por que utilizamos testes nos nossos projetos, qual é a grande importância? E depois nós vamos dar uma pincelada, uma introduzida, uma entendida melhor em quais são os tipos de teste em Flutter.

Então, primeiramente, por que utilizar testes? Qual é a importância de testar? Para começar, eu quero fazer uma analogia, vamos contar uma história.

Vamos supor agora que você é uma desenvolvedora ou um desenvolvedor Flutter em uma grande empresa e você ficou os últimos dois anos produzindo um grande aplicativo de celular.

Um aplicativo de banco, ele é incrível, você tem certeza de que a qualidade do seu produto é imensa, sensacional.

Então, todo mundo está na ansiedade e vocês lançam o produto, finalmente está lá na PlayStore para todo mundo baixar e começam a aparecer diversos bugs, erros, coisas que você não tinha controle sobre.

"Como assim bugs que nós não conseguimos controlar?". Por exemplo, telas de tamanhos diferentes ou, as vezes, o usuário não tem espaço no celular. Enfim, muitas coisas que podem acontecer e nós não estávamos preparados para acontecer.

O seu aplicativo que você demorou tanto tempo para fazer começou a dar problema com vários usuários e eles não perdoaram o seu aplicativo.

As avaliações foram devastadoras, as pessoas não avaliaram nada bem o seu aplicativo e acabou que isso prejudicou muito a sua empresa.

Meu deus, e agora? O que nós fazemos? Bom, qual que seria a grande solução? Como nós podemos impedir que isso aconteça com os nossos projetos? Com os nossos aplicativos?

A solução é adicionar testes durante a produção de um projeto. O modo mais efetivo de nós fazermos com que os problemas não apareçam para os nossos clientes é ter certeza de que se eles aparecerem, eles vão aparecer enquanto nós estamos produzindo o nosso projeto.

Conseguimos ter um ideia de que, quando nós estamos construindo grandes aplicações, o ideal é colocar testes para que o projetos tenha qualidades, mas não paramos por aí, nós precisamos entender um pouco quais são os tipos de testes que nós vamos trabalhar.

Como é que funcionam os testes? O que, de fato, são testes na sua essência?

Primeiro, eu quero que vocês entendam que teste não é uma coisa só do Flutter, só de aplicativo de celular. Não, testes são essenciais e eles existem em muitos tipos de projeto. Eles existem em projetos de celulares, mas também existem em projetos de desktop ou sites.

De qualquer forma, independentemente do tipo de projeto ou de software que você criando, é importantíssimo que ele tenha um teste para que você tenha qualidade no que você está entregando. Existem vários tipos de testes que nós podemos usar, que nós podemos criar e isso não só no Flutter, isso é em todos os tipos de testes de software.

Então, eu vou pedir agora para subir os créditos dos vários nomes de testes que existem por aí quando nós estamos testando projetos. Vocês devem estar vendo, no lado esquerdo da tela, que são muitos testes.

Pois é, mas vamos agora falar do que interessa para nós, que são os testes em Flutter. Quando nós estamos falando de Flutter, especificamente, nós podemos dividir em alguns poucos tipos de teste e o primeiro deles é o teste de unidade, um teste mais simples.

Então, eu vou só comentar o que são esses tipos de testes e depois nós vamos entendê-los com mais clareza.

Nos testes de unidades nós estamos testando objetos pequenos, partes pequenas do nosso código, como uma classe ou uma função ou, como nós gostamos de nomear, um objeto específico.

Como nós já sabemos os nosso objetos de Flutter, nós temos esses objetos bem pequenos que compõem todo um projeto. Se você não lembra exatamente o que é uma classe, o que é uma função, sugiro dar uma revisada lá no Dart.

Mas nós também temos outros tipos de testes que são os testes de widgets. Lembram dos widgets lá dos nossos primeiros cursos de Flutter?

Pois é, nós temos que testar os widgets também, até porque eles são componentes que aparecem na nossa tela e às vezes nós temos integrações ou ações com esses componentes.

Então, nós temos que testar se o componente está no tamanho ideal para a tela, temos que testar se o botão está funcionando do jeito que nós queremos.

E nós também temos alguns testes mais completos e complexos que são os testes de integração que eles entregam vários widgets, várias classes, vários comportamentos, métodos, ações.

Então, é um teste mais completo, que é como nós gostamos de chamar, existem os testes de fluxo onde nós mudamos de tela. Temos também os testes de ponta a ponta onde nós testamos todo o aplicativo por completo.

E esse teste, na verdade, é bem longo e bem complexo.

Só para vocês não ficarem perdidos, nesse curso, especificamente, nós não vamos nos aprofundar em testes de integração, porque eles requerem um pouco mais de cuidado e de tempo. Agora nós vamos focar um pouco mais nos testes de widget e nos testes de unidade.

Só para nós finalizarmos com chave de ouro. A gente criou uma tabela para comparação de confiança, comparação de vários detalhes em relação os testes.

Olha só, quando nós não testamos o nosso projeto, ele não é confiável, pode até parecer bugs. O custo é zero, porque nós não precisamos fazer nada, a dependência, nenhuma, porque não dependemos de um teste e o nível de velocidade é rápido, ou seja, você produz muito rápido um projeto, mas ele não é confiável.

Quando começamos colocar testes no nosso projeto, nós podemos usar testes de unidade que aumentam a confiança do nosso projeto um pouco. Então, deixa de ser ruim para ser só uma confiança baixa, o custo é barato, porque fazer os testes de unidade são mais simples, mais fáceis.

E as dependências são bem poucos, porque os testes de unidade são meio que únicos. Então, eles não dependem muito entre si e a velocidade de execução ainda é rápida, apesar de mais lenta do que não fazer nenhum teste. Ela é ainda bem rápida.

Conforme nós formos criando testes mais completos e complexos, a confiança aumenta, o custo aumenta, a dependência aumenta e a velocidade cai.

Por exemplo, no teste de widget que nós vamos ver nesse curso também, a confiança no seu projeto já é média, o custo já médio, porque você demora mais para fazer. A dependência é moderada, porque alguns widgets dependem de outros widgets e a velocidade de execução desse projeto demora um pouco.

Então você atrasa um pouco a execução desses testes, desse projeto, em geral. Isso só para vocês terem uma noção quando nós falamos de testes de integração a confiança é altíssima, porque é muito difícil de você deixar um bug passar.

O custo também é muito alto, porque nós demoramos muito tempo para produzir os testes de integração. Então, custa dinheiro para fazer testes que demoram para serem feitos.

A dependência é exagerada, é uma dependência muito grande, porque você está testando um código inteiro. Então, todo mundo depende de todo mundo.

E a velocidade de execução é muito lenta. Então para você executar um teste gigantesco desse demora muito.

A princípio era isso que eu queria passar para vocês em relação a testes. Nós vamos ficar revendo um pouco essas relações de confiança, custo, dependência e velocidade enquanto estivermos aprendendo sobre testes de unidades, sobre testes de widgets.

Mas por enquanto era isso que eu queria passar. Vamos conferir o projeto que nós vamos trabalhar? Até daqui a pouco.

Entendendo o projeto - Conhecendo o projeto inicial

Muito bem, agora chegou a hora de entendermos um pouco o nosso projeto. Dessa vez vamos fazer um pouquinho diferente. Nós vamos pegar um projeto pronto para depois testá-lo.

Por que nós estamos fazendo isso? Porque se tivéssemos que produzir um aplicativo do zero e depois testar, nós íamos perder muito tempo de qualidade do que queremos aprender nesse curso, especificamente, que são testes.

Então, nós vamos focar nos testes. Por isso nós já estamos dando um projeto pronto para vocês, para nós entendermos testes apenas.

Então, para não ficar muito perdido, nesse vídeo nós vamos entender como funciona esse projeto, mas não precisa se preocupar, se você não pegou ou não entendeu alguma coisa, você pode pegar o projeto no GitHub e dar uma olhada passo-a-passo em como as coisas estão implementadas. Pode ir ao seu tempo, não precisa de pressa. Vamos?

Aqui nós temos o nosso aplicativo. Você consegue ver que ele está em inglês, em cima nós temos available balance que é a quantidade de dinheiro que você tem, à direita nós temos o valor do dólar em relação ao real. Embaixo nós temos um componente de spent que é quantidade de dinheiro gasto.

A direita nós temos o earned que é a quantidade de dinheiro obtido. Embaixo nós temos um limite de gasto. Nós temos embaixo um texto falando que esse mês você gastou uma porcentagem do seu dinheiro e o ideal é diminuir essa porcentagem.

Embaixo nós temos alguns botões. Nós temos o botão de deposit e de transfer. No emulador do lado direito tem um botão desativado de scan, porque nós não vamos usar essa feature por enquanto e embaixo, se nós descêssemos um pouco o projeto, nós vemos account points que são os pontos da nossa conta.

Toda vez que você depositar ou transferir, esses pontos vão ser atualizados. Você pode usar esses pontos para poder pedir comida, delivery custa 15 mil pontos, 1 mês de streaming que custa 30 mil pontos e assim vai.

Como é que nós podemos interagir com esse nosso aplicativo? Nós temos esses nossos dois botões iniciais que é o deposit e o transfer. Eu quero depositar um dinheiro na nossa conta, esse aplicativo é bem simples, nós não fizemos um grandíssimo aplicativo, até porque não era esse o nosso objetivo, o objetivo é testar.

Então, toda vez que eu clicar em depositar, a nossa conta bancaria vai ganhar 10 dólares. Eu vou clicar em deposit, você viu que ficou meio branquinho, só que nada mudou. Para alguma coisa mudar, eu tenho que clicar nos componentes que recebem esses valores.

Por exemplo, aqui no nosso available balance, aqui na nossa conta bancária, se eu clicar, ele atualiza os dados para 10. Se eu clicar no card embaixo desse valor, ele vai atualizar o nosso valor de recebido para 10.

Aqui em embaixo, nos nosso pontos, se eu clicar, ele vai atualizar para 10 também e assim vai. Se eu continuar clicando deposit eu vou clicar duas vezes a mais, três vezes. Então, vou clicar aqui em cada um dos nossos objetos e eles vão atualizar, earned foi para 40, account points foi para 40 também.

E se eu transferir? Eu quero transferir 10 reais da minha conta. Então, se eu clicar em transfer eu transferi, portanto o meu valor, na minha conta diminui, vai para 30 e eu posso atualizar os nossos outros objetos.

Por exemplo, aqui agora vai que eu gastei 10 reais e vai mudando aos poucos a nossa barra de progressos de gasto, do limite de gasto. Aqui embaixo no "nossos pontos", ele vai aumentar os pontos, porque independentemente de deposito ou transferência, você vai estar sempre ganhando pontos.

E assim nós podemos ficar transferindo e depositando. Um detalhe importante para falar para vocês é que esse valor do dólar em relação ao real, ele é uma API. É uma informação que nós estamos pegando da internet.

Então, eu vou mostrar para vocês como é que isso aqui está funcionando, em geral, no nosso projeto, no nosso código. Vamos lá.

Então, aqui no nosso projeto nós temos várias pastas, eu não vou passar, exatamente, por tudo, eu vou passar pelas coisa importantes que nós precisamos visualizar no nosso projeto.

Então, primeiramente aqui, no lado esquerdo da tela, nós temos a nossa pasta de componentes e ela tem vários arquivos e também tem uma pasta de seções.

Por exemplo, nossa pasta de seções nós temos o actions.dart e o header.dart que vou abrir para gente dar uma olhada rapidinho. No actions, aqui é o nosso projeto que corresponde a account actions, que é onde nós temos o nosso depósito, nós temos o nosso transfer.

E esse nosso deposito, esse nosso transfer, tem valor de um Inherited widget, que eu vou falar daqui a pouco para vocês, mas isso tudo está sendo modelado, gerenciado, os estados desses valores estão sendo gerenciados por um Inherited widget.

Então, criamos um botão para cada uma dessas nossas ações que estão alterando o nosso Inherited widget. Beleza, aqui no actions, no header, por exemplo, aqui nós temos a nossa conta bancária e nela nós temos duas coisas importantes.

O primeiro é que esse componente na parte superior do aplicativo, em roxo, ele é clicável, chamado de header, ele é totalmente clicável. Nós conseguimos visualizar isso com o nosso widget InkWell e ele é clicável, porque toda a vez que nós clicarmos nele, ele vai usar o setState para relodar, para rebuildar o valor que está aqui dentro.

Então, sempre que eu mudar, por exemplo, cai deposit, eu só consigo visualizar essa mudança se eu clicar no header. Isso é muito importante. Aqui no nosso header nós temos a implementação da nossa API.

Então, está recebendo valor da nossa API aqui embaixo em um FutureBuilder. Ele está construindo uma espera para receber os valores lá na internet sem problemas. Coisas que nós já vimos no passado em cursos passados.

Beleza, então, tem muito mais outras coisas que nós queremos ver aqui. Não vou me estender aqui, nós temos os pontos que também estão recebendo esses valores e também estão recebendo um setState. Toda vez que nós clicarmos nele vai mudar de estado.

Ele também está recebendo os valores do nosso Inherited widget, na linha 30, podemos ver que o texto é um filho do nosso BankInherited que vocês vão ver daqui a pouco, mas é um Inherited widget que manuseei nesse estado.

Mesma coisa no status que é o retângulo no centro do nosso aplicativo que recebe o spent e o earned, a quantidade de dinheiro que nós ganhamos, que nós gastamos. Também é clicável, também é atualizável, também recebe informações do nosso Inherited widget. Mesmo esquema para todo mundo.

Então, em relação a design, vocês vão ver muitas coisas aqui no nosso components, mas também temos outras pastas. Deixa eu fechar tudo para nós vermos isso com calma.

Temos outras pastas que são as pastas de dados, onde nós temos a implementação da nossa API onde nós recebemos a informação a partir de um HTTP, nada que vocês não tenham visto antes.

Nós temos também o nosso Inherited widget que foi criado onde nós recebemos e mantemos os dados, coisas que vocês também já viram no passado e mais alguns outros detalhes, por exemplo, em relação ao modelo de banco que é um modelo simples para nós podermos rever e armazenar.

Para nós podermos modularizar, na verdade, os nossos valores de quantidade de dinheiro disponível, available, gasto, recebido, os nossos pontos. Além de alguns métodos que vão adicionar dinheiro ou vão adicionar pontos.

Assim como um método de transferência. Então, esse aqui é o nosso projeto. Eu sei que eu passei muito rápido por muitas coisas. Sugiro, fortemente, que você dê uma olhada com calma no projeto, dê uma alterada se você quiser dar uma modificada para parecer mais a sua cara, fica à vontade.

É um projeto bem simples, mas que vai dar muita margem para nós testarmos muitas coisas nesse nosso curso de testes.

Era isso que eu queria passar para vocês, tem mais um detalhe que eu quero mostrar para vocês, mas eu vou mostrar já, que é em relação a esses estados todos mudando o tempo todo.

Era isso que eu queria passar para vocês e eu os vejo daqui a pouco.

Sobre o curso Flutter: aplicando testes de unidade, de Widget e Mocks

O curso Flutter: aplicando testes de unidade, de Widget e Mocks possui 138 minutos de vídeos, em um total de 39 atividades. Gostou? Conheça nossos outros cursos de Flutter em Mobile, ou leia nossos artigos de Mobile.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• Entendendo o projeto
• Testes de unidade
• Testes de Widget
• Dublês