Testes
Renderize fora da tela, pressione teclas e faça asserções sobre o quadro como texto.
Neste capítulo
- Seu primeiro teste
- Pressionar teclas
- Executar
- Snapshots
@textjs/app/testing renderiza seu app fora da tela, pressiona teclas e retorna o quadro como texto simples. Os testes rodam sem navegador ou DevTools.
Seu primeiro teste
Adicionado: import { afterEach, beforeEach, expect, mock, spyOn, test } from "bun:test";Adicionado: import { cleanup, render } from "@textjs/app/testing";Adicionado: import { DEPLOYMENTS } from "../../lib/deployments";Adicionado: import DeploymentsPage from "./page";Adicionado: Adicionado: beforeEach(() => {Adicionado: spyOn(globalThis, "fetch").mockResolvedValue(Response.json(DEPLOYMENTS));Adicionado: });Adicionado: Adicionado: afterEach(() => {Adicionado: mock.restore();Adicionado: return cleanup();Adicionado: });Adicionado: Adicionado: test("lists every deployment", async () => {Adicionado: const app = await render(<DeploymentsPage />, { cols: 80, rows: 12 });Adicionado: await app.waitForText("feat: stream cells downward");Adicionado: expect(app.lines()).toHaveLength(12);Adicionado: });A página busca dados em /api/deployments, que não tem servidor durante bun test, então beforeEach simula fetch com os mesmos dados. render usa uma grade de 80×24 por padrão. lastFrame() retorna o quadro inteiro como texto, lines() o retorna linha por linha, e cell(x, y) fornece o caractere e as cores de uma única célula.
Pressionar teclas
press aceita as mesmas strings de teclas que useKeymap. Cada chamada roda dentro de act() e processa os quadros resultantes, para que a próxima asserção veja a atualização.
Adicionado: test("↓ moves the highlight", async () => {Adicionado: const app = await render(<DeploymentsPage />);Adicionado: await app.waitForText("feat: stream cells downward");Adicionado: await app.press("down");Adicionado: const row = app.lines().find((line) => line.includes("›"));Adicionado: expect(row).toContain("perf: merge spans across rows");Adicionado: });Adicionado: Adicionado: test("4 sorts by build time", async () => {Adicionado: const app = await render(<DeploymentsPage />);Adicionado: await app.waitForText("Build");Adicionado: await app.press("4"); // sort by the 4th columnAdicionado: expect(app.locate("12s")?.y).toBeLessThan(app.locate("52s")?.y ?? 0);Adicionado: });A tabela desenha › antes da linha destacada, então o teste de ↓ encontra essa linha e verifica seu commit. Os dígitos ordenam por uma coluna, e a quarta coluna é Build.
Executar
bun testFunciona com qualquer executor que aceite testes async: Bun, Vitest ou Jest. No console, pressione Enter para executar a suíte e f para fazer um teste falhar e ver como uma falha aparece.
Snapshots
toAnsi() retorna o quadro como ANSI truecolor, gerando snapshots que também detectam regressões de cor:
expect(app.toAnsi()).toMatchSnapshot();Experimentar
Este é Acme Deploys ao final do capítulo, rodando no DevTools. Clique na área de entrada e use as teclas abaixo.
Abrir o console
O app renderiza no DevTools.Primeiro ative “Mostrar recursos para desenvolvedores web” em Ajustes do Safari → Avançado. Depois clique aqui e pressione Enter.
Abrir em um computador
Este app renderiza no console do DevTools, que precisa de um navegador de computador.
Questionário
2 perguntasResponda a todas as perguntas para concluir o capítulo.