Para entregar o seu exercício você deverá criar um Pull Request neste repositório.

Lembre-se que você pode consultar nosso conteúdo sobre Git & GitHub e nosso Blog - Git & GitHub sempre que precisar!

Neste exercício, você vai implementar de forma simplificada uma Pokédex!

Para as pessoas que não estão familiarizadas com o universo Pokémon, a Pokédex é uma enciclopédia de todos os pokémons da natureza.

Aviso: Você pode usar sua imaginação e estilizar a aplicação como desejar.Entretanto, é obrigatório que você implemente pelo menos estes dois componentes:

1. Pokedex: esse componente representa a enciclopédia de pokémons. Ele recebe como entrada uma lista de pokémons para serem mostrados na tela. Para cada um desses pokémons recebidos, Pokedex chama o componente citado abaixo (Pokemon).
2. Pokemon: como o próprio nome diz, esse componente representa um Pokémon. Ele recebe como entrada um objeto que contém informações referentes a um Pokémon específico. Esse componente precisa retornar as seguintes informações obrigatórias que serão mostradas para quem usar a aplicação, essas informações devem ser validadas utilizando PropTypes:
   • nome do Pokémon;
   • tipo do Pokémon;
   • peso médio do Pokémon, acompanhado da unidade de medida usada;
   • imagem do Pokémon.

Neste exercício, verificamos se você é capaz de:

• Criar componentes React reutilizáveis;

• Renderizar as informações contidas em um array em forma de componente;

• Fazer as validações de PropTypes corretamente.

1. Clone o repositório

• Use o comando: git clone [email protected]:tryber/sd-025-b-exercise-pokedex.
• Entre na pasta do repositório que você acabou de clonar:
  • cd sd-025-b-exercise-pokedex

2. Instale as dependências

• npm install.

3. Crie uma branch a partir da branch main

• Verifique que você está na branch main
  • Exemplo: git branch
• Se não estiver, mude para a branch main
  • Exemplo: git checkout main
• Agora crie uma branch à qual você vai submeter os commits do seu exercício
  • Você deve criar uma branch no seguinte formato: nome-de-usuario-nome-do-exercicio
  • Exemplo: git checkout -b joaozinho-sd-025-b-exercise-pokedex

4. Adicione as mudanças ao stage do Git e faça um commit

• Verifique que as mudanças ainda não estão no stage
  • Exemplo: git status (deve aparecer listada a pasta joaozinho em vermelho)
• Adicione o novo arquivo ao stage do Git
  • Exemplo:
    • git add . (adicionando todas as mudanças - que estavam em vermelho - ao stage do Git)
    • git status (deve aparecer listado o arquivo joaozinho/README.md em verde)
• Faça o commit inicial
  • Exemplo:
    • git commit -m 'iniciando o exercício x' (fazendo o primeiro commit)
    • git status (deve aparecer uma mensagem tipo nothing to commit )

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

• Usando o exemplo anterior: git push -u origin joaozinho-sd-025-b-exercise-pokedex

6. Crie um novo Pull Request (PR)

• Vá até a página de Pull Requests do repositório no GitHub
• Clique no botão verde "New pull request"
• Clique na caixa de seleção "Compare" e escolha a sua branch com atenção
• Coloque um título para a sua Pull Request
  • Exemplo: "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

• Faça commits das alterações que você fizer no código regularmente

• Lembre-se de sempre após um (ou alguns) commits atualizar o repositório remoto

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

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

Para sinalizar que o seu exercício está pronto para o "Code Review", faça o seguinte:

• Vá até a página DO SEU Pull Request, adicione a label de "code-review" e marque seus colegas:

  • No menu à direita, clique no link "Labels" e escolha a label code-review;

  • No menu à direita, clique no link "Assignees" e escolha o seu usuário;

  • No menu à direita, clique no link "Reviewers" e digite students, selecione o time tryber/students-sd-025-b.

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

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

Para garantir a qualidade do código, vamos utilizar neste exercício os linters ESLint e StyleLint. Assim o código estará alinhado com as boas práticas de desenvolvimento, sendo mais legível e de fácil manutenção! Para rodá-los localmente, execute os comandos abaixo:

  npm run lint
  npm run lint:styles

⚠️ PULL REQUESTS COM ISSUES DE LINTER NÃO SERÃO AVALIADAS. ATENTE-SE PARA RESOLVÊ-LAS ANTES DE FINALIZAR O DESENVOLVIMENTO! ⚠️

Em caso de dúvidas, confira o material do course sobre ESLint e Stylelint.

Para avaliar o exercício, iremos utilizar React Testing Library (RTL) na execução dos testes.

Na descrição dos requisitos,logo abaixo, será solicitado que seja feita a adição de atributos data-testid nos elementos HTML.

Vamos a um exemplo de modo a deixar evidente essa configuração: se o requisito pedir "crie um botão e adicione o id de teste (ou data-testid) com o valor my-action, você pode escrever:

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

ou

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

Ou seja, o atributo data-testid="my-action" servirá para o React Testing Library(RTL) identificar o elemento, dessa forma conseguiremos realizar testes focados no comportamento da aplicação.

⚠️AVISO: Muito cuidado com os nomes especificados nos requisitos! O conteúdo deve ser exatamente igual ao texto descrito no requisito.

Para verificar a solução proposta, você pode efetuar todos os testes localmente, basta executar:

npm test

Especialmente no início, quando a maioria dos testes está falhando, a saída após executar os testes é extensa. Você pode desabilitar temporariamente um teste utilizando a função skip junto à função it. Como o nome indica, esta função "pula" um teste. Veja um exemplo:

it.skip("Será validado se o campo de filtro por nome renderiza na tela", () => {
  render(<App />);
  const filterNameInput = screen.getByTestId(/name-filter/i);
  expect(filterNameInput).toBeInTheDocument();
});

Uma estratégia é pular todos os testes no início e ir implementando um teste de cada vez, removendo dele a função skip.

Como uma segunda proposta, você também pode rodar apenas um arquivo de teste, por exemplo:

npm test 

Outra forma para contornar esse problema é a utilização da função .only após o it. Com isso, será possível que apenas um requisito rode localmente e seja avaliado.

it.only("Será validado se o campo de filtro por nome renderiza na tela", () => {
  render(<App />);
  const filterNameInput = screen.getByTestId(/name-filter/i);
  expect(filterNameInput).toBeInTheDocument();
});

⚠️ Atenção: O avaliador automático não necessariamente avalia seu exercício 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?

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 exercício no seu LinkedIn, marque o perfil da Trybe (@trybe) e mostre para a sua rede toda a sua evolução.

• Este componente deverá:

  • ser criado dentro da pasta src/components.

  • conter uma tag h1 com o texto Pokédex.

  • conter uma tag ul. Por enquanto, essa lista estará vazia.

• Renderize esse componente dentro do App.js.

• Será validado se:

  • uma tag h1 com o texto Pokédex é renderizado dentro do componente <Pokedex />.

  • uma tag ul é renderizada dentro do componente <Pokedex />.

  • o componente <Pokedex /> é renderizado dentro do App.js.

• Ele deve ser criado dentro da pasta src/components.

• Este componente deverá :

  • receber uma prop chamada pokemon, que será um objeto com as informações de um Pokémon, como o exemplo mostrado abaixo:

  {
    id: 25,
    name: 'Pikachu',
    type: 'Electric',
    averageWeight: {
      value: 6.0,
      measurementUnit: 'kg',
    },
    image: 'https://cdn2.bulbagarden.net/upload/b/b2/Spr_5b_025_m.png',
    moreInfo: 'https://bulbapedia.bulbagarden.net/wiki/Pikachu_(Pok%C3%A9mon)',
  }
  

  • conter uma tag li que envolva todo seu conteúdo.

• Este componente deverá renderizar as seguintes informações (que estão dentro do objeto recebido via props chamada pokemon):

  • o nome do Pokémon;
  • o tipo do Pokémon;
  • o peso médio do Pokémon, acompanhado da unidade de medida usada. Por exemplo: "20 kg";
  • a imagem do Pokémon.

• A imagem deve conter o atributo alt com o valor do nome do Pokémon.

• Será verificado se o:

  • componente possui a tag li envolvendo seu conteúdo.

  • nome do Pokémon passado via props é renderizado.

  • tipo do Pokémon passado via props é renderizado.

  • peso médio do Pokémon e a unidade de medida passados via props serão renderizados.

• Será validado se a imagem do pokémon passado via props é renderizada.

• Será validado se a imagem do pokémon possui o atributo alt com o nome do pokémon passado via props.

• O componente <Pokedex/> deve receber a lista de Pokémon através de uma props chamada pokemonList.

Adicione essa props ao componente, caso ainda não tenha a criado.

• Você encontrará a lista com as informações dos Pokémon no arquivo src/data.js.

• Cada Pokémon da lista deverá ser renderizado por um componente Pokemon. Passe as informações do Pokémon através da props que já existe nesse componente.

• Dependendo da sua implementação, o teste do requisito 1 pode começar a falhar quando você adicionar a lógica de renderizar a lista, a qual é recebida por props no componente <Pokedex />.

Pense em um jeito de garantir um valor padrão para esse props, mesmo que nenhum valor seja passado.

• Lembre-se de que, quando você está renderizando uma lista no React, é necessário adicionar um atributo key em cada elemento. Você pode usar o id do Pokémon como key.

• Se o componente <Pokedex /> renderiza a quantidade correta de elementos.

• Se todos os elementos da lista são renderizados.