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.

Ứng dụng của chương này đang chạy trong console của bạn. Mở console bằng ⌘⌥JCtrl+Shift+J⌘⌥KCtrl+Shift+K⌘⌥C (bật tính năng dành cho nhà phát triển trước), rồi dùng thử.
Xem chương3:14

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

app/deployments/page.test.tsx+19tsx
Đã 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.

app/deployments/page.test.tsx+14tsx
Đã 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 test

Cô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.

▼ 08 · Kiểm thử

Mở console

⌘⌥J
CtrlShiftJ
⌘⌥K
CtrlShiftK
⌘⌥C

Ứ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ỏi

Trả lời mọi câu hỏi để hoàn thành chương.

@textjs/app/testing cần gì để chạy?

 

app.lastFrame() trả về gì?