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 e nosso Blog - Git & GitHub sempre que precisar!

Neste projeto você criará uma versão simplificada, sem persistência no banco de dados, de uma loja online, desenvolvendo em grupo suas funcionalidades de acordo com demandas definidas em um quadro Kanban, em um cenário próximo ao do mercado de trabalho.

A partir dessas demandas, teremos uma aplicação em que pessoas usuárias poderão:

• Buscar produtos por termos e categorias a partir da API do Mercado Livre;
• Interagir com os produtos buscados de modo a adicioná-los e removê-los de um carrinho de compras em diferentes quantidades;
• Visualizar detalhes e avaliações prévias de um produto, bem como criar novas avaliações e;
• Simular a finalização da compra dos itens selecionados.

Neste projeto você será irá:

• Entender o que são Métodos Ágeis;
• Entender o que é Kanban;
• Entender o que é Scrum;
• Trabalhar em equipes utilizando Kanban ou Scrum de maneira eficaz;
• Praticar todas as habilidades desenvolvidas até agora no módulo de Front-end.

• Este projeto é em grupo;
• São X dias de projeto;
• Data para entrega final do projeto: 17/08/2022 14:00.

1. Clone o repositório

• Use o comando: git clone [email protected]:tryber/sd-023-a-project-frontend-online-store.git.
• Entre na pasta do repositório que você acabou de clonar:
  • cd sd-023-a-project-frontend-online-store
• Vá para a branch do seu grupo:
  • git checkout main-group-XX && git pull, em que XX é o número do seu grupo. Exemplos: main-group-1, main-group-22.

2. Instale as dependências

• npm install.

3. Faça alterações separadas por novas branchs criadas a partir da branch main-group-XX, criando uma nova branch para cada demanda

• Verifique que você está na branch main-group-XX
  • Exemplo: git branch
• Se não estiver, mude para a branch main-group-XX
  • Exemplo: git checkout main-group-XX && git pull
• Crie uma branch para a demanda que você vai desenvolver do seu projeto
  • Você deve criar uma branch com uma breve descrição da demanda a ser desenvolvida
  • Exemplo: git checkout -b main-group-XX-cria-campo-de-busca

4. Adicione as mudanç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 listadas as novas alterações em vermelho)
• 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 listadas as novas alterações em verde)
• Faça o commit
  • Exemplo:
    • git commit -m 'cria componente de busca' (fazendo o primeiro commit)
    • git status (deve aparecer uma mensagem tipo nothing to commit )

5. Adicione a sua branch com o novo commit ao repositório remoto

• Usando o exemplo anterior: git push -u origin main-group-XX-cria-campo-de-busca

6. 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
• Coloque um título para a sua Pull Request
  • Exemplo: "[GRUPO XX] Cria tela de busca"
• Clique no botão verde "Create pull request"
• Adicione uma descrição para o Pull Request 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

7. Assim que aprovado por pelo menos uma pessoa do seu grupo e o Linter estiver adereçado (veja como nas próximas sessões), acesse SEU Pull Request e clique no botão "Merge pull request"

• 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

• Os comandos que você utilizará com mais frequência são:

  1. git status (para verificar o que está em vermelho - fora do stage - e o que está em verde - no stage)
  2. git add (para adicionar arquivos ao stage do Git)
  3. git commit (para criar um commit com os arquivos que estão no stage do Git)
  4. git push -u origin nome-da-branch (para enviar o commit para o repositório remoto na primeira vez que fizer o push de uma nova branch)
  5. git push (para enviar o commit para o repositório remoto após o passo anterior)

Para sinalizar que o seu projeto está pronto para o "Code Review", 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 time tryber/students-sd-023-a.

Caso tenha alguma dúvida, aqui tem um video explicativo.

Use o conteúdo sobre Code Review para te ajudar a revisar os Pull Requests.

O ESLint será utilizado para fazer a análise estática do seu código garantindo a sua qualidade de forma a tê-lo mais legível, de mais fácil manutenção e seguindo as boas práticas de desenvolvimento.

Para rodar o linter localmente no seu projeto, execute o comando abaixo:

npm run lint

Você pode instalar o plugin do ESLint no VSCode. Para isso, bastar ir em extensions e baixar o plugin ESLint e instalá-lo.

Você pode consultar nosso contúdo sobre sobre ESLint caso ainda tenha alguma dúvida.

⚠️ IMPORTANTE! ⚠️ Pull Requests com erros de linter não serão avaliados. Resolva os erros de linter antes de finalizar o desenvolvimento

Uma forma para seu grupo organizar as atividades e dividir as tarefas é através de um modelo de Kanban. A Trybe disponibilizou no Trello um board pré-configurado para que você possa duplicá-lo para usar com seu grupo.

Siga os passos abaixo para duplicar o board:

• Acesse o board;
• Abra o menu no canto superior direito;
• Selecione "copiar quadros";
• Defina o time do seu grupo e um título para o board;
• Clique em criar;
• Personalize seu novo Kanban.

A React Testing Library (RTL) será utilizada para execução dos testes.

Na descrição dos requisitos será pedido a adição de atributos data-testid nos elementos HTML.

Para deixar evidente esta configuração veja o exemplo:

• se o requisito pedido for "crie um botão e adicione o id de teste (ou data-testid) com o valor my-action", você pode escrever:

<button data-testid="my-action" ></button>

ou

<a data-testid="my-action"><a/>

O atributo data-testid="my-action" servirá para que a React Testing Library (RTL) identifique o elemento. Desta forma será possível realizar testes unitários focados no comportamento da aplicação.

Você pode executar todos os testes unitários localmente para verificar a solução proposta com o comando abaixo:

npm test

Você pode executar os testes para um único requisito passando, como parâmetro para o comando, o nome do arquivo de teste alvo:

npm test src/__tests__/requirement1.test.js

** 👀 De olho na dica:** Desativando testes

Caso queira avaliar apenas um tópico do requisito, você pode usar o .only após o it. Com isso, será possível que apenas esse tópico rode localmente e seja avaliado.

⚠️ ATENÇÃO! ⚠️ O avaliador automático não avalia, necessariamente, 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?

Sua página web irá consumir os dados da API do Mercado Livre para realizar a busca de itens da sua loja online. Para realizar essas buscas, você precisará consultar os seguintes endpoints:

• Para listar as categorias disponíveis:
  • Endpoint: https://api.mercadolibre.com/sites/MLB/categories
• Para buscar por itens por termo:
  • Parâmetro de busca $QUERY (este parâmetro deve ser substituído pelo valor do campo de busca)
  • Endpoint: https://api.mercadolibre.com/sites/MLB/search?q=$QUERY
• Para buscar itens por categoria:
  • Parâmetro de busca $CATEGORY_ID (este parâmetro deve ser substituído pelo ID da categoria selecionada)
  • Endpoint: https://api.mercadolibre.com/sites/MLB/search?category=$CATEGORY_ID
• Para buscar itens de uma categoria por termo (vale ressaltar, que este endpoint não necessariamente precisa receber ambos os parâmetros para funcionar):
  • Parâmetro de busca $QUERY (este parâmetro deve ser substituído pelo valor do campo de busca)
  • Parâmetro de busca $CATEGORY_ID (este parâmetro deve ser substituído pelo ID da categoria selecionada)
  • Endpoint: https://api.mercadolibre.com/sites/MLB/search?category=$CATEGORY_ID&q=$QUERY
• Para buscar detalhes de um item especifico:
  • Parâmetro de busca $PRODUCT_ID (este parâmetro deve ser substituído pelo valor do campo de busca)
  • Endpoint: https://api.mercadolibre.com/items/$PRODUCT_ID

Se você quiser aprender mais sobre a API do Mercado Livre, veja a documentação.

"https://api.mercadolibre.com/sites/MLB/categories"

O retorno desse endpoint será algo no formato:

[
    {
        "id": "MLB5672",
        "name": "Acessórios para Veículos"
    },
    ...
]

"https://api.mercadolibre.com/sites/MLB/search?category=MLB1055&q=Motorola"

O retorno desse endpoint será algo como o exemplo deste arquivo.

👀 De olho na dica: Se der erro de CORS aperte ctrl + shift + r no seu navegador.

Para maior eficiência de trabalho e para minimizar os conflitos de união de vários códigos é importante que o grupo se organize utilizando a metodologia Kanban.

Você verá que os requisitos do projeto têm, além das observações técnicas e do que será avaliado, descrições tais quais se veriam em um projeto real. Como futura pessoa desenvolvedora é importante você ser capaz de ler e interpretar as descrições dos requisitos para transformá-las em produtos ou, se houver dúvida, saber como resolver tais dúvidas!

Os requisitos estão organizados por prioridade. Demandas de um mesmo grupo de prioridade podem ser realizadas em paralelo e são pré-requisito para as demandas do grupo de prioridade seguinte.

Por exemplo:

• Requisitos 1 e 2: Prioridade 0 (Devem ser feitos PRIMEIRO);
• Requisitos 3 a 5: Prioridade 1 (Devem ser feitos APÓS OS REQUISITO 1 E 2, mas podem ser feitos em paralelo);
• Requisitos 5 a 7: Prioridade 2 (Devem ser feitos APÓS OS REQUISITO 3 A 5, mas podem ser feitos em paralelo);
• Assim por diante.

Se você não seguir a ordem de prioridades terá mais conflitos de merge e demandas concorrentes, em que o avanço de uma depende, necessariamente, do avanço de outra.

A capacidade de priorizar tarefas será constantemente requisitada em sua vida profissional como pessoa desenvolvedora, aproveite o exercício e priorize, neste projeto, as atividades essenciais para depois sequir para as extras (requisitos bônus).

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!

FORMULÁRIO DE AVALIAÇÃO DE PROJETO

Você sabia que o LinkedIn é a principal rede social profissional e compartilhar o seu aprendizado lá é muito importante para quem deseja construir uma carreira de sucesso? Compartilhe esse projeto no seu LinkedIn, marque o perfil da Trybe (@trybe) e mostre para a sua rede toda a sua evolução.

• Utilize (OBRIGATORIAMENTE) o arquivo src/services/api.js para acessar a API do Mercado Livre em sua aplicação;

• Utilize (OBRIGATORIAMENTE) o módulo Fetch para realizar as requisições;

• Você deve (OBRIGATORIAMENTE) implementar as funções getCategories() e getProductsFromCategoryAndQuery() que estão no arquivo src/services/api.js:

  export async function getCategories() {
    // Implemente aqui
  }
  
  export async function getProductsFromCategoryAndQuery(/* categoryId, query */) {
    // Implemente aqui! Quando o fizer, descomente os parâmetros que essa função recebe
    // Essa função será chamada em vários momentos do projeto para buscar os produtos pela categoria e querys
    // Dentro da função você pode usar condicionais definir qual API utilizar
  }

  Essas funções devem realizar uma chamada para a API do Mercado Livre e retornar uma Promise com os dados de resultado. Com essa implementação, o uso dessas funções deve ser algo parecido com o exemplo abaixo:

  import * as api from './services/api'
  
  api.getCategories().then(categories => { console.log(categories) })

  A variável categories deve conter o objeto JSON com as categorias obtidas através da chamada da API do Mercado Livre:

  [
    {
        "id": "MLB5672",
        "name": "Acessórios para Veículos"
    },
    {
        "id": "MLB271599",
        "name": "Agro"
    },
    {
        "id": "MLB1403",
        "name": "Alimentos e Bebidas"
    }
  ]

• Sinta-se livre para criar novas funções neste arquivo, mas apenas as funções getCategories() e getProductsFromCategoryAndQuery() serão avaliadas.

• Implementa a função getCategories;
• Implementa a função getProductsFromCategoryAndQuery.

• Esta página deve ficar no path /, renderizável a partir do acesso ao componente <App />;
• Inicialmente a listagem de produtos deve estar vazia;
• Quando a lista estiver vazia, a página deve mostrar a mensagem "Digite algum termo de pesquisa ou escolha uma categoria.";
• Adicione o atributo data-testid com o valor home-initial-message no elemento da mensagem.

A imagem pode ser acessada no arquivo ./wireframes/card_02.png

• A raiz da aplicação, em <App />, renderiza com sucesso;
• A tela contém a mensagem pedida: 'Digite algum termo de pesquisa ou escolha uma categoria.'.

• Quando não existirem produtos no carrinho de compras, a página deve exibir a mensagem "Seu carrinho está vazio";
• Adicione o atributo data-testid com o valor shopping-cart-empty-message no elemento da mensagem.

![Tela do carrinho de compras](./wireframes/card_03.png)

• O elemento deve estar visível na página inicial (listagem de produtos);
• Este elemento também deverá estar presente na página de detalhes de um produto, mas não se preocupe com isso neste momento, estará descrito em um requisito posterior;
• Adicione o atributo data-testid com o valor shopping-cart-button no elemento que redireciona à pagina de carrinho de compras.

⚠️ Atenção! O elemento que faz o direcionamento para a página do carrinho é quem deve conter o data-testid. Se você fizer isso com um <Link />, por exemplo, é este quem deve conter o data-testid.

![Tela principal - Com botão do carrinho de compras](./wireframes/bonus_shopping_cart_button.png)

• A home deve ter o botão do carrinho de compras;
• Clicar no botão deve levar à página do carrinho vazio, com a mensagem 'Seu carrinho está vazio' nela.

• 👀 De olho na dica: Posteriormente as categorias serão utilizadas para realizar novas requisições para listar produtos. Ou seja, elas serão clicáveis para aplicar um filtro de categoria. Sugerimos a utilização do elemento do tipo button ou do tipo radio button para listar as categorias. Por hora, neste requisito, será avaliado apenas a listagem das categorias, conforme protótipo.
• Adicione o atributo data-testid com o valor category nos elementos que receberão o nome da categoria. Atenção! Caso você opte por utilizar radio buttons para realizar a listagem, as labels dos elementos que deverão receber o data-testid, e não se esqueça da propriedade htmlFor.

• Exibe as categorias retornadas pela API na página de listagem de produtos.

• A tela principal deve possuir um elemento input com o atributo data-testid="query-input";
• A tela principal deve possuir um elemento com o atributo data-testid="query-button" que, ao ser clicado, dispara a chamada para a API com o termo de busca pesquisado (ou seja, com o valor digitado no input);
• Renderize na tela uma exibição resumida de todos os produtos retornados pela API, contendo o nome, a imagem e o preço de cada produto;
• Adicione o atributo data-testid="product" nos elementos que possuem os dados dos produtos;
• Caso a busca não retorne resultados, renderize na tela o texto "Nenhum produto foi encontrado".

• Exibe todos os produtos retornados pela API, dado um determinado filtro.

• Ao clicar em uma das categorias listadas, faça uma requisição à API do Mercado Livre e renderize na tela uma exibição resumida de todos os produtos retornados dessa categoria, contendo o nome, a imagem e o preço de cada produto;
• Adicione o atributo data-testid="product" nos elementos que possuem os dados dos produtos;
• 👀 De olho na dica: Lembre-se de consultar os endpoints da API para encontrar a requisição de busca por categoria (mais informações na documentação da API, na seção Desenvolvimento).

• Exibe corretamente na página somente os produtos da categoria clicada.

• Adicione o atributo data-testid="product-detail-link" no elemento que, ao ser clicado, enviará a pessoa usuária para a página de detalhes do produto. Você deve adicionar esse atributo para todos os produtos;
• A página de detalhes deve possuir o nome, a imagem, o preço e qualquer outra informação adicional do produto que você desejar;
• Adicione o atributo data-testid="product-detail-name" no elemento que, na tela de detalhes, possui o nome do produto;
• Adicione o atributo data-testid="product-detail-image" no elemento que, na tela de detalhes, possui a imagem do produto;
• Adicione o atributo data-testid="product-detail-price" no elemento que, na tela de detalhes, possui o preço do produto;
• Adicione o atributo data-testid="shopping-cart-button" ao botão que, ao ser clicado, redireciona para a página do carrinho de compras.

• Clicar no card de um produto leva à página com seus detalhes;
• Exibe corretamente o nome, a imagem e o preço do produto em sua página de detalhes;
• Exibe o botão que redireciona à página do carrinho de compras;
• Clicar no botão do carrinho leva à página do carrinho de compras com a mensagem 'Seu carrinho está vazio' na tela.

• Adicione o atributo data-testid="product-add-to-cart" no elemento que executa a ação de adicionar o produto ao carrinho de compras.

• Os produtos na tela do Carrinho de Compras devem possuir o nome, o preço e a quantidade;
• Adicione o atributo data-testid="shopping-cart-product-name" no elemento que possui o nome do produto na tela do carrinho de compras. Você deve adicionar esse atributo para todos os produtos na tela do carrinho;
• Adicione o atributo data-testid="shopping-cart-product-quantity" no elemento que possui a quantidade do produto na tela do carrinho de compras. Você deve adicionar esse atributo para todos os produtos na tela do carrinho.

• Adiciona um produto ao carrinho a partir da tela principal;
• Ao adicionar um produto a partir da tela inicial e clicar no carrinho de compras, espera-se que nenhuma requisição(fetch) seja feita.

• Adicione o atributo data-testid="product-detail-add-to-cart" no elemento que possui a ação de adicionar o produto ao carrinho de compras.
• Ainda na tela de detalhes de um produto, adicione um elemento que, ao ser clicado, redireciona a pessoa usuária para a tela de carrinho. Esse elemento precisa ter o atributo data-testid="shopping-cart-button".

• Os produtos na tela do Carrinho de Compras devem possuir o nome, o preço e a quantidade;
• Adicione o atributo data-testid="shopping-cart-product-name" no elemento que possui o nome do produto na tela do carrinho de compras. Você deve adicionar esse atributo para todos os produtos na tela do carrinho;
• Adicione o atributo data-testid="shopping-cart-product-quantity" no elemento que possui a quantidade do produto na tela do carrinho de compras. Você deve adicionar esse atributo para todos os produtos na tela do carrinho.

• Adiciona um produto ao carrinho a partir da sua tela de detalhes;
• Avalia se o nome e a quantidade do produto adicionado são exibidos corretamente na tela do carrinho de compras.

• Adicione elementos na página do carrinho de compras para aumentar ou diminuir a quantidade de cada produto presente no carrinho;
• A quantidade mínima de um produto no carrinho deve ser 1;
• Adicione o atributo data-testid="product-increase-quantity" no elemento que aumenta a quantidade de um produto. Adicione esse atributo para todos os produtos;
• Adicione o atributo data-testid="product-decrease-quantity" no elemento que diminui a quantidade de um produto. Adicione esse atributo para todos os produtos;
• Você pode criar um elemento para remover um item do carrinho, mas isso não será avaliado nesse momento.

• Adiciona produtos ao carrinho e manipula suas quantidades.

• Crie um input com o atributo data-testid="product-detail-email", onde a pessoa usuária colocará o email;
• Crie 5 elementos contendo o atributo data-testid="${index}-rating", com o ${index} indo de 1 a 5, para a pessoa escolher qual nota dar ao produto. Neste formulário, os 5 elementos precisam ser renderizados na tela, independente da nota atribuída pela pessoa avaliadora;
• Adicione um campo de texto com o atributo data-testid="product-detail-evaluation" para a pessoa usuária escrever algo sobre o produto;
• Adicione um botão com o atributo data-testid="submit-review-btn" para a pessoa usuária enviar a avaliação.

• Ao clicar no botão com o atributo data-testid="submit-review-btn", as informações inseridas no formulário deverão ser renderizadas na tela de detalhes do produto, abaixo do formulário, e os campos de texto do formulário devem ser limpos;
• As avaliações devem persistir na tela de detalhes do produto. Ou seja, se a pessoa usuária sair da tela e acessar novamente, as avaliações ainda devem estar sendo renderizadas na página.

• Avalia se é possível realizar uma avaliação na tela de detalhes de um produto;
• Avalia se o formulário é validado corretamente;
• Avalia se os campos de texto do formulário são limpos após a submissão da avaliação;
• Avalia se a avaliação continua após recarregar a página de detalhes do produto;
• Avalia se a avaliação feita para um produto específico não aparece na tela de detalhes de outro produto.

• Este elemento, ao ser clicado, deve redirecionar a pessoa usuária à página de checkout;
• Adicione o atributo data-testid="checkout-products" no elemento que leva a pessoa à página de checkout.

• Ao acessar a tela de checkout, o nome dos produtos que estão no carrinho deverão estar na tela. Você pode adicionar qualquer outra informação sobre os produtos, mas apenas o nome é obrigatório.

• O formulário precisa possuir os seguintes campos:

  • Nome Completo: este elemento deve possuir o atributo data-testid="checkout-fullname";

  • Email: este elemento deve possuir o atributo data-testid="checkout-email";

  • CPF: este elemento deve possuir o atributo data-testid="checkout-cpf";

  • Telefone: este elemento deve possuir o atributo data-testid="checkout-phone";

  • CEP: este elemento deve possuir o atributo data-testid="checkout-cep";

  • Endereço: este elemento deve possuir o atributo data-testid="checkout-address".

  • Método de pagamento: este elemento deve ser um input do tipo radio e conter 4 opções:

    • Boleto, que deve possuir o atributo data-testid="ticket-payment";
    • Visa, que deve possuir o atributo data-testid="visa-payment";
    • MasterCard, que deve possuir o atributo data-testid="master-payment";
    • Elo, que deve possuir o atributo data-testid="elo-payment";

  • Um botão para submeter o formulário, contendo o atributo data-testid="checkout-btn"

• Todos os campos do formulário são obrigatórios e precisam ser preenchidos para finalizar o checkout;

• Caso algum campo não esteja preenchido, um elemento contendo a mensagem Campos inválidos deve ser renderizado. Este elemento deve possuir o atributo data-testid="error-msg";
• Caso todos os campos estejam preenchidos, a pessoa usuária deve ser redirecionada para a tela principal (listagem de produtos) e o carrinho deve ser esvaziado. 💡 Ou seja, caso a pessoa usuária acesse a página do carrinho de compras após finalizar o checkout, a mensagem Seu carrinho está vazio deverá estar na tela.

• Avalia se é possível, a partir de um carrinho de compras com produtos, acessar a página de checkout com um formulário válido.

• Esse elemento deve ser visível da página de listagem de produtos e da página de detalhes de produto;
• Adicione o atributo data-testid="shopping-cart-size" no elemento que contém a quantidade de produtos presente no carrinho;
• A quantidade a ser exibida é o número total de itens, ou seja, se a pessoa adiciona o produtoA 5 vezes e o produtoB 2 vezes, o valor a ser exibido é 7.

• Avalia se a quantidade de produtos no carrinho da tela de listagem de produtos é renderizada corretamente;
• Ao recarregar a página de listagem e adicionar novos produtos, avalia se a quantidade de itens no carrinho de compras é atualizada na tela de detalhes.

• Ao clicar no elemento q possui o atributo data-testid="product-increase-quantity" para aumentar a quantidade de um produto no carrinho, o valor não pode ser superior a sua quantidade disponível em estoque;
• 👀 Dica: Você pode encontrar esse valor na chave "available_quantity", disponível na API do Mercado Livre.

• Avalia se não é possível adicionar ao carrinho mais produtos do que o disponível em estoque;
• Ao tentar adicionar no carrinho mais produtos do que o disponível no estoque, o valor não deve ser alterado.

• Adicione um elemento que mostre essa informação para cada produto que possua frete grátis na tela de listagem de produtos;
• Essa informação pode ser adicionada também à tela de detalhes do produto, mas isso não será avaliado;
• Adicione o atributo data-testid="free-shipping" no elemento que apresenta essa informação para todos os produtos que possuam frete grátis;
• Para os produtos que não possuem frete grátis, você não precisa adicionar nenhum novo elemento.

• Exibe corretamente a informação de frete grátis dos produtos.