En nuestros desarrollos UI nos vamos a encontrar casos en los que todavía no tengamos disponible la API, por lo que para probar nuestras pantallas tendremos que mockearla.

Esto lo haremos en src/services/ en el proyecto Portal UI. Ahí se sigue la misma estructura de directorios que utilizamos para desarrollar las vistas: /grupo/proyecto. Ahí, tendremos por un lado el archivo js que contiene el servicio, y otros archivos js bajo la carpeta model para definir los datos. Veámoslo con ejemplos.

Si yo por ejemplo quiero mockear un servicio al que llamo MiServicio, tendré el archivo MiServicioMockService.js, en el que seguiré la misma estructura que tendré en el archivo de la API real, esto es, mismos nombres de métodos, para que el cambio a la API real sea únicamente cambiar el import. Importaremos nuestros archivos de modelo para coger los datos, y los métodos tendrán que devolver una promesa, del mismo modo que se hace en las llamadas a la API real. Ejemplo:

MiServicioMockService.js
import { randomIntFromInterval } from '../utils';

import Mesa from './models/Mesa';
import Silla from './models/Silla';

export default {
  sillas: () => {
    // Para devolver aleatoriamente entre uno y cinco elementos
    const random = randomIntFromInterval(1, 5);
    const returnData = [];
    for (let index = 0; index < random; index += 1) {
      returnData.push(Silla());
    }
    // Devolvemos los elementos mock
    return Promise.resolve(returnData);
  },
  mesa: (id) => {
    // Devolvemos el elemento mock
    return Promise.resolve(Mesa(id));
  }, 
};

Y para definir los datos, como comentamos, lo haremos en archivos js independientes para cada tipo de dato bajo la carpeta model. Por ejemplo, podemos definir Mesa.js:

Mesa.js
import chance from '@/services/asyncDataGenerator';

// Meto un parámetro id con valor aleatorio por defecto para poder pasárselo o no
export default (id = chance.integer({ min: 92154, max: 9692154 })) => ({
  id: id,
  descripcion: chance.sentence(),
  tipo: 'Mesa buenísima',
  numPatas: chance.integer({ min: 3, max: 33 }),
  fabricación: chance.date(),
  propietario: 'TICARUM',
});

Como vemos, únicamente se define un método que devuelve un objeto. Este objeto debe tener la misma estructura, o lo más parecida posible, a la que devolverá la API real. Como vemos utilizamos la librería Chance para generar valores aleatorios. Podemos consultar su documentación aquí: https://chancejs.com/



  • Sin etiquetas