Testes no NodeJS aplicando TDD com Jest – Rocketseat – Javascript

Agora que eu já terminei a maioria dos cursos da Udemy que me interessavam, vou buscar aprender outras coisas relacionadas com a área de desenvolvimento, a fim de reforçar algumas bases necessárias.

Algo que sinto bastante falta na maioria dos cursos é sobre a abordagem de testes automatizados. Pra ser sincero, ainda não fiz nenhum curso que aborde isso de maneira significativa. A grande maioria simplesmente nem aborda o assunto.

É engraçado porquê absolutamente todo mundo do mundo dev fala que testes são importantes mas encontrar material de qualidade sobre o assunto é algo bem chato de se fazer. Há um monte de material por aí sobre como biblioteca A ou B é ótima para TDD, sobre o que é BDD, sobre testes de integração e etc… mas exemplos práticos e de utilização real são bem poucos e difíceis de achar.

O Diego, da Rocketseat fez um excelente vídeo abordando o assunto, então aproveitei para seguir o hands on do vídeo e tentar na prática um pouco mais de TDD. Valeu a pena. =]

O vídeo aborda um mundo de coisas. Vou deixar abaixo a lista de pacotes instalados durante o tutorial.

Dependências comuns:

  • Express
  • Sequelize & PG
  • Dotenv
  • BCryptJS
  • Json Web Token (jwt)
  • Factory Girl
  • Faker

Dependências de desenvolvimento:

  • Sequelize CLI
  • Nodemon
  • Jest
  • Sqlite3
  • Supertest

No início, o banco utilizado no projeto é o Postgres. Mas para os testes é utilizado Sqlite.

Essa parte valeu mais pela curiosidade de ver como seria um mesmo projeto acessando diferentes bancos de dados para diferentes fins e como isso pode ser controlado por variáveis de ambiente, mas fora isso, a inclusão do Postgres não teve muito impacto no tutorial em si. Dava pra passar sem ele…

Falando em variáveis de ambiente, eu tive uns probleminhas com a tal da NODE_ENV no windows. Por sorte encontrei o pacote Cross Env, que resolveu muito bem este problema.

A única questão é que tive de colocar isso no script do package.json, ao invés do script indicado no vídeo:

"pretest": "cross-env NODE_ENV=test sequelize db:migrate",
"test": "cross-env NODE_ENV=test jest",
"posttest": "cross-env NODE_ENV=test sequelize db:migrate:undo:all"

Fora isso, o tutorial correu bem… na maioria das vezes.

Uma coisa que me deixou um pouco frustrado é que às vezes os erros que apareciam no console não eram muito claros.

Em fase de desenvolvimento fica um pouco mais fácil imaginar de onde vem determinado erro porquê parte do projeto está fresco na memória mas imagino o quanto deve ser chato resolver um erro de autenticação por causa de algum campo faltando em algum Model (mas o teste não acusa isso de forma satisfatória) e coisas do gênero em um projeto em andamento adiantado.

De qualquer forma, é um ótimo tutorial. =]

Semana Omnistack – Javascript – Log #5

A aula de hoje foi bem mais tranquila. Basicamente foi uma apresentação de recursos e ferramentas que podem auxiliar no dia a dia e indicações de estudos para aprofundamento nas tecnologias citadas na aula.

Houveram também alguns exemplos de utilização do Eslint e da lib Styled Components.

Eu achei a lib bem bacana, principalmente pela possibilidade de escrever CSS como se escreve com Sass, só que dentro de um arquivo javascript, aproveitando todo o poder que o javascript pode oferecer.

Porém, acho que para a maioria dos casos eu utilizaria Sass mesmo. Aquela sintaxe estilo “template string” não me agradou muito. Mas é caso de gosto mesmo.

Eu particularmente não gosto muito dessa coisa do React de jogar praticamente tudo pra dentro do javascript e misturar tudo em returns e coisa do gênero. Prefiro as coisas como no Vue.js, cada um separado num canto, bem definido.

Mas React (e seus derivados) é a tecnologia do mercado, então é melhor investir mais tempo nela. Paciência.

Dia 5 – Funcionalidades avançadas.

Recursos adicionais requisitados:

Vídeos adicionais:

Links adicionais:

Para inspirações de layouts:

Para prototipar layouts: Figma.

Enfim…

A próxima aula será no domingo, mas será basicamente uma live de finalização, pra tirar dúvidas. Também servirá para mostrar um pouco de como será o novo Bootcamp, inscrições, preços e etc. O que significa que o projeto terminou hoje.

Em algum momento no futuro eu pretendo voltar a este projeto para incluir algumas funcionalidades que estou pensando, como criação de perfis, paginação e etc. Pra deixar bem fiel ao atual Instagram. Só não vou colocar aquela parada de vídeos curtos. Detesto essa funcionalidade na rede xD.

A vantagem é que o meu Instagram possibilita fazer uploads de fotos direto do pc. Chupa Facebook!

Mas eu tenho alguns cursos e projetos para terminar antes disso.

Então é isso. Projeto finalizado! =D

Repositório no github para este projeto.

Semana Omnistack – Javascript – Log #4

Dia 4 – Desenvolvendo o app mobile.

Antes de tudo, tive que fazer a instalação e configuração do ambiente, que deu um certo trabalhinho. Eu quaaaase não consegui iniciar o projeto.

Acontece que o meu pc não se deu muito bem com os emuladores.

O Genymotion não rodou alegando que minha placa não tinha a tecnologia pra virtualização, o que é bizarro porquê eu rodava ele neste pc antigamente, tanto no Windows quanto no Linux.

E, ao tentar rodar o Nox, meu pc deu tela azul duas vezes. Tadinho, daqui uns tempos já posso começar a me despedir dele. =/

Ainda bem que meu irmão me emprestou o Android dele (meu cel é um Windows Phone que ele me deu quando comprou o Android) e eu consegui seguir com a aula.

A de tentativa de resolver a questão dos emuladores me tomou umas horas. Umas 3 horas para ser mais exato… isso, ANTES de eu realmente começar a brincar no projeto! O que fez com que o processo todo durasse umas 8 horas, já que o vídeo tem 1h:14 de pauleira.

Mas pelo menos eu consegui fazer! Uhuuuu \o/

Não tinha como tirar print do app, então eu tirei fotos com o meu celular do app funcionando no celular do meu irmão. haha xD

Admito que gostei bastante do React Native. Bem capaz que eu utilize-o em projetos mobile no futuro.

Realmente não muda muito o desenvolvimento entre React e React Native. É mais uma questão de entender os componentes e estruturas e, como eu já tive uma pequena experiência com Android, me senti bem em casa.

Guia da Rocketseat para configuração do ambiente.

Recursos adicionais requisitados:

Está quase acabando! =D

Repositório no github para este projeto.

Semana Omnistack – Javascript – Log #3

Dia 3 – Construindo a interface web.

Hoje construímos a interface web para a aplicação utilizando React.

E eis a carinha do projeto que estamos criando! =D

Tcharaaans! É um Instagram clone! =D
Telinha para criação de novos posts.
Uma mensagem do Yoda. =]

A aplicação em si está bem simples, mas está funcional, consumindo os dados da api criada anteriormente e atualizando em tempo real na tela.

Faltou criar um sisteminha de paginação e um perfil de usuário. E, talvez, também algumas firulinhas como fazer aparecer a imagem no momento do upload na tela de criação de posts, comentários e coisas do gênero. Provavelmente farei isso num futuro. Até lá… vai ficar assim mesmo.

Mas os recursos básicos estão aí: criar posts com fotos e listá-los em tempo real em uma página inicial, tudo isso com um template criado durante a aula. Para um vídeo com duração de 1 hora até que foi bastante coisa. O vídeo de ontem também foi cerca de 1 hora (um pouco mais) .

Falando assim parece pouco mas tanta coisa é abordada nestes vídeos que eu demorei umas 4 ou 5 horas em cada um deles pra fazer tudo. xD

Recursos adicionais utilizados nesta aula:

Amanhã será abordado sobre React Native! Vamos que vamos! =D

Repositório no github para este projeto.

Semana Omnistack – Javascript – Log #2

Dia 2 – Criando base da aplicação.

Hoje criamos uma api no backend para utilizar no app que faremos com React na aula de amanhã.

Para quem já fez o curso gratuito de NodeJS, que já existe na plataforma da Rocketseat (o qual, eu falei dele aqui), não há muita novidade, já que os conceitos são bem parecidos, mudando uma ou outra utilização de recurso.

Destaque para a lib Sharp, que facilita bastante a manipulação de imagens.

Recursos adicionais utilizados nesta aula:

Vamos que vamos! Amanhã tem mais treinamento. =]

Repositório no github para este projeto.