Esse projeto contém uma série de informações sobre o que eu aprendi aqui na Trybe ao longo do curso de desenvolvimento web da Trybe.
As habilidades desenvolvidas nesse projeto são:
- Utilizar os seletores (queries) da React-Testing-Library em testes automatizados.
- Simular eventos com a React-Testing-Library em testes automatizados.
- Testar fluxos lógicos assíncronos com a React-Testing-Library.
- Escrever testes que permitam a refatoração da estrutura dos componentes da aplicação sem necessidade de serem alterados.
- Criar mocks de APIs utilizando fetch.
- Testar inputs.
Esse projeto foi proposto pelo curso de desenvolvimento web da Trybe.
Essa página foi feita usando JavaScript, React-Testing-Library, React-Router.
Os commits foram feitos de acordo com os requisitos finalizados.
Todo o projeto foi feita na branch 'juliana-oliveira-project-react-testing-library', isso por conta da exigência do curso.
Antes de realizar o projeto, precisei instalar as dependências usando npm install.
Os testes usando foram ESLint e Cypress, através dos comandos:
- npm test
- npm run lint:styles
Esse foi um projeto individual,que desenvolvido somente por Juliana Oliveira.
Foi usado Visual Studio Code, além do Trello que auxiliou na organização das tarefas.
Nenhum.
No trabalho do desenvolvimento de software a gente sempre tem prazos, muitas vezes os prazos são apertados.
Por outro lado, eu não quero criar algo que não entendo perfeitamente, como também fazer códigos rápidos pode levar a erros que podem demorar muito pra corrigir.
Por isso, usei e sempre uso o método Baby Steps, que é uma estratégia de abordar o desafio passo à passo, defensivamente.
Baby steps é um termo em inglês que quer dizer passos de bebê. Refere-se a fazer as coisas, quaisquer que sejam, devagar, com calma, passo a passo.
Adicione à página o título "Paleta de Cores".
- O título deverá ficar dentro de uma tag h1 com o id denominado title;
- O texto do título deve ser exatamente "Paleta de Cores".
-
Teste se o topo da aplicação contém um conjunto fixo de links de navegação.
-
O primeiro link deve possuir o texto
Home
. -
O segundo link deve possuir o texto
About
. -
O terceiro link deve possuir o texto
Favorite Pokémons
.
-
-
Teste se a aplicação é redirecionada para a página inicial, na URL
/
ao clicar no linkHome
da barra de navegação. -
Teste se a aplicação é redirecionada para a página de
About
, na URL/about
, ao clicar no linkAbout
da barra de navegação. -
Teste se a aplicação é redirecionada para a página de
Pokémons Favoritados
, na URL/favorites
, ao clicar no linkFavorite Pokémons
da barra de navegação. -
Teste se a aplicação é redirecionada para a página
Not Found
ao entrar em uma URL desconhecida.
-
Teste se a página contém as informações sobre a Pokédex.
-
Teste se a página contém um heading
h2
com o textoAbout Pokédex
. -
Teste se a página contém dois parágrafos com texto sobre a Pokédex.
-
Teste se a página contém a seguinte imagem de uma Pokédex:
https://cdn2.bulbagarden.net/upload/thumb/8/86/Gen_I_Pok%C3%A9dex.png/800px-Gen_I_Pok%C3%A9dex.png
.
-
Teste se é exibido na tela a mensagem
No favorite pokemon found
, se a pessoa não tiver pokémons favoritos. -
Teste se é exibido todos os cards de pokémons favoritados.
-
Teste se página contém um heading
h2
com o textoPage requested not found 😭
; -
Teste se página mostra a imagem
https://media.giphy.com/media/kNSeTs31XBZ3G/giphy.gif
.
-
Teste se página contém um heading
h2
com o textoEncountered pokémons
. -
Teste se é exibido o próximo Pokémon da lista quando o botão
Próximo pokémon
é clicado.-
O botão deve conter o texto
Próximo pokémon
; -
Os próximos Pokémons da lista devem ser mostrados, um a um, ao clicar sucessivamente no botão;
-
O primeiro Pokémon da lista deve ser mostrado ao clicar no botão, se estiver no último Pokémon da lista;
-
-
Teste se é mostrado apenas um Pokémon por vez.
-
Teste se a Pokédex tem os botões de filtro.
-
Deve existir um botão de filtragem para cada tipo de Pokémon, sem repetição.
-
A partir da seleção de um botão de tipo, a Pokédex deve circular somente pelos pokémons daquele tipo;
-
O texto do botão deve corresponder ao
nome do tipo
, ex.Psychic
; -
O botão
All
precisa estar sempre visível.
-
-
Teste se a Pokédex contém um botão para resetar o filtro
-
O texto do botão deve ser
All
; -
A Pokedéx deverá mostrar os Pokémons normalmente (sem filtros) quando o botão
All
for clicado; -
Ao carregar a página, o filtro selecionado deverá ser
All
;
-
-
Teste se é renderizado um card com as informações de determinado pokémon.
-
O nome correto do Pokémon deve ser mostrado na tela;
-
O tipo correto do pokémon deve ser mostrado na tela.
-
O peso médio do pokémon deve ser exibido com um texto no formato
Average weight: <value> <measurementUnit>
; onde<value>
e<measurementUnit>
são, respectivamente, o peso médio do pokémon e sua unidade de medida. -
A imagem do Pokémon deve ser exibida. Ela deve conter um atributo
src
com a URL da imagem e um atributoalt
com o texto<name> sprite
, onde<name>
é o nome do pokémon;
-
-
Teste se o card do Pokémon indicado na Pokédex contém um link de navegação para exibir detalhes deste Pokémon. O link deve possuir a URL
/pokemons/<id>
, onde<id>
é o id do Pokémon exibido; -
Teste se ao clicar no link de navegação do Pokémon, é feito o redirecionamento da aplicação para a página de detalhes de Pokémon.
-
Teste também se a URL exibida no navegador muda para
/pokemon/<id>
, onde<id>
é o id do Pokémon cujos detalhes se deseja ver; -
Teste se existe um ícone de estrela nos Pokémons favoritados.
-
O ícone deve ser uma imagem com o atributo
src
contendo o caminho/star-icon.svg
; -
A imagem deve ter o atributo
alt
igual a<pokemon> is marked as favorite
, onde<pokemon>
é o nome do Pokémon exibido.
-
-
Teste se as informações detalhadas do Pokémon selecionado são mostradas na tela.
-
A página deve conter um texto
<name> Details
, onde<name>
é o nome do Pokémon; -
Não deve existir o link de navegação para os detalhes do Pokémon selecionado.
-
A seção de detalhes deve conter um heading
h2
com o textoSummary
. -
A seção de detalhes deve conter um parágrafo com o resumo do Pokémon específico sendo visualizado.
-
-
Teste se existe na página uma seção com os mapas contendo as localizações do pokémon
-
Na seção de detalhes deverá existir um heading
h2
com o textoGame Locations of <name>
; onde<name>
é o nome do Pokémon exibido. -
Todas as localizações do Pokémon devem ser mostradas na seção de detalhes;
-
Devem ser exibidos, o nome da localização e uma imagem do mapa em cada localização;
-
A imagem da localização deve ter um atributo
src
com a URL da localização; -
A imagem da localização deve ter um atributo
alt
com o texto<name> location
, onde<name>
é o nome do Pokémon;
-
-
Teste se o usuário pode favoritar um pokémon através da página de detalhes.
-
A página deve exibir um
checkbox
que permite favoritar o Pokémon; -
Cliques alternados no
checkbox
devem adicionar e remover respectivamente o Pokémon da lista de favoritos; -
O
label
docheckbox
deve conter o textoPokémon favoritado?
;
-