Criando a sua spec com Jest e Supertest

E finalmente chegou o momento de realizar a primeira request no nosso teste e para isso iremos criar uma pasta chama __Test__ no nosso projeto criado. Abaixo eu mostro como fica a estrutura de pastas do nosso projeto a longo prazo, por enquanto pode criar apenas a pasta __Teste__

├── __Test__
├── coverage
├── environment
├── graphql
    ├── query/
    ├── schema/
├── helpers
    ├── date/
    ├── utils/
├── README.md

Com a pasta criada vamos criar dentro dela o primeiro arquivo de teste, eu coloquei o nome como primeiroSpec.test.js

Dentro deste arquivo eu adiciono o primeiro comando do Jest, o describe ele serve para criar um bloco de código que irá agrupar diversos testes. trazendo isso para o nosso modo de manual: describe é o nosso caso de Teste.

describe('Criando a nova primeira spec', () => {
    
    
});

Agora que temos o nosso “Caso de Teste” criado, agora precisamos colocar as validações, elas são chamadas de test, no comando Jest.

describe('Criando a nova primeira spec', () => {

    test('Vamos criar a primeira request ', async () => {

       
    });
});

Desta forma temos a base da estrutura para os nossos testes. Agora vamos começar o processo de estruturar o nosso arquivo para fazer o primeiro request. Primeiro vamos as importações.

• supertest: irá fazer a requisição
• chai: irá fazer as validações basicas do response neste primeiro momento como , status code, contenty-type, etc.

const request = require("supertest");
var chai = require("chai"),
    expect = chai.expect;

Agora iremos pegar a nossa documentação da API https://geographql.netlify.app para construir a nossa query e realizar a primeira busca de dados. Vamos fazer este primeiro teste usando a query states.

Neste link https://geographql.netlify.app/docs/queries/states você pode encontrar a documentação da query abaixo.

{
  states(
    filter: { ciso2: "US" }
    page: { first: 4, after: "eyJjdXJzb3IiOjQ2NTR9" }
  ) {
    totalCount
    edges {
      cursor
      node {
        name
        state_code
        country_code
        latitude
        longitude
      }
    }
    pageInfo {
      hasNextPage
      hasPreviousPage
      endCursor
      startCursor
    }
  }
}

Agora nos vamos para a parte da request, dentro do nosso test iremos adicionar o seguinte bloco de código.

const request = require("supertest");
var chai = require("chai"),
  expect = chai.expect;


describe('Criando a nova primeira spec', () => {
  var response = null

  test('Vamos criar a primeira request ', async () => {
    response = await request("https://api.geographql.rudio.dev")
      .post("/graphql")
      .send({
        query: `query states($filter: StateFilterInput, $pagination: PaginationInput) {
                states(filter: $filter, page: $pagination) {
                  totalCount
                  edges {
                    cursor
                    node {
                      name
                      state_code
                      country_code
                      latitude
                      longitude
                    }
                  }
                  pageInfo {
                    hasNextPage
                    hasPreviousPage
                    endCursor
                    startCursor
                  }
                }
              }`,
        variables: {
          filter: {
            ciso2: "US",
          },
          pagination: {
            first: 5,
          },
        },
      })
      .expect("Content-Type", "application/json; charset=utf-8")
      .expect(200);

    console.log(JSON.stringify(response.body))
  });
});

• declaração response: ao declarar const response = null eu estou dizendo para o JS que estou criando uma constante response que agora neste momento está como null.
• superteste fazendo a request: agora precisamos adicionar um async (aguarde um dado para finalizar) ao nosso test, porque o nosso request pode demorar um tempo para retornar os dados por isso ele possui um wait na sua frente.

Dentro do request(“”) é informado a url que se envia a informação, e após isso temos o .post(“/graphql”) porque nele passamos o verbo (GET, POST, PUT, DELETE) que precisa ser realizado, no nosso caso GraphQL será sempre post.

• send: aqui é onde iremos enviar os dados da nossa requisição, no caso a query e variables, o envio desta informação é no formato de .json por isso ele está dentro do {}
• Query: Nela são enviado os parâmetros que eu desejo que seja retornado no meu response.
• Variables: São os filtros que será informado para retornar o dado desejado

Estes dados são o suficiente para realizar a sua request. Após isso você pode utilizar o chai para fazer pequenas asserções, por isso o código abaixo:

.expect("Content-Type", "application/json; charset=utf-8")
.expect(200);

E o console.log no final é para você ver o retorno recebido da request

console.log(JSON.stringify(response.body))

Agora para rodar de forma mais simplificada, se você estiver usando vscode utilize a extensão:

Name: Jest
Id: Orta.vscode-jest
Description: Use Facebook’s Jest With Pleasure.
Version: 6.2.5
Publisher: Orta
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=Orta.vscode-jest

Ao instalar está extensão, você terá um ícone de play do lado do teste.

E ao rodar, irá exibir no seu terminar a execução e o resultado.

• 1: exibição do console.log
• 2: quantidade de CTs que foram executados e o numero que passou
• 3: histórico das execuções

E como vocês podem ver a nossa request foi realizada com sucesso e o response foi exibido.

E se você quer ver como o repositório final se encontra só acessar o meu portfolio no Github https://github.com/pricaimiTech/geographqlJestAPI

E não esqueça de me seguir nas minhas redes sociais https://linktr.ee/priscilacaimi