الاختبار
اعرض خارج الشاشة، واضغط المفاتيح وتحقّق من الإطار كنص.
في هذا الفصل
- الاختبار الأول
- ضغط المفاتيح
- التشغيل
- اللقطات
تعرض الحزمة @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);المضاف: });يرسم الجدول › أمام الصف المميز، لذا يعثر اختبار ↓ على ذلك الصف ويتحقق من الإيداع الخاص به. ترتب الأرقام حسب عمود، والعمود الرابع هو «البناء».
التشغيل
bun testيعمل مع أي مشغّل يدعم اختبارات async: Bun أو Vitest أو Jest. في وحدة التحكم، اضغط Enter لتشغيل مجموعة الاختبارات و f لجعل اختبار يفشل ورؤية شكل الفشل.
اللقطات
تعيد الدالة toAnsi() الإطار بصيغة ANSI ذات الألوان الحقيقية، مما ينتج لقطات تكشف أيضًا التراجعات في الألوان:
expect(app.toAnsi()).toMatchSnapshot();جرّبه
هذا تطبيق Acme Deploys في نهاية الفصل، يعمل في DevTools. انقر اللوحة، ثم استخدم المفاتيح أدناه.
فتح وحدة التحكم
يُعرض التطبيق في DevTools.فعّل أولًا «إظهار الميزات لمطوري الويب» في إعدادات Safari → متقدم. ثم انقر هنا واضغط Enter.
الفتح على حاسوب مكتبي
يُعرض هذا التطبيق في وحدة تحكم DevTools، التي تتطلب متصفحًا على حاسوب مكتبي.
اختبار
2 سؤالانأجب عن كل سؤال لإكمال الفصل.