Olá !

Dando seguimento ao Projeto vamos as parte mais complexas porém ainda simples do nosso projetinho.

Mas antes de continuarmos, adianto que o CSS será adicionado por último, mas hey ! Não precisamos ainda porque não estamos usando a interface de exibição do código, mas sim a suite de testes. Será que é possível permanecer assim quando for necessário clicar em algo ?

Veremos …

Obs.: O teste já está “mastigado” para poupar espaço, porém ele pode ser utilizado para futuras otimizações do código. Ex: desacoplar o excesso de código no componente Main.

Falando nisso…

Crie o componente no caminho:

src/components/Main/index.test.js:

/* Render escreve, screen lê e waitFor constroi o await da promise */
import {render, waitFor, screen} from "@testing-library/react";
import userEvent from "@testing-library/user-event";
/* Componente a ser testado*/
import Main from ".";
/* Cria o mock de um servidor. Simulado. */
import {setupServer} from "msw/node";
/* Faz o mock dos processos rest (get, post, put, patch e update) */
import {rest} from "msw";
/* URL real a ser consumida */
const BASE_URL = "https://nova-joke-api.netlify.app/.netlify/functions/index/api/random"

/* Cria o mock do servidor. O objeto json não precisa ser igual ao  verdadeiro, mas se possível 
   deixe ao menos os itens que você irá usar conforme a construção original*/
const server = setupServer(
  rest.get(
    BASE_URL,
    (req, res, ctx) => {
      return res(
        ctx.json({
          id: 1,
          type: "general",
          setup: "Joke",
          punchline: "LOL",
        })
      );
    }
  )
);

/* Processos de limpeza necessários antes de cada teste de api ser iniciado. */
beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterAll(() => server.close());

/* Efetua o teste de api com tudo ok. Você pode testar o conteúdo da resposta,
   o código da resposta, ou até mesmo mensagens de erro */
test("loads and displays the joke", async () => {
  render(<Main />);
  const response = await waitFor(() => screen.getByText(/general/i));
  expect(response).toBeInTheDocument();
});

/* Testa o comportamento do botão que chama a punchline */
test("Activates the joke punchline card", async () => {
  render(<Main />);
  window.HTMLElement.prototype.scrollIntoView = function () {};
  window.HTMLElement.prototype.scrollTo = function () {};
  const punchlineButton = screen.getByText("Answer");
  userEvent.click(punchlineButton);

  const punchline = await waitFor(() => screen.getByText(/lol/i));
  expect(punchline).toBeInTheDocument();
});

/* Dispara uma nova piada */
test("Get one new joke", async () => {
  render(<Main />);

  /* Testa piada antiga para confirmar se a piada foi mesmo alterada */
  const oldJokeId = await waitFor(() => screen.getByText(/1/i));
  expect(oldJokeId).toBeInTheDocument();

  server.use(
    rest.get(
      BASE_URL,
      (req, res, ctx) => {
        return res(
          ctx.json({
            id: 2,
            type: "general",
            setup: "Another joke",
            punchline: "HUE HUE !",
          })
        );
      }
    )
  );

  /* Como o comportamento mudou. Temos que chamar um botão antes do outro */
  const punchlineButton = screen.getByText("Answer");
  userEvent.click(punchlineButton);

  /* Simula um novo request, para confirmar se a chamada foi realmente efetuada */
  const newJokeRequest = await waitFor(() => screen.getByText("New Joke"));
  userEvent.click(newJokeRequest);

  const newJokeId = await waitFor(() => screen.getByText(/2/i));
  expect(newJokeId).toBeInTheDocument();
});

/* Observa erro */
test("Receive an network error", async () => {
  server.use(
    rest.post(
      BASE_URL,
      (req, res, ctx) => {
        return res(
          ctx.status(500),
          ctx.json({message: "Internal server error"})
        );
      }
    )
  );
  render(<Main />);
  /* Utiliza uma função do Jest, mas funciona... */
  console.log = jest.fn();
  console.log("Internal server error");
  expect(console.log).toHaveBeenCalledWith("Internal server error");
});

Nossa é coisa pra caramba ! Mas tudo bem. Vai te servir de referência para futuros projetos, pode apostar nisso. Deixei o necessário explicado nos comentários, mas caso precise de mais explicações, deixe um comentário o post.

Também estamos utilizando um evento de ação, o click, que consegue justamente simular um clique do usuário, isso evita o teste manual de ir clicar no aplicativo em execução no navegador.

O primeiro indica que temos que baixar uma dependência, o Mock Service Worker, que vai simular uma chamada para o endereço da api. Então vamos lá. Feche a suite de testes e execute o comando:

npm i -D msw

Agora se você rodar o teste novamente, vão aparecer muitos erros, pois o nosso componente ainda não existe. vamos criá-lo então:

src/components/Main/index.js:

import {useEffect, useRef, useState} from "react";
import Setup from "../Setup";
import Punchline from "../Punchline";
import Loading from "../Loading";

/* Note como este componente é o único que possui um estado e também o único que possui hooks.
  Esta construção poderia ainda ser delegada ao context ou Redux, mas um estado centralizado 
   funciona muito bem quando existe pouca complexidade. */
function Main() {
  const [data, setData] = useState([]);
  const [isVisible, setIsVisible] = useState(false);
  const [apiRequest, setApiRequest] = useState(false);
  const punchlineRef = useRef(null);

  const scrollToPunchline = () => {
    punchlineRef.current?.scrollIntoView(punchlineRef);
  };

  const scrollToTop = () => {
    punchlineRef.current?.scrollIntoView(0,0);
  };

  useEffect(() => {
    fetch("https://nova-joke-api.netlify.app/.netlify/functions/index/api/random")
      .then((res) => res.json())
      .then((result) => {
        setData(result);
      })
      .catch(error => console.log("Internal server error"));

    /* Retorna um state vazio ao desmontar o componente evitando o erro de ler 
       um componente desmontado */
    return () => {
      setData([]);
      setIsVisible(false);
    };
  }, [apiRequest]);

  useEffect(() => {
    isVisible ? scrollToPunchline() : scrollToTop();
    
  }, [isVisible]);

  return (
    <>
      {data.length === 0 ? (
        <Loading />
      ) : (
        <>
        <Setup
          jokeId={data.id}
          jokeType={data.type}
          jokeSetup={data.setup}
        />
        </>
      )}
      <div ref={punchlineRef}></div>
      <Punchline jokePunchline={data.punchline} visible={isVisible} />
      {isVisible ? (
        <button onClick={() => setApiRequest(!apiRequest)} >
          New Joke
        </button>
      ) : (
        <button onClick={() => setIsVisible(!isVisible)}>Answer</button>
      )}
    </>
  );
}

export default Main;

Sim tem muita coisa acontecendo neste componente, Mas basicamente ele carrega a api e exibe a resposta na tela. Vou tentar descrever o que acontece neste elemento:

Ele utiliza três tipos de hooks… Quê ?

O que é um react hook ?

Um React hook é uma abstração que permite o comportamento de objetos e classes de forma funcional (dentro de uma função pura). Isso permite uma escrita mais clara e a possibilidade reúso e independência das instâncias (hooks) utilizados.

É como se as classes do Javascript fossem levadas para o segundo plano, fazendo com que você trabalhe apenas com os métodos.

Eis o link oficial que explica o que ele é: https://pt-br.reactjs.org/docs/hooks-overview.html

Temos três hooks de estado (data, isVisible, apiRequest) e eles não dependem de um único objeto, ou seja são independentes entre si, assim como os demais hooks que são de um mesmo grupo, mas podem depender de um hook de outro grupo (outro tipo).

Os hooks de estado (useState) tem uma variável de leitura (ex: data), uma de escrita (ex: setData) e um valor inicial (= useState([])). Um state hook pode ser alterado por um hook de efeito (useEffect) ou diretamente pela chamada do segundo argumento (ex: setIsData([“Echo”})). O ideal é quele seja alterado por um hook de efeito, mas não é obrigatório.

Já o hook de efeito (useEffect) executa uma função anonima em seu primeiro argumento baseado na alteração de estado do seu segundo argumento, que força um novo ciclo de vida no componente (renderização no caso) Ele também é utilizado para tratamento de entradas “impuras” no componente, tipo um request que não pode ser previsto se vai funcionar ou não, logo um useEffect vai cuidar da requisição. Pelo fato do efeito durar um ciclo (uma renderização) talvez ele precise de uma limpeza antes de ser reescrito, isso funciona igual uma variável que é limpa ates de usada novamente. É mais simples do que parece, embora deva ser analisado conforme o comportamento esperado.

O segundo argumento de um useEffect funciona como um watcher (observador) que renderiza o componente com o que possui no primeiro argumento.

O segundo argumento do efeito re-renderiza “pra sempre” se não for escrito (deve ser evitado nessa forma), uma vez se o array estiver vazio ou toda vez que um item dentro do array for alterado. De novo, é algo complexo de se entender mas muito simples de ser utilizado.

Já o hook de referencia (useRef) geralmente é usado para marcar uma posição no VDom(Uma espécie de pagina virtual que o React cria) a ser utilizada, é como se colocássemos uma ancora na tela para ir a esta posição quando for preciso. Até por essa razão eu tive que criar uma div vazia para marcar uma área que fosse do meu agrado.

Já no retorno do componente temos o uso de 2 operadores ternários concatenados, o que é feio pra cacete, mas é muito utilizado no React, o Operador ternário funciona exatamente igual ao if/else. É, ou deveria ser, mais fácil de utilizar, mas se torna confuso caso tenha mais de uma operação concatenada (como em nosso caso)

Dito isso, vamos criar os componentes que faltam, a começar pelo (teste do) Loading:

src/components/Loading/index.test.js:

import { render, screen } from '@testing-library/react';
import Loading from '.';

test('renders Loading message', () => {
  render(<Loading />);
  const loadingMessage1 = screen.getByText(/Loading.../i);
  const loadingMessage2 = screen.getByText(/If persists check your network or refresh the page/i);
  expect(loadingMessage1).toBeInTheDocument();
  expect(loadingMessage2).toBeInTheDocument();
});

E agora ? Será que é possível testar apenas o refere-se ao Loading ?

Vamos pensar um pouco… Zoeira.

É possível selecionar testes específicos baseados em seus rótulos, no nosso caso você vai pressionar no terminal As teclas: W e depois R e digitar as palavras loading message.

na linha tests: vai aparecer o total de testes que falharam, foram ignorados e que passaram.

Pra que o teste passe vamos criar o componente de Loading em:

src/components/Loading/index.js:

// import "./index.css"
function Loading() {
  return (
    <div className="loading">
        Loading...
        <p>If persists check your network or refresh the page</p>
    </div>
  );
}

export default Loading;

Ao salvar o nosso vai passar, porém o teste anterior ainda vai apresentar erro. Mas antes de prosseguirmos vamos reativar a linha que importa o CSS nesse componente e falar um pouco sobre os CSS’s no React.

Tipos de CSS em React

O React aceita três tipos internos de escrita de CSS, e as três são boas:

CSS global

O css “puro” dentro do react não interpreta a separação do código (code splitting) ou seja, a sua aplicação é vista como um único documento. Isso geralmente traz o erro de um atributo CSS sobrescrevendo outro atributo que é renderizado antes dele.

Para evitar esse contratempo a solução é mesma utilizada no CSS comum: O uso de id’s e classes (classNames) para especificidade e o uso de variáveis CSS para atribuir dinamismo.

Ocorre também o fato de bastante pessoas adicionarem todo o css o arquivo App.css já que ele é o primeiro componente a ser carregado. Isso pode trazer o problema do CSS ficar confuso caso seja muito grande e elimina qualquer possibilidade de reúso do componente com estilo.

Eu recomendo você a colocar o App.css apenas o código que realmente generalista (tipo a importação da fonte estilos do body e as variáveis CSS) e tudo o que for classe e id de componente em um documento index.css na pasta do componente (ou Componente.css se você usar Componente.js como raiz). Faça isso mesmo que o as mesmas instruções se repitam, pois isso vai te livrar de muitas dores de cabeça.

Muda o nome da classe, copia e já era. Sabe por quê ? Porque é isso que o React vai fazer nos dois próximos dois Itens !

CSS Modules

O principio é o mesmo do CSS global porem ao adicionar o termo module no seu estilo (Ex: index.module.css), ele se torna uma classe com um identificador único(um sufixo) que impede a possibilidade haver colisões, mesmo que outro módulo ou className puro tenha o mesmo nome que ele.

Viu só, uma gambiarra em plena luz do dia !

Módulos CSS raramente são usados pois ficam no meio termo entre o mais simples e o mais elaborado.

Mas é útil saber que eles existem ! Até porque eles são o “segredo” do próximo item…

CSS-in-JS

CSS-in-JS é a forma mais moderna e polêmica de escrita estilo, pois você trata os atributos CSS como objetos Javascript. Até a escrita muda (background-color vira backgroundColor)

A principal vantagem desta técnica é a possibilidade tratar diretamente variáveis JS e props (propriedades únicas do seu componente) diretamente no arquivo escrito, que o próprio React vai convertê-las em módulos CSS aceitáveis para o funcionamento no navegador, ou seja, você corta o caminho da interpretação CSS do React pela contrapartida da escrita fora do padrão e alguns recursos avançados incompatíveis de forma direta (ex: animações). Um preço muito baixo a ser pago, já que o React vai fazer essa conversão em módulos de qualquer forma e por não haver perda considerável de performance em sua utilização.

Existem diversas técnicas para usar CSS-in-JS, as mais comuns são a escrita direta do objeto em uma variável, ou as bibliotecas JSS e Styled-components (Emotion é praticamente igual). Disparado a biblioteca Styled-components é a mais usada.

O uso dessa técnica também permite a extensão de recursos por meio dos frameworks de componentes como o Material-ui e o Ant design que possuem componentes já prontos para os casos de uso mais comuns.

SASS/LESS

Você também pode adicionar pré processadores CSS baixando as bibliotecas necessárias para usar os recursos dessas ferramentas.

O seu uso é desencorajado pelos mantenedores do create-react-app, mas FODA-SE ! Porque todo recrutador pede que você saiba usar este treco no React pra acomodar as gambiarras que algum filho da puta escreveu em mil novecentos e lá vão chavascas !!!

…..

Ou você pode realmente ser um programador experiente com essa técnica e preferir adaptar ela ao React e assim ganhar em produtividade…

Dito isto, vamos utilizar o CSS puro, de forma duplicada se preciso for.

Eu prometo que faço um artigo sobre outros tipos de estilo em React ainda esse ano…

Remova o // que define o comentário dentro de src/components/Loading/index.js e crie o arquivo abaixo:

src/components/Loading/index.css:

.loading {
    font-size: 1.5rem;
    min-height: 50vh;
    width: 100%;
    text-align: center;
  }
  
  @media only screen and (min-width: 361px) {
    .loading {
      font-size: 3rem;
    }
  }

Agora vamos criar o componente chamado Setup, ele é responsável por mostrar em destaque o setup(pergunta) da piada. Primeiro o seu teste:

src/components/Setup/index.test.js:

import {render, screen} from "@testing-library/react";
import Setup from ".";

test("Renders setup joke id", () => {
  render(<Setup jokeId="1" />);
  const linkElement = screen.getByText("1");
  expect(linkElement).toBeInTheDocument();
});

test("Renders setup joke type", () => {
  render(<Setup jokeType="general" />);
  const linkElement = screen.getByText("general");
  expect(linkElement).toBeInTheDocument();
});

test("Renders setup joke setup", () => {
  render(<Setup jokeSetup="Joke body" />);
  const linkElement = screen.getByText(/joke body/i);
  expect(linkElement).toBeInTheDocument();
});

O teste é bem simples pois só verifica se as três propriedades do nosso componente funcionam.

Para que funcione, precisamos criar o componente e os seus estilos:

Mas primeiro acesse o repositório em: https://github.com/marlonveiga-santos/nova_joke_app

e baixe os itens da pasta assets (ou o projeto inteiro, já que está quase no fim mesmo) crie o componente e o arquivo CSS como mostrados abaixo:

src/components/Setup/index.js:

import "./index.css";
import Thinking from "../../assets/thinking.png"
function Setup({jokeId, jokeType, jokeSetup}) {
  return (
    <>
      <dl className="setup-card setup-fade">
        <div className="setup-card-item">
          <dt>Joke #</dt>
          <dd>{jokeId}</dd>
        </div>
        <div className="setup-card-item">
          <dt>Type:</dt>
          <dd>{jokeType}</dd>
        </div>
        <div className="setup-card-item">
          <img className="setup-card-img" src={Thinking} alt="thinking emoji" />
          <dt>Setup:</dt>
          <dd>{jokeSetup}</dd>
        </div>
      </dl>
    </>
  );
}

export default Setup;

src/components/Setup/index.css:

.setup-card {
  width: 50%;
  max-height: 5%;
  width: fit-content;
  margin: 1%;
  padding: 1rem 2rem;
  border: var(--border);
  border-radius: 25%;
  background-color: #bf3a15;
  background-image: url("../../assets/setup-card.svg");
  background-attachment: scroll;
  background-size: cover;
  display: flex;
  flex-direction: column;
  animation-duration: 1s;
  animation-fill-mode: both;
}

.setup-card-item {
  padding: 0 10%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: center;
}

.setup-card-item:nth-child(3) {
  flex-direction: column;
}

.setup-card-item:nth-child(3) dd {
  margin-top: 1rem;
  width: 100%;
  font-size: 1.5rem;
}

.setup-card-img {
  width: 30%;
  transform: rotate(0deg);
  animation: zigzag 4s linear infinite;
}

.setup-fade {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}

@keyframes fadeInLeft {
  0% {
    opacity: 0;
    transform: translateX(-10rem);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes zigzag {
  0% {
    transform: scale(1);
  }

  25% {
    transform: rotate(-45deg);
  }

  50% {
    transform: scale(0.5);
  }

  75% {
    transform: rotate(45deg);
  }

  100% {
    transform: scale(1);
  }
}

@media only screen and (min-width: 361px) {
  .setup-card {
    width: 50%;
    margin: 0 auto;
  }
}

No CSS existe uma animação chamada fadeInLeft que é exatamente igual a animação utilizada em Punchline, ela poderia ser atribuída para uma única classe e essa classe utilizada nos dois componentes, porém o meu objetivo é deixá-las separadas para que os componentes sejam independentes ao máximo em relação aos estilos.

Vamos criar o componente Punchline com os seus testes, raiz e estilos:

src/components/Punchline/index.test.js:

import {render, screen} from "@testing-library/react";
import Punchline from ".";


test("Renders Punchline  joke punchline", () => {
  render(<Punchline jokePunchline="LoL" visible />);
  const punchline = screen.getByText(/lol/i);
  expect(punchline).toBeInTheDocument();
});

test("Not renders Punchline  joke punchline", () => {
  render(<Punchline jokePunchline="LoL" />);
  const punchline = screen.queryByText(/lol/i);
  expect(punchline).toBeNull();
});

src/components/Punchline/index.js:

import "./index.css";
import Laugh from "../../assets/laugh.png";

function Punchline({jokePunchline, visible}) {
  if (visible) {
    return (
      <>
        <dl className="punchline-card punchline-fade">
          <dt>Punchline:</dt>
          <img className="punchline-card-img" src={Laugh} alt="laugh emoji" />
          <dd>{jokePunchline}</dd>
        </dl>
      </>
    );
  } else {
    return null;
  }
}

export default Punchline;

src/components/Punchline/index.css:

.punchline-card {
  width: 50%;
  margin: 5% 1%;
  width: fit-content;
  padding: 2%;
  border: var(--border);
  border-radius: 25%;
  background-color: #19ba04;
  background-image: url("../../assets/punchline-card.svg");
  background-attachment: scroll;
  background-size: cover;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  align-items: center;
  animation-duration: 1s;
  animation-fill-mode: both;
}

.punchline-card dd {
  margin-top: 1rem;
  font-size: 2rem;
  align-items: baseline;
  font-size: 1.5rem;
  text-align: center;
}

.punchline-card-img {
  width: 30%;
  transform: scale(1);
  animation: pulse 1s infinite;
}

.punchline-fade {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}

@keyframes fadeInLeft {
  0% {
    opacity: 0;
    transform: translateX(-10rem);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes pulse {
  0% {
    transform: scale(0.75);
  }

  50% {
    transform: scale(1);
  }

  100% {
    transform: scale(0.75);
  }
}

@media only screen and (min-width: 361px) {
  .punchline-card {
    width: 50%;
    margin: 5% auto;
  }
}

Se formos ao testes agora vai dar um puta erro quilométrico !!!

Desisto… SOU UM IMPOSTOR !!!!

Perai…

Deixei esse erro para que você possa ver que a stack do erro aparece diversas vezes devido a re-renderização do componente zoado e, mesmo em “ambiente de teste” ele mostra um erro explicito de execução !

Pra corrigir esse erro, vamos ter que refatorar alguns componentes. Eu já fiz isso e o erro era causado por um mal uso da minha parte dos métodos scrollInto, scrollIntoView e métodos assíncronos

Eis as correções:

src/components/Main/index.js:

import {useEffect, useRef, useState} from "react";
import Setup from "../Setup";
import Punchline from "../Punchline";
import Loading from "../Loading";

/* Note como este componente é o único que possui um estado e também o único que possui hooks.
  Esta construção poderia ainda ser delegada ao context ou Redux, mas um estado centralizado 
   funciona muito bem quando existe pouca complexidade. */
function Main() {
  const [data, setData] = useState([]);
  const [isVisible, setIsVisible] = useState(false);
  const [apiRequest, setApiRequest] = useState(false);
  const punchlineRef = useRef(null);

  const scrollToBottom = () => {
    punchlineRef.current?.scrollIntoView(punchlineRef);
  };

  useEffect(() => {
    fetch("https://nova-joke-api.netlify.app/.netlify/functions/index/api/random")
      .then((res) => res.json())
      .then((result) => {
        setData(result);
      })
      .catch(error => console.log("Internal server error"));

    /* Retorna um state vazio ao desmontar o componente evitando o erro de ler 
       um componente desmontado */
    return () => {
      setData([]);
      setIsVisible(false);
      window.scrollTo(0,0)
    };
  }, [apiRequest]);

  useEffect(() => {
     scrollToBottom() 
    
  }, [isVisible]);

  return (
    <>
      {data.length === 0 ? (
        <Loading />
      ) : (
        <>
        <Setup
          jokeId={data.id}
          jokeType={data.type}
          jokeSetup={data.setup}
        />
      <div ref={punchlineRef}></div>
      <Punchline jokePunchline={data.punchline} visible={isVisible} />
      {isVisible ? (
        <button onClick={() => setApiRequest(!apiRequest)}>
          New Joke
        </button>
      ) : (
        <button onClick={() => setIsVisible(!isVisible)}>Answer</button>
      )}
        </>
      )}
    </>
  );
}

export default Main;

src/components/Main/index.test.js:

/* Render escreve, screen lê e waitFor constrói o await da promise */
import {render, waitFor, screen} from "@testing-library/react";
import userEvent from "@testing-library/user-event";
/* Componente a ser testado*/
import Main from ".";
/* Cria o mock de um servidor. Simulado. */
import {setupServer} from "msw/node";
/* Faz o mock dos processos rest (get, post, put, patch e update) */
import {rest} from "msw";
/* URL real a ser consumida */
const BASE_URL = "https://nova-joke-api.netlify.app/.netlify/functions/index/api/random"

/* Spy Jest que emula o DOM para aceitar a função scrollTo */
global.scrollTo = jest.fn();

/* Cria o mock do servidor. O objeto json não precisa ser igual ao  verdadeiro, mas se possível 
   deixe ao menos os itens que você irá usar conforme a construção original*/
const server = setupServer(
  rest.get(
    BASE_URL,
    (req, res, ctx) => {
      return res(
        ctx.json({
          id: 1,
          type: "general",
          setup: "Joke",
          punchline: "LOL",
        })
      );
    }
  )
);

/* Processos de limpeza necessários antes de cada teste de api ser iniciado. */
beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterAll(() => server.close());

/* Efetua o teste de api com tudo ok. Você pode testar o conteúdo da resposta,
   o código da resposta, ou até mesmo mensagens de erro */
test("loads and displays the joke", async () => {
  render(<Main />);
  const response = await waitFor(() => screen.getByText(/general/i));
  expect(response).toBeInTheDocument();
});

/* Testa o comportamento do botão que chama a punchline */
test("Activates the joke punchline card", async () => {
  render(<Main />);
  window.HTMLElement.prototype.scrollIntoView = function () {};
  window.HTMLElement.prototype.scrollTo = function () {};
  const punchlineButton = waitFor(() => screen.getByText("Answer"));
  userEvent.click(await punchlineButton);
  const punchline = await waitFor(() => screen.getByText(/lol/i));
  expect(punchline).toBeInTheDocument();
});

/* Dispara uma nova piada */
test("Get one new joke", async () => {
  render(<Main />);

  /* Testa piada antiga para confirmar se a piada foi mesmo alterada */
  const oldJokeId = await waitFor(() => screen.getByText(/1/i));
  expect(oldJokeId).toBeInTheDocument();

  server.use(
    rest.get(
      BASE_URL,
      (req, res, ctx) => {
        return res(
          ctx.json({
            id: 2,
            type: "general",
            setup: "Another joke",
            punchline: "HUE HUE !",
          })
        );
      }
    )
  );

  /* Como o comportamento mudou. Temos que chamar um botão antes do outro */
  const punchlineButton = screen.getByText("Answer");
  userEvent.click(punchlineButton);

  /* Simula um novo request, para confirmar se a chamada foi realmente efetuada */
  const newJokeRequest = await waitFor(() => screen.getByText("New Joke"));
  userEvent.click(newJokeRequest);

  const newJokeId = await waitFor(() => screen.getByText(/2/i));
  expect(newJokeId).toBeInTheDocument();
});

/* Observa erro */
test("Receive an network error", async () => {
  server.use(
    rest.post(
      BASE_URL,
      (req, res, ctx) => {
        return res(
          ctx.status(500),
          ctx.json({message: "Internal server error"})
        );
      }
    )
  );
  render(<Main />);
  /* Utiliza uma função do Jest, mas funciona... */
  console.log = jest.fn();
  console.log("Internal server error");
  expect(console.log).toHaveBeenCalledWith("Internal server error");
});

Agora, antes de aplicar mais estilos, vamos apagar o arquivo srcApp.test.js:

E vamos adicionar o componente Main na pagina Home:

src/pages/Home/index.js:

import Header from "../../components/Header";
import Main from "../../components/Main";
import Footer from "../../components/Footer";
function Home() {
  return (
    <>
      <Header />
      <Main/>
      <Footer />
    </>
  );
}

export default Home;

Também temos que adicionar o Jest spy que permita a interpretação do movimento scrollTo no teste em:

src/pages/Home/index.test.js:

import {render} from "@testing-library/react";
import Home from ".";

/* Spy Jest que emula o DOM para aceitar a função scrollTo */
global.scrollTo = jest.fn();

test("Renders Home snapshot", () => {
  /* Escreve o componente Home atual como um React.Fragment permitindo a comparação com snapshot */
  const {asFragment} = render(<Home />);

  /* Compara o fragmento com a snapshot existente */
  expect(asFragment(<Home />)).toMatchSnapshot();
});

Agora salve os arquivos e atualize a snapshot que todos os testes deverão estar verdes !

Vamos commitar agora as nossas alterações enquanto tudo está indo bem. No terminal digite:

git add .
git commit -m "Structure" -m "- Add Loading component
- Add Main component
- Add Setup component
- Add Punchline component.
- Add respective tests.
- Add respective styles."
git push -u origin main

Agora faltam os estilos em nosso app.

Como testes visuais e nem de acessibilidade serão necessários em nosso caso, vamos agora fechar os testes e executar o nosso app com o comando:

npm start

Olha ! mesmo sem termos adicionados todos os estilos o nosso app já está 100% funcional !

Para concluir a aparência que eu defini como ideal adicione os códigos CSS abaixo, mas fique a vontade para alterar essa parte como quiser

Obs.: Crie os arquivos CSS que não existirem e adicione ao seu respectivo componente, embaixo dos imports que já existirem e acima do componente, o código:

import "./index.css";

App.css:

@import url("https://fonts.googleapis.com/css2?family=Otomanopee+One&display=swap");

:root {
  --color-primary: #eee;
  --color-secondary: #111;
  --outline: -1px 0 var(--color-secondary), 0 1px var(--color-secondary),
    1px 0 var(--color-secondary), 0 -1px var(--color-secondary);
  --border: 0.25rem solid var(--color-primary);
}

body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  color: var(--color-primary);
  font-family: "Otomanopee One", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--color-primary);
  background-image: url("./assets/background.svg");
  background-attachment: scroll;
  background-size: cover;
  text-shadow: var(--outline);
  scroll-behavior: smooth;
}

src/components/Footer/index.css:

footer {
  margin-top: 35vh;
  background-color: hotpink;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  padding: .4rem;
}

footer h3 {
  display: inline-block;
}

footer a {
  text-decoration: none;
}

footer a {
  color: var(--color-primary);
}

footer a:visited {
  color: var(--color-primary);
}

@media only screen and (min-width: 361px) {
  footer {
    flex-direction: row;
  }
}

src/components/Header/index.css:

.header {
  font-size: 0.8rem;
  display: flex;
  padding: 0 1%;
  justify-content: space-between;
  align-items: baseline;
}

.header h1 {
  display: inline-block;
}

.header h2 {
  display: none;
}

@media only screen and (min-width: 361px) {
  .header h2 {
    display: inline-block;
  }
}

src/components/Loading/index.css:

.loading {
  font-size: 1.5rem;
  min-height: 0vh;
  width: 100%;
  text-align: center;
}

@media only screen and (min-width: 361px) {
  .loading {
    font-size: 3rem;
    min-height: 45vh;
  }
}

src/components/Main/index.css:

button {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: darkviolet;
  color: var(--color-primary);
  text-shadow: var(--outline);
  border: var(--border);
  font-size: 1.5rem;
  width: 15rem;
  padding: 1rem;
  margin: 5% auto;
  cursor: pointer;
  border-radius: 25%;
}

Os arquivos Setup e Punchline não serão alterados.

Mais um comiit e o projeto estará quaase pronto. Pretendo fazer mais um artigo GIGANTESCO adicionando mais alguns recursos e fazendo um apanhado do que foi feito aqui.

Vamos ao commit:

git add .
git commit -m "Refactor" -m "Add styles to Header, Footer, Loading, Main, Loading and App components."
git push -u origin main

Até a próxima !