C’est quoi un mock ?

Un mock est un objet fictif qui permet de simuler un comportement réel.
Ce concept a été inventé pour tester des bouts de code en isolant des objets inaccessibles ou non implémentés.

Source : https://fr.wikipedia.org/wiki/Mock_(programmation_orient%C3%A9e_objet)

C’est quoi le lien avec kakapo.js ?

Une librairie géniale et assez peu connue existe, il s’agit de kakapo.js.
Cette librairie permet d’intercepter les requêtes HTTP et renvoyer la réponse de son choix, le tout via une API déclarative très élégante.
Il est possible d’intercepter les principales méthodes HTTP d’une API (get, post, put, delete), générer des fausses données grâce à un système d’entité, et de faire des traitements avant de renvoyer les réponses.

La documentation est très bien faite et vous serez séduits par la simplicité d’utilisation.

A noter également, cette librairie est disponible pour SWIFT : https://github.com/devlucky/Kakapo

A quoi ça sert ?

Il y a plusieurs avantages à utiliser des mocks dans votre projet :

• Des réponses instantanés de votre API car il y n’y aura plus d’appel réseau
• Vous serez donc isolés des coupures réseau
• Des réponses constantes qui vous éviteront des erreurs dues à des bugs de l’API
• Arriver dans votre appli sur une page qui contient déjà des données (fixtures) et ne pas avoir à refaire le parcours utilisateur
• Se rendre compte de l’ihm finale et d’éventuels bugs au niveau du layout (overflow, scroll) et de la gestion du texte (troncature des phrases)
• Créer des tests unitaires basés sur des vraies données
• Créer des tests d’ihm rapide

Concrètement comment on fait ?

Mise en place

En quelques lignes, on met en place Kakapo et on peut intercepter les requêtes GET vers une route /users.

Ces exemples sont tirés du site officiel.

import {Router, Server} from 'Kakapo';
  
const router = new Router();

router.get('/users', _ => {
  return [{
    id: 1,
    name: 'Hector'
  }, {
    id: 2,
    name: 'Zarco'
  }]
});

router.get('/users/:user_id', request => {
  const userId = request.params.user_id;
  return [{
    id: userId,
    name: 'PA'
  }];
});

const server = new Server();

server.use(router);

Ces quelques lignes nous montrent la puissance et la facilité d’écriture de Kakapo.
En effet, une requête fetch('/users') sera donc interceptée par le Router et renverra un tableau de deux utilisateurs.
Si on rajoute l’id de l’utilisateur fetch('/users/3'), on obtient une réponse qui ne contient qu’un seul utilisateur.

Aller plus loin grâce à Database

Kakapo fournit un outil très pratique pour générer des données (grâce à Faker.js). On peut non seulement générer des données lors de l’initialisation, mais également en rajouter au fur et à mesure de l’utilisation de notre application.

import {Database} from 'Kakapo';

const database = new Database();

database.register('user', faker => {
  return {
    firstName: faker.name.firstName,
    lastName: faker.name.lastName,
    age: faker.random.number
  };
});

database.create('user', 5);

---
router.get('/users', (request, db) => {
  return db.all('user');
});

Ce code permet de créer 5 utilisateurs avec des données aléatoires, le routeur renverra un tableau contenant nos nouvelles données.

Pour ajouter un nouvel utilisateur, rien de plus simple

router.post('/users', (request, db) => {
  const user = JSON.parse(request.body);

  db.push('user', user);

  return user;
});

On peut également s’amuser à modifier un utilisateur lors d’une requête PUT ou en supprimer lors d’une requête DELETE.


router.put('/users/:user_id', (request, db) => {
  const newLastName = JSON.parse(request.body).lastName;
  const user = db.findOne('user', request.params.user_id);

  user.lastName = newLastName;
  user.save();

  return user;
});

router.delete('/users/:user_id', (request, db) => {
  const user = db.findOne('user', request.params.user_id);
  const code = user ? 200 : 400;
  const body = {code};
  
  user && user.delete();

  return new KakapoResponse(code, body);
});

Cas concret

Pour terminer, je vous propose un exemple d’utilisation plus complet et prêt à être intégré dans votre projet.

Crédit photo : Mark Carwardine/NPL/Minden