ٹیسٹنگ
آف اسکرین رینڈر کریں، کلیدیں دبائیں اور فریم کو متن کی صورت میں جانچیں۔
اس باب میں
- آپ کا پہلا ٹیسٹ
- کیز دبانا
- ٹیسٹ چلانا
- اسنیپ شاٹس
@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() فریم کو truecolor ANSI میں لوٹاتا ہے، جس سے ایسے اسنیپ شاٹس بنتے ہیں جو رنگوں کی ریگریشن بھی پکڑتے ہیں:
expect(app.toAnsi()).toMatchSnapshot();آزمائیں
یہ باب کے اختتام پر Acme Deploys ہے، جو DevTools میں چل رہی ہے۔ پیڈ پر کلک کریں، پھر نیچے دی گئی کلیدیں استعمال کریں۔
کونسول کھولیں
ایپ DevTools میں رینڈر ہوتی ہے۔پہلے Safari کی ترتیبات → ایڈوانسڈ میں “ویب ڈیولپرز کے لیے فیچرز دکھائیں” آن کریں۔ پھر یہاں کلک کریں اور Enter دبائیں۔
ڈیسک ٹاپ پر کھولیں
یہ ایپ DevTools کونسول میں رینڈر ہوتی ہے، جس کے لیے ڈیسک ٹاپ براؤزر چاہیے۔
کوئز
2 سوالاتباب مکمل کرنے کے لیے ہر سوال کا جواب دیں۔