Gabriel Gomes Front Test

[g0m3s]

Como as notas do desafio indicam que a única biblioteca obrigatória é o React, decidi aplicar as bibliotecas que estou habituado no meu dia a dia por uma questão unicamente de velocidade - estou 100% disposto a utilizar coisas novas :)

Listei abaixo todas as tecnologias utilizadas e todas as features entregues, assim como um manual de como rodar o projeto (qualquer dúvida estou à disposição no e-mail gom3s.g@gmail.com). Inicialmente a vaga a qual estou aplicando é para Pleno; porém, vi que estava tecnicamente apto para os desafios de sênior e resolvi desenvolvê-los também.

Features entregues:

• Permitir a filtragem de produtos na seção Minhas Rendas Fixas a partir de buscas realizadas no campo de texto;

• Exibir dados reais obtidos a partir da API

• Permitir ordenação de produtos seção Minhas Rendas Fixas a partir do menu seletor;

• Fazer uso da biblioteca React;

• Paginar produtos (5 por página) na seção Minhas Rendas Fixas;

• Projetar arquitetura minimamente escalável;

• Cobertura de testes utilizando o framework de sua preferência. Jest e Enzyme são as nossas sugestões;

• Gráficos funcionais utilizando a biblioteca de sua preferência. Highcharts é a nossa sugestão;

Tecnologias usadas:

• React
• Typescript
• ChartJs (gráficos)
• Material-UI (interface)
  • Mui-icons
  • Mui-styles
• Redux (manejamento global de estado)
  • redux-logger
• React-router-dom (gerenciamento de rotas)
• Lint (formatação de código)
• Numeral (formatação de valores)
• Cypress (testes)
  • Cypress/code-coverage

Como rodar o projeto:

download aqui: https://github.com/g0m3s/kinvo-front-end-test

Caso faça download do projeto como zip, entre na pasta kinvo-gabriel e siga o passo a passo:

• Local:

  • npm i
  • npm run start

• Deploy:

  • acessar https://kinvo-test-two.vercel.app/

Como rodar os Testes:

• Visual:

  • Com o projeto rodando (npm i), digitar o comando npm run cy:open
  • Na janela que se abrirá, clicar no item screenCheck.spec.ts

• Terminal:

  • Com o projeto rodando (npm i), digitar o comando npm run cy:run
  • O terminal deverá rodar os testes e exibir a porcentagem de cobertura de código.

• Cobertura de código (visual):

  • Após rodar os testes, será gerada uma pasta chamada cypress-coverage, que conterá vários arquivos, incluindo um arquivo index.html
  • Abrir o arquivo index.html (você pode usar uma extensão para abrir no vscode ou abrir diretamente através do seu gerenciador de arquivos padrão)

• Cobertura de código (terminal):

  • rodar o seguinte comando: npx nyc report --reporter=text-summary
  • você deverá ver uma mensagem de "Coverage summary" com o report

Resultado esperado:

• Cobertura de testes:

• Aplicação:

https://user-images.githubusercontent.com/58064090/179634841-69603e0a-a969-4ab4-8203-19cfadc1765a.mp4