Produtividade no front-end com a utilização de mocks.

Durante o processo de desenvolvimento de uma aplicação é provável que em algum momento você irá desejar realizar determinado teste de uma feature (funcionalidade do sistema que entrega um benefício ou resolve um problema) que ainda não foi desenvolvida pelo back-end do projeto.

Todo esse processo é pensado ignorando a utopia, onde a logística de um projeto funciona perfeitamente e as tarefas são distribuídas de forma que o desenvolvimento de todas as partes do mesmo ensamblem, porém o universo é entropia, portanto comumente são utilizados mocks para realizar esse teste de integração.

Mas o que é um mock?

Um mock é a abstração do comportamento de uma entidade que ele está representando. Baseado no comportamento citado acima, o comportamento pode representar o retorno de um api rest, uma vez que a mesma ainda não foi desenvolvida, mas pode-se considerar um padrão de retorno.

Como criar um mock?

mockapi.io

Hodiernamente existem diversas técnicas e tecnologias para realizar a construção de uma abstração de um objeto. O mockapi.io é um desses serviços que provem diversas funcionalidades para construção de um mock, entre elas está a geração de dados falsos para simular de forma semelhante informações reais.

Após toda configuração, o mockapi gera um endereço para vocês realizar os teste baseados em uma api rest.

curl -i -H "Accept: application/json" -H "Content-Type: application/json" -X GET https://6067732f98f405001728edf3.mockapi.io/users/
HTTP/1.1 200 OK
Server: Cowboy
Connection: keep-alive
X-Powered-By: Express
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET,PUT,POST,DELETE,OPTIONS
Access-Control-Allow-Headers: X-Requested-With,Content-Type,Cache-Control,access_token
Content-Type: application/json
Content-Length: 5479
Etag: "-1074860086"
Vary: Accept-Encoding
Date: Fri, 02 Apr 2021 21:36:29 GMT
Via: 1.1 vegur

[{"id":"1","createdAt":"2021-04-02T16:50:39.873Z","name":"Rudolph Ryan","avatar":"https://s3.amazonaws.com/uifaces/faces/twitter/jacobbennett/128.jpg"},
{"id":"2","createdAt":"2021-04-02T02:42:21.504Z","name":"Alvera Predovic","avatar":"https://s3.amazonaws.com/uifaces/faces/twitter/paulfarino/128.jpg"},
{"id":"3","createdAt":"2021-04-01T23:53:59.741Z","name":"Jedediah Kirlin","avatar":"https://s3.amazonaws.com/uifaces/faces/twitter/vanchesz/128.jpg"},
{"id":"4","createdAt":"2021-04-02T01:43:26.824Z","name":"Twila McDermott Jr.","avatar":"https://s3.amazonaws.com/uifaces/faces/twitter/simobenso/128.jpg"},
{"id":"5","createdAt":"2021-04-02T17:12:51.473Z","name":"Eli Feil","avatar":"https://s3.amazonaws.com/uifaces/faces/twitter/rez___a/128.jpg"}]

O mockapi é extremamente competente no âmbito que se compromete a resolver os problemas, porém sua versão gratuita lhe permite a criação de apenas uma rota.

json-server

Diferente do mockapi.io, o json-server é um pacote do npm que estimula a criação de um mock baseado em um arquivo json.

{
  "posts": [
    { "id": 1, "title": "json-server", "author": "typicode" }
  ],
  "comments": [
    { "id": 1, "body": "some comment", "postId": 1 }
  ],
  "profile": { "name": "typicode" }
}

Utilizando:

json-server --watch db.json

Considerações

Ambos os serviços são de suma importância caso você deseja solucionar os problemas citados acima. Espero de coração que esse artigo seja útil no seu âmbito profissional e pessoal. O tempo é muito importante, obrigado por compartilhar um pouco do seu comigo 😊.