Boas-vindas ao repositório do projeto Solar System!

Para realizar o projeto, atente-se a cada passo descrito a seguir, e 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.

Termos e acordos

Ao iniciar este projeto, você concorda com as diretrizes do Código de Conduta e do Manual da Pessoa Estudante da Trybe.

Entregáveis

🤷🏽‍♀️ 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

Neste projeto você desenvolverá um modelo do sistema solar! Ao utilizar essa aplicação, uma pessoa usuária deverá ser capaz de:

* Visualizar todos os planetas do sistema solar renderizados na tela;

* Visualizar todas as cartas com informações sobre missões espaciais;

Ao final deste projeto, sua aplicação deverá ser algo semelhante a essa imagem.

Caso queira utilizar a mesma imagem de fundo apresentada no figma, ela está sendo disponibilizada dentro da pasta src/images.

Lembre-se, todos os projetos que você desenvolve aqui na Trybe fazem parte do seu portfólio como pessoa desenvolvedora. Aproveite para testar suas habilidades aqui também!

📝 Habilidades

Neste projeto, verificaremos se você é capaz de:

• Utilizar JSX no React;

• Utilizar corretamente o método render() para renderizar seus componentes;

• Utilizar import para trazer componentes em diferentes arquivos;

• Criar componentes de classe em React;

• Criar múltiplos componentes a partir de um array;

• Fazer uso de props corretamente;

• Fazer uso de PropTypes para validar as props de um componente.

🗓 Data de Entrega

• Este projeto é individual;
• São 1 dias de projeto;
• Data para entrega final do projeto: 27/07/2022 14:00.

Orientações

‼️ Antes de começar a desenvolver

1. Clone o repositório

• Use o comando: git clone git@github.com:tryber/sd-023-a-project-solar-system.git.
• Entre na pasta do repositório que você acabou de clonar:
  • cd sd-023-a-project-solar-system

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-023-a-project-solar-system>

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-023-a-project-solar-system

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

⌨️ Durante o desenvolvimento

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

🤝 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 time tryber/students-sd-023-a.

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

Usaremos o ESLint e o StyleLint para fazer a análise estática do seu código.

Este projeto já vem com as dependências relacionadas ao linter configuradas no arquivo package.json.

Para poder rodar o linter em um projeto basta executar o comando npm install dentro do projeto e depois npm run lint para executar o ESLint, ou npm run lint:styles para executar o StyleLint. Se a análise do linter encontrar problemas no seu código, tais problemas serão mostrados no seu terminal. Se não houver problema no seu código, nada será impresso no seu terminal.

Você pode também instalar o plugin do ESLint no VSCode. Para isso, basta fazer o download do plugin ESLint e instalá-lo.

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

⚠️ Lembre-se que o seu projeto só será avaliado se estiver passando pelos checks dos linters.

🛠 Testes

Vamos utilizar React Testing Library para execução dos testes.

Executando todos os testes

Esse framework de testes utiliza algumas marcações no código para verificar a solução proposta, uma dessas marcações é o atributo data-testid e faremos uso dele aqui.

Na descrição dos requisitos do projeto será pedido que seja feita a adição de atributos data-testid nos elementos HTML. Veja o exemplo abaixo para deixar mais nítido como usar esse requisito:

Se o requisito pedir "crie um botão e adicione o id de teste (ou data-testid) com o valor my-action, você pode criar:

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

Em alguns requisitos, utilizamos o getByRole para poder selecionar os elementos de forma semântica. Portanto, atente-se às instruções de cada requisito. Por exemplo, se o requisito pedir explicitamente um button, você deverá utilizar exatamente esse elemento.

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

npm test

Dica: desativando testes

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:

it.skip('Será validado se o componente `<Title />` contém uma tag `h2`', () => {
  render(<Title headline={headlineText} />);
  const headline = screen.getByRole('heading', { level: 2 });
    
  expect(headline).toBeInTheDocument();
});

Uma 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 componente `<Title />` contém uma tag `h2`', () => {
  render(<Title headline={headlineText} />);
  const headline = screen.getByRole('heading', { level: 2 });
    
  expect(headline).toBeInTheDocument();
});

Executando um teste específico

Você também pode rodar apenas um arquivo de teste, por exemplo:

npm test 03.Title.test.js

ou

npm test 03.Title

⚠️ 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?

🏪 Desenvolvimento

Você deve desenvolver uma aplicação em React com criação de componentes de classe e passagem de props. Essa aplicação simulará uma visualização do Sistema Solar, bem como informações sobre diversas missões espacias que ocorreram ao longo da história.

As imagens dos planetas e as informações das missões são fornecidas no projeto. Você terá que desenvolver os componentes necessários para exibí-las na tela, conforme o descrito nos requisitos.

🗣 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!

FORMULÁRIO DE AVALIAÇÃO DE PROJETO

🗂 Compartilhe seu portfólio!

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.

Requisitos

⚠️ PULL REQUESTS COM ISSUES DE LINTER NÃO SERÃO AVALIADAS. ⚠️

⚠️ As imagens são meramente ilustrativas para visualizar o fluxo da aplicação, os nomes devem seguir os requisitos e não as imagens. ⚠️

1. Crie um componente chamado Header

Crie um componente chamado Header dentro da pasta src/components. Este componente irá renderizar o título principal da página.

• Ele deve conter uma tag header e, dentro dela, uma tag h1. O texto da tag h1 deve ser "Sistema Solar";

• Renderize o componente Header dentro do componente principal App.

O que será verificado

• Será validado se o componente <Header /> é renderizado;

• Será validado se o componente <Header /> contém uma tag header;

• Será validado se o componente <Header /> contém uma tag h1;

• Será validado se o componente <Header /> renderiza corretamente o texto "Sistema Solar";

• Será validado se o componente <Header /> está sendo renderizado no componente principal App.

---

2. Crie um componente chamado SolarSystem

Crie um componente chamado SolarSystem dentro da pasta src/components.

• O componente SolarSystem deve ter uma div que envolva todo seu conteúdo e que tenha o atributo data-testid="solar-system";

• Renderize o componente SolarSystem abaixo do Header, dentro do componente principal App.

O que será verificado

• Será validado se o componente <SolarSystem /> é renderizado;

• Será validado se existe uma div que possui o data-testid="solar-system";

• Será validado se o componente <SolarSystem /> está sendo renderizado no componente principal App.

---

3. Crie um componente chamado Title

Crie um componente chamado Title dentro da pasta src/components.

• O componente Title deve receber uma prop headline;

• Ele deve conter uma tag h2, que deve renderizar o texto recebido pela prop headline.

O que será verificado

• Será validado se o componente <Title /> é renderizado;

• Será validado se o componente <Title /> contém uma tag h2;

• Será validado se o componente <Title /> renderiza o texto passado pela prop headline dentro de uma tag h2.

---

4. Renderize o componente Title dentro do componente SolarSystem

Renderize o componente Title dentro do componente SolarSystem.

• O componente Title deve ser renderizado recebendo a prop headline com o valor "Planetas".

O que será verificado

• Será validado se o texto "Planetas" é renderizado usando o componente Title dentro do componente SolarSystem.

---

5. Crie um componente chamado PlanetCard

Crie um componente chamado PlanetCard dentro da pasta src/components.

• O componente PlanetCard deve receber duas props: uma chamada planetName e outra chamada planetImage;

• O componente PlanetCard deve ter uma div que envolva todo seu conteúdo e que tenha o atributo data-testid="planet-card";

• O componente PlanetCard deve renderizar o texto recebido pela prop planetName. Sugerimos a utilização de tags de Conteúdo de Fluxo, como <p>, que deve conter o atributo data-testid="planet-name";

• O componente PlanetCard deve renderizar uma imagem que tenha o atributo src com o valor recebido pela prop planetImage;

• Além do atributo src, a imagem renderizada deve ter o atributo alt com o texto Planeta {planetName}, onde {planetName} é o valor recebido pela prop planetName.

O que será verificado

• Será validado se o componente <PlanetCard /> é renderizado;

• Será validado se o componente <PlanetCard /> possui uma div com o atributo data-testid="planet-card";

• Será validado se é renderizado o texto recebido pela prop planetName;

• Será validado se é renderizada uma imagem com o atributo src com o mesmo valor recebido pela prop planetImage;

• Será validado se, além do atributo src, a imagem renderizada possui o atributo alt com o texto Planeta {planetName}, onde {planetName} é o valor recebido pela prop planetName.

---

6. Renderize uma lista com os planetas do Sistema Solar

Renderize uma lista com os planetas do Sistema Solar dentro do componente SolarSystem.

• Utilize o componente PlanetCard para renderizar cada item da lista de planetas;

• Você encontrará a lista com os nomes e as imagens de cada planeta do Sistema Solar no arquivo src/data/planets.js;

• Você deve importar a lista no componente SolarSystem usando o código:

import planets from '../data/planets';

• A lista de planetas é um array de objetos no seguinte formato:

{
  name: "Nome do planeta",
  image: "caminho-para-imagem-do-planeta"
}

• Para cada planeta da lista, você deverá renderizar um componente PlanetCard, passando o atributo name para a prop planetName e o atributo image para a prop planetImage.

💡 Dica:

• Lembre-se do método que te permite criar vários componentes iguais a partir dos valores presentes em um array. Lembre-se que ao renderizar uma lista, você deve passar o atributo key para cada item. Você pode usar o nome do planeta como key.

O que será verificado

• Será verificado se é renderizado um componente <PlanetCard /> para cada planeta da lista de planetas;

• Será verificado se todos os planetas do Sistema Solar estão sendo listados na tela.

---

7. Crie um componente chamado Missions.

Crie um componente chamado Missions dentro da pasta src/components.

• Este componente deve ter uma div que envolva todo seu conteúdo e que tenha o atributo data-testid="missions";

• Renderize o componente Missions abaixo do SolarSystem, dentro do componente principal App.

O que será verificado

• Será validado se o componente <Missions /> é renderizado;

• Será validado se existe uma div que possui o data-testid="missions";

• Será validado se o componente <Missions /> está sendo renderizado no componente principal App.

---

8. Renderize o componente Title dentro do componente Missions.

Renderize o componente Title dentro do componente Missions.

• O componente Title deve ser renderizado recebendo a prop headline com o valor "Missões".

O que será verificado

• Será validado se o texto "Missões" é renderizado usando o componente Title dentro do componente Missions.

---

9. Crie um componente chamado MissionCard.

Crie um componente chamado MissionCard dentro da pasta src/components.

• O componente MissionCard deve receber quatro props:

  • name
  • year
  • country
  • destination

• O componente MissionCard deve ter uma div que envolva todo seu conteúdo e que tenha o atributo data-testid="mission-card";

• O componente MissionCard deve renderizar o texto recebido pela prop name. Sugerimos a utilização de tags de Conteúdo de Fluxo, como <p>, que deve conter o atributo data-testid="mission-name";

• O componente MissionCard deve renderizar o texto recebido pela prop year. Sugerimos a utilização de tags de Conteúdo de Fluxo, como <p>, que deve conter o atributo data-testid="mission-year";

• O componente MissionCard deve renderizar o texto recebido pela prop country. Sugerimos a utilização de tags de Conteúdo de Fluxo, como <p>, que deve conter o atributo data-testid="mission-country";

• O componente MissionCard deve renderizar o texto recebido pela prop destination. Sugerimos a utilização de tags de Conteúdo de Fluxo, como <p>, que deve conter o atributo data-testid="mission-destination".

O que será verificado

• Será validado se o componente <MissionCard /> é renderizado;

• Será validado se o componente <MissionCard /> possui uma div com o atributo data-testid="mission-card";

• Será validado se é renderizado o texto recebido pela prop name;

• Será validado se é renderizado o texto recebido pela prop year;

• Será validado se é renderizado o texto recebido pela prop country;

• Será validado se é renderizado o texto recebido pela prop destination.

---

10. Renderize uma lista com as missões espaciais

Renderize uma lista com as missões espaciais dentro do componente Missions.

• Utilize o componente MissionCard para renderizar cada item da lista de missões;

• Você encontrará a lista com as informações de cada missão espacial no arquivo src/data/missions.js;

• Você deve importar a lista no componente Missions usando o código:

import missions from '../data/missions';

• A lista de missões espaciais é um array de objetos no seguinte formato:

{
  name: 'Nome da missão',
  year: 'Ano de lançamento da missão',
  country: 'País que lançou a missão',
  destination: 'Destino da missão',
}

• Para cada missão espacial da lista, você deverá renderizar um componente MissionCard, passando cada atributo para sua respectiva prop.

💡 Dica:

• Lembre-se do método que te permite criar vários componentes iguais a partir dos valores presentes em um array. Lembre-se que ao renderizar uma lista, você deve passar o atributo key para cada item. Você pode usar o nome da missão como key.

O que será verificado

• Será verificado se é renderizado um componente <MissionCard /> para cada missão espacial da lista de missões;

• Será verificado se todas as missões espaciais estão sendo listadas na tela.

---