Mock Client

La clase MockClient<T> es una utilidad genérica diseñada para simular peticiones asincrónicas.

Es especialmente útil en entornos de desarrollo y pruebas, donde no se desea o no se puede realizar llamadas reales a servicios externos o APIs.

Esta clase permite inyectar datos simulados (mock data) y obtenerlos mediante una función get() que simula una latencia de red utilizando setTimeout. Es ideal para pruebas unitarias, desarrollo frontend sin backend disponible, y demostraciones de prototipos.

---

Implementación del Util

export class MockClient<T> {
  // Datos simulados que serán retornados al llamar a `get()`
  private mockData: T;

  // Se recibe la data mock como argumento al crear la instancia
  constructor(mockData: T) {
    this.mockData = mockData;
  }

  /**
   * Simula una llamada asíncrona con una pequeña espera (200 ms).
   * @returns Promise<T> - Devuelve la data simulada
   */
  async get(): Promise<T> {
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve(this.mockData);
      }, 2e2); // 200 milisegundos
    });
  }
}

Ejemplo de Uso

Pruebas unitarias sin backend real Útil para testear componentes o lógica sin depender de respuestas de red reales.

const mockUser = { id: 1, name: "Alice" };
const userClient = new MockClient(mockUser);

const data = await userClient.get();
console.log(data); // ➜ { id: 1, name: "Alice" }

Prototipado de componentes que esperan datos asíncronos Ideal cuando estás desarrollando un componente como un Card, List o Table que depende de una petición.

const mockPosts = [
  { id: 1, title: "Hello World" },
  { id: 2, title: "MDX + Nuxt = ❤️" },
];

const postClient = new MockClient(mockPosts);

onMounted(async () => {
  const posts = await postClient.get();
  console.log(posts); // ➜ Simula una llamada con posts de prueba
});

Evitar dependencias de red en entornos offline Útil cuando necesitas desarrollar una interfaz sin acceso a una API real, como en viajes o entornos cerrados.

const offlineData = new MockClient({ status: "offline mode active" });

offlineData.get().then(console.log); // ➜ { status: "offline mode active" }