Pruebas
Renderiza fuera de pantalla, pulsa teclas y comprueba el fotograma como texto.
En este capítulo
- Tu primera prueba
- Pulsar teclas
- Ejecutar las pruebas
- Instantáneas
@textjs/app/testing renderiza tu app fuera de pantalla, pulsa teclas y devuelve el fotograma como texto sin formato. Las pruebas se ejecutan sin navegador ni DevTools.
Tu primera prueba
Añadido: import { afterEach, beforeEach, expect, mock, spyOn, test } from "bun:test";Añadido: import { cleanup, render } from "@textjs/app/testing";Añadido: import { DEPLOYMENTS } from "../../lib/deployments";Añadido: import DeploymentsPage from "./page";Añadido: Añadido: beforeEach(() => {Añadido: spyOn(globalThis, "fetch").mockResolvedValue(Response.json(DEPLOYMENTS));Añadido: });Añadido: Añadido: afterEach(() => {Añadido: mock.restore();Añadido: return cleanup();Añadido: });Añadido: Añadido: test("lists every deployment", async () => {Añadido: const app = await render(<DeploymentsPage />, { cols: 80, rows: 12 });Añadido: await app.waitForText("feat: stream cells downward");Añadido: expect(app.lines()).toHaveLength(12);Añadido: });La página solicita /api/deployments, que no tiene servidor al ejecutar bun test, por lo que beforeEach sustituye fetch por una simulación con los mismos datos. render usa una cuadrícula de 80×24 por defecto. lastFrame() devuelve el fotograma completo como texto, lines() lo devuelve fila por fila y cell(x, y) te da el carácter y los colores de una sola celda.
Pulsar teclas
press acepta las mismas cadenas de teclas que useKeymap. Cada llamada se ejecuta dentro de act() y procesa los fotogramas resultantes, de modo que la siguiente aserción ve la actualización.
Añadido: test("↓ moves the highlight", async () => {Añadido: const app = await render(<DeploymentsPage />);Añadido: await app.waitForText("feat: stream cells downward");Añadido: await app.press("down");Añadido: const row = app.lines().find((line) => line.includes("›"));Añadido: expect(row).toContain("perf: merge spans across rows");Añadido: });Añadido: Añadido: test("4 sorts by build time", async () => {Añadido: const app = await render(<DeploymentsPage />);Añadido: await app.waitForText("Build");Añadido: await app.press("4"); // sort by the 4th columnAñadido: expect(app.locate("12s")?.y).toBeLessThan(app.locate("52s")?.y ?? 0);Añadido: });La tabla dibuja › delante de la fila resaltada, así que la prueba de ↓ encuentra esa fila y comprueba su commit. Los dígitos ordenan por una columna, y la cuarta columna es Build.
Ejecutar las pruebas
bun testFunciona con cualquier ejecutor que admita pruebas async: Bun, Vitest o Jest. En la consola, pulsa Enter para ejecutar la suite y f para hacer que falle una prueba y ver cómo se muestra el fallo.
Instantáneas
toAnsi() devuelve el fotograma como ANSI con color verdadero, lo que permite crear instantáneas que también detectan regresiones de color:
expect(app.toAnsi()).toMatchSnapshot();Probar
Esta es Acme Deploys al final del capítulo, ejecutándose en DevTools. Haz clic en el panel y usa las teclas de abajo.
Abrir la consola
La app se renderiza en DevTools.Primero activa «Mostrar funciones para desarrolladores web» en Configuración de Safari → Avanzado. Luego haz clic aquí y pulsa Enter.
Abrir en un equipo de escritorio
Esta app se renderiza en la consola de DevTools, que requiere un navegador de escritorio.
Cuestionario
2 preguntasResponde todas las preguntas para completar el capítulo.