Mocks en las APIs

¿Qué es un mock?

Un mock se refiere a una herramienta utilizada en pruebas unitarias para simular el comportamiento de partes del sistema que no se desean o no se pueden probar directamente. Los mocks se implementan como objetos que siguen una interfaz específica, pero en lugar de realizar operaciones reales, devuelven valores predefinidos o simulados. Esto permite a los desarrolladores aislar y probar unidades de código de manera más eficiente, sin depender de componentes externos o de la infraestructura completa del sistema.

Los mocks son especialmente útiles para:

• Prevenir la inclusión de requisitos no testeados: Al simular el comportamiento de las dependencias externas, los mocks permiten centrarse en el código que se está probando, evitando la necesidad de interactuar con sistemas externos que podrían ser lentos, inestables o difíciles de configurar para las pruebas.
• Validar el estado de los componentes: Los mocks pueden ayudar a verificar si una prueba pasa o falla, proporcionando una forma de aislar y probar el estado de los componentes del software de manera controlada.
• Simular datos falsos: En lugar de acceder a recursos remotos como bases de datos o servicios web, los mocks permiten el uso de datos falsos, lo que asegura que las pruebas sean rápidas y estables, independientemente de la disponibilidad o el estado de los recursos externos.

En resumen, los mocks son una técnica esencial en las pruebas unitarias que facilita la creación de pruebas robustas y confiables, permitiendo a los desarrolladores aislar y probar partes del código de manera efectiva sin depender de componentes externos o de la infraestructura completa del sistema [1][3].

Pasos a seguir para usar un mock

1. Crear un mock: Crear un objeto que simule el comportamiento de la dependencia externa.

const lateralInfo = {
  title: "¿Qué es Alebat?",
  description:
    "Alebat Education es una empresa de formación online especializada en el sector sanitario. Nuestro objetivo es ofrecer una formación de calidad a profesionales de la salud, con el fin de mejorar la calidad asistencial y la seguridad del paciente.",
};

export default lateralInfo;

2. Añadir en el archivo mockApi.ts el mock creado.

import providers from "@/mock/providers";
import lateralInfo from "@/mock/lateralInfo";
import videoSection from "@/mock/videoSection"; // mock importado

class HttpClient {
  async get(url: string) {
    try {
      if (!url) throw new Error("URL is required");
      if (typeof url !== "string") throw new Error("Invalid URL");

      const response = await new Promise((resolve, reject) => {
        setTimeout(() => {
          if (url === "/providers") resolve(providers);
          if (url === "/lateralInfo") resolve(lateralInfo);
          if (url === "/videoSection") resolve(videoSection); // mock añadido
        }, 500);
      });
      return response;
    } catch (error) {
      console.log(error);
    }
  }
}

export const httpClientMock = new HttpClient(); // exportar el mock

3. Crear el servicio para una colección

• En la carpeta services crear el servicio, por ejemplo lateralInfoApiServices.js

import { httpClientMock } from "@/services/mockApi.ts";

export const getMockLateralInfo = async () => {
  return await httpClientMock.get("/lateralInfo");
};

3.1 Crear el servicio para un singletype

• En la carpeta de services, en el archivo singleTypesApiServices.js añadir el servicio para el singletype.

import { httpClient } from "@/services/useFetchApi"; // importar el servicio real
import { httpClientMock } from "@/services/mockApi.ts"; // importar el mock

/**
 * Servicio para obtener la información de la sección de videoblock
 */
export const getVideoSection = async () => {
  return await httpClientMock.get("/videoSection");
};

4. Utilizar el mock en el componente

import { getMockLateralInfo } from "@/services/lateralInfoApiServices"; // Mock importado colección
import { getVideoSection } from "@/services/singleTypesApiServices"; // Mock importado singletype

// Objetos que contienen la información de los mocks
const lateralInfo = await getMockLateralInfo();
const videoSection = await getVideoSection();