Saltar al contenido
← Todos los ejercicios

La vista que reescribe el store

TypeScript · Vistas ordenadas en el store de tareas de una app de listas de tareas · APIs y contratos · dificultad 2/3 · ~8 min

Un compañero de equipo le pidió al asistente de IA: "Nuestro store de tareas guarda un solo array de tareas y la UI deriva vistas a partir de él: por prioridad, las más nuevas primero, solo tareas abiertas. Escribe los helpers de las vistas. Deben devolver arrays nuevos y no tocar nunca el array del store, porque varios componentes lo leen al mismo tiempo."

El código llegó con un docstring claro en cada helper y con tests en verde. El contrato que prometen los docstrings:

  • sortByPriority devuelve un array nuevo, con lo más urgente primero; las prioridades iguales mantienen su orden relativo.
  • newestFirst devuelve un array nuevo ordenado por createdAt, lo más nuevo primero.
  • openByPriority devuelve las tareas abiertas, con lo más urgente primero.
  • take devuelve las primeras n tareas de una vista.
  • Ninguno de los helpers modifica tasks.

Uno de los tests visibles incluso comprueba que la entrada queda intacta. Revisa los helpers frente al contrato completo, no solo el orden.

Repara el código hasta que pasen las pruebas ocultas.

code.ts

Pruebas visibles (pasan con el código tal como está)
import { describe, it, expect } from "@debunk/harness";
import { sortByPriority, newestFirst, openByPriority, type Task } from "./code";

const task = (id: string, priority: number, createdAt: number, done = false): Task => ({
  id,
  title: `Task ${id}`,
  priority,
  createdAt,
  done,
});

describe("task views", () => {
  it("sortByPriority puts the most urgent task first", () => {
    const view = sortByPriority([task("a", 2, 1), task("b", 5, 2), task("c", 3, 3)]);
    expect(view.map((t) => t.id)).toEqual(["b", "c", "a"]);
  });

  it("newestFirst orders by creation time, newest first", () => {
    const view = newestFirst([task("a", 1, 100), task("b", 1, 300), task("c", 1, 200)]);
    expect(view.map((t) => t.id)).toEqual(["b", "c", "a"]);
  });

  it("openByPriority leaves the original list untouched", () => {
    const tasks = [task("a", 1, 1), task("b", 5, 2, true), task("c", 3, 3)];
    const view = openByPriority(tasks);
    expect(view.map((t) => t.id)).toEqual(["c", "a"]);
    expect(tasks.map((t) => t.id)).toEqual(["a", "b", "c"]);
  });
});

Ejercicios parecidos