Projeto desenvolvido durante o Curso de Desenvolvimento WEB, Turma 12, da trybe, onde desenvolvi minhas habilidades em JavaScript, React.js, Redux, Metologias Ágeis, Scrum, Kanban e muita softs skills, na criação de uma pagina de receitas.
Obs.: Projeto desenvolvido em Grupo.
Membros do meu Grupo:
A trybe é uma escola para pessoas que querem construir uma carreira de sucesso em tecnologia e que se compromete integralmente com seus estudantes, pois as pessoas só pagam quando conseguirem um bom trabalho.
O programa conta com mais de 1.500 horas de aulas presenciais e on-line e aborda introdução ao desenvolvimento de software, front-end, back-end, ciência da computação, engenharia de software, metodologias ágeis e habilidades comportamentais.
O currículo da Trybe foi desenhado em parceria com as maiores empresas de tecnologia do Brasil e do mundo e ao longo da formação, estudamos JavaScript, HTML, CSS, React, Node, Express.js, SQL, Git, entre outras linguagens e frameworks.
- Habilidades desenvolvidas
- Tecnologias utilizadas
- Requisitos do projeto
- 1 - Desenvolva os testes unitários de maneira que a seja de, no mínimo, 90%
- 2 - Crie todos os elementos que devem respeitar os atributos descritos no protótipo para a tela de login
- 3 - Desenvolva a tela de maneira que a pessoa deve conseguir escrever seu email no input de email
- 4 - Desenvolva a tela de maneira que a pessoa deve conseguir escrever sua senha no input de senha
- 5 - Desenvolva a tela de maneira que o formulário só seja válido após um email válido e uma senha de mais de 6 caracteres serem preenchidos
- 6 - Salve 2 tokens no localStorage após a submissão, identificados pelas chaves mealsToken e cocktailsToken
- 7 - Salve o e-mail da pessoa usuária no localStorage na chave user após a submissão
- 8 - Redirecione a pessoa usuária para a tela principal de receitas de comidas após a submissão e validação com sucesso do login
- 9 - Implemente os elementos do header na tela principal de receitas, respeitando os atributos descritos no protótipo
- 10 - Implemente um ícone para a tela de perfil, um título e um ícone para a busca, caso exista no protótipo
- 11 - Redirecione a pessoa usuária para a tela de perfil ao clicar no botão de perfil
- 12 - Desenvolva o botão de busca que, ao ser clicado, a barra de busca deve aparecer. O mesmo serve para escondê-la
- 13 - Implemente os elementos da barra de busca respeitando os atributos descritos no protótipo
- 14 - Posicione a barra logo abaixo do header e implemente 3 radio buttons: Ingrediente, Nome e Primeira letra
- 15 - Busque na API de comidas caso a pessoa esteja na página de comidas e na de bebidas caso esteja na de bebidas
- 16 - Redirecione para a tela de detalhes da receita caso apenas uma receita seja encontrada, com o ID da mesma na URL
- 17 - Mostre as receitas em cards caso mais de uma receita seja encontrada
- 18 - Exiba um
alertcaso nenhuma receita seja encontrada - 19 - Implemente os elementos do menu inferior respeitando os atributos descritos no protótipo
- 20 - Posicione o menu inferior de forma fixa e apresente 3 ícones: um para comidas, um para bebidas e outro para exploração
- 21 - Exiba o menu inferior apenas nas telas indicadas pelo protótipo
- 22 - Redirecione a pessoa usuária para uma lista de cocktails ao clicar no ícone de bebidas
- 23 - Redirecione a pessoa usuária para a tela de explorar ao clicar no ícone de exploração
- 24 - Redirecione a pessoa usuárua para uma lista de comidas ao clicar no ícone de comidas
- 25 - Implemente os elementos da tela principal de receitas respeitando os atributos descritos no protótipo
- 26 - Carregue as 12 primeiras receitas de comidas ou bebidas, uma em cada card
- 27 - Implemente os botões de categoria para serem utilizados como filtro
- 28 - Implemente o filtro das receitas através da API ao clicar no filtro de categoria
- 29 - Implemente o filtro como um toggle, que se for selecionado de novo, o app deve retornar as receitas sem nenhum filtro
- 30 - Implemente o filtro de categoria para que apenas um seja selecionado por vez
- 31 - Desenvolva o filtro de categorias com a opção de filtrar por todas as categorias
- 32 - Redirecione a pessoa usuária, ao clicar no card, para a tela de detalhes, que deve mudar a rota e conter o id da receita na URL
- 33 - Implemente os elementos da tela de detalhes de uma receita respeitando os atributos descritos no protótipo
- 34 - Realize uma request para a API passando o
idda receita que deve estar disponível nos parâmetros da URL - 35 - Desenvolva a tela de forma que contenha uma imagem da receita, o título, a categoria (ou se é ou não alcoólico), uma lista de ingredientes seguidos pelas quantidades, instruções, um vídeo do youtube "embedado" e recomendações
- 36 - Implemente as recomendações, para receitas de comida, a recomendação deverá ser bebida e vice-versa
- 37 - Implemente os cards de recomendação, onde serão 6 cards, mas mostrando apenas 2 e o scroll é horizontal, similar a um
carousel - 38 - Desenvolva um botão de nome "Iniciar Receita" que deve ficar fixo na parte de baixo da tela o tempo todo
- 39 - Implemente a solução de forma que caso a receita já tenha sido feita, o botão "Iniciar Receita" deve sumir
- 40 - Implemente a solução de modo que caso a receita tenha sido iniciada mas não finalizada, o texto do botão deve ser "Continuar Receita"
- 41 - Redirecione a pessoa usuário caso o botão "Iniciar Receita" seja clicado, a rota deve mudar para a tela de receita em processo
- 42 - Implemente um botão de compartilhar e um de favoritar a receita
- 43 - Implemente a solução de forma que, ao clicar no botão de compartilhar, o link da receita dentro do app deve ser copiado para o clipboard e uma mensagem avisando que o link foi copiado deve aparecer
- 44 - Implemente o ícone do coração (favorito) de maneira que, deve vir preenchido caso a receita esteja favoritada e "despreenchido" caso contrário
- 45 - Implemente a lógica no botão de favoritar, caso seja clicado, o ícone do coração deve mudar seu estado atual, caso esteja preenchido deve mudar para "despreenchido" e vice-versa
- 46 - Salve as receitas favoritas no
localStoragena chavefavoriteRecipes - 47 - Desenvolva a tela de maneira que contenha uma imagem da receita, seu titulo, sua categoria (ou se a bebida é alcoólica ou não) uma lista de ingredientes com suas respectivas quantidade e suas instruções
- 48 - Desenvolva um checkbox para cada item da lista de ingredientes
- 49 - Implemente uma lógica que, ao clicar no checkbox de um ingrediente, o nome dele deve ser "riscado" da lista
- 50 - Salve o estado do progresso, que deve ser mantido caso a pessoa atualize a página ou volte para a mesma receita
- 51 - Desenvolva a lógica de favoritar e compartilhar, a lógica da tela de detalhes de uma receita se aplica aqui
- 52 - Implemente a solução de maneira que o botão de finalizar receita só pode estar habilitado quando todos os ingredientes estiverem "checkados" (marcados)
- 53 - Redirecione a pessoa usuária após clicar no botão "Finalizar receita", para a página de receitas feitas, cuja rota deve ser
/receitas-feitas - 54 - Implemente os elementos da tela de receitas feitas respeitando os atributos descritos no protótipo
- 55 - Desenvolva a tela de maneira que, caso a receita do card seja uma comida, ela deve possuir: a foto da receita, o nome, a categoria, a area, a data em que a pessoa fez a receita, as 2 primeiras tags retornadas pela API e um botão de compartilhar
- 56 - Desenvolva a tela de maneira que, caso a receita do card seja uma bebida, ela deve possuir: a foto da receita, o nome, se é alcoólica, a data em que a pessoa fez a receita e um botão de compartilhar
- 57 - Desenvolva a solução de maneira que o botão de compartilhar deve copiar a URL da tela de detalhes da receita para o clipboard
- 58 - Implemente 2 botões que filtram as receitas por comida ou bebida e um terceiro que remove todos os filtros
- 59 - Redirecione para a tela de detalhes da receita caso seja clicado na foto ou no nome da receita
- 60 - Implemente os elementos da tela de receitas favoritas (cumulativo com os atributos em comum com a tela de receitas feitas) respeitando os atributos descritos no protótipo
- 61 - Desenvolva a tela de maneira que, caso a receita do card seja uma comida, ela deve possuir: a foto da receita, o nome, a categoria, a area, um botão de compartilhar e um de "desfavoritar"
- 62 - Desenvolva a tela de maneira que, caso a receita do card seja uma bebida, ela deve possuir: a foto da receita, o nome, se é alcoólica ou não, um botão de compartilhar e um de "desfavoritar"
- 63 - Desenvolva a solução de maneira que o botão de compartilhar deve copiar a URL da tela de detalhes da receita para o clipboard
- 64 - Desenvolva a solução de maneira que o botão de "desfavoritar" deve remover a receita da lista de receitas favoritas do
localStoragee da tela - 65 - Implemente 2 botões que filtram as receitas por comida ou bebida e um terceiro que remove todos os filtros
- 66 - Redirecione a pessoa usuária ao clicar na foto ou no nome da receita, a rota deve mudar para a tela de detalhes daquela receita
- 67 - Implemente os elementos da tela de explorar respeitando os atributos descritos no protótipo
- 68 - Desenvolva a tela de maneira que tenha 2 botões: um para explorar comidas e o outro para explorar bebidas
- 69 - Redirecione a pessoa usuária ao clicar em um dos botões, a rota deve mudar para a página de explorar comidas ou de explorar bebidas
- 70 - Implemente os elementos da tela de explorar bebidas ou comidas respeitando os atributos descritos no protótipo
- 71 - Desenvolva 3 botões: um para explorar por ingrediente, um para explorar por local de origem e um para pegar uma receita aleatória
- 72 - Redirecione a pessoa usuária ao clicar em "Por Ingredientes", a rota deve mudar para a tela de explorar por ingredientes
- 73 - Redirecione a pessoa usuária ao clicar em "Por Local de Origem", a rota deve mudar para tela de explorar por local de origem
- 74 - Redirecione a pessoa usuária ao clicar em "Me Surpreenda!", a rota deve mudar para a tela de detalhes de uma receita, que deve ser escolhida de forma aleatória através da API
- 75 - Implemente os elementos da tela de explorar ingredientes respeitando os atributos descritos no protótipo
- 76 - Desenvolva cards para os 12 primeiros ingredientes, de forma que cada card contenha o nome do ingrediente e uma foto
- 77 - Redireciona a pessoa usuária ao clicar no card do ingrediente, a rota deve mudar para tela principal de receitas mas mostrando apenas as receitas que contém o ingrediente escolhido
- 78 - Implemente os elementos da tela de explorar por local de origem respeitando os atributos descritos no protótipo
- 79 - Desenvolva as mesmas especificações da tela de receitas principal, com a diferença de que os filtros de categoria são substituídos por um dropdown
- 80 - Implemente o dropdown de maneira que devem estar disponíveis todas as áreas retornadas da API, incluindo a opção "All", que retorna as receitas sem nenhum filtro
- 81 - Implemente a rota que deve ser apenas
/explorar/comidas/area - 82 - Implemente os elementos da a tela de perfil respeitando os atributos descritos no protótipo
- 83 - Implemente a solução de maneira que o e-mail da pessoa usuária deve estar visível
- 84 - Implemente 3 botões: um de nome "Receitas Feitas", um de nome "Receitas Favoritas" e um de nome "Sair"
- 85 - Redirecione a pessoa usuária que, ao clicar no botão de "Receitas Favoritas", a rota deve mudar para a tela de receitas favoritas
- 86 - Redirecione a pessoa usuária que, ao clicar no botão de "Receitas Feitas", a rota deve mudar para a tela de receitas feitas
- 87 - Redirecione a pessoa usuária que, ao clicar no botão de "Sair", o
localStoragedeve ser limpo e a rota deve mudar para a tela de login
- Utilizar Redux para gerenciar estado
- Utilizar a biblioteca React-Redux
- Utilizar a Context API do React para gerenciar estado
- Utilizar o React Hook useState
- Utilizar o React Hook useContext
- Utilizar o React Hook useEffect
- Criar Hooks customizados
- 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
O que será verificado:
- Verifica a cobertura de testes unitários
2 - Crie todos os elementos que devem respeitar os atributos descritos no protótipo para a tela de login
Observações técnicas
- O input de email deve possuir o atributo
data-testid="email-input"; - O input de senha deve possuir o atributo
data-testid="password-input"; - O botão "Entrar" deve possuir o atributo
data-testid="login-submit-btn".
O que será verificado:
- Tem os data-testids email-input, password-input e login-submit-btn
O que será verificado:
- É possível escrever o email
O que será verificado:
- É possível escrever a senha
5 - Desenvolva a tela de maneira que o formulário só seja válido após um email válido e uma senha de mais de 6 caracteres serem preenchidos
O formulário só fica válido após um email válido e uma senha de mais de 6 caracteres serem preenchidos. Caso o formulário esteja inválido, o botão de submeter deve estar desativado, contendo a propriedade disabled. Caso contrário, deve estar ativado, não contendo a propriedade disabled.
O que será verificado:
- O botão deve estar desativado se o email for inválido
- O botão deve estar desativado se a senha deve tiver 6 caracteres ou menos
- O botão deve estar ativado se o email e a senha forem válidos
6 - Salve 2 tokens no localStorage após a submissão, identificados pelas chaves mealsToken e cocktailsToken
Observações técnicas
- O token de teste é sempre
1.
O que será verificado:
- Após a submissão mealsToken e cocktailsToken devem estar salvos em localStorage
Observações técnicas
- Após a submissão, o e-mail de pessoa usuária deve ser salvo em
localStoragena chaveuserno formato{ email: email-da-pessoa }.
O que será verificado:
- Após a submissão a chave user deve estar salva em localStorage
8 - Redirecione a pessoa usuária para a tela principal de receitas de comidas após a submissão e validação com sucesso do login
O que será verificado:
- A rota muda para a tela principal de receitas de comidas
9 - Implemente os elementos do header na tela principal de receitas, respeitando os atributos descritos no protótipo
O que será verificado:
- Tem os data-testids `profile-top-btn`, `page-title` e `search-top-btn`
10 - Implemente um ícone para a tela de perfil, um título e um ícone para a busca, caso exista no protótipo
Todas as rotas serão verificadas. Os ícones podem ser encontrados em src/images/profileIcon.svg e em src/images/searchIcon.svg.
O que será verificado:
- Não tem header na tela de login
- O header tem os ícones corretos na tela de principal de receitas de comidas
- O header tem os ícones corretos na tela de principal de receitas de bebidas
- Não tem header na tela de detalhes de uma receita de comida
- Não tem header na tela de detalhes de uma receita de bebida
- Não tem header na tela de receita em processo de comida
- Não tem header na tela de receita em processo de bebida
- O header tem os ícones corretos na tela de explorar
- O header tem os ícones corretos na tela de explorar comidas
- O header tem os ícones corretos na tela de explorar bebidas
- O header tem os ícones corretos na tela de explorar comidas por ingrediente
- O header tem os ícones corretos na tela de explorar bebidas por ingrediente
- O header tem os ícones corretos na tela de explorar comidas por local de origem
- O header tem os ícones corretos na tela de perfil
- O header tem os ícones corretos na tela de receitas feitas
- O header tem os ícones corretos na tela de receitas favoritas
O que será verificado:
- A mudança de tela ocorre corretamente
12 - Desenvolva o botão de busca que, ao ser clicado, a barra de busca deve aparecer. O mesmo serve para escondê-la
O que será verificado:
- Ao clicar no botão de busca pela primeira vez a barra de busca aparece
- Ao clicar no botão de busca pela segunda vez a barra de busca desaparece
Deve existir os data-testids tanto da barra de busca quanto de todos os radio-buttons.
Observações técnicas
- O input de busca deve possuir o atributo
data-testid="search-input"; - O radio button de busca de ingrediente deve possuir o atributo
data-testid="ingredient-search-radio"; - O radio button de busca por nome deve possuir o atributo
data-testid="name-search-radio"; - O radio button de busca da primeira letra deve possuir o atributo
data-testid="first-letter-search-radio". - O botão de busca deve possuir o atributo
data-testid="exec-search-btn"
O que será verificado:
- Tem os data-testids tanto da barra de busca quanto de todos os radio-buttons
14 - Posicione a barra logo abaixo do header e implemente 3 radio buttons: Ingrediente, Nome e Primeira letra
A barra de busca deve ficar logo abaixo do header e deve possuir 3 radio buttons: Ingrediente, Nome e Primeira letra. Eles, em conjunto com a search-input, devem mudar a forma como serão filtradas as receitas após clicar no botão Buscar. Os endpoints da API que você deve usar podem ser consultados aqui para a API de comidas e aqui para a API de bebidas.
Observações técnicas
- Se o radio selecionado for
Ingrediente, a busca na API é feita corretamente pelo ingrediente. O endpoint utilizado deve serhttps://www.themealdb.com/api/json/v1/1/filter.php?i={ingrediente}; - Se o radio selecionado for
Nome, a busca na API é feita corretamente pelo nome. O endpoint utilizado deve serhttps://www.themealdb.com/api/json/v1/1/search.php?s={nome}; - Se o radio selecionado for
Primeira letra, a busca na API é feita corretamente pelo primeira letra. O endpoint utilizado deve serhttps://www.themealdb.com/api/json/v1/1/search.php?f={primeira-letra}; - Se o radio selecionado for
Primeira letrae a busca na API for feita com mais de uma letra, deve-se exibir umalertcom a mensgem "Sua busca deve conter somente 1 (um) caracter".
Exemplo: Ao selecionar Ingrediente e buscar por chicken, deve-se utilizar o endpoint https://www.themealdb.com/api/json/v1/1/filter.php?i=chicken.
O que será verificado:
- Se o radio selecionado for Ingrediente, a busca na API é feita corretamente pelo ingrediente
- Se o radio selecionado for Nome, a busca na API é feita corretamente pelo nome
- Se o radio selecionado for Primeira letra, a busca na API é feita corretamente pelo primeira letra
- Se o radio selecionado for Primeira letra e a busca na API for feita com mais de uma letra, deve-se exibir um alert
15 - Busque na API de comidas caso a pessoa esteja na página de comidas e na de bebidas caso esteja na de bebidas
Observações técnicas
- Na tela de bebidas, se o radio selecionado for
Ingrediente, a busca na API é feita corretamente pelo ingrediente. O endpoint utilizado deve serhttps://www.thecocktaildb.com/api/json/v1/1/filter.php?i={ingrediente}; - Na tela de bebidas, se o radio selecionado for
Nome, a busca na API é feita corretamente pelo nome. O endpoint utilizado deve serhttps://www.thecocktaildb.com/api/json/v1/1/search.php?s={nome}; - Na tela de bebidas, se o radio selecionado for Primeira letra, a busca na API é feita corretamente pelo primeira letra. O endpoint utilizado deve ser
https://www.thecocktaildb.com/api/json/v1/1/search.php?f={primeira-letra}; - Na tela de bebidas, se o radio selecionado for
Primeira letrae a busca na API for feita com mais de uma letra, deve-se exibir umalertcom a mensgem "Sua busca deve conter somente 1 (um) caracter".
Observação: Para esse requisito será verificada apenas a tela principal de receitas de bebidas, já que a de comidas já foi verificada no requisito 15.
O que será verificado:
- Na tela de bebidas, se o radio selecionado for Ingrediente, a busca na API é feita corretamente pelo ingrediente
- Na tela de bebidas, se o radio selecionado for Nome, a busca na API é feita corretamente pelo nome
- Na tela de bebidas, se o radio selecionado for Primeira letra, a busca na API é feita corretamente pelo primeira letra
- Na tela de bebidas, se o radio selecionado for Primeira letra e a busca na API for feita com mais de uma letra, deve-se exibir um alert
16 - Redirecione para a tela de detalhes da receita caso apenas uma receita seja encontrada, com o ID da mesma na URL
Observações técnicas
- Caso apenas uma comida seja encontrada, deve-se ir para sua rota de detalhes (
/comidas/{id-da-receita}); - Caso apenas uma bebida seja encontrada, deve-se ir para sua rota de detalhes (
/bebidas/{id-da-receita}).
O que será verificado:
- Caso apenas uma comida seja encontrada, deve-se ir para sua rota de detalhes
- Caso apenas uma bebida seja encontrada, deve-se ir para sua rota de detalhes
Mostre as receitas em cards como as da tela principal, caso mais de uma receita seja encontrada.
Observações técnicas
- Cada card deve conter o
data-testid="${index}-recipe-card". - Cada imagem deve conter o
data-testid="${index}-card-img". - Cada tag com o nome da receita deve ter o
data-testid="${index}-card-name". - Caso mais de uma bebida seja encontrada, mostrar as 12 primeiras (ou menos, se não hoverem 12).
O que será verificado:
- Caso mais de uma comida seja encontrada, mostrar as 12 primeiras
- Caso mais de uma bebida seja encontrada, mostrar as 12 primeiras
O alert deve contendo o texto "Sinto muito, não encontramos nenhuma receita para esses filtros."
O que será verificado:
- Caso nenhuma comida seja encontrada o alert deve ser exibido
- Caso nenhuma bebida seja encontrada o alert deve ser exibido
Todos os elementos devem respeitar os atributos descritos no protótipo para o menu inferior disponível na tela principal de receitas
Observações técnicas
- O menu inferior deve ter possuir o atributo
data-testid="footer"; - O elemento que leva para a página de drinks deve possuir o atributo
data-testid="drinks-bottom-btn"; - O elemento que leva para a página de explorar deve possuir o atributo
data-testid="explore-bottom-btn"; - O elemento que leva para a página de comidas deve possuir o atributo
data-testid="food-bottom-btn".
O que será verificado:
- Tem os data-testids footer, drinks-bottom-btn, explore-bottom-btn e food-bottom-btn
20 - Posicione o menu inferior de forma fixa e apresente 3 ícones: um para comidas, um para bebidas e outro para exploração
Observações técnicas
- O menu inferior deve ficar fixado sempre ao final da página;
- Apresenta os ícones corretos (drinkIcon.svg, exploreIcon.svg e mealIcon.svg, disponíveis na pasta
src/images/).
O que será verificado:
- O menu inferior deve ficar fixado sempre ao final da página
- Apresenta os ícones corretos
O menu inferior deve aparecer somente nas telas indicas no protótipo, como a de comida, de explorar e de perfil.
O que será verificado:
- Não tem footer na tela de login
- Tem footer na tela de principal de receitas de comidas
- Tem footer na tela de principal de receitas de bebidas
- Não tem footer na tela de detalhes de uma receita de comida
- Não tem footer na tela de detalhes de uma receita de bebida
- Não tem footer na tela de receita em processo de comida
- Não tem footer na tela de receita em processo de bebida
- Tem footer na tela de explorar
- Tem footer na tela de explorar comidas
- Tem footer na tela de explorar bebidas
- Tem footer na tela de explorar comidas por ingrediente
- Tem footer na tela de explorar bebidas por ingrediente
- Tem footer na tela de explorar comidas por local de origem
- Tem footer na tela de perfil
- Não tem footer na tela de receitas feitas
- Não tem footer na tela de receitas favoritas
O que será verificado:
- Redireciona para a rota correta
O que será verificado:
- Redireciona para a rota correta
O que será verificado:
- Redireciona para a rota correta
- Observação: lembre de componentizar muito bem os elementos em React nessa tela para evitar problemas de lógica e de complexidade ;).
25 - Implemente os elementos da tela principal de receitas respeitando os atributos descritos no protótipo
O que será verificado:
- A tela tem os data-testids de todos os 12 cards da tela de comidas
- A tela tem os data-testids de todos os 12 cards da tela de bebidas
O Card de receita deve conter sua foto (strMealThumb ou strDrinkThumb) e seu nome (strMeal ou strDrink).
Observações técnicas
- Caso as receitas sejam de comida, deve-se carregar as 12 primeiras receitas obtidas através do endpoint
https://www.themealdb.com/api/json/v1/1/search.php?s=; - Caso as receitas sejam de bebida, deve-se carregar as 12 primeiras receitas obtidas através do endpoint
https://www.thecocktaildb.com/api/json/v1/1/search.php?s=.
O que será verificado:
- Caso as receitas sejam de comida, deve-se carregar as 12 primeiras receitas
- Caso as receitas sejam de bebida, deve-se carregar as 12 primeiras receitas
Cada botão deve conter o atributo prefixado data-testid=${categoryName}-category-filter e devem ser exibidas apenas as 5 primeiras categorias retornadas da API.
Observações técnicas
- Caso as receitas sejam de comida, deve-se exibir as 5 primeiras categorias de comida obtidas através do endpoint
https://www.themealdb.com/api/json/v1/1/list.php?c=list; - Caso as receitas sejam de bebida, deve-se exibir as 5 primeiras categorias de bebida obtidas através do endpoint
https://www.thecocktaildb.com/api/json/v1/1/list.php?c=list.
O que será verificado:
- Caso as receitas sejam de comida, deve-se exibir as 5 primeiras categorias de comida
- Caso as receitas sejam de bebida, deve-se exibir as 5 primeiras categorias de bebida
As categorias disponíveis devem ser obtidas através da API de comidas ou bebidas.
O que será verificado:
- Caso as receitas sejam de comida e a categoria seja "Beef", deve-se carregar as 12 primeiras receitas de "Beef"
- Caso as receitas sejam de comida e a categoria seja "Breakfast", deve-se carregar as 12 primeiras receitas de "Breakfast"
- Caso as receitas sejam de comida e a categoria seja "Chicken", deve-se carregar as 12 primeiras receitas de "Chicken"
- Caso as receitas sejam de comida e a categoria seja "Dessert", deve-se carregar as 12 primeiras receitas de "Dessert"
- Caso as receitas sejam de comida e a categoria seja "Goat", deve-se carregar as 12 primeiras receitas de "Goat"
- Caso as receitas sejam de bebida e a categoria seja "Ordinary Drink", deve-se carregar as 12 primeiras receitas de "Ordinary Drink"
- Caso as receitas sejam de bebida e a categoria seja "Cocktail", deve-se carregar as 12 primeiras receitas de "Cocktail"
- Caso as receitas sejam de bebida e a categoria seja "Milk / Float / Shake", deve-se carregar as 12 primeiras receitas de "Milk / Float / Shake"
- Caso as receitas sejam de bebida e a categoria seja "Other/Unknown", deve-se carregar as 12 primeiras receitas de "Other/Unknown"
- Caso as receitas sejam de bebida e a categoria seja "Cocoa", deve-se carregar as 12 primeiras receitas de "Cocoa"
Atenção: Caso a categoria retorne apenas um resultado, NÃO deve redirecionar para a página de detalhes.
29 - Implemente o filtro como um toggle, que se for selecionado de novo, o app deve retornar as receitas sem nenhum filtro
O que será verificado:
- Caso as receitas sejam de comida e o filtro tenha sido selecionado novamente, deve-se retornar as 12 primeiras receitas sem filtro
- Caso as receitas sejam de bebida e o filtro tenha sido selecionado novamente, deve-se retornar as 12 primeiras receitas sem filtro
Ou seja, se outro filtro de categoria for selecionado, ele deve substituir o anterior.
O que será verificado:
- Caso as receitas sejam de comida apenas um filtro de categoria deve poder ser selecionado por vez
- Caso as receitas sejam de bebida apenas um filtro de categoria deve poder ser selecionado por vez
Ou seja, retornando novamente todas as receitas. O nome do filtro deve ser "All".
O que será verificado:
- Caso as receitas sejam de comida deve existir a opção de filtrar por todas as categorias
- Caso as receitas sejam de bebida deve existir a opção de filtrar por todas as categorias
32 - Redirecione a pessoa usuária, ao clicar no card, para a tela de detalhes, que deve mudar a rota e conter o id da receita na URL
Além de dizer se a pessoa veio da tela de comidas ou de bebidas. Exemplo: /comidas/{id-da-receita}.
O que será verificado:
- Caso as receitas sejam de comida a rota deve mudar para a tela de detalhes da receita
- Caso as receitas sejam de bebida a rota deve mudar para a tela de detalhes da receita
- Observação: lembre de componentizar muito bem os elementos em React nessa tela para evitar problemas de lógica e de complexidade ;).
33 - Implemente os elementos da tela de detalhes de uma receita respeitando os atributos descritos no protótipo
A verificação será feita a partir dos atributos data-testids:
- A foto deve possuir o atributo
data-testid="recipe-photo"; - O título deve possuir o atributo
data-testid="recipe-title"; - O botão de compartilhar deve possuir o atributo
data-testid="share-btn"; - O botão de favoritar deve possuir o atributo
data-testid="favorite-btn"; - O texto da categoria deve possuir o atributo
data-testid="recipe-category"; - Os ingredientes devem possuir o atributo
data-testid="${index}-ingredient-name-and-measure"; - O texto de instruções deve possuir o atributo
data-testid="instructions"; - O vídeo, presente somente na tela de comidas, deve possuir o atributo
data-testid="video"; - O card de receitas recomendadas deve possuir o atributo
data-testid="${index}-recomendation-card"; - O botão de iniciar receita deve possuir o atributo
data-testid="start-recipe-btn";
O que será verificado:
- A tela de comida possui todos os atributos data-testid
- A tela de bebidas possui todos os atributos data-testid
34 - Realize uma request para a API passando o id da receita que deve estar disponível nos parâmetros da URL
Observações técnicas
- Verifica se a requisição para a API de comidas foi realizada. O endpoint utilizado deve ser
https://www.themealdb.com/api/json/v1/1/lookup.php?i={id-da-receita}; - Verifica se a requisição para a API de bebidas foi realizada. O endpoint utilizado deve ser
https://www.thecocktaildb.com/api/json/v1/1/lookup.php?i={id-da-receita}.
O que será verificado:
- Verifica se a requisição para a API de comidas foi realizada
- Verifica se a requisição para a API de bebidas foi realizada
35 - Desenvolva a tela de forma que contenha uma imagem da receita, o título, a categoria (ou se é ou não alcoólico), uma lista de ingredientes seguidos pelas quantidades, instruções, um vídeo do youtube "embedado" e recomendações
A verificação será feita através das receitas retornadas pela API, como por exemplo, o texto dos ingredientes e das instruções.
Lembre-se: O vídeo do youtube só deve estar disponível para receitas de comida, já que não é retornado pela API de bebidas.
O que será verificado:
- Verifica se os elementos descritos no protótipo existem na tela de detalhes de comida
- Verifica se os elementos descritos no protótipo existem na tela de detalhes de bebida
36 - Implemente as recomendações, para receitas de comida, a recomendação deverá ser bebida e vice-versa
Observações técnicas
- Verifica se a requisição para a API de bebidas foi realizada. O endpoint utilizado deve ser
https://www.thecocktaildb.com/api/json/v1/1/search.php?s=; - Verifica se a requisição para a API de comidas foi realizada. O endpoint utilizado deve ser
https://www.themealdb.com/api/json/v1/1/search.php?s=.
O que será verificado:
- Verifica se a requisição para a API de bebidas foi realizada
- Verifica se a requisição para a API de comidas foi realizada
37 - Implemente os cards de recomendação, onde serão 6 cards, mas mostrando apenas 2 e o scroll é horizontal, similar a um carousel
Observações técnicas
- Verifica se existem todas as recomendações na tela de detalhes de uma comida. Apenas as 6 primeiras bebidas devem ser exibidas;
- Verifica se existem todas as recomendações na tela de detalhes de uma bebida. Apenas as 6 primeiras comidas devem ser exibidas.
O que será verificado:
- Verifica se existem todas as recomendações na tela de detalhes de uma comida
- Verifica se existem todas as recomendações na tela de detalhes de uma bebida
38 - Desenvolva um botão de nome "Iniciar Receita" que deve ficar fixo na parte de baixo da tela o tempo todo
O que será verificado:
- Verifica posicionamento do botão na tela de detalhes de comida
- Verifica posicionamento do botão na tela de detalhes de bebida
39 - Implemente a solução de forma que caso a receita já tenha sido feita, o botão "Iniciar Receita" deve sumir
As receitas finalizadas devem ser recuperadas do localStorage na chave doneRecipes no formato especificado na seção localStorage;
O que será verificado:
- Verifica se botão de iniciar receita não é visível na tela de detalhes de uma comida
- Verifica se botão de iniciar receita não é visível na tela de detalhes de uma bebida
40 - Implemente a solução de modo que caso a receita tenha sido iniciada mas não finalizada, o texto do botão deve ser "Continuar Receita"
O que será verificado:
- Verifica botão de "Continuar Receita" na tela de detalhes de uma comida
- Verifica botão de "Continuar Receita" na tela de detalhes de uma bebida
41 - Redirecione a pessoa usuário caso o botão "Iniciar Receita" seja clicado, a rota deve mudar para a tela de receita em processo
O que será verificado:
- Redireciona para tela de receita da comida em processo
- Redireciona para tela de receita da bebida em processo
O que será verificado:
- Verifica se os botões estão disponíveis na tela de detalhes de uma comida
- Verifica se os botões estão disponíveis na tela de detalhes de uma bebida
43 - Implemente a solução de forma que, ao clicar no botão de compartilhar, o link da receita dentro do app deve ser copiado para o clipboard e uma mensagem avisando que o link foi copiado deve aparecer
O ícone do botão de compartilhar pode ser encontrado em src/images/shareIcon.svg.
O que será verificado:
- Verifica a mensagem "Link copiado!" e se o link da receita da comida foi copiado para o clipboard
- Verifica a mensagem "Link copiado!" e se o link da receita da bebida foi copiado para o clipboard
44 - Implemente o ícone do coração (favorito) de maneira que, deve vir preenchido caso a receita esteja favoritada e "despreenchido" caso contrário
Os ícones dos botões podem ser encontrados em src/images/whiteHeartIcon.svg e em src/images/blackHeartIcon.svg, respectivamente.
O que será verificado:
- Verifica se a comida favoritada vem com o coração preenchido
- Verifica se a comida não favoritada vem com o coração "despreenchido"
- Verifica se a bebida favoritada vem com o coração preenchido
- Verifica se a bebida não favoritada vem com o coração "despreenchido"
45 - Implemente a lógica no botão de favoritar, caso seja clicado, o ícone do coração deve mudar seu estado atual, caso esteja preenchido deve mudar para "despreenchido" e vice-versa
O que será verificado:
- Favorita a comida
- Desfavorita a comida
- Favorita a bebida
- Desfavorita a bebida
- As receitas feitas devem ser salvas em
localStoragena chavefavoriteRecipesno formato especificado na seçãolocalStorage.
O que será verificado:
- Verifica se após favoritar receita de uma comida, ela é salva corretamente no localStorage
- Verifica se após favoritar receita de uma bebida, ela é salva corretamente no localStorage
- Observação: lembre de componentizar muito bem os elementos em React nessa tela para evitar problemas de lógica e de complexidade ;).
47 - Desenvolva a tela de maneira que contenha uma imagem da receita, seu titulo, sua categoria (ou se a bebida é alcoólica ou não) uma lista de ingredientes com suas respectivas quantidade e suas instruções
Verifica se os atributos data-testid estão presentes na tela com suas respectivas quantidades:
- A foto deve possuir o atributo
data-testid="recipe-photo"; - O título deve possuir o atributo
data-testid="recipe-title"; - O botão de compartilhar deve possuir o atributo
data-testid="share-btn"; - O botão de favoritar deve possuir o atributo
data-testid="favorite-btn"; - O texto da categoria deve possuir o atributo
data-testid="recipe-category"; - Os ingredientes devem possuir o atributo
data-testid=${index}-ingredient-step, a verificação será feita pelo length do atributo. - O elemento de instruções deve possuir o atributo
data-testid="instructions"; - O botão para finalizar a receita deve possuir o atributo
data-testid="finish-recipe-btn".
O que será verificado:
- verifica elementos de uma receita de comida
- verifica elementos de uma receita de bebida
O que será verificado:
- todos os ingredientes de uma receita de comida possuem um checkbox
- todos os ingredientes de uma receita de bebida possuem um checkbox
49 - Implemente uma lógica que, ao clicar no checkbox de um ingrediente, o nome dele deve ser "riscado" da lista
Ao clicar no checkbox, o item deve ser riscado, mostrando que esse passo foi finalizado
O que será verificado:
- verifica se é possível marcar todos os passos da receita de comida
- verifica se é possível marcar todos os passos da receita de bebida
50 - Salve o estado do progresso, que deve ser mantido caso a pessoa atualize a página ou volte para a mesma receita
O progresso das receitas devem ser salvos em localStorage na chave inProgressRecipes no formato especificado na seção localStorage;
Observações técnicas
O que será verificado:
- Salva o progresso de uma receita de comida em andamento
- Salva o progresso de uma receita de bebida em andamento
51 - Desenvolva a lógica de favoritar e compartilhar, a lógica da tela de detalhes de uma receita se aplica aqui
O que será verificado:
- verifica se os botões estão disponíveis na tela de detalhes de uma comida
- verifica se os botões estão disponíveis na tela de detalhes de uma bebida
- verifica a mensagem "Link copiado!" e se o link da receita da comida foi copiado para o clipboard
- verifica a mensagem "Link copiado!" e se o link da receita da bebida foi copiado para o clipboard
- verifica comida favoritada
- verifica comida não favoritada
- verifica bebida favoritada
- verifica bebida não favoritada
- favorita comida
- desfavorita comida
- favorita bebida
- desfavorita bebida
- favorita receita de uma comida
- favorita receita de uma bebida
52 - Implemente a solução de maneira que o botão de finalizar receita só pode estar habilitado quando todos os ingredientes estiverem "checkados" (marcados)
O botão deve ficar desabilitado em quanto todos os checkboxs não forem marcados. O botão deve ficar fixo na parte de baixo da tela o tempo todo, semelhante ao botão de "Iniciar Receita"
O que será verificado:
- verifica se botão para finalizar está desabilitado em receitas de comidas
- verifica se botão para finalizar está desabilitado em receitas de bebidas
- verifica se botão para finalizar está habilitado em receitas de comidas
- verifica se botão para finalizar está habilitado em receitas de bebidas
53 - Redirecione a pessoa usuária após clicar no botão "Finalizar receita", para a página de receitas feitas, cuja rota deve ser /receitas-feitas
O que será verificado:
- Redireciona após concluir uma receita de comida;
- Redireciona após concluir uma receita de bebida.
54 - Implemente os elementos da tela de receitas feitas respeitando os atributos descritos no protótipo
Observações técnicas
- Todos os data-testids estão presentes:
- O botão de filtro
Alldeve ter o atributodata-testid="filter-by-all-btn"; - O botão de filtro
Fooddeve ter o atributodata-testid="filter-by-food-btn"; - O botão de
Drinksdeve ter o atributodata-testid="filter-by-drink-btn"; - O imagem do card de receita deve ter o atributo
data-testid="${index}-horizontal-image"; - O texto da categoria da receita deve ter o atributo
data-testid="${index}-horizontal-top-text"; - O texto do nome da receita deve ter o atributo
data-testid="${index}-horizontal-name"; - O texto da data que a receita foi feita deve ter o atributo
data-testid="${index}-horizontal-done-date"; - O elemento de compartilhar a receita deve ter o atributo
data-testid="${index}-horizontal-share-btn"; - As
tagsda receita devem possuir o atributodata-testid=${index}-${tagName}-horizontal-tag;
- O botão de filtro
O que será verificado:
- Todos os data-testids estão disponíveis
55 - Desenvolva a tela de maneira que, caso a receita do card seja uma comida, ela deve possuir: a foto da receita, o nome, a categoria, a area, a data em que a pessoa fez a receita, as 2 primeiras tags retornadas pela API e um botão de compartilhar
O ícone do botão de compartilhar pode ser encontrado em src/images/shareIcon.svg.
ObservaçÕes técnicas
- O card possui os atributos corretos de uma comida
O que será verificado:
- O card possui os atributos corretos de uma comida
56 - Desenvolva a tela de maneira que, caso a receita do card seja uma bebida, ela deve possuir: a foto da receita, o nome, se é alcoólica, a data em que a pessoa fez a receita e um botão de compartilhar
O ícone do botão de compartilhar pode ser encontrado em src/images/shareIcon.svg.
O que será verificado:
- O card possui os atributos corretos de uma bebida
57 - Desenvolva a solução de maneira que o botão de compartilhar deve copiar a URL da tela de detalhes da receita para o clipboard
O que será verificado:
- Ao clicar no botão de compartilhar deve aparecer a mensagem "Link copiado!";
- A URL da tela de detalhes da receita é copiada para o clipboard.
58 - Implemente 2 botões que filtram as receitas por comida ou bebida e um terceiro que remove todos os filtros
Os nomes dos botões devem ser "Food", "Drinks" e "All", respectivamente.
Observações técnicas
- Ao clicar no botão "Food" as receitas devem ser filtradas por comidas;
- Ao clicar no botão "Drinks" as receitas devem ser filtradas por bebidas;
- Ao clicar no botão "All" o filtro deve ser removido.
O que será verificado:
- Ao clicar no botão "Food" as receitas devem ser filtradas por comidas;
- Ao clicar no botão "Drinks" as receitas devem ser filtradas por bebidas;
- Ao clicar no botão "All" o filtro deve ser removido.
O que será verificado:
- Ao clicar na foto da receita, a rota deve mudar para a tela de detalhes daquela receita;
- Ao clicar no nome da receita, a rota deve mudar para a tela de detalhes daquela receita.
60 - Implemente os elementos da tela de receitas favoritas (cumulativo com os atributos em comum com a tela de receitas feitas) respeitando os atributos descritos no protótipo
O que será verificado:
- Todos os data-testids, cumulativo com os atributos em comum com a tela de receitas feitas, estão disponíveis
61 - Desenvolva a tela de maneira que, caso a receita do card seja uma comida, ela deve possuir: a foto da receita, o nome, a categoria, a area, um botão de compartilhar e um de "desfavoritar"
Os ícones dos botões podem ser encontrados em src/images/shareIcon.svg e em src/images/blackHeartIcon.svg, respectivamente.
O que será verificado:
- O card possui os atributos corretos de uma comida
62 - Desenvolva a tela de maneira que, caso a receita do card seja uma bebida, ela deve possuir: a foto da receita, o nome, se é alcoólica ou não, um botão de compartilhar e um de "desfavoritar"
Os ícones dos botões podem ser encontrados em src/images/shareIcon.svg e em src/images/blackHeartIcon.svg, respectivamente.
O que será verificado:
- O card possui os atributos corretos de uma bebida.
63 - Desenvolva a solução de maneira que o botão de compartilhar deve copiar a URL da tela de detalhes da receita para o clipboard
O que será verificado:
- Ao clicar no botão de compartilhar deve aparecer a mensagem "Link copiado!";
- A URL da tela de detalhes da receita é copiada para o clipboard.
64 - Desenvolva a solução de maneira que o botão de "desfavoritar" deve remover a receita da lista de receitas favoritas do localStorage e da tela
O que será verificado:
- Ao clicar no botão de "desfavoritar" a respectiva receita é removida da tela;
- Ao clicar no botão de "desfavoritar" a respectiva receita é removida do `localStorage`.
65 - Implemente 2 botões que filtram as receitas por comida ou bebida e um terceiro que remove todos os filtros
Os nomes dos botões devem ser "Food", "Drinks" e "All", respectivamente
O que será verificado:
- Ao clicar no botão "Food" as receitas devem ser filtradas por comidas;
- Ao clicar no botão "Drinks" as receitas devem ser filtradas por bebidas;
- Ao clicar no botão "All" o filtro deve ser removido.
66 - Redirecione a pessoa usuária ao clicar na foto ou no nome da receita, a rota deve mudar para a tela de detalhes daquela receita
O que será verificado:
- Ao clicar na foto da receita, a rota deve mudar para a tela de detalhes daquela receita;
- Ao clicar no nome da receita, a rota deve mudar para a tela de detalhes daquela receita.
O que será verificado:
- Tem os data-testids explore-food e explore-drinks.
68 - Desenvolva a tela de maneira que tenha 2 botões: um para explorar comidas e o outro para explorar bebidas
Verifica se o atributo data-testid="explore-food" possui o texto "Explorar Comidas" e se o data-testid="explore-drinks" possui o texto "Explorar Bebidas".
O que será verificado:
- O nomes dos botões devem ser "Explorar Comidas" e "Explorar Bebidas"
69 - Redirecione a pessoa usuária ao clicar em um dos botões, a rota deve mudar para a página de explorar comidas ou de explorar bebidas
O que será verificado:
- Ao clicar no botão "Explorar Comidas" a rota muda para a página de explorar comidas;
- Ao clicar no botão "Explorar Bebidas" a rota muda para a página de explorar bebidas.
70 - Implemente os elementos da tela de explorar bebidas ou comidas respeitando os atributos descritos no protótipo
O que será verificado:
- Tem os data-testids corretos para a tela de explorar comidas;
- Tem os data-testids corretos para a tela de explorar bebidas.
71 - Desenvolva 3 botões: um para explorar por ingrediente, um para explorar por local de origem e um para pegar uma receita aleatória
O nomes dos botões devem ser "Por Ingredientes" com o atributo data-testid="explore-by-ingredient", "Por Local de Origem" com o atributo data-testid="explore-by-area" e "Me Surpreenda!" com o atributo data-testid="explore-surprise", respectivamente.
Obs: se a opção escolhida for explorar bebidas, o botão para explorar por local de origem não deve estar disponível.
O que será verificado:
- Tem os botões "Por Ingredientes", "Por Local de Origem" e "Me Surpreenda!" para a tela de explorar comidas;
- Tem apenas os botões "Por Ingredientes" e "Me Surpreenda!" para a tela de explorar bebidas.
72 - Redirecione a pessoa usuária ao clicar em "Por Ingredientes", para a tela de explorar por ingredientes
O que será verificado:
- Ao clicar no botão "Por Ingredientes" da tela de *explorar comidas* a rota muda para a página de explorar comidas por ingrediente;
- Ao clicar no botão "Por Ingredientes" da tela de *explorar bebidas* a rota muda para a página de explorar bebidas por ingrediente.
73 - Redirecione a pessoa usuária ao clicar em "Por Local de Origem", a rota deve mudar para tela de explorar por local de origem
O que será verificado:
- A rota deve mudar para tela de explorar por local de origem
74 - Redirecione a pessoa usuária ao clicar em "Me Surpreenda!", a rota deve mudar para a tela de detalhes de uma receita, que deve ser escolhida de forma aleatória através da API
Observações técnicas
- Ao clicar no botão "Me Surpreenda!" da tela de explorar comidas a rota muda para a página de detalhes de uma comida aleatória obtida através do endpoint
https://www.themealdb.com/api/json/v1/1/random.php; - Ao clicar no botão "Me Surpreenda!" da tela de explorar bebidas a rota muda para a página de detalhes de uma bebida aleatória obtida através do endpoint
https://www.thecocktaildb.com/api/json/v1/1/random.php.
O que será verificado:
- Ao clicar no botão "Por Ingredientes" da tela de explorar comidas a rota muda para a página de detalhes de uma comida aleatória
- Ao clicar no botão "Explorar Bebidas" da tela de explorar bebidas a rota muda para a página de detalhes de uma bebida aleatória
75 - Implemente os elementos da tela de explorar ingredientes respeitando os atributos descritos no protótipo
A tela deve possuir os atributos data-testid="${index}-ingredient-card", data-testid="${index}-card-img" e data-testid="${index}-card-name", que estão relacionados ao card, imagem e nome do ingrediente respectivamente.
O que será verificado:
- Tem os data-testids corretos para a tela de explorar comidas por ingredientes;
- Tem os data-testids corretos para a tela de explorar bebidas por ingredientes.
76 - Desenvolva cards para os 12 primeiros ingredientes, de forma que cada card contenha o nome do ingrediente e uma foto
O que será verificado:
- Tem o nome e a foto corretos para a tela de explorar comidas por ingredientes;
- Tem o nome e a foto corretos para a tela de explorar bebidas por ingredientes.
77 - Redireciona a pessoa usuária ao clicar no card do ingrediente, a rota deve mudar para tela principal de receitas mas mostrando apenas as receitas que contém o ingrediente escolhido
O que será verificado:
- Ao clicar no card do ingrediente da tela de explorar comidas por ingrediente a rota muda para a tela principal de receitas filtrada pelo ingrediente;
- Ao clicar no card do ingrediente da tela de explorar bebidas por ingrediente a rota muda para a tela principal de receitas filtrada pelo ingrediente.
78 - Implemente os elementos da tela de explorar por local de origem respeitando os atributos descritos no protótipo
O elemento de dropdown deve possuir o atributo data-testid="explore-by-area-dropdown" e suas opções devem possuir o atributo [data-testid="${area}-option"].
O que será verificado:
- A tela tem os data-testids de todos os 12 cards e de todos os locais de origem.
79 - Desenvolva as mesmas especificações da tela de receitas principal, com a diferença de que os filtros de categoria são substituídos por um dropdown
O elemento de dropdown deve possuir o atributo data-testid="explore-by-area-dropdown".
O que será verificado:
- Devem ser carregadas as 12 primeiras receitas de comidas;
- Ao selecionar um filtro de local de origem, todas as receitas devem mudar para os dados filtrados da API;
- Ao clicar no card, a rota deve mudar para a tela de detalhes da receita com o ID da mesma na URL.
80 - Implemente o dropdown de maneira que devem estar disponíveis todas as áreas retornadas da API, incluindo a opção "All", que retorna as receitas sem nenhum filtro
O que será verificado:
- No dropdown devem estar disponíveis todas as áreas retornadas da API, incluindo a opção "All";
- A opção "All" retorna as receitas sem nenhum filtro.
A rota /explorar/bebidas/area não deve estar disponível, retornando um erro de "Not Found".
O que será verificado:
- Ao acessar a rota ela retorna um erro de "Not Found".
Observações técnicas
- Todos o data-testid do email e de todos os botões
- O elemento de email deve possuir o atributo
data-testid="profile-email"; - O botão com as "Receitas Feitas" deve possuir o atributo
data-testid="profile-done-btn"; - O botão com as "Receitas Favoritas" deve possuir o atributo
data-testid="profile-favorite-btn"; - O botão de sair deve possuir o atributo
data-testid="profile-logout-btn".
- O elemento de email deve possuir o atributo
O que será verificado:
- Todos o data-testid do email e de todos os botões.
O que será verificado:
- O e-mail armazenado em localStorage está visível.
84 - Implemente 3 botões: um de nome "Receitas Feitas", um de nome "Receitas Favoritas" e um de nome "Sair"
O que será verificado:
- A tela contêm todos os 3 botões.
85 - Redirecione a pessoa usuária que, ao clicar no botão de "Receitas Favoritas", a rota deve mudar para a tela de receitas favoritas
O que será verificado:
- Redireciona para a rota correta.
86 - Redirecione a pessoa usuária que, ao clicar no botão de "Receitas Feitas", a rota deve mudar para a tela de receitas feitas
O que será verificado:
- Redireciona para a rota correta.
87 - Redirecione a pessoa usuária que, ao clicar no botão de "Sair", o localStorage deve ser limpo e a rota deve mudar para a tela de login
O que será verificado:
- Limpa todas as chaves da localStorage;
- A rota muda para a tela de login.
Obs: A maneira como as APIs devem ser estruturadas segue os seguintes modelos: https://www.themealdb.com/api.php e https://www.thecocktaildb.com/api.php