Тестирование
Рендерите вне экрана, нажимайте клавиши и проверяйте кадр как текст.
В этой главе
- Ваш первый тест
- Нажатия клавиш
- Запустить тесты
- Снимки
@textjs/app/testing рендерит ваше приложение вне экрана, нажимает клавиши и возвращает кадр в виде обычного текста. Тесты выполняются без браузера и DevTools.
Ваш первый тест
Добавлено: import { afterEach, beforeEach, expect, mock, spyOn, test } from "bun:test";Добавлено: import { cleanup, render } from "@textjs/app/testing";Добавлено: import { DEPLOYMENTS } from "../../lib/deployments";Добавлено: import DeploymentsPage from "./page";Добавлено: Добавлено: beforeEach(() => {Добавлено: spyOn(globalThis, "fetch").mockResolvedValue(Response.json(DEPLOYMENTS));Добавлено: });Добавлено: Добавлено: afterEach(() => {Добавлено: mock.restore();Добавлено: return cleanup();Добавлено: });Добавлено: Добавлено: test("lists every deployment", async () => {Добавлено: const app = await render(<DeploymentsPage />, { cols: 80, rows: 12 });Добавлено: await app.waitForText("feat: stream cells downward");Добавлено: expect(app.lines()).toHaveLength(12);Добавлено: });Страница запрашивает /api/deployments, для которого при запуске bun test нет сервера, поэтому beforeEach подменяет fetch, возвращая те же данные. По умолчанию render использует сетку 80×24. lastFrame() возвращает весь кадр в виде текста, lines() возвращает его построчно, а cell(x, y) возвращает символ и цвета отдельной ячейки.
Нажатия клавиш
press принимает те же строковые обозначения клавиш, что и useKeymap. Каждый вызов выполняется внутри act() и выводит полученные кадры, поэтому следующая проверка видит обновление.
Добавлено: test("↓ moves the highlight", async () => {Добавлено: const app = await render(<DeploymentsPage />);Добавлено: await app.waitForText("feat: stream cells downward");Добавлено: await app.press("down");Добавлено: const row = app.lines().find((line) => line.includes("›"));Добавлено: expect(row).toContain("perf: merge spans across rows");Добавлено: });Добавлено: Добавлено: test("4 sorts by build time", async () => {Добавлено: const app = await render(<DeploymentsPage />);Добавлено: await app.waitForText("Build");Добавлено: await app.press("4"); // sort by the 4th columnДобавлено: expect(app.locate("12s")?.y).toBeLessThan(app.locate("52s")?.y ?? 0);Добавлено: });Таблица рисует › перед выделенной строкой, поэтому тест для ↓ находит эту строку и проверяет её коммит. Цифры включают сортировку по столбцу, а четвёртый столбец называется Build.
Запустить тесты
bun testЭто работает с любым инструментом запуска, который поддерживает тесты с async: Bun, Vitest или Jest. В консоли нажмите Enter, чтобы запустить набор тестов, и f, чтобы сломать тест и посмотреть, как выглядит сбой.
Снимки
toAnsi() возвращает кадр в формате ANSI с цветами truecolor, что позволяет создавать снимки, которые выявляют и регрессии цветов:
expect(app.toAnsi()).toMatchSnapshot();Попробовать
Это Acme Deploys в конце главы, работающее в DevTools. Нажмите на панель, затем используйте клавиши ниже.
Открыть консоль
Приложение рендерится в DevTools.Сначала включите «Показывать функции для веб-разработчиков» в Safari: «Настройки» → «Дополнения». Затем щёлкните здесь и нажмите Enter.
Открыть на компьютере
Это приложение рендерится в консоли DevTools, для которой нужен браузер на компьютере.
Тест
2 вопросаОтветьте на все вопросы, чтобы завершить главу.