Este projeto tem o objetivo de listar os produtos da API, para que o usuário possa adicionar, incrementar ou retirar os produtos no carrinho.
Motivação: Aplicar testes de integração usando o jest/testing library em uma aplicação que envolva a lógica do redux-toolkit e Nextjs (sem SSR)
Descrição: O site lista os produtos da api criada no Nextjs, o usuário pode adicionar os produtos em um carrinho, alterar a quantidade ou remover do carrinho. O RTK (redux toolkit) foi usado para gerenciar o estado do carrinho, e o estado do menu lateral que foi criado com o React.createPortal. O RTK Query foi usado para controlar o cache da requisição.
Foi realizados testes de integração (sem “mockar” a lógica do redux) usando o jest/testing library e o Mock Server Working (msw) para interceptar as requisições, como recomenda a documentação do redux.
O desing foi retirado do processo de seleção da MKS system
✅ Next.js - Framework JS.
✅ Typescript - Para fazer a tipagem.
✅ Redux Toolkit - Conjunto de ferramentas para simplificar o desenvolvimento Redux
✅ Styled Components - Biblioteca que nos permite escrever códigos CSS dentro do JavaScript
✅ Jest - Framework de Testes em JavaScript
✅ Testing Library - Família de pacotes que ajudam a testar componentes de UI do ponto de vista do usuário.
- Listar os produtos
- Adicionar ou remover item do carrinho.
- Incrementar ou reduzir a quantidade itens do carrinho.
- Layout responsivo.
- Você pode clicar nesse link e acessar a aplicação que está hospedada na plataforma da Vercel.
(certifique-se de ter instalado na sua máquina o Node.
- Abra o terminal na pasta desejada para clonar o repositório e execute o comando:
git clone https://github.com/pedro-afonso/cart.git- Depois de concluído, execute os seguintes comandos para iniciar:
cd cartPara instalar as dependências:
npm installCom isso já é possível iniciar a aplicação
npm run dev- Por fim, abra a pasta clonada em seu editor de códigos favorito e faça as suas alterações! xD
Feito por Pedro Afonso.