د بیلابیلو ازموینه د بیلابیلو ازموینه رامینځته کول: د انټرنېټ ازموینې چې کولی شي د رامینځته کولو او د رامینځته کولو لپاره

ټیسټینګ د ستونزه کار دی. د بشپړ کڅوړې غوښتنلیکونو ازموینې ډیر ستونزه ده. تاسو باید د frontend، backend، ډاټاټا، شبکې او نور سره کار واخلئ. لومړی، البته، تاسو خپل برخو، فعالیتونه او ماډلونه په انفرادي ډول ازموینه کړئ. بيا تاسو د انټراټیټ ازموینې لیکل کړئ ترڅو ډاډه وکړئ چې دوی سره یوځای شي. تاسو کولی شئ حتی د ټولو غوښتنلیکونو لپاره ځینې end-to-end ازموینې اضافه کړئ ترڅو واقعي کاروونکي تعقیب کړئ. مګر بیا د خوځښت عوامل لري: کله چې څه غلط شي، څه به ترسره شي؟ کله چې د شبکې چټک یا غیر قابل اعتماد دی؟ کله چې د بکسینډ کم شوی دی، څه به ترسره شي؟ یو غوښتنلیک چې په خوشحاله پړاو کې په بشپړه توګه کار کوي، کولی شي په اسانۍ سره کله چې څه ناڅاپي به ترسره شي په اسانۍ سره خراب شي. دا امکان نلري چې د سیسټم په هر ډول ډول ډول چمتو کړي، په ځانګړي ډول کله چې ډیری برخو په پیچلي ډول تبادله کوي، مګر موږ کولی شو چمتو کړئ چې زموږ غوښتنلیک په ناڅاپي شرایطو کې څنګه چلند کوي. په دې مقاله کې، موږ به څنګه په یو Next.js غوښتنلیک کې د ګوتو د ګوتو د ګوتو د ګوتو د ګوتو د ګوتو د ګوتو د ګوتو د ګوتو د ګوتو د ګوتو د ګوتو د ګوتو د ګوتو د ګوتو د ګوتو د ګوتو د ګوتو د ګوتو د ګوتو د ګوتو د ګوتو د ګوتو د ګوتو د ګوتو د ګوتو د ګوتو د ګوتو د ګوتو د ګوتو د ګوتو د ګوتو د ګوتو د ګوتو د ګوتو د ګوتو د ګوتو د ګوتو د ګوتو د ګوتو د ګوتو د ګوتو د ګوتو د ګوتو د ګوتو د App ښه، لومړی موږ به د تجربو لپاره یو اپلیکیشن ته اړتيا وي. د مقاله تمرکز کولو لپاره، زه د کمېسيون بشپړ کچې Next.js اپلیکیشن جوړ کړ نو تاسو ته اړتیا نلري. دا اپلیکیشن یو ساده رسیپ اپلیکیشن دی چې تاسو کولی شئ د رسیپلوډونو لیست وګورئ، رسیپلوډ تفصيلات وګورئ، او د دوی په څیر. دا د styling لپاره Tailwind CSS او TypeScript لپاره د ډول امنیت کاروي. کله چې تاسو یو روښانه راغلاست، د Like count په frontend کې به د احصایې په ښه توګه روزنه ورکوي، په داسې حال کې چې د backend د غوښتنې پروسس کوي. که د backend call ناکام کیږي، د Like count به د مخکښ حالت ته ورسیږي. که دا بریالیتوب کیږي، دا د نوي Like count ته ورسیږي، مګر د frontend به دا بیا روزنه ورکوي ترڅو په داسې حال کې که د روښانه روښانې د نورو کاروونکو لرو. دا د ویب غوښتنلیکونو کې یو عام نمونې ده چې د کاروونکي تجربې وړاندې کوي کله چې تعقیب مهم نه ده. د کوډ په . د GitHub د repo وګورئ، dependences نصب کړئ، او تاسو کولی شئ دا په ځای کې د کارولو سره: git clone cd article-chaos-fetch npm install npm run dev د Open په خپل براؤزر. http://localhost:3000 تاسو به په دې ډول څه وګورئ: backend لري درې API روښانونه: GET /api/posts — ټولې ریپټونه لیست کړئ GET /api/posts/[id] — د پروګرام معلومات ترلاسه کړئ POST /api/posts/[id]/like — د اضافي خوښۍ - د نوي خوښۍ شمیره راځي دا یوازې د نمونوي مقاصد لپاره دی؛ په حقیقي اپلیکیشن کې، تاسو به د ډاټا بیس کاروي. لکه څنګه چې د بوتل په implemented د React کارول او دا د خوشحاله اپلیکیشن، د بریښنا د مدیریت، او reversion منطق کاروي. احتمالا نه څنګه تاسو یا زه به دا په یوه حقیقي اپلیکیشن کې اجرا کړي، مګر دا به د دې ډیمو لپاره ترسره شي. src/components/LikeButton.tsx useState useEffect د Mock Service Worker (MSW) سره د واحد ازموینې که تاسو غواړئ ستاسو د اجزاء د واحد ازموينه، د دې لپاره ډیری لارهونه شتون لري، مګر تر ټولو هوښيار لاره دا ده چې د کارولو په دې توګه، تاسو کولی شئ په انفرادي ډول د اجزاء ازموينه پرته د واقعي backend پر بنسټ. د Mock خدمت کارونکي (MSW) په Branch، موږ جوړ شو لکه څنګه چې د ازموینې چلونکي او د اجزاء rendering او د کاروونکي تعاملونو د نمونې لپاره. موږ هم د شبکې د غوښتنلیکونو مخنیوی او د mock ځوابونه راټولولو لپاره MSW جوړ کړ. main چټک React ازمايښت کتابتون شامل دي د واحد ازموینې لپاره د component. دا د لاندې سکرینګونو ازموینه کوي: src/components/LikeButton.test.tsx LikeButton د ورته بڼه د غوښتنلیک په وخت کې غیر فعال کیږي او د بریالیتوب په وخت کې د بکسینډ ارزښت ته روزنه ورکوي. د ورته بوتل د غوښتنې په وخت کې غیر فعال کیږي او د backend غلطی په وخت کې راټول کیږي. تاسو کولی شئ د ازموینې سره کار واخلئ: npm run test که موږ د ازمايښت کوډ وګورئ، موږ کولی شو وګورئ چې څنګه موږ د MSW کاروي چې د بکسینډ ځوابونه راکړئ. د مثال په توګه، په لومړي ازمايښت کې، موږ د ازمايښت راکړئ ترڅو سره د 42 د نوي Like شمول سره یو بریالیتوب ځواب ته ورسیږي: // test("like button disables during request and updates to backend value" ... server.use( http.post("/api/posts/:id/like", async () => { await new Promise((resolve) => setTimeout(resolve, 100)); return { likes: 42 }; }) ); ... په دویم ټسټ کې، موږ د غلطی ځواب ته ورسیږي: test("like button disables during request and rolls back on backend error" ... server.use( http.post("/api/posts/:id/like", async () => { await new Promise((resolve) => setTimeout(resolve, 100)); return { status: 500 }; }) ); ... هغه څه چې MSW کار کوي دا ده چې د شبکې غوښتنې له خوا ترسره کیږي په دې توګه، موږ کولی شو په مختلفو backend شرایطو کې چمتو کړي پرته له اصل backend پرته پرته پرته. په هرصورت، هیڅ حقیقي backend شامل نه ده، نو موږ کولی شو frontend او backend تر منځ بشپړ انټرنټ ازموینه نه! LikeButton د انټرنېټ ازموینې په تخنیکي توګه، موږ کولی شو د MSW بدلون ته د غوښتنې ته د واقعي backend ته ورسیږي، مګر دا به یو کوچنۍ hacky وي او په واقعیت کې نه دا چې MSW لپاره ډیزاین شوی دی. یو بل ګټور اختیاري دا ده چې د حقیقي براؤزر چاپیریال کاروي لکه یا د end-to-end ازموینې چلولو لپاره او د مستقل پروکس کارولو لپاره لکه یا څه ساده تر لکه د شبکې حالتونو نمونې لپاره - مګر دا به د دې ساده اپلیکیشن لپاره یو کوچني overkill وي. د نندارتون د سیلیکون د موادو د پروګرام دا دی چې دا یو رڼا کتابتون دی چې د کورني هیوادونو سره پوښل کیږي API او تاسو ته اجازه ورکوي چې ستاسو د شبکې غوښتنلیکونو ته د خوځښت ته وده ورکړي. تاسو کولی شئ د رخصتۍ، غلطاتو، د نرخ محدود کولو، throttling، او حتی د تصادفي ناکامۍ سره یوازې د کوډ د ځينو رنګونو په کارولو سره سمون کړئ. د فټنس fetch موږ د کارولو که موږ غواړو چې د frontend او backend ترمنځ بشپړ انټرنېټ ازموینې وکړي، موږ باید د ازموینې په حقیقي براؤزر چاپیریال کې ترسره کړي. موږ کولی شو د Vitest's د دې لپاره د چاپیریال، کوم چې په Node.js کې د پلورونکي په څیر چاپیریال رامینځته کوي. chaos-fetch jsdom To use `chaos-fetch`, we first need to install it: ```bash npm install @fetchkit/chaos-fetch --save-dev لومړی څه چې موږ کولی شو، د انځور کولو لپاره، د MSW سره تبادله کول زموږ د واحد ازموینې کې. دا په حقیقت کې نه دی چې د کتابتون لپاره ډیزاین شوی دی، مګر دا کار کوي. په ، موږ د MSW نصب بدلون سره : chaos-fetch LikeButton.test,tsx chaos-fetch // src/components/LikeButton.test.tsx import { createClient, replaceGlobalFetch, restoreGlobalFetch, } from "@fetchkit/chaos-fetch"; ... describe("LikeButton", () => { afterEach(() => { restoreGlobalFetch(); }); test("like button disables during request and updates to backend value", async () => { // Mock fetch to return success const client = createClient( { global: [ { latency: { ms: 300 } }, ], routes: { "POST /api/posts/:id/like": [ { latency: { ms: 300 } }, { mock: { body: '{ "likes": 43 }' } }, ], }, }, window.fetch ); // Replace global fetch with mock client replaceGlobalFetch(client); // From here on, the test code remains the same ... لکه څنګه چې تاسو کولی شئ وګورئ، موږ د د کلینټر چې د کټګورۍ په ځای کې، ځینې mock ډاټا ته ورسیږي او د نړیوالې د دې سره کار کوي. په hook، موږ د اصل راټول function. د ټیسټ کوډ بډایه به ورته وي. chaos-fetch fetch afterEach fetch په یاد ولرئ، موږ هم د یو واقعي شبکې غوښتنلیک نمونې لپاره ځینې لټینټ اضافه کړ. دا مهم دی ځکه چې د اجزاء د غوښتنلیک په وخت کې د بوتل غیر فعالوي، او موږ غواړو چې د دې رفتار ازموینه کړي. که نه، د ازموینې به ناکام شي ځکه چې د غوښتنلیک به ډیره سرعت بشپړ شي. (او دا موږ ته د وخت پر بنسټ ازموینې ناقانونه، ناقانونه نړۍ ته راځي، مګر دا د بل مقاله لپاره یو موضوع دی.) LikeButton د دویمې ازموینې کوډ ورته دی؛ موږ یوازې د غلطۍ ته ورسیږي: test("like button disables during request and rolls back on backend error", async () => { // Mock fetch to return success const client = createClient( { global: [], routes: { "POST /api/posts/:id/like": [ { latency: { ms: 300 } }, { mock: { status: 500, body: '{ "error": "Internal Server Error" }' } }, ], }, }, window.fetch ); // Replace global fetch with mock client replaceGlobalFetch(client); ... د کوډ د د repo د فابريکې. تاسو کولی شئ د دې سره وګورئ . tests-with-chaos-fetch git checkout tests-with-chaos-fetch اوس، موږ کولی شو د ازموینې سره کار وکړي: npm run test اوس، MSW د واحد ازمايښتونو لپاره ډیر مناسب دی، ځکه چې دا د دې هدف لپاره ډیزاین شوی. مګر دا په بشپړه توګه امکان لري د دې لپاره هم. chaos-fetch Chaos-Driven انټرنټ ټسټونه که موږ غواړو چې د یوټیټ ټیسټونو څخه بهر ونیسئ او frontend او backend تر منځ بشپړ انټرنټ ازموینه کړي، موږ کولی شو د زموږ د شبکې غوښتنلیکونه ته د خوځښت ته وده ورکړي. په دې توګه، موږ کولی شو ازمايښت وکړئ چې د غوښتنلیک په ناقانونه حالتونو کې څنګه چلند کوي. chaos-fetch لومړی، د انټرنېټ ټسټونو لپاره، موږ باید یو کوچني refactor ترسره کړو: موږ کولی شو په خپل ټسټونو کې په مستقیم ډول د async سرور اجزاء ته ورسیږي. Komponent چې د او د پروسس تفصيلات. په دې توګه، موږ کولی شو ازمايښت زموږ د انټرنېټ ازموینې کې. د کوډ لپاره په . PostPage LikeButton LikeButton PostView src/components/PostView.tsx بل، موږ باید ډاډه وکړئ چې د backend د ازموینې چلولو مخکې کارول کیږي. زموږ په صورت کې، دا د ټولو اپلیکیشن دی، کوم چې د سیسټم ډاډمن کوي ځکه چې موږ به د هغه اپلیکیشن په مقابل کې چې دا برخه ده ازموینه کوو، مګر تاسو کولی شئ د انټرنېټ ازموینې په ورته ډول تنظیم کړئ که backend یو انفرادی خدمت دی. د ورته ازموینې چې موږ په Rewritten په د frontend او backend په منځ کې بشپړ انټرنېټ ازموینه کړي. کوډ ورته دی، مګر د backend ځوابونو په ځای کې د پوښتنو ته اجازه ورکړئ چې په حقیقت کې backend ته ورسیږي. موږ هنوز هم کاروي په غوښتنو کې د غلطو داخل کولو لپاره. LikeButton.test.tsx PostView.integration.test.tsx chaos-fetch یو مهم تفصيل دا ده چې موږ باید د یو URL object، نو دا کولی شي د نسبتا URLs په سمه توګه حل کړي. په دې تنظیم کې، JSDOM سره د نړيوال کټګورۍ، حتی د نسبتا URLs لپاره کار نه کوي! د JSDOM Patches د کار کولو لپاره. globalThis.location chaos-fetch chaos-fetch location لومړی، موږ جوړ : globalThis.location globalThis.location = new URL("http://localhost:3000/posts/1"); بيا موږ جوړ په ازموینه کې د مشتریانو چې د کورني کټګورۍ په لټه کې دي، او موږ کولی شو د رخصتۍ، غلطاتو، او نور انجکشن کړي. chaos-fetch د لومړي ازموینه لپاره، موږ حتی اړتیا نلري بدلون ; موږ یوازې د دې لپاره چې دا د نسبتا URLs سره کار کوي: fetch test("integration: like button disables during request and re-enables after fetch (real backend)", async () => { replaceGlobalFetch(createClient({})); render( ); // Wait for post to load (like count should be present) const likeCountText = await screen.findByText(/\d+\s*likes/); const initialCount = Number(likeCountText.textContent.match(/(\d+)/)?.[1] ?? 0); const button = await screen.findByRole("button", { name: /like/i }); const user = userEvent.setup(); await user.click(button); // Button should be disabled during request expect(button).toBeDisabled(); // Wait for fetch to complete and UI to update await waitFor(() => expect(button).not.toBeDisabled()); // Check updated like count await waitFor(() => { const updatedLikeCountText = screen.getByText(/\d+\s*likes/); const updatedCount = Number(updatedLikeCountText.textContent.match(/(\d+)/)?.[1] ?? 0); expect(updatedCount).toBe(initialCount + 1); }); restoreGlobalFetch(); }); د دویم ازموینه لپاره، موږ یو کلینټ جوړ کوو چې د ورته غوښتنلیک لپاره د بکسینګ غلطۍ شتون کوي: test("integration: like button disables during request and rolls back on backend error (fail middleware)", async () => { // Configure chaos-fetch to fail the like endpoint replaceGlobalFetch(createClient({ routes: { "POST /api/posts/:id/like": [ { latency: { ms: 300 } }, { fail: { status: 500, body: '{ "error": "fail middleware" }' } }, ], }, })); render( ); // Wait for post to load (like count should be present) const likeCountText = await screen.findByText(/\d+\s*likes/); const initialCount = Number(likeCountText.textContent.match(/(\d+)/)?.[1] ?? 0); const button = await screen.findByRole("button", { name: /like/i }); const user = userEvent.setup(); await user.click(button); // Button should be disabled during request expect(button).toBeDisabled(); // Wait for fetch to complete and UI to update await waitFor(() => expect(button).not.toBeDisabled()); // Check that like count rolls back to original value await waitFor(() => { const rolledBackLikeCountText = screen.getByText(/\d+\s*likes/); const rolledBackCount = Number(rolledBackLikeCountText.textContent.match(/(\d+)/)?.[1] ?? 0); expect(rolledBackCount).toBe(initialCount); }); restoreGlobalFetch(); }); اوس، په تخنیکي توګه، په دویمه ازموینه کې، موږ په هرصورت د backend په تماس نه کوو ځکه چې د غوښتنلیک مخنیوی کوي او یو غلطی ته ورسیږي. خو دا د یوځای انټرنیټ وړاندې کوي چې د بریالیتوب او ناکام غوښتنلیکونو سره همکاري. chaos-fetch کله چې دا روښانه ده، تاسو غواړئ ډیر پیچلي شبکې شرایط تثبيت کړئ. د مثال په توګه، تاسو کولی شئ د تیلو شبکې سره تثبيت کړئ یا تاسو کولی شئ هڅه وکړئ چې څنګه وي که ستاسو backend تاسو سره د نرخ محدودوي د منځپانګې throttle rateLimit بل څه چې سخت د ازمايښت ده دا ده چې آیا د لوډ په وخت کې د غوښتنلیک په الوتکه کې ښيي. تاسو کولی شئ د Middleware د چټک شبکې نمونې او ازمايښت چې ستاسو د لوډ کولو حالت په سمه توګه ښيي. latency که تاسو د determinism په اړه فکر نلري، تاسو کولی شئ حتی ځینې تصادفي ناکامې اضافه کړئ ترڅو وګورئ چې ستاسو اپلیکیشن په غیرقانوني شرایطو کې څنګه چلند کوي. تاسو کولی شئ د ځانګړي سټینرونو تثبيت کولو لپاره ستاسو د ګمرک Middleware لیکنه او ثبت کړئ. د پایلو کاسوس ټیسټینګ معمولا د لوی کچه توزیع شوي سیسټمونو سره تړاو لري، مګر دا د کوچني غوښتنلیکونو لپاره هم مهم دی. په دې مقاله کې، موږ د بشپړ کڅوړه غوښتنلیکونو لپاره رڼا کاسوس ډرایو ټیسټینګ په کارولو سره د انټرنټ ټیسټینګ په کارولو سره چې په عامه توګه شیان ونیسئ. موږ وګورئ چې څنګه کار وکړي زموږ د شبکې غوښتنلیکونو ته د خوځښت په وړاندې کولو او ازموینه کولو لپاره چې زموږ غوښتنلیکونه په ناقانونه حالتونو کې څرنګه کوي. chaos-fetch دا د MSW یا د پایپ ټیسټینګ فریم ورکونو لکه Playwright یا Cypress لپاره ښه (یا بد) بدلون نه ده. دا یو اضافي وسایلو دی چې کولی شي د دوی سره نصب شي او کارول شي (و ستاسو ازمايښت ستراتیژۍ ته وده ورکړي. له دې امله چې ستاسو غوښتنلیک د ناکامۍ شرایطو کې څنګه چلند کوي، تاسو کولی شئ ډیر مقاومت او قوي غوښتنلیکونه جوړ کړئ. @fetchkit/chaos-fetch @fetchkit/chaos-proxy