Watch Store

Descrição • Tecnologias • Pré-requisitos • Como usar

ℹ Descrição

Projeto desenvolvido ao longo do Módulo 3 do curso Testando Aplicações JavaScript do Vedovelli. 🚀

Watch Store é um e-commerce completo de relógios, em que a aplicação foi testada de ponta-a-ponta com TDD, contendo testes unitários de componentes, condicionais e hooks, e testes de integração simulando um stub de dados e analisando como a página se comporta em diferentes cenários. Algumas de suas funcionalidades:

• Pesquisar por um produto na página
• Adicionar um produto ao carrinho
• Aumentar ou diminuir a quantidade destes produtos no carrinho
• Remover um produto do carrinho
• Remover todos os produtos do carrinho

Diferentes partes do projeto foram testadas isoladamente, como os hooks e componentes mais simples, e em conjuntos, como a homepage. Alguns exemplos:

• stores
  • cart
    • deve ser possível / não deve ser possível...
• hooks
  • useFetchProducts
    • deve retornar uma lista de produtos
    • deve retornar um erro caso...
• components
  • ...
• pages
  • home
    • deve renderizar...

⚒ Tecnologias

Interface e renderização

• React
• Typescript
• Next.js
• TailwindCSS
• Axios

Testes unitários

• Jest
• Testing Library
  • Testing Library / react
  • Testing Library / react-hooks
  • Testing Library / user-event

Testes integrados

• Miragejs
• Fakerjs

Gerenciamento de estados

• Zustand
• Immer

⚙ Pré-requisitos

• Git
• Yarn
• Editor de código.

📖 Como usar

Clone o projeto e acesse a pasta

$ git clone https://github.com/EduardoReisUX/watch-store.git && cd watch-store

Siga os passos seguintes

# Instale as dependências
$ yarn

# Rode os testes unitários
$ yarn test:unit

# Rode os testes de integração
$ yarn test:integration

# Veja a cobertura de testes
$ yarn test:coverage

# Rode a aplicação
$ yarn dev

---

Feito com 💜 por Eduardo dos Reis