/StarWars

Primary LanguageJavaScript

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.

1 - Faça uma requisição para o endpoint /planets da API de Star Wars e preencha uma tabela com os dados retornados, com exceção dos dados da coluna residents

👀 Observação: Para evitar erros no avaliador, na preparação do seu ambiente de trabalho para o uso do Context API, é necessário que o <Provider> seja usado dentro do componente App.js e não no arquivo index.js. Esta orientação tem finalidade exclusiva para os testes deste projeto.

A tabela deve ser renderizada por um componente chamado Table:
  • Os dados recebidos da API devem ser salvos em campo chamado datado contexto e é deste campo que a tabela deve ler os dados.
  • 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-trybe.herokuapp.com/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.


O que será verificado
  • 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.

2 - Crie um filtro de texto para a tabela

A tabela deve ser atualizada com os planetas que se encaixam no filtro à medida que o nome é digitado, sem ter que apertar em um botão para efetuar a filtragem. Por exemplo, se for digitado "Tatoo" no campo de texto, o planeta "Tatooine" deve ser exibido, como demonstrado na
Observações técnicas

  • Você deve usar Context API e Hooks para fazer o gerenciamento do estado da aplicação;

  • O campo de texto deve possuir a propriedade data-testid='name-filter' para que a avaliação automatizada funcione;

  • O texto digitado deve ser salvo num campo { filterByName: { name } }. Por exemplo: 
    {
  filterByName: {
    name: 'Tatoo'
  }
}


O que será verificado
  • 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.

3 - Crie um filtro para valores numéricos

O filtro funcionará com três seletores:
  • 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 combinação desses três seletores, ao clicar no botão, deve filtrar os dados da tabela de acordo com a coluna correspondente e com os valores escolhidos. Por exemplo:
  • 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.
Observações técnicas

  • Você deve usar Context API e Hooks para fazer o gerenciamento do estado da aplicação;

  • No contexto, esses valores devem ser salvos em um outro campo { filterByNumericValues: [{ column, comparison, value }] }. Por exemplo: 
    {
  filterByNumericValues: [
    {
      column: 'population',
      comparison: 'maior que',
      value: '100000',
    }
  ]
}


O que será verificado
  • 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".

4 - Implemente múltiplos filtros numéricos

Por exemplo, você pode filtrar pelos planetas que possuam Orbital period maior que 400 e Diameter menor que 10000.


O que será verificado
  • 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.

5 - Desenvolva testes para atingir 50% de cobertura total da aplicação

👀 Observação: Neste requisito vamos cobrir a aplicação com testes unitários utilizando a biblioteca React Testing Library, aproveite essa oportunidade para colocar em prática o Desenvolvimento Orientado por Testes.

Observações técnicas
  • 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
  • Será validado se, ao executar npm run test-coverage, é obtido os seguintes resultados:
    • % Stmts da linha All files é maior ou igual a 50.
    • % Branch da linha All files é maior ou igual a 50.
    • % Funcs da linha All files é maior ou igual a 50.
    • % Lines da linha All files é maior ou igual a 50.

6 - Não utilize filtros repetidos

Caso um filtro seja totalmente preenchido, um novo filtro de valores numéricos deve ser carregado.
  • 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.
Exemplo:

  • 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',
    }
  ]
}


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

7 - Apague um filtro de valor numérico ao clicar no ícone X de um dos filtros e apague todas filtragens numéricas simultaneamente ao clicar em outro botão de Remover todas filtragens

  • O button que permite exclusão de um filtro deve existir em todos os filtros de valores numéricos:

    • Cada linha que demonstra o filtro já utilizado deve possuir a propriedade data-testid='filter', com um button que deve ser filho direto da tag onde foi utilizado o data-testid='filter';

    • Após a exclusão, a coluna que este filtro selecionava deve passar a ficar disponível nos dropdowns dos demais filtros já presentes na tela;

    • Você deve usar Context API e Hooks para fazer o gerenciamento do estado da aplicação.

    • Exemplo: 
      data-testid='filter'
    ⬑ column
    ⬑ comparison
    ⬑ value
    ⬑ button
  • O button de Remover todas filtragens deverá possuir o data-testid='button-remove-filters'. Este button será responsável pela remoção de todos os filtros numéricos simultaneamente.


O que será verificado
  • 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.

8 - Desenvolva testes para atingir 90% de cobertura total da aplicação

Observações técnicas
  • 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
  • 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.

Requisito Bônus

9 - Ordene as colunas de forma ascendente ou descendente

  • A ordenação deve ser feita via filtro: um dropdown selecionará a coluna a basear a ordenação e um par de radio buttons determinará se é ascendente ou descendente.

  • A informação acerca da ordenação das colunas deve ser armazenada em um novo campo { order: { column: 'population', sort: 'ASC'} }:

    • O campo column representa o nome da coluna a ordenar;

    • O campo sort representa a ordenação, sendo 'ASC' ascendente e 'DESC' descendente;

    • Por padrão, a tabela começa ordenada por ordem alfabética. Por exemplo: 
      {
  order: {
    column: 'population',
    sort: 'ASC',
  }
}
  • O dropdown deve ser um elemento select:

    • O dropdown precisa ter a propriedade data-testid='column-sort';

    • As colunas selecionáveis através deste dropdown são:
      • 'population';
      • 'orbital_period';
      • 'diameter';
      • 'rotation_period';
      • 'surface_water'.
  • É necessário ter dois inputs de tipo radio:
    • O primeiro deve possuir o atributo data-testid='column-sort-input-asc' e value sendo ASC;
    • O segundo deve possuir o atributo data-testid='column-sort-input-desc' e value sendo DESC;

  • 👀 Caso a coluna ordenada possua planetas com valores unknown, você deverá ordená-los de forma que valores unknown ficarão em último lugar na ordenação.

  • Por fim, crie um botão para submeter a ordenação, com uma tag button e a propriedade data-testid='column-sort-button'.

  • Adicione o atributo data-testid com o valor planet-name em todos os elementos da tabela que possuem o nome de um planeta.


O que será verificado
  • Verifica ordenação inicial;
  • Ordena os planetas do maior período orbital para o menor período orbital;
  • Ordena os planetas do menor diametro para o maior diametro;
  • 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.