Para realizar o projeto, atente-se a cada passo descrito a seguir. 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 deste repositório, utilizando uma branch específica e um Pull Request para colocar seus códigos.
Ao iniciar este projeto, você concorda com as diretrizes do Código de Conduta e do Manual da Pessoa Estudante da Trybe.
🤷🏽♀️ Como entregar
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!
👨💻 O que deverá ser desenvolvido
Você irá desenvolver um app de receitas, utilizando o que há de mais moderno dentro do ecossistema React: Hooks e Context API!
Nele será possível: ver, buscar, filtrar, favoritar e acompanhar o progresso de preparação de receitas e drinks!
O layout tem como foco dispositivos móveis, dessa forma todos os protótipos vão estar desenvolvidos em telas menores.
Você pode acessar um protótipo no link abaixo:
https://www.figma.com/file/XoGZTOjZxNagmjSwdbwYuO/Recipes-App
📝 Habilidades
Nesse projeto, você será capaz de:
- 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
🗓 Data de Entrega
- Este projeto é em grupo;
- São
X
dias de projeto; - Data para entrega final do projeto:
12/09/2022 14:00
.
‼️ Antes de começar a desenvolver
- Clone o repositório
- Use o comando:
git clone git@github.com:tryber/sd-022-b-project-recipes-app.git
. - Entre na pasta do repositório que você acabou de clonar:
cd sd-022-b-project-recipes-app
- Vá para a branch do seu grupo:
git checkout main-group-XX && git pull
, ondeXX
é o número do seu grupo. Exemplos:main-group-1
,main-group-22
.
- Instale as dependências e inicialize o projeto
- Instale as dependências:
npm install
- Inicialize o projeto:
npm start
(uma nova página deve abrir no seu navegador com um texto simples)
- 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
- Exemplo:
- Se não estiver, mude para a branch
main-group-XX
- Exemplo:
git checkout main-group-XX && git pull
- Exemplo:
- Agora, 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
- 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)
- 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 listadas as novas alterações em verde)
- Exemplo:
- 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 )
- Exemplo:
- 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
- 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
- Assim que aprovado por pelo menos uma pessoa do seu grupo e o Linter estiver adereçado, acesse SEU Pull Request e clique no botão "Merge pull request"
⌨️ Durante o desenvolvimento
-
⚠ LEMBRE-SE DE CRIAR TODOS OS ARQUIVOS DENTRO DA PASTA COM O SEU NOME ⚠
-
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:
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 origin 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)
🤝 Depois de terminar o desenvolvimento (opcional)
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 timetryber/students-sd-022-b
.
-
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.
🎛 Linter e Stylelint
Usaremos o ESLint para fazer a análise estática do seu código.
Para garantir a qualidade do seu código de forma a tê-lo mais legível, de mais fácil manutenção e seguindo as boas práticas de desenvolvimento, nós utilizamos neste projeto o linter ESLint
. Para rodar o linter localmente no seu projeto, execute o comando abaixo:
npm run lint
npm run lint:styles
Caso ainda fique alguma dúvida, você pode consultar nosso conteúdo sobre ESLint
PULL REQUESTS COM ERROS DE LINTER NÃO SERÃO AVALIADAS. ATENTE-SE PARA RESOLVÊ-LAS ANTES DE FINALIZAR O DESENVOLVIMENTO! ⚠
Você pode também instalar o plugin do ESLint
no VSCode
, bastar ir em extensions e baixar o plugin ESLint
.
👥 Trello como ferramenta Kanban
Uma forma para seu grupo organizar as atividades e dividir as tarefas é através de um modelo de kanban. A Trybe disponibiliza um board pré-configurado para vocês duplicarem no Trello.
Para duplicar, basta seguir os passos:
- Acesse o link do 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!
🛠 Testes
Executando testes de requisito 🏗️
Para o projeto ser validado, todos os testes de comportamento devem passar. É possível testar isso local rodando npm run cy
. Esse comando roda a suite de testes do Cypress que valida se o fluxo geral e os requisitos funcionais estão funcionando como deveriam. Você pode também executar o comando npm run cy:open
para ter um resultado visual dos testes executados.
Esses testes não consideram o layout de maneira geral, mas sim os atributos e informações corretas, então preste atenção nisso! Os testes te darão uma mensagem de erro caso não estejam passando (seja qual for o motivo). 😉
Para rodar somente um arquivo de teste, você precisa utilizar o comando:
npm run cy -- --spec cypress/integration/login_spec.js
Obs: após o "spec" é preciso acrescentar todo o caminho até o arquivo de testes.
Para rodar apenas um teste, basta utilizar a função .only
após o describe
. Com isso, será possível que apenas um requisito rode localmente e seja avaliado.
⚠️ 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?
Executando testes de cobertura ☂️
Alguns requisitos irão pedir para que você desenvolva testes para sua aplicação. Esses testes serão avaliados através da cobertura de testes.
É possível verificar o percentual da cobertura de testes com o comando npm run test-coverage
.
Você também pode executar npm run test-coverage -- --collectCoverageFrom=caminho/da/Pagina
para verificar o percentual de cobertura de testes de cada 'Pagina'. Por exemplo, para verificar a cobertura de testes da página de Login
, execute o comando npm run test-coverage -- --collectCoverageFrom=src/pages/Login.js
.
🏪 Desenvolvimento
-
Como desenvolver 🧑💻
Este repositório já conta com uma
main-group
para cada grupo, identificada comomain-group-1
para o grupo 1,main-group-2
para o grupo 2, e assim por diante. Para desenvolver, você sempre deve:- Criar sua branch de desenvolvimento a partir da sua branch main. Para isso, clone este repositório, faça o
git checkout main-group-XX && git pull
e em seguida ogit checkout -b main-group-XX-minha-feature
. - Para criar uma Pull Request para fazer Code Review, entitule-a
[GRUPO XX] Meu título
e sempre aponte a Pull Request da sua branch para a branchmain-group-XX
do seu grupo, como no exemplo abaixo:
- Quando várias pessoas desenvolvem para um mesmo projeto podem ocorrer conflitos de merge que precisarão ser resolvidos. Prestem atenção a isso!
⚠ ATENÇÃO! É POSSÍVEL COMMITAR, POR ENGANO, NA BRANCH DE OUTRO GRUPO, ENTÃO TOME MUITO CUIDADO ⚠
Você verá que os requisitos do projeto possuem, além das observações técnicas e do que será validado, descrições tais quais se veriam em um projeto real. É muito importante ser capaz de ler descrições como essa e transformá-las em produtos ou, se houver dúvida, saber tirá-las! Seguimos à disposição no Slack para isso.
Este repositório já contem um template com um App React criado, configurado e com os testes automatizados que fazem parte da correção. Ele também conta com uma branch main-group para cada grupo, identificada como
main-group-1
para o grupo 1,main-group-2
para o grupo 2 e assim por diante.⚠️ Lembre-se de escrever testes unitários e sinta-se livre para alterar a UI do protótipo, só respeite os atributosdata-testid
, eles serão usados na correção do exercício. - Criar sua branch de desenvolvimento a partir da sua branch main. Para isso, clone este repositório, faça o
-
APIs ⚙️
-
TheMealDB API
O TheMealDB é um banco de dados aberto, mantido pela comunidade, com receitas e ingredientes de todo o mundo.
Os end-points são bastante ricos, você pode vê-los aqui
O modelo de resposta para uma
meal
é o seguinte:Ver modelo de resposta para uma meal
{ "meals":[ { "idMeal":"52882", "strMeal":"Three Fish Pie", "strDrinkAlternate":null, "strCategory":"Seafood", "strArea":"British", "strInstructions":"Preheat the oven to 200C\/400F\/Gas 6 (180C fan).\r\nPut the potatoes into a saucepan of cold salted water. Bring up to the boil and simmer until completely tender. Drain well and then mash with the butter and milk. Add pepper and taste to check the seasoning. Add salt and more pepper if necessary.\r\nFor the fish filling, melt the butter in a saucepan, add the leeks and stir over the heat. Cover with a lid and simmer gently for 10 minutes, or until soft. Measure the flour into a small bowl. Add the wine and whisk together until smooth.\r\nAdd the milk to the leeks, bring to the boil and then add the wine mixture. Stir briskly until thickened. Season and add the parsley and fish. Stir over the heat for two minutes, then spoon into an ovenproof casserole. Scatter over the eggs. Allow to cool until firm.\r\nSpoon the mashed potatoes over the fish mixture and mark with a fork. Sprinkle with cheese.\r\nBake for 30-40 minutes, or until lightly golden-brown on top and bubbling around the edges.", "strMealThumb":"https:\/\/www.themealdb.com\/images\/media\/meals\/spswqs1511558697.jpg", "strTags":"Fish,Seafood,Dairy,Pie", "strYoutube":"https:\/\/www.youtube.com\/watch?v=Ds1Jb8H5Sg8", "strIngredient1":"Potatoes", "strIngredient2":"Butter", "strIngredient3":"Milk", "strIngredient4":"Gruy\u00e8re", "strIngredient5":"Butter", "strIngredient6":"Leek", "strIngredient7":"Plain Flour", "strIngredient8":"White Wine", "strIngredient9":"Milk", "strIngredient10":"Parsley", "strIngredient11":"Salmon", "strIngredient12":"Haddock", "strIngredient13":"Smoked Haddock", "strIngredient14":"Eggs", "strIngredient15":"", "strIngredient16":"", "strIngredient17":"", "strIngredient18":"", "strIngredient19":"", "strIngredient20":"", "strMeasure1":"1kg", "strMeasure2":"Knob", "strMeasure3":"Dash", "strMeasure4":"50g", "strMeasure5":"75g", "strMeasure6":"2 sliced", "strMeasure7":"75g", "strMeasure8":"150ml", "strMeasure9":"568ml", "strMeasure10":"2 tbs chopped", "strMeasure11":"250g", "strMeasure12":"250g", "strMeasure13":"250g", "strMeasure14":"6", "strMeasure15":"", "strMeasure16":"", "strMeasure17":"", "strMeasure18":"", "strMeasure19":"", "strMeasure20":"", "strSource":"https:\/\/www.bbc.co.uk\/food\/recipes\/three_fish_pie_58875", "dateModified":null } ] }
Os ingredientes seguem uma ordem lógica onde o nome dele (
strIngredient1
) e a quantidade (strMeasure1
) tem o mesmo número no final (1, nesse caso).É possível listar todas as
categorias
,nacionalidades
(vindas da API como "areas") eingredientes
:categorias: https://www.themealdb.com/api/json/v1/1/list.php?c=list nacionalidades: https://www.themealdb.com/api/json/v1/1/list.php?a=list ingredientes: https://www.themealdb.com/api/json/v1/1/list.php?i=list
As fotos dos ingredientes vêm de um end-point padronizado com a seguinte lógica:
https://www.themealdb.com/images/ingredients/{nome-do-ingrediente}-Small.png // exemplo com "Lime" https://www.themealdb.com/images/ingredients/Lime-Small.png
-
The CockTailDB API
Bem similar (inclusive mantida pela mesma entidade) a TheMealDB API, só que focado em bebidas.Os end-points também são bastante ricos, você pode vê-los aqui
As respostas seguem a mesma estrutura, com algumas particularidades relativas às bebidas (como ser ou não alcoólica, por exemplo)
Os ingredientes seguem uma ordem lógica onde o nome dele (Ver modelo de resposta para drinks
{ "drinks":[ { "idDrink":"17256", "strDrink":"Martinez 2", "strDrinkAlternate":null, "strDrinkES":null, "strDrinkDE":null, "strDrinkFR":null, "strDrinkZH-HANS":null, "strDrinkZH-HANT":null, "strTags":null, "strVideo":null, "strCategory":"Cocktail", "strIBA":null, "strAlcoholic":"Alcoholic", "strGlass":"Cocktail glass", "strInstructions":"Add all ingredients to a mixing glass and fill with ice.\r\n\r\nStir until chilled, and strain into a chilled coupe glass.", "strInstructionsES":null, "strInstructionsDE":"Alle Zutaten in ein Mischglas geben und mit Eis f\u00fcllen. Bis zum Abk\u00fchlen umr\u00fchren und in ein gek\u00fchltes Coup\u00e9glas abseihen.", "strInstructionsFR":null, "strInstructionsZH-HANS":null, "strInstructionsZH-HANT":null, "strDrinkThumb":"https:\/\/www.thecocktaildb.com\/images\/media\/drink\/fs6kiq1513708455.jpg", "strIngredient1":"Gin", "strIngredient2":"Sweet Vermouth", "strIngredient3":"Maraschino Liqueur", "strIngredient4":"Angostura Bitters", "strIngredient5":null, "strIngredient6":null, "strIngredient7":null, "strIngredient8":null, "strIngredient9":null, "strIngredient10":null, "strIngredient11":null, "strIngredient12":null, "strIngredient13":null, "strIngredient14":null, "strIngredient15":null, "strMeasure1":"1 1\/2 oz", "strMeasure2":"1 1\/2 oz", "strMeasure3":"1 tsp", "strMeasure4":"2 dashes", "strMeasure5":null, "strMeasure6":null, "strMeasure7":null, "strMeasure8":null, "strMeasure9":null, "strMeasure10":null, "strMeasure11":null, "strMeasure12":null, "strMeasure13":null, "strMeasure14":null, "strMeasure15":null, "strCreativeCommonsConfirmed":"No", "dateModified":"2017-12-19 18:34:15" } ] }
strIngredient1
) e a quantidade (strMeasure1
) tem o mesmo número no final (1, nesse caso).
-
-
Requisitos do Projeto 📝
Os requisitos são organizados por telas e dessa vez, vocês que irão definir as prioridades! Usem com sabedoria!
Recomendamos que os requisitos de uma mesma tela sejam feitos em sequência ou paralelamente por pessoas que irão comunicar-se bastante para que não haja conflitos. Requisitos de uma mesma tela com prioridades iguais possam ser feitos em paralelo, mas isso exigirá organização por parte das pessoas que estão dividindo a tarefa para não haver conflitos.
-
Os requisitos do seu projeto são avaliados automaticamente, sendo utilizada a resolução de tela de
360 x 640
(360 pixels de largura por 640 pixels de altura).⚠️ Logo, recomenda-se desenvolver seu projeto usando a mesma resolução, via instalação deste plugin doChrome
para facilitar a configuração da resolução.⚠️
-
-
Observações técnicas ℹ️
Algumas coisas devem seguir um padrão pré-estabelecido para que os testes de correção funcionem corretamente.
⚠️ Leia-os atentamente e siga à risca o que for pedido. O não cumprimento de um requisito, total ou parcialmente, impactará em sua avaliação.⚠️ -
Rotas
As rotas a serem utilizadas na aplicação devem ser as seguintes:
- Tela de login:
/
; - Tela principal de receitas de comidas:
/foods
; - Tela principal de receitas de bebidas:
/drinks
; - Tela de detalhes de uma receita de comida:
/foods/{id-da-receita}
; - Tela de detalhes de uma receita de bebida:
/drinks/{id-da-receita}
; - Tela de receita em progresso de comida:
/foods/{id-da-receita}/in-progress
; - Tela de receita em progresso de bebida:
/drinks/{id-da-receita}/in-progress
; - Tela de perfil:
/profile
; - Tela de receitas feitas:
/done-recipes
; - Tela de receitas favoritas:
/favorite-recipes
.
- Tela de login:
-
LocalStorage
O uso de
localStorage
é necessário para que as informações não se percam caso a pessoa atualize a página. O correto é usar os valores para iniciar sua store ou seu context.No
localStorage
do navegador:- a chave
mealsToken
deve conter a seguinte estrutura:
1
- a chave
cocktailsToken
deve conter a seguinte estrutura:
1
- a chave
user
deve conter a seguinte estrutura:
{ email: email-da-pessoa }
- a chave
doneRecipes
deve conter a seguinte estrutura:
[{ id: id-da-receita, type: comida-ou-bebida, nationality: nacionalidade-da-receita-ou-texto-vazio, category: categoria-da-receita-ou-texto-vazio, alcoholicOrNot: alcoholic-ou-non-alcoholic-ou-texto-vazio, name: nome-da-receita, image: imagem-da-receita, doneDate: quando-a-receita-foi-concluida, tags: array-de-tags-da-receita-ou-array-vazio }]
- a chave
favoriteRecipes
deve conter a seguinte estrutura:
[{ id: id-da-receita, type: food-ou-drink, nationality: nacionalidade-da-receita-ou-texto-vazio, category: categoria-da-receita-ou-texto-vazio, alcoholicOrNot: alcoholic-ou-non-alcoholic-ou-texto-vazio, name: nome-da-receita, image: imagem-da-receita }]
- a chave
inProgressRecipes
deve conter a seguinte estrutura:
{ cocktails: { id-da-bebida: [lista-de-ingredientes-utilizados], ... }, meals: { id-da-comida: [lista-de-ingredientes-utilizados], ... } }
Observações técnicas
id-da-bebida
eid-da-comida
representam o ID de uma bebida e comida, respectivamente, e cada item da lista de ingredientes da respectiva receita deve ser representado apenas pelo número do ingrediente no formato numérico.
- a chave
-
Ícones
Os ícones a serem utilizados na aplicação estão disponíveis do diretório
src/image/
. Esses ícones serão utilizados pelos testes da avaliação automatizada, então certifique-se de utilizá-los nos requisitos e de não renomeá-los.Os ícones são:
profileIcon.svg
;searchIcon.svg
;drinkIcon.svg
;mealIcon.svg
;shareIcon.svg
;whiteHeartIcon.svg
;blackHeartIcon.svg
;
-
Biblioteca
clipboard-copy
Para os componentes que contêm a funcionalidade de favoritar pratos ou bebidas, será necessário utilizar a biblioteca
clipboard-copy
para copiar as informações da receita. Essa biblioteca já vem instalada no projeto.Para mais informações, consulte a documentação
-
Biblioteca
Bootstrap
(opcional)Para os grupos que quiserem implementar estilizações no app, recomendamos o uso da lib
Bootstrap
. Ela já vem instalada por padrão neste projeto, bastando apenas implementar nos seus componentes. Por exemplo, caso queira implementar um botão:import Button from 'react-bootstrap/Button'; const MeuComponente = () => ( <Button variant="success"> Botão Verde </Button> ); ...
Para mais informações, consulte a documentação
-
🗣 Nos dê feedbacks sobre o projeto!
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!
🗂 Compartilhe seu portfólio!
Agora que você finalizou os requisitos, chegou a hora de mostrar ao mundo que você aprendeu algo novo! 🚀
Siga esse guia que preparamos com carinho para disponibilizar o projeto finalizado no seu GitHub pessoal.
Além de manter um back-up do seu trabalho, esse passo é super importante para ganhar mais visibilidade no mercado de trabalho.
E 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.
Nesse projeto, a pessoa que estiver utilizando o app pode procurar uma receita específica, explorar receitas baseado em diferentes critérios, favoritar e fazer as receitas, entre outras funcionalidades.
As telas sofrem variações dependendo do tipo da receita (se é comida ou bebida, no caso).
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
Observações técnicas
-
Neste requisito vamos cobrir a nossa aplicação com testes unitários/integração utilizando a biblioteca React Testing Library, aproveite essa oportunidade para colocar em prática o Desenvolvimento Orientado por Testes
-
Lembre-se de que no Desenvolvimento Orientado por Testes, você deve escrever os testes junto com o desenvolvimento de novas funcionalidades. Por esse motivo, este requisito só passará no avaliador enquanto sua aplicação estiver com a cobertura de testes desejada. Caso você adicione uma nova funcionalidade e não crie os testes para ela, este requisito pode parar de passar no avaliador.
-
Os testes criados por você não irão influenciar os outros requisitos no avaliador. Você deverá desenvolver seus testes unitários/integração usando a biblioteca React Testing Library, enquanto o avaliador usará a biblioteca Cypress para avaliar os requisitos, inclusive os de cobertura.
O que será verificado
- Verifica a cobertura de testes unitários
⚠️ Obs: Para os testes passarem é necessário que o componente seja chamado deLogin.js
.
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 "Enter" deve possuir o atributo
data-testid="login-submit-btn"
.
O que será verificado
- Se têm os data-testids: email-input, password-input e login-submit-btn.
3 - Desenvolva a tela de maneira que a pessoa consiga escrever seu email no input de email e sua senha no input de senha
O que será verificado
- A possibilidade de escrever o email no input do email.
- A possibilidade de escrever a senha no input de senha.
4 - 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
Este requisito também inclui testes de cobertura da página
Login.js
.
Observações técnicas
- 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 o formulário esteja válido, o botão de submeter 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 6 caracteres ou menos
- O botão deve estar ativado se o email e a senha forem válidos
- Verifica a cobertura de 45% da tela de Login
5 - Após a submissão do formulário, salve no localStorage o e-mail da pessoa usuária na chave user
e os tokens nas chaves mealsToken
e cocktailsToken
Observações técnicas
- Após a submissão, o e-mail de pessoa usuária deve ser salvo em
localStorage
na chaveuser
no formato{ email: email-da-pessoa }
. - Para os tokens, o valor de teste é sempre
1
.
O que será verificado
- Se após a submissão, a chave user está salva em localStorage.
- Se após a submissão, as chaves mealsToken e cocktailsToken estão salvas em localStorage
6 - 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
Este requisito também inclui testes de cobertura da página
Login.js
.
O que será verificado
- Se a rota muda para a tela principal de receitas de comidas.
- Verifica a cobertura de 90% da tela de Login.
⚠️ Obs: Para os testes passarem é necessário que o componente seja chamado deHeader.js
.
Observações técnicas
- O Header deve ter os seguintes elementos:
- Ícone de perfil com o data-testid
profile-top-btn
, que deverá estar sempre presente; - Ícone de pesquisa com o data-testid
search-top-btn
, que deverá estar presente somente em alguma páginas (conforme a lista abaixo); - Título da página com o data-testid
page-title
, que deverá estar sempre presente.
- Ícone de perfil com o data-testid
- Os ícones podem ser encontrados em
src/images/profileIcon.svg
e emsrc/images/searchIcon.svg
. - Cada página deverá ter seu próprio título, que será renderizado pelo Header.
- Todas as rotas serão verificadas, portanto, crie as rotas que ainda não foram criadas.
O que será verificado
- Rota "/": não possui header
- Rota "/foods": possui o header com o título "Foods" e os ícones de perfil e pesquisa
- Rota "/drinks": possui o header com o título "Drinks" e os ícones de perfil e pesquisa
- Rota "foods/{id-da-receita}": não possui header
- Rota "drinks/{id-da-receita}": não possui header
- Rota "/foods/{id-da-receita}/in-progress": não possui header
- Rota "/drinks/{id-da-receita}/in-progress": não possui header
- Rota "/profile": possui o header com o título "Profile" e o ícone de perfil, mas sem o ícone de pesquisa
- Rota "/done-recipes": possui o header com o título "Done Recipes" e o ícone de perfil, mas sem o ícone de pesquisa
- Rota "/favorite-recipes": possui o header com o título "Favorite Recipes" e o ícone de perfil, mas sem o ícone de pesquisa
Este requisito também inclui testes de cobertura do componente
Header.js
.
O que será verificado
- Se a mudança de tela ocorre corretamente.
- Verifica a cobertura de 45% do componente Header.
9 - Desenvolva o botão de busca que, ao ser clicado, a barra de busca deve aparecer. O mesmo serve para escondê-la
Este requisito também inclui testes de cobertura do componente
Header.js
.
Observações técnicas
- O input de busca deve possuir o atributo
data-testid="search-input"
O que será verificado
- Se ao clicar no botão de busca pela primeira vez, a barra de busca aparece.
- Se ao clicar no botão de busca pela segunda vez, a barra de busca desaparece;
- Verifica a cobertura de 90% do componente Header
⚠️ Obs: Para os testes passarem é necessário que o componente seja chamado deSearchBar.js
.
Observações técnicas
- Deve existir os data-testids tanto na barra de busca quanto em todos os radio-buttons.
- 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
- Se têm os data-testids tanto na barra de busca quanto em todos os radio-buttons.
Observações técnicas
- A barra de busca deve possuir 3 radio buttons:
Ingredient
,Name
eFirst letter
. Eles, em conjunto com asearch-input
, devem mudar a forma como serão filtradas as receitas após clicar no botãoSearch
. Os endpoints da API que você deve usar podem ser consultados aqui para a API de comidas e aqui para a API de bebidas. - Se o radio selecionado for
Ingredient
, 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
Name
, 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
First letter
, a busca na API é feita corretamente pela primeira letra. O endpoint utilizado deve serhttps://www.themealdb.com/api/json/v1/1/search.php?f={primeira-letra}
; - Se o radio selecionado for
First letter
e a busca na API for feita com mais de uma letra, deve-se exibir umalert
com a mensagem "Your search must have only 1 (one) character". - 💡 Exemplo: Ao selecionar
Ingredient
e buscar porchicken
, deve-se utilizar o endpointhttps://www.themealdb.com/api/json/v1/1/filter.php?i=chicken
.
💡 Atenção: Utilize global.alert
para evitar os warnings
do eslint sobre o uso de alert
no código.
💡 Observação: Para esse requisito será verificada apenas a tela principal de receitas de comidas.
O que será verificado
- Se o radio selecionado for Ingredient, a busca na API é feita corretamente pelo ingrediente
- Se o radio selecionado for Name, a busca na API é feita corretamente pelo nome
- Se o radio selecionado for First letter, a busca na API é feita corretamente pela primeira letra
- Se o radio selecionado for First letter e a busca na API for feita com mais de uma letra, deve-se exibir um alert
12 - Busque na API de comidas caso a pessoa esteja na página de comidas, e na API de bebidas caso esteja na de bebidas
Este requisito também inclui testes de cobertura do componente
SearchBar.js
.
Observações técnicas
- Na tela de bebidas, se o radio selecionado for
Ingredient
, 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
Name
, 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
First letter
, a busca na API é feita corretamente pela primeira letra. O endpoint utilizado deve serhttps://www.thecocktaildb.com/api/json/v1/1/search.php?f={primeira-letra}
; - Na tela de bebidas, se o radio selecionado for
First letter
e a busca na API for feita com mais de uma letra, deve-se exibir umalert
com a mensagem "Your search must have only 1 (one) character".
💡 Observação: Para esse requisito será verificada apenas a tela principal de receitas de bebidas, pois a de comidas já foi verificada no requisito anterior.
O que será verificado
- Na tela de bebidas, se o radio selecionado for Ingredient, a busca na API é feita corretamente pelo ingrediente
- Na tela de bebidas, se o radio selecionado for Name, a busca na API é feita corretamente pelo nome
- Na tela de bebidas, se o radio selecionado for First letter, a busca na API é feita corretamente pela primeira letra
- Na tela de bebidas, se o radio selecionado for First letter e a busca na API for feita com mais de uma letra, deve-se exibir um alert
- Verifica a cobertura de 45% do componente SearchBar
13 - 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 (
/foods/{id-da-receita}
); - Caso apenas uma bebida seja encontrada, deve-se ir para sua rota de detalhes (
/drinks/{id-da-receita}
).
O que será verificado
- Se caso apenas uma comida seja encontrada, deve-se ir para sua rota de detalhes.
- Se caso apenas uma bebida seja encontrada, deve-se ir para sua rota de detalhes.
Observações técnicas
- Mostre as receitas em cards como as da tela principal, caso mais de uma receita seja encontrada.
- 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 houverem 12).
O que será verificado
- Se caso mais de uma comida seja encontrada, mostrar as 12 primeiras.
- Se caso mais de uma bebida seja encontrada, mostrar as 12 primeiras.
Este requisito também inclui testes de cobertura do componente
SearchBar.js
.
Observações técnicas
- O alert deve conter o texto "Sorry, we haven't found any recipes for these filters."
O que será verificado
- Se caso nenhuma comida seja encontrada o alert deve ser exibido.
- Se caso nenhuma bebida seja encontrada o alert deve ser exibido.
- Verifica a cobertura de 90% do componente SearchBar.
⚠️ Obs: Para os testes passarem é necessário que o componente seja chamado deFooter.js
.
16 - Implemente o menu inferior posicionando-o de forma fixa e contendo 2 ícones: um para comidas e outro para bebidas
Este requisito também inclui testes de cobertura do componente
Footer.js
.
Observações técnicas
- Todos os ícones necessários estão disponíveis na pasta
src/images
; - O menu inferior deve ter possuir o atributo
data-testid="footer"
; - O elemento que leva para a página de bebidas deve usar o ícone
drinkIcon.svg
e possuir o atributodata-testid="drinks-bottom-btn"
; - O elemento que leva para a página de comidas deve usar o ícone
mealIcon.svg
e possuir o atributodata-testid="food-bottom-btn"
; - O menu inferior deve ficar fixado sempre ao final da página.
O que será verificado
- Se o menu inferior existe e contém os ícones corretos
- Se o menu inferior está fixado sempre ao final da página.
- Verifica a cobertura de 45% do componente Footer.
Observações técnicas
- Todas as rotas serão verificadas, portanto, crie as rotas que ainda não foram criadas.
O que será verificado
- Rota "/": não deve ter footer
- Rota "/foods": deve ter footer
- Rota "/drinks": deve ter footer
- Rota "foods/{id-da-receita}": não deve ter footer
- Rota "drinks/{id-da-receita}": não deve ter footer
- Rota "/foods/{id-da-receita}/in-progress": não deve ter footer
- Rota "/drinks/{id-da-receita}/in-progress": não deve ter footer
- Rota "/profile": deve ter footer
- Rota "/done-recipes": não deve ter footer
- Rota "/favorite-recipes": não deve ter footer
Este requisito também inclui testes de cobertura do componente
Footer.js
.
O que será verificado
- Se há o redirecionamento para a lista de cocktails ao clicar no ícone de bebidas;
- Se há o redirecionamento para a lista de comidas ao clicar no ícone de comidas;
- Verifica a cobertura de 90% do componente Footer.
⚠️ Obs: Para os testes passarem é necessário que o componente seja chamado deRecipes.js
.
💡 Dica: lembre-se de componentizar muito bem os elementos em React nessa tela evitando assim problemas de lógica e de complexidade ;).
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 card deve ter o
data-testid="${index}-recipe-card"
- A foto (
strMealThumb
oustrDrinkThumb
) deve ter odata-testid="${index}-card-img"
- O nome (
strMeal
oustrDrink
) deve ter odata-testid="${index}-card-name"
O que será verificado
- A tela tem os data-testids de todos os 12 cards da tela de comidas
- Caso as receitas sejam de comida, deve-se carregar as 12 primeiras receitas
- A tela tem os data-testids de todos os 12 cards da tela de bebidas
- Caso as receitas sejam de bebida, deve-se carregar as 12 primeiras receitas
Este requisito também inclui testes de cobertura da página
Recipes.js
.
Observações técnicas
- 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. - Caso as receitas sejam de comida, deve-se exibir as 5 primeiras categorias de comida obtidas por meio 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 por meio 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
- Verifica a cobertura de 45% da tela de Receitas
Observações técnicas
- As receitas, filtradas por categorias, devem ser obtidas por meio da API de comidas ou bebidas. Deve-se utilizar para as duas API's os endpoints de
Filter by Category
. - Na tela de comidas se a categoria selecionada for
Beef
o endpoint utilizado seráhttps://www.themealdb.com/api/json/v1/1/filter.php?c=Beef
- Na tela de bebidas se a categoria selecionada for
Cocktail
o endpoint utilizado seráhttps://www.thecocktaildb.com/api/json/v1/1/filter.php?c=Cocktail
- Além das categorias providas pela API, vamos adicionar também um botão que deve limpar os filtros, retornando novamente todas as receitas. Esse botão deve ter o texto "All" e o atributo
data-testid="All-category-filter"
. - Caso a categoria retorne apenas um resultado, NÃO deve ser feito o redirecionamento para a página de detalhes.
O que será verificado
- Caso as receitas sejam de comida e a categoria seja "Beef", deve-se carregar as 12 primeiras receitas da categoria "Beef"
- Caso as receitas sejam de comida e a categoria seja "Breakfast", deve-se carregar as 12 primeiras receitas da categoria "Breakfast"
- Caso as receitas sejam de comida e a categoria seja "Chicken", deve-se carregar as 12 primeiras receitas da categoria "Chicken"
- Caso as receitas sejam de comida e a categoria seja "Dessert", deve-se carregar as 12 primeiras receitas da categoria "Dessert"
- Caso as receitas sejam de comida e a categoria seja "Goat", deve-se carregar as 12 primeiras receitas da categoria "Goat"
- Caso as receitas sejam de bebida e a categoria seja "Ordinary Drink", deve-se carregar as 12 primeiras receitas da categoria "Ordinary Drink"
- Caso as receitas sejam de bebida e a categoria seja "Cocktail", deve-se carregar as 12 primeiras receitas da categoria "Cocktail"
- Caso as receitas sejam de bebida e a categoria seja "Shake", deve-se carregar as 12 primeiras receitas da categoria "Shake"
- Caso as receitas sejam de bebida e a categoria seja "Other/Unknown", deve-se carregar as 12 primeiras receitas da categoria "Other/Unknown"
- Caso as receitas sejam de bebida e a categoria seja "Cocoa", deve-se carregar as 12 primeiras receitas da categoria "Cocoa"
- Caso as receitas sejam de comida deve existir a opção chamada "All" que limpa os filtros das categorias
- Caso as receitas sejam de bebida deve existir a opção chamada "All" que limpa os filtros das categorias
22 - Implemente o filtro como um toggle, o qual se for selecionado novamente, o app deve retornar as receitas sem nenhum filtro
O que será verificado
- Caso as receitas sejam de comida e o filtro seja selecionado novamente, deve-se retornar as 12 primeiras receitas sem filtro.
- Caso as receitas sejam de bebida e o filtro seja selecionado novamente, deve-se retornar as 12 primeiras receitas sem filtro.
23 - 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
Este requisito também inclui testes de cobertura da página
Recipes.js
.
Observações técnicas
- Caso a receita seja de uma comida, a pessoa deve ser redirecionada para a rota
foods/{id-da-receita}
- Caso a receita seja de uma bebida, a pessoa deve ser redirecionada para a rota
drinks/{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
- Verifica a cobertura de 90% da tela de Receitas
⚠️ Obs: Para os testes passarem é necessário que o componente seja chamado deRecipeDetails.js
.
💡 Dica: lembre-se de componentizar muito bem os elementos em React nessa tela evitando assim problemas de lógica e de complexidade ;).
24 - 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
- Para verificar 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}
; - Para verificar 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
- Se a requisição para a API de comidas foi realizada.
- Se a requisição para a API de bebidas foi realizada.
25 - Desenvolva a tela de modo que contenha uma imagem da receita, o título, a categoria em caso de comidas e se é ou não alcoólico em caso de bebidas, uma lista de ingredientes seguidos pelas quantidades, instruções, um vídeo do youtube "embedado" e recomendações
Observações técnicas
A verificação será feita por meio das receitas retornadas pela API, como por exemplo: o texto dos ingredientes e das instruções, 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 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"
;
Lembre-se: O vídeo do youtube só deve estar disponível para receitas de comida, visto que não é retornado pela API de bebidas.
💡 Dica: Faça uma busca sobre how to embed youtube video
veja algumas sugestões de pesquisa para te ajudar na construção do código.
O que será verificado
- Se a tela de comida possui todos os atributos data-testid
- Se a tela de bebidas possui todos os atributos data-testid
26 - Implemente as recomendações. Para receitas de comida, a recomendação deverá ser bebida, já para as receitas de bebida a recomendação deverá ser comida
Observações técnicas
- Para verificar 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=
; - Para verificar 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
- Se a requisição para a API de bebidas foi realizada.
- Se a requisição para a API de comidas foi realizada.
27 - Implemente os 6 cards de recomendação, mostrando apenas 2. O scroll é horizontal, similar a um carousel
Observações técnicas
- Verificar se existem todas as recomendações na tela de detalhes de uma comida. Lembre-se que apenas as 6 primeiras bebidas devem ser exibidas;
- Verifica se existem todas as recomendações na tela de detalhes de uma bebida. Lembre-se que apenas as 6 primeiras comidas devem ser exibidas.
O que será verificado
- Se aparece apenas duas recomendações por vez na tela;
- Se o scroll do carousel é feito na horizontal;
- Se existem todas as recomendações na tela de detalhes de uma comida
- Se existem todas as recomendações na tela de detalhes de uma bebida
28 - Desenvolva um botão de nome "Start Recipe" que deve ficar fixo na parte de baixo da tela o tempo todo
Observações técnicas
- O botão de iniciar receita deve possuir o atributo
data-testid="start-recipe-btn"
;
O que será verificado
- Se o botão possui o atributo data-testid.
- O posicionamento do botão na tela de detalhes de comida.
- O posicionamento do botão na tela de detalhes de bebida.
29 - Implemente a solução de forma que, caso a receita já tenha sido feita, o botão "Start Recipe" desapareça
Este requisito também inclui testes de cobertura da página
RecipeDetails.js
.
Observações técnicas
- Lembre-se que as receitas
finalizadas
anteriormente estão salvas na chavedoneRecipes
assim como indicado na sessão localStorage.
O que será verificado
- Se o botão de iniciar receita não é visível na tela de detalhes de uma comida.
- Se o botão de iniciar receita não é visível na tela de detalhes de uma bebida.
- Verifica a cobertura de 45% da tela detalhes de uma receita.
30 - Implemente a solução de modo que, caso a receita tenha sido iniciada mas não finalizada, o texto do botão deve ser "Continue Recipe"
Observações técnicas
- Lembre-se que as receitas
iniciadas
anteriormente estão salvas na chaveinProgressRecipes
assim como indicado na sessão localStorage.
O que será verificado
- O botão de "Continue Recipe" na tela de detalhes de uma comida.
- O botão de "Continue Recipe" na tela de detalhes de uma bebida.
31 - Redirecione a pessoa usuária caso o botão "Start Recipe" seja clicado, a rota deve mudar para a tela de receita em progresso
O que será verificado
- Se redireciona para tela de receita da bebida em progresso.
- Se redireciona para tela de receita da comida em progresso.
Observações técnicas
- 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 que será verificado
- Se os botões estão disponíveis na tela de detalhes de uma comida.
- Se os botões estão disponíveis na tela de detalhes de uma bebida.
33 - 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 na tela em uma tag HTML
Observações técnicas
- O avaliador não irá levar em consideração as mensagens exibidas pelo
global.alert
. - O ícone do botão de compartilhar pode ser encontrado em
src/images/shareIcon.svg
. - Para esse requisito você precisará usar a biblioteca clipboard-copy. Para mais informações, consulte a documentação da biblioteca.
O que será verificado
- Se a mensagem "Link copied!" aparece na tela dentro de uma tag HTML e se o link da receita da comida foi copiado para o clipboard.
- Se a mensagem "Link copied!" aparece na tela dentro de uma tag HTML e se o link da receita da bebida foi copiado para o clipboard.
Observações técnicas
- Lembre-se que as receitas
favoritadas
anteriormente estão salvas na chavefavoriteRecipes
assim como indicado na sessão localStorage. - As receitas favoritas devem ser salvas no
localStorage
na chavefavoriteRecipes
no formato[{ id, type, nationality, category, alcoholicOrNot, name, image }]
.
O que será verificado
- Verifica se após favoritar a receita de uma comida, ela é salva corretamente no localStorage
- Verifica se após favoritar a receita de uma bebida, ela é salva corretamente no localStorage
35 - Implemente o ícone do coração (favorito) de modo que: deve vir preenchido caso a receita esteja favoritada e "despreenchido" caso contrário
Observações técnicas
- Os ícones dos botões podem ser encontrados em
src/images/whiteHeartIcon.svg
e emsrc/images/blackHeartIcon.svg
, respectivamente.
O que será verificado
- Se a comida favoritada vem com o coração preenchido.
- Se a comida não favoritada vem com o coração "despreenchido".
- Se a bebida favoritada vem com o coração preenchido.
- Se a bebida não favoritada vem com o coração "despreenchido".
36 - 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
Este requisito também inclui testes de cobertura da página
RecipeDetails.js
.
O que será verificado
- Favorita a comida
- Desfavorita a comida
- Favorita a bebida
- Desfavorita a bebida
- Verifica a cobertura de 90% da tela detalhes de uma receita
⚠️ Obs: Para os testes passarem é necessário que o componente seja chamado deRecipeInProgress.js
.
💡 Observação: lembre-se de componentizar muito bem os elementos em React nessa tela, evitando assim problemas de lógica e de complexidade ;).
37 - Desenvolva a tela de modo que contenha uma imagem da receita, o título, a categoria em caso de comidas e se é ou não alcoólico em caso de bebidas, uma lista de ingredientes com suas respectivas quantidades e instruções
Observações técnicas
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
- Os elementos de uma receita de comida.
- Os elementos de uma receita de bebida.
Observações técnicas
Verifica se os atributos data-testid estão presentes na tela com suas respectivas quantidades:- Os ingredientes devem possuir o atributo
data-testid=${index}-ingredient-step
, a verificação será feita pelo length do atributo.
O que será verificado
- Se todos os ingredientes de uma receita de comida possuem um checkbox.
- Se todos os ingredientes de uma receita de bebida possuem um checkbox.
39 - Implemente uma lógica que ao clicar no checkbox de um ingrediente, o nome dele deve ser "riscado" da lista
Este requisito também inclui testes de cobertura da página
RecipeInProgress.js
.
Observações técnicas
- Ao clicar no checkbox, o item deve ser riscado mostrando assim que esse passo foi finalizado.
O que será verificado
- Se é possível marcar todos os passos da receita de comida.
- Se é possível marcar todos os passos da receita de bebida.
- Verifica a cobertura de 45% da tela de receita em progresso.
40 - Salve o estado do progresso, que deve ser mantido caso a pessoa atualize a página ou volte para a mesma receita
Observações técnicas
- Após clicar no checkbox em um dos ingredientes da receita, é esperado que o ingrediente permaneça marcado após a página recarregar. Para isso desenvolva a lógica de verificação de acordo com a chave
inProgressRecipes
no localStorage.
O que será verificado
- Se salva o progresso de uma receita de comida em andamento.
- Se salva o progresso de uma receita de bebida em andamento.
41 - 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
- Se os botões estão disponíveis na tela de detalhes de uma comida.
- Se os botões estão disponíveis na tela de detalhes de uma bebida.
- A mensagem "Link copied!" e se o link da receita da comida foi copiado para o clipboard.
- Verifica a mensagem "Link copied!" 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.
42 - Implemente a solução de modo que o botão de finalizar receita ("Finish Recipe") só pode estar habilitado quando todos os ingredientes estiverem "checkados" (marcados)
Observações técnicas
- O botão deve ficar desabilitado enquanto 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 "Start Recipe".
O que será verificado
- Se o botão para finalizar está desabilitado em receitas de comidas.
- Se o botão para finalizar está desabilitado em receitas de bebidas.
- Se o botão para finalizar está habilitado em receitas de comidas.
- Se o botão para finalizar está habilitado em receitas de bebidas.
43 - Redirecione a pessoa usuária após clicar no botão de finalizar receita ("Finish Recipe"), para a página de receitas feitas, cuja rota deve ser /done-recipes
Este requisito também inclui testes de cobertura da página
RecipeInProgress.js
.
O que será verificado
- Se redireciona após concluir uma receita de comida.
- Se redireciona após concluir uma receita de bebida.
- Verifica a cobertura de 90% da tela de receita em progresso.
44 - 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
All
deve ter o atributodata-testid="filter-by-all-btn"
; - O botão de filtro
Food
deve ter o atributodata-testid="filter-by-food-btn"
; - O botão de
Drinks
deve 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
tags
da receita devem possuir o atributodata-testid=${index}-${tagName}-horizontal-tag
;
- O botão de filtro
O que será verificado
- Se todos os data-testids estão disponíveis.
45 - Desenvolva a tela de modo que, caso a receita do card seja uma comida, ela deve possuir: a foto da receita, nome, categoria, nacionalidade, a data em que a pessoa fez a receita, as 2 primeiras tags retornadas pela API e um botão de compartilhar
Observações técnicas
- O ícone do botão de compartilhar pode ser encontrado em
src/images/shareIcon.svg
.
O que será verificado
- Se o card possui os atributos corretos de uma comida.
46 - 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
Este requisito também inclui testes de cobertura da página
DoneRecipes.js
.
Observações técnicas
- O ícone do botão de compartilhar pode ser encontrado em
src/images/shareIcon.svg
.
O que será verificado
- Se o card possui os atributos corretos de uma bebida.
- Verifica a cobertura de 45% da Tela de receitas feitas
47 - Desenvolva a solução de modo 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 copied!";
- Se a URL da tela de detalhes da receita é copiada para o clipboard.
48 - Implemente 2 botões que filtram as receitas por comida ou bebida e um terceiro que remove todos os filtros
Observações técnicas
- Os nomes dos botões devem ser "Food", "Drinks" e "All", respectivamente.
- 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
- Se ao clicar no botão "Food", as receitas são filtradas por comidas;
- Se ao clicar no botão "Drinks", as receitas são filtradas por bebidas;
- Se ao clicar no botão "All", o filtro é removido.
Este requisito também inclui testes de cobertura da página
DoneRecipes.js
.
O que será verificado
- Se ao clicar na foto da receita, a rota muda para a tela de detalhes daquela receita;
- Se ao clicar no nome da receita, a rota muda para a tela de detalhes daquela receita;
- Verifica a cobertura de 90% da Tela de receitas feitas.
⚠️ Obs: Para os testes passarem é necessário que o componente seja chamado deFavoriteRecipes.js
50 - 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
- Se todos os data-testids, cumulativo com os atributos em comum com a tela de receitas feitas, estão disponíveis.
51 - Desenvolva a tela de modo que, caso a receita do card seja uma comida, ela deve possuir: a foto da receita, nome, categoria, nacionalidade, um botão de compartilhar e um de "desfavoritar"
Observações técnicas
- Os ícones dos botões podem ser encontrados em
src/images/shareIcon.svg
e emsrc/images/blackHeartIcon.svg
, respectivamente.
O que será verificado
- Se o card possui os atributos corretos de uma comida.
52 - Desenvolva a tela de modo que, caso a receita do card seja uma bebida, ela deve possuir: a foto da receita, nome, se é alcoólica ou não, um botão de compartilhar e um de "desfavoritar"
Este requisito também inclui testes de cobertura da página
FavoriteRecipes.js
.
Observações técnicas
- Os ícones dos botões podem ser encontrados em
src/images/shareIcon.svg
e emsrc/images/blackHeartIcon.svg
, respectivamente.
O que será verificado
- se o card possui os atributos corretos de uma bebida.
- Verifica a cobertura de 45% da tela de receitas favoritas.
53 - Desenvolva a solução de modo que o botão de compartilhar deve copiar a URL da tela de detalhes da receita para o clipboard
O que será verificado
- Se ao clicar no botão de compartilhar, aparece a mensagem "Link copied!";
- Se a URL da tela de detalhes da receita é copiada para o clipboard.
54 - Desenvolva a solução de modo que o botão de "desfavoritar" deve remover a receita da lista de receitas favoritas do localStorage
e da tela
O que será verificado
- Se ao clicar no botão de "desfavoritar", a respectiva receita é removida da tela.
- Se ao clicar no botão de "desfavoritar", a respectiva receita é removida do
localStorage
.
55 - Implemente 2 botões que filtram as receitas por comida ou bebida e um terceiro que remove todos os filtros
Observações técnicas
- Os nomes dos botões devem ser "Food", "Drinks" e "All", respectivamente
O que será verificado
- Se ao clicar no botão "Food", as receitas devem ser filtradas por comidas;
- Se ao clicar no botão "Drinks" , as receitas devem ser filtradas por bebidas;
- Se ao clicar no botão "All", o filtro deve ser removido.
56 - 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
Este requisito também inclui testes de cobertura da página
FavoriteRecipes.js
.
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.
- Verifica a cobertura de 90% da Tela de receitas favoritas.
⚠️ Obs: Para os testes passarem é necessário que o componente seja chamado deProfile.js
.
Observações técnicas
- O elemento de email deve possuir o atributo
data-testid="profile-email"
; - O botão para "Done Recipes" deve possuir o atributo
data-testid="profile-done-btn"
; - O botão para "Favorite Recipes" deve possuir o atributo
data-testid="profile-favorite-btn"
; - O botão de "Logout" deve possuir o atributo
data-testid="profile-logout-btn"
.
O que será verificado
- Todos o data-testid do email e de todos os botões.
O que será verificado
- Se o e-mail armazenado em localStorage está visível.
59 - Implemente 3 botões: um de nome "Done Recipes", um de nome "Favorite Recipes" e um de nome "Logout"
O que será verificado
- Se a tela contêm todos os 3 botões.
60 - Redirecione a pessoa usuária que, ao clicar no botão de "Done Recipes", a rota deve mudar para a tela de receitas feitas
Este requisito também inclui testes de cobertura do componente
Profile.js
.
O que será verificado
- Se redireciona para a rota correta.
- Verifica a cobertura de 45% do componente Profile.
61 - Redirecione a pessoa usuária que, ao clicar no botão de "Favorite Recipes", a rota deve mudar para a tela de receitas favoritas
O que será verificado
- Se redireciona para a rota correta.
62 - Redirecione a pessoa usuária que ao clicar no botão de "Logout", o localStorage
deve ser limpo e a rota deve mudar para a tela de login
Este requisito também inclui testes de cobertura do componente
Profile.js
.
O que será verificado
- Se limpa todas as chaves da localStorage;
- Se a rota muda para a tela de login.
- Verifica a cobertura de 90% do componente Profile.