Carrinho de Compras - Desafio da Semana

desafio.md

Carrinho de Compras - Desafio da Semana

O desafio dessa semana será a implementação de uma simples loja, utilizando a biblioteca React e os conceitos de componetização que estudamos.

Nossa loja contará com 2 telas (componentes) que serão exibidas/escondidas utilizando um botão no componente principal: a tela de produtos e a tela de carrinho de compras. A tela de produtos será uma simples lista de produtos. Nessa tela será possível adicionar um produto ao carrinho de compras, através de um botão.

A tela de carrinho de compras listará os produtos adicionados ao carrinho de compras do usuário. Nessa telá será possível remover um produto do carrinho de compras.

Tanto nossa lista de produtos, quanto o carrinho de compras serão dois arrays de objetos, para fins de estudo.

Tarefa 1: setup do projeto

Nessa tarefa iremos fazer o setup do projeto e a criaçao do componente principal. Iremos definir o estado inicial da aplicação e também mostrar/esconder os componentes filhos.

• Fazer o setup do projeto utilizando create-react-app
• Criar o componente da lista de produtos (ProductsList) (esse componente pode ser vazio, criaremos seu conteúdo nas próximas tarefas)
• Criar o componente do carrinho (Cart) (esse componente pode ser vazio, criaremos seu conteúdo nas próximas tarefas)
• Criar o componente principal da loja (Store).
  • deverá possuir um estado com um array para os produtos, um array para os itens do carrinho de compras, e uma propriedade que controlará qual componente estará sendo exibido (produtos ou carrinho)
  • O array de produtos deve possuir alguns items com as seguintes propriedades: { name: String, description: String }
  • O array do carinho de compras deverá ser vazio
  • deverá conter dois botões na parte superior: produtos e carrinho. Ao clicar nesses botões, o componente deverá exibir/esconder um dos componentes filhos.

Critério de aceitação: o projeto deve estar rodando e possuir os componentes listados. O botão de alternar entre "produtos" e "carrinho" deve estar funcionando.

Tarefa 2: componente de lista de produtos

Nessa tarefa iremos popular o componente de lista de produtos. Esse componente receberá os produtos do componente principal, irá iterar sobre eles, e renderizar o componente de produto para cada um.

• Receber os produtos através de uma propriedade
• Receber a função addToCart através de uma propriedade
• Exibir os produtos na página
  • Para cada produto no array, renderizar um novo componente (que será criado posteriormente) Product
  • Passar o produto como uma propriedade para o componente de produto
  • Passar a função addToCart como uma propriedade para o componente de produto

Critério de aceitação: o componente deve estar criado e renderizando os componentes de produtos (esse componente pode estar vazio ou com algum placeholder genérico)

Tarefa 3: componente de produto

Nessa tarefa iremos implementar o componente do produto. Esse componente receberá o produto através de uma propriedade e rederizará o produto. Também será responsável pelo botão de adicionar ao carrinho. Também deveremos implementar a função de adicionar ao carrinho no componente principal.

• Receber o produto como uma propriedade
• Receber a função addToCart como uma propriedade
• Exibir o produto na página (nome e descrição)
• Exibir um botão para adicionar o produto ao carrinho
  • Ao clicar nesse botão, deverá executar a função addToCart(product) no componente principal
  • Implementar essa função no componente principal. Essa função deverá receber um produto e adicioná-lo ao array do carrinho de compras. Se o usuário clicar múltiplas vezes no botão, apenas um item deverá ser adicionado ao carrinho (o produto nao deverá sumir do array de produtos).
• Adicionar testes unitários para o componente. Testar a renderização e comportamento (utilizar uma mock function para testar o botão de adicionar ao carrinho).

Critério de aceitação: Produtos devem estar sendo exibidos e o botão de "adicionar ao carrinho" deve estar populando o array do carrinho de compras.

Tarefa 4: componente de carrinho de compras

Nessa tarefa iremos implementar o carrinho de compras. Esse componente receberá o array de carrinho de compras, iterar sobre ele e renderizar um componente de item do carrinho.

• Receber o carrinho de compras através de uma propriedade
• Receber a função removeFromCart através de uma propriedade
• Exibir os items do carrinho na página
  • Para cada item do carrinho no array, renderizar um novo componente (que será criado posteriormente) CartItem
  • Passar o produto como uma propriedade para o componente de item do carrinho
  • Passar a função removeFromCart como uma propriedade para o componente de item do carrinho

Critério de aceitação: o componente deve estar criado e renderizando os componentes de item do carrinho (esse componente pode estar vazio ou com algum placeholder genérico)

Tarefa 5: componente de item do carrinho

Nessa tarefa iremos implementar o componente de item do carrinho. Esse componente receberá o item através de uma propriedade e rederizará o item do carrinho, bem como será responsável pelo botão de remover do carrinho. Também deveremos implementar a função de remover o produto do carrinho no componente principal.

• Receber o item do carrinho como uma propriedade
• Receber a função removeFromCart como uma propriedade
• Exibir o item do carrinho na página (nome e descrição)
• Exibir um botão para remover o produto do carrinho
  • Ao clicar nesse botão, deverá executar a função removeFromCart(cartItem) no componente principal
  • Implementar essa função no componente principal. Essa função deverá receber um item e removê-lo do array do carrinho de compras.
• Adicionar testes unitários para o componente. Testar a renderização e comportamento (utilizar uma mock function para testar o botão de remover do carrinho).

Critério de aceitação: Os items do carrinho devem estar sendo exibidos e o botão de "remover do carrinho" deve estar funcionando.

Tarefa 6: testes do componente principal

Nesse ponto devemos ter nossa loja já totalmente funcional, porém, possuímos apenas testes unitários para os componentes de produto e de item do carrinho. Esses testes estão utilizando mocks para as funções que adicionam e removem items do carrinho, ou seja, não estamos testando-as de verdade. O objetivo dessa tarefa é garantir que os items estão sendo exibidos e que esses botões estão funcionando, através de testes de integração para o componente principal (Store). Os seguintes testes devem ser implementados:

• Testar se um produto está sendo exibido
  • Escrever um teste que renderiza o componente principal, e checa se as informações de um produto estão na tela.
• Testar se um produto está sendo adicionado ao carrinho
  • Renderizar o componente principal
  • Clicar no botão adicionar ao carrinho
  • Clicar no botão para exibir o carrinho de compras
  • Verificar se o produto está sendo exibido
• Testar se um produto está sendo removido do carrinho
  • Renderizar o componente principal
  • Clicar no botão adicionar ao carrinho
  • Clicar no botão para exibir o carrinho de compras
  • Clicar no botão para remover do carrinho de compras
  • Verificar se o produto sumiu da tela

Critério de aceitação: os testes devem estar implementados