wilsilva/enegrecer-web

Verdade Seja Dita!

Coletivo Enegrecer

Neste Wiki

• Configure seu ambiente
• O Projeto
• Configurações
  • Rodando o projeto
  • Testes
  • Lint
  • Build
• Deploy
• Tech Stack
• Mais Informações

Configure seu ambiente

Antes de iniciar o desenvolvimento, você irá precisar configurar o seu ambiente. Abaixo estão os pré-requisitos necessários para desenvolver e/ou executar o projeto.

• Git
• Yarn
• Watchman
• Node.js versão 9 ou superior
• NVM (opcional): utilizado para gerênciar diferentes versões do Node e NPM.
  • Linux e Mac
  • Windows
• Docker (recomendado): utilizado para desenvolver o projeto utilizando conteinerização.
  • Mac
  • Linux Ubuntu
  • Windows

O Projeto Verdade Seja Dita

O coletivo nacional de Juventude Enegrecer é uma expressão do movimento social negro que luta contra as opressões da sociedade em favor da juventude negra. O projeto se propõe como uma plataforma para registrar denúncias de crimes raciais, a fim de se coletar dados para embasar e guiar ações e políticas antirracismo.

O Web App, Verdade Seja Dita, implementado neste respositório é uma das interfaces para essa plataforma, onde o usuário pode se informar mais a respeito e relatar um crime de racismos ou injúria.

Configurações

Primeiro clone o repositório:

git clone https://github.com/Enegrecer/enegrecer-web.git

Em seguida entre na pasta do projeto clonado e rode yarn install para baixar todas as dependencias:

cd enegrecer-web
yarn install

Ou você pode usar Docker localmente, antes de executar qualquer comando construa a imagem com:

docker build -t enegrecer .

Rodando o projeto

Para subir um servidor local para desenvolvimento rode:

yarn start

Usando Docker localmente:

docker run --rm -p 3000:3000 -v "$PWD":/usr/src/app -w /usr/src/app -it enegrecer

Isso irá subir um servidor com o aplicativo rodando em http://localhost:3000. Quando os arquivos dentro de src são alterados, automaticamente o código é recompilado e o aplicativo recarregado com as alterações.

Testes

O projeto está configurado para que o desenvolvimento seja feito em TDD, e assim o script:

yarn test

Usando Docker localmente:

docker run --rm -v "$PWD":/usr/src/app -w /usr/src/app -it enegrecer yarn test-local

Com Docker para executar testes e lint:

docker run --rm -v "$PWD":/usr/src/app -w /usr/src/app -it enegrecer yarn all-tests-local

Desta forma serão executados todos os arquivos de teste (arquivos .test.js) e entrar em modo de watch. De forma que toda vez que arquivos são alterados, sejam eles testes ou não, os testes que possuem qualquer relação com tal arquivo são executados novamente.

Por exemplo, se o componente Signin for alterado, todos os testes de Signin.test.js serão executados, mas também os testes de Login.test.js, pois o componente de Login utiliza, ou depende, do componete de Signin, e assim por diante. O mesmo é válido para alterações em arquivos de teste.

O projeto está utilizando o Jest como framework de testes. O jest oferece praticamente tudo que é necessário para testes no projeto, definindo a sintaxe de escrita dos mesmos, provendo mocks, e atuando como test runner. Adicionalmente, o enzyme é utilizado como facilitador dos testes de componentes do React.

Testes Funcionais

Os testes funcionais E2E foram desenvolvidos utilizando Protractor, Page Objects e Cucumber. Para execução é necessário seguir os seguintes passos:

• Instalar o protractor global:

  yarn global add protractor

• Atualizar o servidor (Selenium server):

  webdriver-manager update

• Iniciar o servidor:

  webdriver-manager start

• Executar os testes:

  protractor functional-tests.conf.js

Observações:

• Para executar os testes funcionais a aplicação deve estar rodando local, veja a sessão Rodando o projeto para mais detalhes.
• Ao iniciar o servidor com o comando webdriver-manager start o terminal ficará bloquado com tal execução, sendo necessário abrir uma nova janela para execução dos testes.

Lint

O eslint é utilizado como linter do projeto. É recomendado que um plugin do mesmo seja utilizado em seu editor de preferência durante o desenvolvimento. Além disso é possível executar o lint de todo o projeto rodando o comando:

yarn lint

E existe também o modo de watch que pode ser rodado com:

yarn watch-lint

Build

O comando yarn build roda o script de build, responsável por preparar o projeto para um deploy em produção. Os arquivos passam por um processo de minificação e bundling. Gerando arquivos mais concisos, e mais leves. Todo o resultado do script aparece na pasta build que será gerada dentro do projeto.

Deploy

Atualmente o projeto está rodando em https://enegrecer-e37b3.firebaseapp.com/, sendo o Firebase o host e também responsável pelo controle de usuários e banco de dados da aplicação. A atualização ocorre automaticamente através do Travis-CI, que monitora por modificações na branch master deste repositório, e executa passos de lint, testes e deploy para o Firebase.

Tech stack

Na nossa stack temos:

• React para criação do UI em componentes.
• Redux para controle do estado da aplicação.
• Redux-Saga para gerenciamento de chamadas assíncronas dentro do redux.
• Babel como transpilador que permite que tais componentes sejam escritos utilizando ES8.
• Webpack para servidor local de desenvolvimento, compilação, e bundling do código.
• Jest como framework de testes.
• Enzyme para auxiliar nos testes.
• Protractor para testes funcionais E2E.
• Cucumber como framework para suportar o BDD.
• Eslint como ferramenta de linter.
• Firebase Como hosting e back-end mantendo controle de dados, usuários, etc.
• Travis-CI para criar nosso CI, executar testes e build automaticamente.
• Code Climate para cobertura de código e análise estática.
• Materialize Como framework CSS responsivo.

Como Contribuir

Para contribuir no projeto dê uma espiada no nosso Guia de Contribuição.

Mais Informações

Para mais informações, acesse a nossa wiki :).

Ou junte-se ao nosso espaço no Gitter.

Nós usamos o waffle para visualizar e organizar nossas issues.