آزمون

خارج از صفحه رندر کنید، کلیدها را فشار دهید و فریم را به‌صورت متن در آزمون بررسی کنید.

اپ این فصل در کنسول شما در حال اجراست. آن را با ⌘⌥JCtrl+Shift+J⌘⌥KCtrl+Shift+K⌘⌥C باز کنید (ابتدا ویژگی‌های توسعه‌دهنده را فعال کنید)، سپس امتحانش کنید.
تماشای فصل3:14

در این فصل

  • اولین تست شما
  • فشردن کلیدها
  • اجرا
  • اسنپ‌شات‌ها

@textjs/app/testing برنامهٔ شما را خارج از صفحه رندر می‌کند، کلیدها را فشار می‌دهد و فریم را به‌صورت متن ساده برمی‌گرداند. تست‌ها بدون مرورگر یا DevTools اجرا می‌شوند.

اولین تست شما

app/deployments/page.test.tsx+19tsx
افزوده‌شده: 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() اجرا می‌شود و فریم‌های حاصل را کامل پردازش می‌کند، بنابراین بررسی بعدی به‌روزرسانی را می‌بیند.

app/deployments/page.test.tsx+14tsx
افزوده‌شده: 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);افزوده‌شده: });

جدول علامت › را جلوی ردیف برجسته‌شده رسم می‌کند، بنابراین تست ↓ آن ردیف را پیدا می‌کند و کامیت آن را بررسی می‌کند. رقم‌ها بر اساس یک ستون مرتب می‌کنند و ستون چهارم ساخت است.

اجرا

bun test

این ابزار با هر اجراکننده‌ای که از تست‌های async پشتیبانی کند کار می‌کند: Bun، Vitest یا Jest. در کنسول، کلید Enter را برای اجرای مجموعهٔ تست‌ها و کلید f را برای خراب کردن یک تست و دیدن شکل شکست آن فشار دهید.

اسنپ‌شات‌ها

تابع toAnsi() فریم را به‌صورت ANSI با رنگ واقعی برمی‌گرداند و اسنپ‌شات‌هایی می‌سازد که پسرفت‌های رنگ را هم شناسایی می‌کنند:

expect(app.toAnsi()).toMatchSnapshot();

امتحان کنید

این Acme Deploys در پایان فصل است که در DevTools اجرا می‌شود. روی پد کلیک کنید، سپس از کلیدهای زیر استفاده کنید.

▼ 08 · آزمون

باز کردن کنسول

⌘⌥J
CtrlShiftJ
⌘⌥K
CtrlShiftK
⌘⌥C

برنامه در DevTools رندر می‌شود.ابتدا گزینهٔ «نمایش قابلیت‌ها برای توسعه‌دهندگان وب» را در تنظیمات Safari ← پیشرفته فعال کنید. سپس اینجا کلیک کنید و ⁦Enter⁩ را فشار دهید.

باز کردن در رایانه

این برنامه در کنسول DevTools رندر می‌شود که به مرورگر دسکتاپ نیاز دارد.

آزمون

2 پرسش

برای تکمیل فصل به همهٔ پرسش‌ها پاسخ دهید.

برای اجرای ⁦@textjs/app/testing⁩ چه لازم است؟

 

متد app.lastFrame() چه برمی‌گرداند؟