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!

Você vai desenvolver uma lista com filtros de planetas do universo de Star Wars usando Context API e Hooks para controlar os estados globais.

Segue link do deploy de um modelo do projeto: https://trybe-starwars.surge.sh/

⚠️IMPORTANTE: O modelo serve apenas para fins de ilustração. Para desenvolver o projeto, é mandatório que você siga os requisitos apontados no Readme.

Nesse projeto você irá:

• 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 React Hooks customizados.
• Escrever testes para garantir que sua aplicação possua uma boa cobertura de testes.

• Este projeto é individual;
• Serão 3 dias de projeto;
• Data para entrega final do projeto: 06/12/2022 14:00.

1. Clone o repositório

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

2. Instale as dependências

• npm install.

3. Crie uma branch a partir da branch master

• Verifique que você está na branch master
  • Exemplo: git branch
• Se não estiver, mude para a branch master
  • Exemplo: git checkout master
• Agora crie uma branch à qual você vai submeter os commits do seu projeto
  • Você deve criar uma branch no seguinte formato: nome-de-usuario-nome-do-projeto
  • Exemplo: git checkout -b joaozinho-sd-025-b-project-starwars-planets-search

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 projeto 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-project-starwars-planets-search

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 projeto está pronto para o "Code Review", faça o seguinte:

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

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

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

  • No menu à direita, clique no link "Reviewers" e digite students, selecione o time tryber/students-sd-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 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 e o Stylelint. Para rodar o linter localmente em seu projeto, execute o comando abaixo:

npm run lint
npm run lint:styles

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

• Execução de testes de requisito

  Os testes deste projeto foram feitos utilizando o Cypress. É utilizada nos testes a resolução 1366 x 768 (1366 pixels de largura por 768 pixels de altura) para testes de layout. Logo, recomenda-se desenvolver seu projeto usando a mesma resolução, via instalação deste plugin do Chrome para facilitar a configuração dessa resolução, por exemplo.

  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). 😉

• Execução de um teste específico

  Para executar somente uma spec de testes, você pode selecionar qual delas você deseja após executar o comando npm run cy:open. Além disto você pode rodar todas as specs clicando no botão Run all specs.

  

  Atenção: Sua aplicação deve estar rodando para o Cypress no terminal poder testar.

• Execução de teste 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.

  
  

Neste projeto você utilizará Context API e Hooks para desenvolver uma lista com filtros de planetas do universo de Star Wars.

Este repositório já contém um template de uma aplicação React criado e configurado. Após clonar o projeto e instalar as dependências, você poderá criar a sua branch e iniciar o trabalho.

O modelo do projeto pode ser acessado neste link.

⚠️ IMPORTANTE: O modelo serve apenas para fins de ilustração. Para desenvolver o projeto, é mandatório que você siga os requisitos apontados no Readme.

Ao finalizar e submeter o projeto, não se esqueça de avaliar sua experiência preenchendo o formulário. Leva menos de 3 minutos!

FORMULÁRIO DE AVALIAÇÃO DE PROJETO

Além da qualidade do código e do atendimento aos requisitos, um bom layout é um dos aspectos responsáveis por melhorar a usabilidade de uma aplicação e turbinar seu portfólio!

Você pode estar se perguntando: "Como deixo meu projeto com um layout mais atrativo?" 🤔

Para isso, disponibilizamos esse protótipo do Figma para lhe ajudar !

⚠️ A estilização de sua aplicação não será avaliada nesse projeto, portanto esse protótipo é apenas uma sugestão e seu uso é opcional. Sinta-se à vontade para modificar o layout e deixá-lo do seu jeito.

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.

• Você deve apagar a coluna residents de cada planeta antes de salvar os dados recebidos da API no contexto.
• A requisição deve ser feita em um componente separado do componente da tabela.
• A API a ser consultada está nesse link. Você deverá fazer um fetch para a URL https://swapi.dev/api/planets.
• A primeira linha da tabela deve conter os headers de cada coluna. As demais linhas serão as informações de cada planeta recebido da API.

• Realiza uma requisição para a API;
• Preenche a tabela com os dados retornados;
• Verifica se a tabela tem 13 colunas;
• Verifica se a tabela tem uma linha para cada planeta retornado.

• O campo de texto deve possuir a propriedade data-testid='name-filter' para que a avaliação automatizada funcione;
• Você deve usar Context API e Hooks para fazer o gerenciamento do estado da aplicação, isso irá facilitar o desenvolvimento dos próximos requisitos.

• Renderiza o campo de texto para o filtro de nomes;
• Filtra os planetas que possuem a letra "o" no nome;
• Filtra planetas que possuem a letra "oo" no nome;
• Realiza os dois filtros acima em sequência e após, testa a remoção do filtro por texto.

• O primeiro deve abrir um dropdown que permita a quem usa selecionar uma das seguintes colunas: population, orbital_period, diameter, rotation_period e surface_water. Deve ser uma tag select com a propriedade data-testid='column-filter';
• O segundo deve determinar se a faixa de valor será maior que, menor que ou igual a o numero que virá a seguir. Uma tag select com a propriedade data-testid='comparison-filter';
• O terceiro deve ser uma caixa de texto que só aceita números. Essa caixa deve ser uma tag input com a propriedade data-testid='value-filter';
• Deve haver um botão para acionar o filtro, com a propriedade data-testid='button-filter'

• A seleção population | maior que | 100000 - Seleciona somente planetas com mais de 100000 habitantes.
• A seleção diameter | menor que | 8000 - Seleciona somente planetas com diâmetro menor que 8000.

• Você deve usar Context API e Hooks para fazer o gerenciamento do estado da aplicação, isso irá facilitar o desenvolvimento dos próximos requisitos.

• Renderiza o select de coluna e suas opções;
• Renderiza o select de comparação e suas opções;
• Renderiza o input para o valor do filtro;
• Renderiza o botão para executar a filtragem;
• Verifica se os valores iniciais de cada campo são (population | maior que | 0);
• Utiliza o botão de filtrar sem alterar os valores iniciais dos inputs de filtro;
• Filtra utilizando a comparação "menor que";
• Filtra utilizando a comparação "maior que";
• Filtra utilizando a comparação "igual a".

• Adiciona dois filtros e verifica se a tabela foi atualizada com as informações filtradas;
• Adiciona três filtros e verifica se a tabela foi atualizada com as informações filtradas.

• 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.

• Será validado se, ao executar npm run test-coverage, é obtido os seguintes resultados:
  • % Stmts da linha All files é maior ou igual a 30.
  • % Branch da linha All files é maior ou igual a 30.
  • % Funcs da linha All files é maior ou igual a 30.
  • % Lines da linha All files é maior ou igual a 30.

• Este novo filtro não deve incluir quaisquer colunas que já tenham sido selecionadas em filtros de valores numéricos anteriores;
• Caso todas as colunas já tenham sido inclusas em filtros anteriores, não deve ser carregado um novo filtro;
• Você deve usar Context API e Hooks para fazer o gerenciamento do estado da aplicação.

• O primeiro filtro tem as seguintes seleções: population | maior que | 100000;

• Um segundo filtro deve aparecer após essas seleções serem todas feitas;

• No primeiro dropdown deste segundo filtro, a opção population deve estar ausente;

• Se no segundo filtro fosse selecionado `diameter | menor que | 8000`, o estado ficaria assim:

  {
    filterByNumericValues: [
      {
        column: 'population',
        comparison: 'maior que',
        value: '100000',
      },
      {
        column: 'diameter',
        comparison: 'menor que',
        value: '8000',
      }
    ]
  }

• Filtra por população e remove a opção population das opções do dropdown de filtro por coluna.

• Adiciona um filtro e verifica se a tabela foi atualizada com as informações filtradas, depois remove o filtro e verifica se os valores da tabela voltaram ao original.
• Adiciona dois filtros e verifica se a tabela foi atualizada com as informações filtradas, depois remove os filtros e verifica se os valores da tabela voltaram ao original.
• Adiciona três filtros e verifica se a tabela foi atualizada com as informações filtradas, depois remove os filtros utilizando o botão button-remove-filters e verifica se os valores da tabela voltaram ao original.

• 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.

• Será validado se, ao executar npm run test-coverage, é obtido os seguintes resultados:
  • % Stmts da linha All files é maior ou igual a 60.
  • % Branch da linha All files é maior ou igual a 60.
  • % Funcs da linha All files é maior ou igual a 60.
  • % Lines da linha All files é maior ou igual a 60.

• Ordena os planetas do maior período orbital para o menor período orbital;
• Ordena os planetas do menor diâmetro para o maior diâmetro;
• Ordena os planetas do menos populoso para o mais populoso;
  • Verifica se os oito primeiros planetas estão ordenados corretamente;
  • Verifica se os dois últimos planetas possuem os valores unknown na coluna population.
• Ordena os planetas do mais populoso para o menos populoso;
  • Verifica se os oito primeiros planetas estão ordenados corretamente;
  • Verifica se os dois últimos planetas possuem os valores unknown na coluna population.

• 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.

• Será validado se, ao executar npm run test-coverage, é obtido os seguintes resultados:
  • % Stmts da linha All files é maior ou igual a 90.
  • % Branch da linha All files é maior ou igual a 90.
  • % Funcs da linha All files é maior ou igual a 90.
  • % Lines da linha All files é maior ou igual a 90.