Kiểm thử
Render ngoài màn hình, nhấn phím và kiểm tra frame dưới dạng văn bản.
Trong chương này
- Kiểm thử đầu tiên
- Nhấn phím
- Chạy kiểm thử
- Snapshot
@textjs/app/testing render ứng dụng ngoài màn hình, nhấn phím và trả về frame dưới dạng văn bản thuần. Kiểm thử chạy mà không cần trình duyệt hay DevTools.
Kiểm thử đầu tiên
Đã thêm: import { afterEach, beforeEach, expect, mock, spyOn, test } from "bun:test";Đã thêm: import { cleanup, render } from "@textjs/app/testing";Đã thêm: import { DEPLOYMENTS } from "../../lib/deployments";Đã thêm: import DeploymentsPage from "./page";Đã thêm: Đã thêm: beforeEach(() => {Đã thêm: spyOn(globalThis, "fetch").mockResolvedValue(Response.json(DEPLOYMENTS));Đã thêm: });Đã thêm: Đã thêm: afterEach(() => {Đã thêm: mock.restore();Đã thêm: return cleanup();Đã thêm: });Đã thêm: Đã thêm: test("lists every deployment", async () => {Đã thêm: const app = await render(<DeploymentsPage />, { cols: 80, rows: 12 });Đã thêm: await app.waitForText("feat: stream cells downward");Đã thêm: expect(app.lines()).toHaveLength(12);Đã thêm: });Trang gọi /api/deployments, nhưng không có máy chủ khi chạy bun test, nên beforeEach tạo stub cho fetch bằng cùng dữ liệu đó. render mặc định dùng lưới 80×24. lastFrame() trả về toàn bộ frame dưới dạng văn bản, lines() trả về từng dòng, còn cell(x, y) cho bạn ký tự và màu sắc của một ô.
Nhấn phím
press nhận cùng chuỗi phím như useKeymap. Mỗi lệnh gọi chạy trong act() và xử lý hết các frame phát sinh, nên phép khẳng định tiếp theo thấy trạng thái cập nhật.
Đã thêm: test("↓ moves the highlight", async () => {Đã thêm: const app = await render(<DeploymentsPage />);Đã thêm: await app.waitForText("feat: stream cells downward");Đã thêm: await app.press("down");Đã thêm: const row = app.lines().find((line) => line.includes("›"));Đã thêm: expect(row).toContain("perf: merge spans across rows");Đã thêm: });Đã thêm: Đã thêm: test("4 sorts by build time", async () => {Đã thêm: const app = await render(<DeploymentsPage />);Đã thêm: await app.waitForText("Build");Đã thêm: await app.press("4"); // sort by the 4th columnĐã thêm: expect(app.locate("12s")?.y).toBeLessThan(app.locate("52s")?.y ?? 0);Đã thêm: });Bảng vẽ › trước dòng đang tô sáng, nên kiểm thử ↓ tìm dòng đó và kiểm tra commit của dòng. Các phím số sắp xếp theo cột, và cột thứ tư là Build.
Chạy kiểm thử
bun testCông cụ này hoạt động với mọi trình chạy hỗ trợ kiểm thử async: Bun, Vitest hoặc Jest. Trong console, nhấn Enter để chạy bộ kiểm thử và f để làm một kiểm thử thất bại và xem lỗi trông như thế nào.
Snapshot
toAnsi() trả về frame dưới dạng ANSI truecolor, tạo snapshot phát hiện cả lỗi hồi quy màu sắc:
expect(app.toAnsi()).toMatchSnapshot();Dùng thử
Đây là Acme Deploys ở cuối chương, đang chạy trong DevTools. Nhấp vào vùng focus, rồi dùng các phím bên dưới.
Mở console
Ứng dụng render trong DevTools.Trước tiên bật “Hiển thị tính năng cho nhà phát triển web” trong Cài đặt Safari → Nâng cao. Sau đó nhấp vào đây và nhấn Enter.
Mở trên máy tính
Ứng dụng này render trong console của DevTools, cần trình duyệt trên máy tính.
Bài trắc nghiệm
2 câu hỏiTrả lời mọi câu hỏi để hoàn thành chương.