GraphQL e APIs: como manter a qualidade

GraphQL e APIs:
como manter a
qualidade?

Olar!
Sou a Mai!
22, deva backend na
testes ● microsservices ● graphQL
girl power ● go vegan
/maiarar /maiarrod
2

3
Antes de ir para
a apresentação,
Vamos alinhar certos conceitos e
ferramentas!

1.
APIs
Entendendo melhor esse mundo
4

API? É de comer?
5
Interface de Programação de
Aplicações
◆ Interface de integração
◆ “Cola digital” entre duas pontas
◆ Retorna infos do sistema
◆ Quem consome não precisa
saber detalhes

Coisas legais a se considerar
6
URI - Uniform Resource Identifier
https://dev.empresa.com/api-especifica/recurso

7
protocolo

8
a empresa

9
nome da API

10
recursos e
parâmetros

11
protocolo a empresa nome da API recursos e
parâmetros

12
API USUÁRIO API LOGIN
https://empresa.com/usuario/ https://empresa.com/login/

13
JSON
◆ Formatação de troca
de dados
◆ .json
◆ Tem essa carinha →
{
"id": 01,
"nome": "Fulaninha da Silva",
"telefones": [
{
"id": 01,
"contexto": "Casa",
"valor": "+551131133113"
},
{
"id": 02,
"contexto": "Celular",
"valor": "+5511981172662"
}
]
}

14
API USUÁRIO API LOGIN
https://empresa.com/usuario/ https://empresa.com/login/
json

E como é padronizado?
15
Com o REST!
◆ Transferência de Estado
Representacional
◆ Abstração do HTTP
◆ RESTful: quem aplica os padrões
REST
◆ Verbos

Os verbos
16
◆ Realizam ações em
determinado recurso
◆ Mais usados são:
◆ GET: busca
◆ POST: salva
◆ PUT: atualiza
◆ DELETE: remove

2.
GraphQL
“A query language for your API”
17

18
GraphQL:
O que é?
Pra quê serve?
Onde é usado?
Como é usado?
HOJE, NO QA Ladies!

O que é?
19
◆ Linguagem de consulta
(grafos)
◆ Flexível e intuitiva
◆ Origem: problemas com
REST
◆ Client-side
◆ Único recurso: /graphql

Recursos principais
21
◆ Queries: consultas
◆ Mutations: alterações
◆ Schema: como será cada objeto (types)
◆ E muuuito mais coisas!
https://developer.github.com/v4/explorer/

Queries
22
#simples
query {
posts
}
#filtros
query {
posts(userId: 3)
}
#mais níveis
query {
posts {
curtidas{
numero
}
comentarios{
numero
}
}
}
#resposta
{
"data": {
"posts": {
"curtidas": {
"numero": 5
},
"comentarios": {
"numero": 3
}
}
}
}

Mutations
23
#mutation exemplo
mutation CriarComentario(
valor: "Linda da tia! Beijos",
elementoComentado: 1223
){
comentario {
valor
elementoComentado {
curtidas {
numero
}
}
}
}

Mutations
24
#mutation exemplo
){
comentario {
valor
elementoComentado {
curtidas {
numero
}
}
}
}
O que será salvo

Mutations
25
#mutation exemplo
){
comentario {
valor
elementoComentado {
curtidas {
numero
}
}
}
}
O que quero de
retorno

Mutations
26
#mutation exemplo
){
comentario {
valor
elementoComentado {
curtidas {
numero
}
}
}
}
#resposta
{
"data": {
"comentario": {
“valor": “Linda da tia! Beijos”
"elementoComentado": {
"curtidas": {
"numero": 30
}
}
}
}
}

Mutations
27
#mutation exemplo
){
comentario {
valor
elementoComentado {
curtidas {
numero
}
}
}
}
#resposta
{
"data": {
"comentario": {
"curtidas": {
"numero": 30
}
}
}
}
}

Mutations
28
#mutation exemplo
){
comentario {
valor
elementoComentado {
curtidas {
numero
}
}
}
}
#resposta
{
"data": {
"comentario": {
"curtidas": {
"numero": 30
}
}
}
}
}

Mutations
29
#mutation exemplo
){
comentario {
valor
elementoComentado {
curtidas {
numero
}
}
}
}
#resposta
{
"data": {
"comentario": {
"curtidas": {
"numero": 30
}
}
}
}
}

Mas então,
Como fica a
arquitetura
GraphQL + APIs?30

Arquitetura
31
User Order
Other ServicesWeb App Mobile App
LoginNotification ProductShipping Token

E pra manter a qualidade disso tudo?
32

Relembrando...
34
{
{
Testes manuais buscando
comportamentos indesejados {
Testes para cada unidade
de código fonte
{
Comunicação entre
componentes (defeitos em
interfaces)
{Comportamento de uma
API
Regras de negócio
externas

Necessário pelo menos...
35
◆ Cucumber: BDD/End-to-end
◆ JUnit/Jasmine: unitários
◆ Postman/Insomnia: testes de
integração

Necessário pelo menos...
36
◆ Cucumber: BDD/End-to-end
◆ JUnit/Jasmine: unitários
◆ Postman/Insomnia: testes de
integração
Vamos falar
bastante desse
cara!

O que é Cucumber?
Framework que suporta
Desenvolvimento
Orientado por
Comportamento -
Behavior Driven
Development (BDD).
37

O que é Cucumber?
◆ Muitas, mas muitas
implementações (23)
◆ Ideal para a automação
https://docs.cucumber.io/
38

Como o Cucumber trabalha?
1. Gherkin → onde existirá
o “texto” igualzinho
semelhante ao Cenário
de Teste
2. Step Definitions → onde
esse “texto” irá ser
quebrado em functions
e assim ser codificado
39
Gherkin
Step
Definitions
Cucumber
{
CTs

Falando mais do Gherkin
◆ BusinessReadableDSL
◆ Documentação do
projeto
◆ Testes automatizados
40

41
cenario-teste-matematico.feature#Esse é um cenário de exemplo.
@Tag_cenario_exemplo @Tag_outro_exemplo
Feature: Cenário de Teste Matemático
Esse cenário de teste tem como objetivo realizar as
validações de uma soma e de multiplicações.
Scenario: Realização de uma soma simples
Given que eu tenho uma variável com o valor numérico 1
When eu incremento o valor desta variável com mais 1
Then o valor da variável passa a ser 2
Scenario Outline: Realização de uma expressão simples
Given que eu tenho uma variável com o valor numérico
<numeroA>
When eu multiplico o valor desta variável com pelo
valor numérico <numeroB>
And adiciono o número <numeroC>
Then o valor da variável multiplicada passa a ser
<resultado>
Examples:
| numeroA | numeroB | numeroC | resultado |
| 1 | 2 | 2 | 4 |
| 3 | 4 | 5 | 17 |
◆ Feature → “nome” daquele conjunto
de cenários de teste
◆ Scenario → Cenário de Teste
◆ Given, When, Then → palavras
reservadas para instruções (dado,
quando, então)
◆ And → quando existirá mais
algum passo dentro daquela
instrução
◆ Scenario Outline → quando o
cenário terá algumas variáveis
◆ Examples → exemplos que
serão substituídos no cenário
de teste

42
Examples:
| 1 | 2 | 2 | 4 |
| 3 | 4 | 5 | 17 |
Examples
<numeroA>
When eu multiplico o valor desta variável com pelo
valor numérico <numeroB>
<resultado>
Outline
Scenario Outline: Realização de uma expressão
simples
Given que eu tenho uma variável com o valor
numérico 1
When eu multiplico o valor desta variável com
pelo valor numérico 2
And adiciono o número 2
4
1ª iteração
Scenario Outline: Realização de uma expressão
simples
Given que eu tenho uma variável com o valor
numérico 3
When eu multiplico o valor desta variável com
pelo valor numérico 4
And adiciono o número 5
17
2ª iteração

43
valida-acesso-pedidos.feature#Esse é outro cenário de exemplo.
@tag_pagina_pedidos @tag_usuario_comum
Feature: Acesso à página de pedidos
Esse cenário de teste tem como objetivo realizar as validações para
acesso à página de pedidos.
Background: Login realizado
Given que eu tenha realizado um cadastro no sistema
@Ter_pedidos_no_carrinho
Scenario: Acesso à página de pedidos com itens no carrinho
Given que eu esteja na tela inicial do sistema
When eu clico no botão de "pedidos"
Then é retornada a página de pedidos contendo meus pedidos
@Carrinho_vazio
Scenario: Acesso à página de pedidos sem itens no carrinho
Then é retornada a página de pedidos informando que "não existem
pedidos registrados"
@Ter_pedidos_no_carrinho
Scenario: Acesso à página de pedidos após login ter expirado
But meu token de acesso expirou
Then é retornada uma página informando que "é preciso estar logado para
visualizar os pedidos"
◆ Background → cenário
prévio necessário apenas
para a feature
◆ É possível haverem @tags
em cenário
◆ But → “exceção” dentre os
passos do cenário

44
#Esse é outro cenário de exemplo.
@Tag_criacao_usuarios
Feature: Criação de Usuários no sistema
Esse cenário de teste tem como objetivo realizar as validações para Criação de
Usuários no sistema.
Scenario: Exibição de cenário de erro ao tentar criar um novo usuário sem cadastrar
e-mail
Given que eu esteja logada no sistema
And que eu tenha autorização para criar usuários no sistema
When eu preencho o campo de "Nome" com "Nome Exemplo"
And eu preencho o campo de "Idade" com 22
And eu preencho o campo de "Estado Civil" com "Solteiro"
And eu preencho o campo de "Endereço" com "Rua Exemplo, 333 - Campinas, SP, Brasil"
And eu preencho o campo de "Por onde nos conheceu" com "Texto Exemplo"
And eu preencho o campo de "Algum campo específico demais" com "Valor de exemplo
específico demais"
But eu não preencho o campo "e-mail"
And eu clico no botão "criar"
Then eu recebo uma mensagem de erro informando que "campos obrigatórios não
preenchidos"
Scenario: Exibição de cenário de erro ao tentar criar um novo usuário sem cadastrar
Nome
When eu preencho o campo de "e-mail" com "email@provedor.com"
And eu preencho o campo de "Idade" com 22
And eu preencho o campo de "Estado Civil" com "Solteiro"
And eu preencho o campo de "Endereço" com "Rua Exemplo, 333 - Campinas, SP, Brasil"
And eu preencho o campo de "Por onde nos conheceu" com "Texto Exemplo"
And eu preencho o campo de "Algum campo específico demais" com "Valor de exemplo
específico demais"
But eu não preencho o campo "Nome"
Then eu recebo uma mensagem de erro informando que "campos obrigatórios não
preenchidos"
+ declarativo, - imperativo
#Esse é outro cenário de exemplo.
@Tag_criacao_usuarios
Feature: Criação de Usuários no sistema
validações para Criação de Usuários no sistema.
Scenario: Exibição de cenário de erro ao tentar criar um
novo usuário sem cadastrar e-mail
When eu preencho os campos obrigatórios
But eu não preencho o campo "e-mail"
Then eu recebo uma mensagem de erro informando que "campos
obrigatórios não preenchidos"
Scenario: Exibição de cenário de erro ao tentar criar um
novo usuário sem cadastrar Nome
When eu preencho os campos obrigatórios
But eu não preencho o campo "Nome"
Then eu recebo uma mensagem de erro informando que "campos
obrigatórios não preenchidos"

45
Mas cuidado...
#Esse é outro cenário de exemplo, mas zoado.
@Tag_login_usuarios
Feature: Login de Usuários no sistema
Esse cenário de teste tem como objetivo
realizar as validações para Login de Usuários
no sistema.
Scenario: Exibição de mensagem de sucesso ao
criar um novo usuário
Given Eu queira me cadastrar no sistema
When Eu faço o cadastro
Then Eu vejo a mensagem de sucesso
◆ Muito vago
◆ Inútil para servir de
documentação

Mas e pra codar
esse textão?
46

47
Step Definitions!
Temos os
const { Given, When, Then } = require('cucumber');
const assert = require('assert');
//Realização de uma soma simples
Given('que eu tenho uma variável com o valor numérico {int}', (firstnumero)
=> {
this.number = firstNumber;
})
When('eu incremento o valor desta variável com mais {int}', (newNumber) =>
{
this.number = (this.number) + newNumber
})
Then('o valor da variável passa a ser {int}', (result) => {
assert(this.number,result);
})
//Realização de uma expressão simples
When('eu multiplico o valor desta variável com pelo valor numérico {int}',
(newNumber) => {
this.number = (this.number) * newNumber
})
Given('adiciono o número {int}', function and(numberC) {
this.number += numberC;
});
Then('o valor da variável multiplicada passa a ser {int}', (result) => {
})
cenario-teste-matematico.js

48
Libs básicas:
◆ cucumber
◆ assert
◆ joi e joi-assert (mock)
“Como assim this.number? Onde
tá essa variável?”
◆ variável no contexto
Given('que eu tenho uma variável com o valor numérico {int}', (firstNumber)
=> {
})
{
})
})
(newNumber) => {
})
});
})

49
Given('que eu tenho uma variável com o valor numérico {int}',
(firstNumber) => {
})
{
})
})
(newNumber) => {
})
});
})
#Esse é um cenário de exemplo.
@Tag_cenario_exemplo
<numeroA>
When eu multiplico o valor desta variável com pelo valor
numérico <numeroB>
<resultado>
Examples:
| 1 | 2 | 2 | 4 |
| 3 | 4 | 5 | 17 |
cenario-teste-matematico.feature

50
(firstNumber) => {
})
{
})
})
(newNumber) => {
})
});
})
<numeroA>
numérico <numeroB>
<resultado>
Examples:
| 1 | 2 | 2 | 4 |
| 3 | 4 | 5 | 17 |

51
(firstNumber) => {
})
{
})
})
(newNumber) => {
})
});
})
<numeroA>
numérico <numeroB>
<resultado>
Examples:
| 1 | 2 | 2 | 4 |
| 3 | 4 | 5 | 17 |

52
(firstNumber) => {
})
{
})
})
(newNumber) => {
})
});
})
<numeroA>
numérico <numeroB>
<resultado>
Examples:
| 1 | 2 | 2 | 4 |
| 3 | 4 | 5 | 17 |

53
(firstNumber) => {
})
{
})
})
(newNumber) => {
})
});
})
<numeroA>
numérico <numeroB>
<resultado>
Examples:
| 1 | 2 | 2 | 4 |
| 3 | 4 | 5 | 17 |

54
(firstNumber) => {
})
{
})
})
(newNumber) => {
})
});
})
<numeroA>
numérico <numeroB>
<resultado>
Examples:
| 1 | 2 | 2 | 4 |
| 3 | 4 | 5 | 17 |

55
(firstNumber) => {
})
{
})
})
(newNumber) => {
})
});
})
<numeroA>
numérico <numeroB>
<resultado>
Examples:
| 1 | 2 | 2 | 4 |
| 3 | 4 | 5 | 17 |

Testes de criação de usuário
◆ Banco não-exclusivo pros testes
◆ Pré-requisito? Username não ter
sido criado ainda
◆ Como garanto? Verificando no
banco se o username já existe
→ todo teste precisa disso
◆ Faz parte do cenário de teste esse
pré-requisito?
Agora imaginem...
56

Tem como se
colocar passos
antes e depois de
todos os testes?
57

Claro! Temos o
arquivo
HOOKS!
58

59
hooks.js
Imports básicos
◆ Before
◆ BeforeAll
◆ After
◆ AfterAll
var {After, Before, BeforeAll, AfterAll} =
require('cucumber');
BeforeAll(function () {
// Será realizado antes de todos os cenários
});
Before({tags: "@foo"}, function () {
// Será realizado antes de cenários com a tag @foo
});
AfterAll(function () {
// Será realizado depois de todos os cenários
});
After({tags: "@foo"}, function () {
// Será realizado depois de cenários com a tag @foo
});

E o que colocar no before e no after?
60
After/AfterAll
◆ Preparação de base
(deleção/desassociação
de registros)
◆ Pós-requisito que não
faz parte do escopo do
cenário de teste
Before/BeforeAll
◆ Preparação de base
◆ Credenciais de
acesso
◆ Pré-requisito que não
faz parte do escopo
do cenário de teste

61
Gherkin
Step
Definitions
Cucumber
{
CTs
@tags
hooks

E é isso!
Alguma dúvida?
Algum questionamento?
62
(finjam que não dormiram )

63
Let’s Code!
“Talk is cheap. Show me the code!”

GraphQL e APIs: como manter a qualidade

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (8)

Semelhante a GraphQL e APIs: como manter a qualidade

Semelhante a GraphQL e APIs: como manter a qualidade (20)

Mais de Qaladies

Mais de Qaladies (9)

GraphQL e APIs: como manter a qualidade