sd-0x-project-shopping-cart
v1.0.0
Published
Você já usa o GitHub diariamente para desenvolver os exercícios, certo? Agora, para desenvolver os projetos, você deverá seguir as instruções a seguir. Fique atento a cada passo, e se tiver qualquer dúvida, nos envie por _Slack_! #vqv 🚀
Downloads
1
Readme
Termos de acordos
Ao iniciar este projeto, você concorda com as diretrizes do Código de Ética e Conduta e do Manual da Pessoa Estudante da Trybe.
Boas vindas ao repositório do projeto de Carrinho de Compras!
Você já usa o GitHub diariamente para desenvolver os exercícios, certo? Agora, para desenvolver os projetos, você deverá seguir as instruções a seguir. Fique atento a cada passo, e se tiver qualquer dúvida, nos envie por Slack! #vqv 🚀
Aqui você vai encontrar os detalhes de como estruturar o desenvolvimento do seu projeto a partir desse repositório, utilizando uma branch específica e um Pull Request para colocar seus códigos.
SUMÁRIO
- Habilidades
- Entregáveis
- Data de entrega
- Desenvolvimento
- Requisitos do projeto
- API Shopping Cart
- Observações técnicas
- 1. Crie uma listagem de produtos
- 2. Adicione o produto ao carrinho de compras
- 3. Remova o item do carrinho de compras ao clicar nele
- 4. Carregue o carrinho de compras através do LocalStorage ao iniciar a página
- 5. Calcule o valor total dos itens do carrinho de compras
- 6. Crie um botão para limpar o carrinho de compras
- 7. Adicione um texto de "carregando" durante uma requisição à API
- 8. Desenvolva testes de no mínimo 25% de cobertura total e 100% da função
fetchProducts
- 9. Desenvolva testes de no mínimo 50% de cobertura total e 100% da função
fetchItem
- 10. Desenvolva testes de no mínimo 75% de cobertura total e 100% da função
saveCartItems
- 11. Desenvolva testes para atingir 100% de cobertura total e 100% da função
getSavedCartItems
- Depois de terminar o desenvolvimento
- Revisando um pull request
- Avisos finais
Habilidades
Nesse projeto, você será capaz de:
- Fazer requisições a uma API (Application Programming Interface) do Mercado Livre;
- Utilizar os seus conhecimentos sobre JavaScript, CSS e HTML;
- Trabalhar com funções assíncronas;
- Implementar testes unitários.
Entregáveis
Para entregar o seu projeto você deverá criar um Pull Request neste repositório.
Lembre-se que você pode consultar nosso conteúdo sobre Git & GitHub sempre que precisar!
O que será desenvolvido
Nesse projeto vocês farão um carrinho de compras totalmente dinâmico! E o melhor: consumindo dados diretamente de uma API! Isso mesmo. Da sigla em inglês Application Programming Interface, uma API é um ponto de contato na internet com determinado serviço. Através de requisições HTTP a essa API é possível interagir com ela da forma como quem a criou planejou. Aqui usaremos a API do Mercado Livre para buscarmos produtos à venda.
Protótipo do projeto
Seu projeto deve ter o comportamento parecido com o do gif abaixo quando finalizado, não se preocupe em replicar o visual, o gif so ilustra o comportamento:
Data de entrega
- Projeto individual;
- Serão
4
dias de projeto. - Data de entrega para avaliação final do projeto:
10/05/2022 14:00
.
Desenvolvimento
⚠️ É importante que seus arquivos tenham exatamente estes nomes! ⚠️
O seu Pull Request deverá conter os arquivos index.html
, style.css
e script.js
, que conterão seu código HTML, CSS e JavaScript, respectivamente. Assim como, a implementação dos arquivos da pasta helpers
e tests
, que conterão seus códigos JavaScript e testes unitários, respectivamente.
Caso você faça o download de bibliotecas externas, utilize o diretório libs
(a partir da raiz do projeto) para colocar os arquivos (*.css, *.js, etc...) baixados.
Você pode adicionar outros arquivos se julgar necessário. Qualquer dúvida, procure a monitoria.
Antes de começar a desenvolver:
- Clone o repositório
git clone [email protected]:tryber/sd-021-a-project-shopping-cart.git
.- Entre na pasta do repositório que você acabou de clonar:
cd sd-021-a-project-shopping-cart
- Instale as dependências e inicialize o projeto
- Instale as dependências:
npm install
- Crie uma branch a partir da branch
master
- Verifique que você está na branch
master
- Exemplo:
git branch
- Exemplo:
- Se não estiver, mude para a branch
master
- Exemplo:
git checkout master
- Exemplo:
- Agora, crie uma branch onde você vai guardar os
commits
do seu projeto- Você deve criar uma branch no seguinte formato:
nome-sobrenome-nome-do-projeto
- Exemplo:
git checkout -b maria-silva-shopping-cart
- Você deve criar uma branch no seguinte formato:
- Quando fizer mudanças, adicione-as ao stage do Git e faça um
commit
- Verifique que as mudanças ainda não estão no stage
- Exemplo:
git status
(devem aparecer listados os novos arquivos em vermelho)
- Exemplo:
- Adicione o novo arquivo ao stage do Git
- Exemplo:
git add .
(adicionando todas as mudanças - que estavam em vermelho - ao stage do Git)git status
(devem aparecer listados os arquivos em verde)
- Exemplo:
- Faça o
commit
inicial- Exemplo:
git commit -m 'iniciando o projeto. VAMOS COM TUDO :rocket:'
(fazendo o primeiro commit)git status
(deve aparecer uma mensagem tipo nothing to commit )
- Exemplo:
- Adicione a sua branch com o novo
commit
ao repositório remoto
- Usando o exemplo anterior:
git push -u origin maria-silva-shopping-cart
- Crie um novo
Pull Request
(PR)
- Vá até a página de Pull Requests do repositório no GitHub
- Clique no botão verde "New pull request"
- Clique na caixa de seleção "Compare" e escolha a sua branch com atenção
- Clique no botão verde "Create pull request"
- Adicione uma descrição para o Pull Request, um título claro que o identifique, e clique no botão verde "Create pull request"
- Não se preocupe em preencher mais nada por enquanto!
- Volte até a página de Pull Requests do repositório e confira que o seu Pull Request está criado
Durante o desenvolvimento
Faça
commits
das alterações que você fizer no código regularmente;Lembre-se de sempre após um ~~(ou alguns)~~
commits
atualizar o repositório remoto (o famosogit push
);Os comandos que você utilizará com mais frequência são:
git status
(para verificar o que está em vermelho - fora do stage - e o que está em verde - no stage);git add
(para adicionar arquivos ao stage do Git);git commit
(para criar um commit com os arquivos que estão no stage do Git);git push -u nome-da-branch
(para enviar o commit para o repositório remoto na primeira vez que fizer opush
de uma nova branch);git push
(para enviar o commit para o repositório remoto após o passo anterior).
ESLint e Stylelint
Para garantir a qualidade do código, vamos utilizar neste projeto os linters ESLint
e Stylelint
.
Assim o código estará alinhado com as boas práticas de desenvolvimento, sendo mais legível
e de fácil manutenção! Para rodá-los localmente no projeto, execute os comandos abaixo:
npm run lint
npm run lint:styles
Em caso de dúvidas, confira o material do course sobre ESLint e Stylelint.
⚠️ Lembre-se que o seu projeto só será avaliado se estiver passando pelos checks do linter.
Cypress
Cypress é uma ferramenta de teste de front-end desenvolvida para a web. Você pode rodar o cypress localmente para verificar se seus requisitos estão passando, para isso execute um dos seguintes comandos:
Para executar os testes apenas no terminal:
npm test
Para executar os testes e vê-los rodando em uma janela de navegador:
npm run cypress:open
ou
npx cypress open
Após executar um dos dois comandos acima, será aberta uma janela de navegador e então basta clicar no nome do arquivo de teste que quiser executar (project.spec.js), ou para executar todos os testes clique em Run all specs
Você também pode assistir a este vídeo 😉🎙
Para rodar o cypress é preciso ter rodado o comando npm install anteriormente.
Cobertura de testes
Neste projeto, você irá implementar testes para quatro funções e, para avaliá-los, será utilizado a cobertura de testes.
Essa cobertura avalia a eficácia dos testes implementados de acordo com os requisitos, determinando se cobrem o que foi pedido ou não.
Será testado apenas as quatros funções pedidas, e não toda a aplicação!
Conforme você for realizando os testes do projeto, a porcentagem da cobertura total irá aumentar. Para a cobertura total será avaliado 25%, 50%, 75%, e, por fim, 100% dos testes. Para cada função solicitada a cobertura de testes irá avaliar 100% das linhas da sua função.
Para executar e acompanhar a implementação da sua cobertura de testes, rode o comando abaixo:
npm run test:coverage
Ao realizar o comando terá um resultado similar a este:
Os destaques em amarelo fazem referência à cobertura total e os em verde demonstram a função do requisito desejado.
Verifique com npm test
se todos os itens da cobertura dos testes estão passando corretamente. Atenção: cuidado com eventuais falso-positivos!
Pontos importantes para a implementação dos testes
Disponibilizamos a API simulada para você implementar seus testes. Isso significa que será possível simular o consumo de todos os dados da API dentro do seu ambiente de testes, de forma segura e independente de fatores externos que possam ocorrer.
- As funções
fetchProducts
efetchItem
devem ser implementadas por você; - O
window.fetch
está definido em todos os testes, ou seja, será possível usar a funçãofetch
dentro do seu ambiente de testes sem precisar importar ou instalar bibliotecas; - Utilize o
localStorage.getItem
e olocalStorage.setItem
normalmente no ambiente de teste, pois a simulação dele está pronta para ser chamada quando necessário. - Para nosso ambiente de testes, o
fetch
está limitado a atender somente a configuração da API referente ao projeto; - Deseja checar se uma função foi chamada? Ou se foi chamada com um argumento específico? Que tal dar uma olhada nos matchers da documentação.
Requisitos do projeto
API Shopping Cart
O manual da API do Mercado Livre contém muitas informações sobre ela. Utilizaremos alguns dos endpoints, e a forma de uso está detalhada no primeiro requisito.
Observações técnicas
A seguir, estão listados os passos de como será a avaliação do seu projeto e todos os requisitos que devem ser cumpridos. Leia-os atentamente e siga à risca o que for pedido. Em particular, atente-se para os nomes de classes que alguns elementos de seu projeto devem possuir. O não cumprimento de um requisito, total ou parcialmente, impactará em sua avaliação.
1. Crie uma listagem de produtos
Este requisito pode ser feito em conjunto com o requisito 8 se você optar por aplicar TDD, para isso basta olhar as orientações do requisito 8 e aplicar o que é solicitado em conjunto.
Você deve criar uma listagem de produtos que devem ser consultados através da API do Mercado Livre.
Para isso, você terá de implementar a função fetchProducts
que já está criada no arquivo fetchProducts.js
que se encontra dentro da pasta helpers
. Mas atenção, dentro do arquivo fetchProducts.js
deve ser implementada apenas a função fetchProducts
.
A função fetchProducts
que você irá implementar, deve consumir o seguinte endpoint:
"https://api.mercadolibre.com/sites/MLB/search?q=$QUERY"
Onde $QUERY
deve ser o valor da sua busca. Para este trabalho, a busca deve ser obrigatoriamente o termo computador
.
O retorno desse endpoint será algo no formato json
. Por exemplo, se for pesquisado "computador":
{
"site_id": "MLB",
"query": "computador",
"paging": {
"total": 406861,
"offset": 0,
"limit": 50,
"primary_results": 1001
},
"results": [
{
"id": "MLB1341925291",
"site_id": "MLB",
"title": "Processador Intel Core I5-9400f 6 Núcleos 128 Gb",
"seller": {
"id": 385471334,
"permalink": null,
"power_seller_status": null,
"car_dealer": false,
"real_estate_agency": false,
"tags": []
},
"price": 899,
"currency_id": "BRL",
"available_quantity": 1,
"sold_quantity": 0,
"buying_mode": "buy_it_now",
"listing_type_id": "gold_pro",
"stop_time": "2039-10-10T04:00:00.000Z",
"condition": "new",
"permalink": "https://www.mercadolivre.com.br/processador-intel-core-i5-9400f-6-nucleos-128-gb/p/MLB13953199",
"thumbnail": "http://mlb-s2-p.mlstatic.com/813265-MLA32241773956_092019-I.jpg",
"accepts_mercadopago": true,
"installments": {
"quantity": 12,
"amount": 74.92,
"rate": 0,
"currency_id": "BRL"
},
"address": {
"state_id": "BR-SP",
"state_name": "São Paulo",
"city_id": "BR-SP-27",
"city_name": "São José dos Campos"
},
"shipping": {
"free_shipping": true,
"mode": "me2",
"tags": [
"fulfillment",
"mandatory_free_shipping"
],
"logistic_type": "fulfillment",
"store_pick_up": false
},
"seller_address": {
"id": "",
"comment": "",
"address_line": "",
"zip_code": "",
"country": {
"id": "BR",
"name": "Brasil"
},
"state": {
"id": "BR-SP",
"name": "São Paulo"
},
"city": {
"id": "BR-SP-27",
"name": "São José dos Campos"
},
"latitude": "",
"longitude": ""
},
"attributes": [
{
"source": 1,
"id": "ALPHANUMERIC_MODEL",
"value_id": "6382478",
"value_struct": null,
"values": [
{
"name": "BX80684I59400F",
"struct": null,
"source": 1,
"id": "6382478"
}
],
"attribute_group_id": "OTHERS",
"name": "Modelo alfanumérico",
"value_name": "BX80684I59400F",
"attribute_group_name": "Outros"
},
{
"id": "BRAND",
"value_struct": null,
"attribute_group_name": "Outros",
"attribute_group_id": "OTHERS",
"source": 1,
"name": "Marca",
"value_id": "15617",
"value_name": "Intel",
"values": [
{
"id": "15617",
"name": "Intel",
"struct": null,
"source": 1
}
]
},
{
"name": "Condição do item",
"value_id": "2230284",
"attribute_group_id": "OTHERS",
"attribute_group_name": "Outros",
"source": 1,
"id": "ITEM_CONDITION",
"value_name": "Novo",
"value_struct": null,
"values": [
{
"id": "2230284",
"name": "Novo",
"struct": null,
"source": 1
}
]
},
{
"id": "LINE",
"value_name": "Core i5",
"attribute_group_id": "OTHERS",
"attribute_group_name": "Outros",
"name": "Linha",
"value_id": "7769178",
"value_struct": null,
"values": [
{
"id": "7769178",
"name": "Core i5",
"struct": null,
"source": 1
}
],
"source": 1
},
{
"id": "MODEL",
"value_struct": null,
"values": [
{
"id": "6637008",
"name": "i5-9400F",
"struct": null,
"source": 1
}
],
"attribute_group_id": "OTHERS",
"name": "Modelo",
"value_id": "6637008",
"value_name": "i5-9400F",
"attribute_group_name": "Outros",
"source": 1
}
],
"differential_pricing": {
"id": 33580182
},
"original_price": null,
"category_id": "MLB1693",
"official_store_id": null,
"catalog_product_id": "MLB13953199",
"tags": [
"brand_verified",
"good_quality_picture",
"good_quality_thumbnail",
"immediate_payment",
"cart_eligible"
],
"catalog_listing": true
},
]
}
A lista de produtos que devem ser exibidos é o array results
no JSON
acima.
Observações técnicas:
- O arquivo
fetchProducts.js
já está importado na estrutura do seu arquivo HTML; - Para executar sua função
fetchProducts
basta chamar no seu arquivoscript.js
; - Você deve utilizar a função
createProductItemElement()
para criar os componentes HTML referentes a um produto. - Adicione o elemento retornado da função
createProductItemElement(product)
como filho do elemento<section class="items">
. - Obs: as variáveis
sku
, no código fornecido, se referem aos camposid
retornados pela API.
O que será avaliado
- O elemento com classe
.item
deve exibir a lista de produtos.
2. Adicione o produto ao carrinho de compras
Este requisito pode ser feito em conjunto com o requisito 9 se você optar por aplicar TDD, para isso basta olhar as orientações do requisito 9 e aplicar o que é solicitado em conjunto.
Cada produto na página HTML possui um botão com o nome Adicionar ao carrinho
.
Ao clicar nesse botão você deve realizar uma requisição que irá retornar todos os dados específicos de um produto.
Para isso, você terá de implementar a função fetchItem
que já está criada no arquivo fetchItem.js
, que se encontra dentro da pasta helpers
. Lá, você deverá implementar apenas a função fetchItem
.
A função fetchItem
que você irá implementar, deve consumir o seguinte endpoint:
"https://api.mercadolibre.com/items/$ItemID"
onde $ItemID
deve ser o valor id
do item selecionado.
Quando colocado o id MLB1341706310
retorno desse endpoint será algo no formato:
{
"id": "MLB1341706310",
"site_id": "MLB",
"title": "Processador Amd Ryzen 5 2600 6 Núcleos 64 Gb",
"subtitle": null,
"seller_id": 245718870,
"category_id": "MLB1693",
"official_store_id": 1929,
"price": 879,
"base_price": 879,
"original_price": null,
"currency_id": "BRL",
"initial_quantity": 0,
"available_quantity": 0,
"sold_quantity": 0,
...
"warranty": "Garantia de fábrica: 3 anos",
"catalog_product_id": "MLB9196241",
"domain_id": "MLB-COMPUTER_PROCESSORS",
"parent_item_id": null,
"differential_pricing": null,
"deal_ids": [],
"automatic_relist": false,
"date_created": "2019-10-15T18:13:00.000Z",
"last_updated": "2019-12-20T18:06:54.000Z",
"health": null,
"catalog_listing": true
}
Preste atenção que o JSON
deve conter apenas um item.
Observações técnicas:
- O arquivo
fetchItem.js
já está importado na estrutura do seu arquivo HTML; - Para executar sua função
fetchItem
basta chamar no seu arquivoscript.js
; - Você deve utilizar a função
createCartItemElement()
para criar os componentes HTML referentes a um item do carrinho. - Adicione o elemento retornado da função
createCartItemElement(product)
como filho do elemento<ol class="cart__items">
.
O que será avaliado
- O elemento com classe
.cart__items
deve adicionar o item escolhido, apresentando corretamente suas informações de id, título e preço.
3. Remova o item do carrinho de compras ao clicar nele
Ao clicar no produto no carrinho de compra, ele deve ser removido da lista.
Para isso, dentro do arquivo script.js
você deve procurar pela função cartItemClickListener(event)
e implementar a lógica necessária para realizar a remoção.
4. Carregue o carrinho de compras através do LocalStorage ao iniciar a página
Este requisito pode ser feito em conjunto com os requisitos 10 e 11, se você optar por aplicar TDD, para isso basta olhar as orientações dos requisitos 10 e 11 e aplicar o que é solicitado em conjunto.
Ao carregar a página, o estado atual do carrinho de compras deve ser carregado do LocalStorage. Para que isso funcione, o carrinho de compras deve ser salvo no LocalStorage, ou seja, todas as adições e remoções devem ser abordadas para que a lista esteja sempre atualizada.
Para isso, você terá de implementar as funções saveCartItems
e getSavedCartItems
que já estão criadas com o nome saveCartItems.js
e getSavedCartItems.js
, respectivamente, dentro da pasta helpers
.
Observações técnicas:
- Os arquivos
saveCartItems.js
egetSavedCartItems.js
já estão importados na estrutura do seu arquivo HTML; - Para executar suas funções
saveCartItems
egetSavedCartItems
, basta chamar no seu arquivoscript.js
; - A função
saveCartItems
deve salvar os itens do carrinho de compras nolocalStorage
, em uma chave denominadacartItems
. - A função
getSavedCartItems
deve recuperar os itens do carrinho de compras dolocalStorage
quando carregamos a página.
O que será avaliado
- A página ao ser atualizada deve permanecer com todos os itens do carrinho adicionados anteriomente.
5. Calcule o valor total dos itens do carrinho de compras
Cada vez que se modificar os itens do carrinho de compras, será necessário calcular seus valores e apresentá-los na página principal do projeto. O elemento que tem como filho o preço total dos itens do carrinho deve ter, obrigatoriamente, a classe total-price
.
Obs: Devemos tomar cuidado, pois estamos buscando os dados do produto em uma API. Portanto, é necessário garantir que a API já retornou as informações para somente depois realizar o cálculo dos valores do carrinho.
Atenção: ao criar novas funções para resolver este requisito, faça as implementações sempre dentro do arquivo script.js
.
6. Implemente a lógica no botão Esvaziar carrinho
para limpar o carrinho de compras
Implemente nesse botão a lógica para remover todos os itens do carrinho de compras. O botão deve obrigatoriamente, ter a classe empty-cart
.
Atenção: ao criar novas funções para resolver este requisito, faça as implementações sempre dentro do arquivo script.js
.
7. Adicione um texto de "carregando" durante uma requisição à API
Uma requisição à API gasta um tempo e durante ele, ficamos sem saber se está tudo certo ou se algo deu errado. Normalmente é utilizada alguma forma para mostrar a pessoa usuária que a requisição está em andamento.
- Crie um elemento que contenha o texto "carregando...", que deve ser exibido em algum lugar da página;
- Este elemento deve ser mostrado apenas durante a requisição à API;
- Este elemento deve obrigatoriamente ter a classe
loading
;
spoiler-alert: você pode criar uma função que adicione ao DOM o elemento com o texto "carregando" e outra para retirá-lo, o que acha?
Atenção: ao criar novas funções para resolver este requisito, faça as implementações sempre dentro do arquivo script.js
.
8. Desenvolva testes de no mínimo 25% de cobertura total e 100% da função fetchProducts
Implemente os testes nos arquivos da pasta
tests
que está na raiz do projeto.
Observações técnicas:
- Use o comando
npm test
para verificar se seus testes estão passando; - OBS: Você deve implementar os 5 requisitos, independente do que for suficiente para a cobertura de testes.
- Atenção: não altere a estrutura já implementada nos arquivos de testes, apenas adicione os testes dentro do bloco
describe
. - Lembre-se de ler com bastante atenção o que está sendo solicitado e implemente um teste de cada vez!
- A cobertura irá checar apenas as funções destacadas e não toda a aplicação!
O que você deve testar
Dentro da pasta
tests
, abra o arquivofetchProducts.test.js
e faça o solicitado:
Teste se
fetchProducts
é uma função;Execute a função
fetchProducts
com o argumento "computador" e teste sefetch
foi chamada;Teste se, ao chamar a função
fetchProducts
com o argumento "computador", a funçãofetch
utiliza o endpoint "https://api.mercadolibre.com/sites/MLB/search?q=computador";Teste se o retorno da função
fetchProducts
com o argumento "computador" é uma estrutura de dados igual ao objetocomputadorSearch
, que já está importado no arquivo.Teste se, ao chamar a função
fetchProducts
sem argumento, retorna um erro com a mensagem:You must provide an url
. Dica: Lembre-se de usar onew Error('mensagem esperada aqui')
para comparar com o objeto retornado da API.
O que será avaliado
- Será avaliado se os testes implementados atingem no mínimo 25% da cobertura total e 100% da função
fetchProducts
.
9. Desenvolva testes de no mínimo 50% de cobertura total e 100% da função fetchItem
Implemente os testes nos arquivos da pasta
tests
que está na raiz do projeto.
Observações técnicas:
- Use o comando
npm test
para verificar se seus testes estão passando; - OBS: Você deve implementar os 5 requisitos, independente do que for suficiente para a cobertura de testes.
- Atenção: não altere a estrutura já implementada nos arquivos de testes, apenas adicione os testes dentro do bloco
describe
. - Lembre-se de ler com bastante atenção o que está sendo solicitado e implemente um teste de cada vez!
- A cobertura de testes irá checar apenas as funções que estão sendo testadas, e não toda a aplicação!
O que você deve testar
Dentro da pasta
tests
, abra o arquivofetchItem.test.js
e faça o solicitado:
Teste se
fetchItem
é uma função;Execute a função
fetchItem
com o argumento do item "MLB1615760527" e teste sefetch
foi chamada;Teste se, ao chamar a função
fetchItem
com o argumento do item "MLB1615760527", a funçãofetch
utiliza o endpoint "https://api.mercadolibre.com/items/MLB1615760527";Teste se o retorno da função
fetchItem
com o argumento do item "MLB1615760527" é uma estrutura de dados igual ao objetoitem
que já está importado no arquivo.Teste se, ao chamar a função
fetchItem
sem argumento, retorna um erro com a mensagem:You must provide an url
. Dica: Lembre-se de usar onew Error('mensagem esperada aqui')
para comparar com o objeto retornado da API.
O que será avaliado
- Será avaliado se os testes implementados atingem no mínimo 50% da cobertura total e 100% da função
fetchItem
.
10. Desenvolva testes de no mínimo 75% de cobertura total e 100% da função saveCartItems
Implemente os testes nos arquivos da pasta
tests
que está na raiz do projeto.
Observações técnicas:
- Use o comando
npm test
para verificar se seus testes estão passando; - OBS: Você deve implementar os 2 requisitos, independente do que for suficiente para a cobertura de testes.
- Atenção: não altere a estrutura já implementada nos arquivos de testes, apenas adicione os testes dentro do bloco
describe
. - Lembre-se de ler com bastante atenção o que está sendo solicitado e implemente um teste de cada vez!
- A cobertura de testes irá checar apenas as funções que estão sendo testadas, e não toda a aplicação!
O que você deve testar
Dentro da pasta
tests
, abra o arquivosaveCartItems.test.js
e faça o solicitado:
Teste se, ao executar
saveCartItems
com o argumento<ol><li>Item</li></ol>
, o métodolocalStorage.setItem
é chamado;Teste se, ao executar
saveCartItems
com o argumento<ol><li>Item</li></ol>
, o métodolocalStorage.setItem
é chamado com dois parâmetros, sendo o primeiro 'cartItems' e o segundo sendo o valor passado como argumento parasaveCartItems
.
O que será avaliado
- Será avaliado se os testes implementados atingem no mínimo 75% da cobertura total e 100% da função
saveCartItems
.
11. Desenvolva testes para atingir 100% de cobertura total e 100% da função getSavedCartItems
Implemente os testes nos arquivos da pasta
tests
que está na raiz do projeto.
Observações técnicas:
- Use o comando
npm test
para verificar se seus testes estão passando. - OBS: Você deve implementar os 2 requisitos, independente do que for suficiente para a cobertura de testes.
- Atenção: não altere a estrutura já implementada nos arquivos de testes, apenas adicione os testes dentro do bloco
describe
. - Lembre-se de ler com bastante atenção o que está sendo solicitado e implemente um teste de cada vez!
- A cobertura de testes irá checar apenas as funções que estão sendo testadas, e não toda a aplicação!
O que você deve testar
Dentro da pasta
tests
, abra o arquivogetSavedCartItems.test.js
e faça o solicitado:
- Teste se, ao executar
getSavedCartItems
, o métodolocalStorage.getItem
é chamado; - Teste se, ao executar
getSavedCartItems
, o métodolocalStorage.getItem
é chamado com o 'cartItems' como parâmetro.
O que será avaliado
- Será avaliado se os testes implementados atigem 100% da cobertura total e 100% da função
getSavedCartItems
Depois de terminar o desenvolvimento
Para sinalizar que o seu projeto está pronto para o "Code Review" dos seus colegas, faça o seguinte:
Vá até a página DO SEU Pull Request, adicione a label de "code-review" e marque seus colegas:
No menu à direita, clique no link "Labels" e escolha a label code-review;
No menu à direita, clique no link "Assignees" e escolha o seu usuário;
No menu à direita, clique no link "Reviewers" e digite
students
, selecione o timetryber/students-sd-00
.
Caso tenha alguma dúvida, aqui tem um video explicativo.
Revisando um pull request
Use o conteúdo sobre Code Review para te ajudar a revisar os Pull Requests.
Avisos finais
Ao finalizar e submeter o projeto, não se esqueça de avaliar sua experiência preenchendo o formulário. Leva menos de 3 minutos!
Link: FORMULÁRIO DE AVALIAÇÃO DE PROJETO
O avaliador automático não necessariamente avalia seu projeto na ordem em que os requisitos aparecem no readme. Isso acontece para deixar o processo de avaliação mais rápido. Então, não se assuste se isso acontecer, ok?