ReactJS, Hooks, Recoil, TDD, Clean Architecture, SOLID

Nessa aula irei criar o primeiro caso de uso do projeto: o Authentication.

Após isso irei criar a implementação desse caso de uso utilizando acesso a API: o RemoteAuthentication.

Vou mostrar como desacoplar os casos de uso de bibliotecas como Axios ou Fetch, abstraindo essa dependência em uma interface.

Irei falar sobre o Interface Segregation Principle e mostrar um exemplo na prática. Além disso falaremos um pouco sobre o Design Pattern Factory.

Nessa aula irei criar testes para garantir que o RemoteAuthentication vai chamar o HttpPostClient com o body correto.

Além disso vou botar o faker no projeto para termos testes mais realistas.

Nessa aula irei criar testes para os casos de erro do HttpPostClient. Devemos criar erros genéricos para passar pra nossa camada de UI para ela não depender diretamente de nenhum tipo de implementação.

Nessa aula irei fazer 2 refactors: um para incluir arquivos index para facilitar os imports e outro para tipar o body do request e do response dentro de cada caso de uso, utilizando o Generics do Typescript.

Além disso irei criar o último teste da classe RemoteAuthentication: o caso de sucesso.

Nessa aula irei mostrar como mockar a biblioteca do axios para nossos testes unitários não fazerem acesso real a APIs.

Nessa aula irei fazer um refactor para centralizar os mocks do axios num arquivo separado

Nessa aula irei apenas configurar o React e todas as suas dependências

Nessa aula irei explicar um dos motivos de eu não utilizar o Create React App (CRA) nesse projeto.

Nessa aula irei configurar o Webpack para gerar o bundle com o JS gerado a partir de nosso código fonte em TS e TSX.

Além disso irei configurar o SASS.

Nessa aula irei criar o HTML e CSS da tela de Login e definir, por enquanto, essa como a tela inicial do projeto.

Nessa aula irei refatorar o layout do Login em múltiplos componentes.

Nessa aula irei criar um Router como nossa página inicial e definir o Login como uma rota na URL /login.

Além disso irei mover os estilos globais para esse componente do Router e criar uma função para impedir o auto-fill que acontece nos inputs no Google Chrome.

Nessa aula irei mostrar como testar se um componente não deve estar renderizado na tela com o Testing-Library do React.

Vamos utilizar os Hooks do UseState e UseContext para compartilhar informações de estado entre os componentes.

Nessa aula irei finalizar os testes do estado inicial dos componentes da tela de Login. Vou mostrar algumas abordagens diferentes para resolver um mesmo problema.

Nessa aula irei fazer um refactor nos testes e iniciar a integração com o protocolo Validation para desacoplar o componente de Login da validação.

Nessa aula irei precisar fazer uma mudança nos testes por conta de uma limitação do useEffect. Por causa dessa mudança irei alterar o tipo do ValidationSpy para Stub, pois não poderemos mais comparar os valores recebidos pelo Validation.

Além disso irei testar e implementar toda a parte de status da validação baseado na resposta do Validation.

Nessa aula irei fazer testes para garantir que o submit button seja desabilitado caso o form esteja válido, garantir que o spinner será exibido antes de chamar o caso de uso do Authentication e, por fim, irei integrar o Login com o Authentication.

Além disso farei alguns refactors nos testes.

Nessa aula irei fazer um refactor para deixar o código dos testes bem mais limpo.

Nessa aula irei fazer alguns testes importantes como garantir que o submit não seja chamado caso tenha algum problema no form ou evitar que o submit seja chamado mais de uma vez.

Vou também testar o caso de erro e garantir que a mensagem do erro seja exibida na tela e o spinner seja escondido.

Além disso irei testar o caso de sucesso e garantir que iremos gravar no localstorage o token de acesso do usuário para manter ele logado.

Nessa aula irei mostrar como mockar o History para poder testar a navegação entre componentes do React.

Nessa aula irei refatorar os testes para reaproveitar mais ainda os helpers nos testes.

Nessa aula irei criar o RequiredFieldValidation para validar campos obrigatórios e explicar como usaremos a camada de validação dentro de nosso projeto.

Nessa aula irei criar o EmailValidation para validar campos do tipo email.

Segue a Regex que utilizei para validar: /[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/

Nessa aula irei criar o MinLengthValidation para validar a quantidade de caracteres mínima de um campo.

Nessa aula irei criar o ValidationComposite. Ele basicamente serve para centralizar todos os validators em um lugar só e ele fica responsável por definir a regra de qual erro deve ser retornado e de qual forma.

Nessa aula irei criar um ValidationBuilder para poder gerar de forma mais fácil a composição dos validations para o ValidationComposite.

Nessa aula irei mostrar como fazer a composição do Login com suas dependências e finalmente testar a tela de Login completa no browser.

Quem quiser utilizar meu login para testar enquanto não tiver tela de cadastro, segue:

mango@gmail.com

12345

Nessa aula irei fazer um refactor nos factories do Login e separar eles por tipo.

Nessa aula irei adicionar um teste para o LoginValidationFactory para garantir que o Login terá os validators corretos.

Além disso irei ajustar o AxiosHttpClient para ele tratar o caso de erro corretamente e adicionar mais um teste para garantir isso.

Nessa aula irei adicionar os testes que faltaram para ficarmos com cobertura de testes 100%.

Nessa aula irei fazer um ajuste no Factory do API URL para gerar a URL baseado numa variável de ambiente.

Além disso irei gerar uma tag e subir nosso primeiro release para o GitHub.

Nessa aula irei atualizar as dependências para a versão mais nova utilizando uma ferramenta chamada Npm-Check.

Após isso irei arrumar alguns padrões novos que o Eslint mudou para a versão mais nova.

Além disso irei mostrar que com a atualização do Jest precisaremos ignorar alguns arquivos no Coverage (arquivos que fazem apenas imports, normalmente o index.ts).

Após tudo isso irei configurar a Integração Contínua usando o Travis-CI e depois integrar também com o Coveralls. Com isso sempre que fizermos um push teremos um script validando se teve algum problema e gerando nossa cobertura de testes na nuvem.

Pra finalizar irei adicionar novos badges no readme com essas estatísticas.

Nessa aula irei iniciar a migração do localStorage do Presentation Layer para a Infra Layer.

Com isso irei iniciar criando um caso de uso para gravar o token de acesso e gerar uma implementação voltada para Cache.

Nessa aula irei explicar um pouco mais sobre os tipos de Test Double que existem. Vou mostrar que no caso atual, não precisamos de um Spy, e sim de um Mock.

Além disso irei adicionar um teste para tratar exceção nesse componente.

Nessa aula irei explicar o Design Pattern Adapter e criar o teste necessário para integrar o LocalStorageAdapter ao localStorage.

Nessa aula irei substituir o Login para deixar de chamar o localStorage e ficar desacoplado de um detalhe de infraestrutura.

Vamos fazer o Login depender de um caso de uso e injetar a classe correta no main layer.

Nessa aula irei corrigir um bug que tinha ficado na criação de variáveis de ambiente no Webpack.

Depois irei fazer um teste no sistema para garantir que o localStorage continua funcionando após desacoplarmos ele do Presentation Layer.

Pra finalizar irei gerar uma versão e subir pro GitHub.

Nessa aula irei criar o caso de uso de criar conta de um usuário, baseado no caso de uso de login, já que ambos são muito similares.

Vou mostrar como fazer isso copiando e colando código, porém fazendo passo-a-passo, para garantir que todos os testes sejam cobertos de forma correta e que tenhamos também commits pequenos e pontuais.

Nessa aula irei criar um validador para comparar a senha com o confirmar senha.

Nessa aula irei dar umas dicas de como fazer quando seu eslint parar de funcionar no vscode

Nessa aula iremos criar o layout da tela de cadastro

Nessa aula irei iniciar os testes para garantir o comportamento correto dos estados na tela de SignUp

Nessa aula irei continuar os testes do SignUp e garantir a integração correta com o caso de uso AddAcccount.

Nessa aula irei finalizar os testes do SignUp. Vamos testar a integração com o SaveAccessToken e testar os casos de sucesso e erro.

Nessa aula irei criar mais um componente, o SubmitButton, para reduzir um pouco mais a quantidade de código nod formulários de Login e SignUp.

Nessa aula irei precisar fazer um refactor relativamente grande nos Validators, pois identifiquei um bug no novo validador (o CompareFieldsValidation).

Depois de garantir que tudo ficou ok, faço a composição do SignUp e testo ela no browser para mostrar que ficou tudo certo.

Pra finalizar faço merge da branch no master e crio um novo release no GitHub.

Nessa aula irei mostrar como configurar o Cypress para podermos rodar testes de integração em nosso projeto.

Nessa aula irei fazer um ajuste que faltou na configuração do eslint com o Cypress.

Além disso irei mostrar como criar um comando customizado no Cypress para deixar nossos testes mais enxutos.

Após isso irei criar o primeiro teste de integração para garantir que o estado inicial da tela de login está correto.

Nessa aula irei adicionar todos os demais testes para a tela de Login.

Nessa aula irei mostrar como criar um input animado utilizando CSS.

Inspirado nesse repositório:

https://github.com/fireship-io/230-animated-form-password-meter

Nessa aula irei mostrar como mockar o request a uma API utilizando o Cypress.

Além disso irei mostrar um bug que foi identificado enquanto realizávamos testes de integração.

No fim da aula eu tento usar um método do faker para gerar um número aleatório dentro de um range e não lembro qual é. Pra não gravar uma aula só sobre isso resolvi colocar aqui a resposta (já inclui isso no commit no Git).

faker.helpers.randomize([400, 404, 500])

Nessa aula irei finalizar os testes de integração do Login, com mais alguns testes importantes que faltaram.

Além disso irei fazer um refactor sugerido por um amigo meu que é designer para melhorar um pouco o layout do input. Com isso irei precisar fazer um pequeno refactor em nossos testes. É um bom caso de uso real, pois isso costuma acontecer bastante nas empresas no dia a dia do programador.

Nessa aula irei mostrar uma forma de isolar coisas comuns nos testes em helpers para evitar código duplicado. DRY!

Nessa aula irei criar todos os testes de integração do SignUp utilizando o Cypress.

Nessa aula irei adicionar um teste que faltou para manter o coverage 100%.

Após isso irei fazer merge da branch atual no master, gerar tag e subir uma release.