පරීක්ෂා කිරීම දුෂ්කර ව්යාපාරයකි. සම්පූර්ණ ස්ටැක් යෙදුම් පරීක්ෂා කිරීම තවදුරටත් දුෂ්කර වේ. ඔබ frontend, backend, database, network, සහ තවත් දේවල් සමඟ කටයුතු කළ යුතුය. පළමුව, ඔබ තනිව ඔබේ කොටස්, ක්රියාකාරකම් සහ මොඩියුලය පරීක්ෂා කරයි. එවිට ඔබ සැබෑ පරිශීලක සන්නිවේදන සකස් කිරීම සඳහා සම්පූර්ණ යෙදුම සඳහා සමහර end-to-end පරීක්ෂා පවා එකතු කළ හැකිය. නමුත් ඊට පස්සෙ අවුල් කාරකයක් තියෙනවා: දේවල් වැරදුන විට සිදුවන්නේ කුමක්ද? ජාලය වේගවත් හෝ විශ්වාසවන්ත නොවන විට සිදුවන්නේ කුමක්ද? පසුබිම අහිමි වූ විට සිදුවන්නේ කුමක්ද? සතුටු මාර්ගය මත සම්පූර්ණයෙන්ම ක්රියාකාරී වන යෙදුම තවමත් අනපේක්ෂිත දෙයක් සිදුවන විට පහසුවෙන් බිඳ වැටෙනු ඇත. Chaos-Driven Testing යනු ඔබගේ පරීක්ෂණයට අසාර්ථකතාවයන් සකස් කිරීමෙන් මෙම අසාර්ථකතාවය පිළිගන්නා ක්රමයකි.මේ ලිපියේදී, අපි Next.js යෙදුම තුළ Chaos-Driven Testing ක්රියාත්මක කිරීමට ආකාරය නිරීක්ෂණය කරමු. App එක හොඳයි, මුලින්ම අපි පරීක්ෂා කිරීමට යෙදුමක් අවශ්ය වනු ඇත. ලිපිය අවධානය යොමු කිරීම සඳහා, මම අඩුම සම්පූර්ණ ස්කෑම් Next.js යෙදුම නිර්මාණය කර ඇත, එබැවින් ඔබට අවශ්ය නැත. මෙම යෙදුම ඔබ ප්රතිපත්ති ලැයිස්තුවක් සොයන්න, ප්රතිපත්ති විස්තර බලන්න, සහ ඒවා වගේ සරල recept app.It uses Tailwind CSS for styling and TypeScript for type safety. ඔබ ප්රතිකාරයට කැමති විට, ප්රතිකාරය ප්රතිඵලයක් ලෙස ප්රතිඵලයක් ලෙස ප්රතිඵලයක් ලෙස ප්රතිඵලයක් ලෙස ප්රතිඵලයක් ලෙස ප්රතිඵලයක් ලෙස ප්රතිඵලයක් ලෙස ප්රතිඵලයක් ලෙස ප්රතිඵලයක් ලෙස ප්රතිඵලයක් ලෙස ප්රතිඵලයක් ලෙස ප්රතිඵලයක් ලෙස ප්රතිඵලයක් ලෙස ප්රතිඵලයක් ලෙස ප්රතිඵලයක් ලෙස ප්රතිඵලයක් ලෙස ප්රතිඵලයක් ලෙස ප්රතිඵලයක් ලෙස ප්රතිඵලයක් ලෙස ප්රතිඵලයක් ලෙස ප්රතිඵලයක් ලෙස ප්රතිඵලයක් ලෙස ප්රතිඵලයක් ලෙස ප්රතිඵලයක් ලෙස ප්රතිඵලයක් ලෙස ප්රතිඵලයක් ලෙස ප්ර මෙම කේතය ලබා ගත හැක . Github Repo පරීක්ෂා කරන්න, ආකෘති ස්ථාපනය කරන්න, ඔබ එය දේශීයව ක්රියාත්මක කළ හැකිය: git clone cd article-chaos-fetch npm install npm run dev විවෘත ඔබේ බ්රවුසරයේ http://localhost:3000 ඔබ මේ වගේ දෙයක් දකිනු ඇත: මෙම backend හි API මාර්ග තුනක් ඇත: GET /api/posts — ලැයිස්තුව සියලුම ප්රතිපත්ති GET /api/posts/[id] — get recipe details POST /api/posts/[id]/like — increment likes - returns the new like count Note that the likes are stored in-memory and reset on server restart.This is only for demonstration purposes; in a real app, you would use a database.මෙය ප්රදර්ශන අරමුණු සඳහා පමණි. එවැනි බොත්තම ක් රියාත්මක වන්නේ React භාවිතා කිරීම සහ එය ප්රයෝජනවත් යාවත්කාලීන කිරීම, වැරදි කළමනාකරණය, සහ ප්රතිස්ථාපන ලෝහය සකස් කරයි.ඔබ හෝ මම එය සැබෑ යෙදුම තුළ ක්රියාත්මක කරන්නේ කෙසේද යන්නක් නොවේ, නමුත් මෙම ප්රදර්ශනය සඳහා එය සිදු කරනු ඇත. src/components/LikeButton.tsx useState useEffect Mock Service Worker (MSW) සමඟ සංකේත පරීක්ෂණ ඔබ ඔබේ අමුද්රව්ය පරීක්ෂා කිරීමට අවශ්ය නම්, එය කිරීමට විවිධ ක්රම ඇත, නමුත් වඩාත් බුද්ධිමත් ක්රම වලින් එකක් භාවිතා කිරීමයි මෙම ක්රමයෙන්, ඔබ සැබෑ backend මත විශ්වාස නොකරම අමුද්රව්ය තනිව පරීක්ෂා කළ හැකිය. Mock සේවා සේවකයා (MSW) ඒ අතරේ Branch, අපි නිර්මාණය කරමු test runner ලෙස සහ පරිශීලක සන්නිවේදන සකස් කිරීම සඳහා සහ අමුද්රව්ය සකස් කිරීම සඳහා.We also set up MSW to intercept the network requests and return mock responses. main වේගවත් React Testing පුස්තකාලය ඒකකය පරීක්ෂා කිරීම සඳහා ඇතුළත් වේ කොටසක්.එය පහත දැක්වෙන තක්සේරු පරීක්ෂා කරයි: src/components/LikeButton.test.tsx LikeButton සමාන බොත්තම ඉල්ලීම තුළ අක්රීය කරයි සහ සාර්ථකව backend අගය මත යාවත්කාලීන කරයි. එවැනි බොත්තම ඉල්ලීමකදී අක්රීය කරයි සහ backend error මත නැවත වළක්වා ගනී. ඔබ පරීක්ෂණ ක්රියා කළ හැකිය: npm run test උදාහරණයක් ලෙස, පළමු පරීක්ෂණයේ දී, අපි ප්රතිචාරය ප්රතිචාරය ප්රතික්ෂේප කිරීමට MSW භාවිතා කරන්නේ කෙසේදැයි අපි දකිනු ඇත. උදාහරණයක් ලෙස, පළමු පරීක්ෂණයේදී, අපි ප්රතිචාරය ප්රතිචාරය ප්රතික්ෂේප කිරීම සඳහා ප්රතිචාරය ප්රතික්ෂේප කිරීම ප්රතික්ෂේප කිරීම සඳහා ප්රතිචාරය ප්රතික්ෂේප කිරීම ප්රතික්ෂේප කරන ලදී: // 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 ඇතුළත් කිරීමේ පරීක්ෂණ එබැවින්, frontend සහ backend අතර සම්පූර්ණ සම්බන්ධතාවය පරීක්ෂා කිරීම සඳහා අපට කළ හැකි දේ කුමක්ද? තාක්ෂණිකව, අපි සැබෑ backend වෙත ඉල්ලීම් ප්රවේශ කිරීමට MSW වෙනස් කළ හැක, නමුත් එය ටිකක් හොකී වනු ඇත සහ MSW නිර්මාණය කරන දේ නොවේ. හෝ End-to-end විභාග ක්රියාත්මක කිරීම සහ ස්ථිර ප්රොක්සි භාවිතා කිරීම එවැනි සරල දෙයක් ජාල තත්ත්වයන් අනුකූල කිරීම සඳහා - නමුත් මෙම සරල යෙදුම සඳහා එය ටිකක් overkill වේ. Playwright සයිප්රා toxiproxy ජංගම Proxy මෙන්න කොහෙද එතනට එනවා.එය ලෙහෙසි පුස්තකාලයක් වන අතර එය දේශීය ජනතාවට ඇලුම් කරයි. API සහ ඔබට ඔබේ ජාල ඉල්ලීම් තුළ අවුලක් ඇතුළත් කිරීමට ඉඩ සලසයි.ඔබට කේතය කිහිපයක් සහිතව අතුරුදහන්තාවය, වැරදි, වේගය සීමා කිරීම, throttling සහ පවා අසාර්ථක අසාර්ථකතා සකසා ගත හැකිය. Chaos-Fetch ගැන fetch පාවිච්චි කරමු සන්නිවේදන පරීක්ෂණ කිහිපයක් නිර්මාණය කිරීමට.අපි frontend සහ backend අතර සම්පූර්ණ සම්බන්ධතාවය පරීක්ෂා කිරීමට අවශ්ය නම්, අපි සැබෑ බ්රවුසර පරිසරය තුළ පරීක්ෂණ ක්රියාත්මක කළ යුතුය. මේ සඳහා පරිසරය, 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 ... ඔබ දකින පරිදි, අපි නිර්මාණය ගනුදෙනුකරුවා, ගනුදෙනුකරුවා, ගනුදෙනුකරුවා, ගනුදෙනුකරුවන්, ගනුදෙනුකරුවන්, ගනුදෙනුකරුවන්, ගනුදෙනුකරුවන්, ගනුදෙනුකරුවන්, ගනුදෙනුකරුවන් එය ක්රියාත්මක වේ.එය තුළ Hook, we restore the original (අපි මුල් පිටුව නැවත ලබා ගනිමු) පර්යේෂණ කේතයේ ඉතිරි කොටස් එක සමානයි. chaos-fetch fetch afterEach fetch Note, we also added some latency to simulate a real network request.This is important because the අමුද්රව්ය ඉල්ලීමකදී බොත්තම අවහිර කරයි, අපි ඒ හැසිරීම පරීක්ෂා කිරීමට අවශ්ය.එය නොමැතිව, පරීක්ෂණය අසාර්ථක වනු ඇත, මොකද ඉල්ලීම ඉක්මනින් සම්පූර්ණ වනු ඇත. (මෙම අපව කාලය මත පදනම්ව පරීක්ෂා කිරීම පිළිබඳ දුර්වල, විශ්වාසනීය ලෝකයට ගෙන එයි, නමුත් එය තවත් ලිපිය සඳහා මාතෘකාවක් වේ.) 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); ... කේතය තියෙන්නේ The Re: Re: Re: Re: Re: Re: Re: Re: Re: Re: Re: Re: Re: Re: Re: Re: Re: Re: Re: Re: Re: Re: Re: Re: Re: Re: . tests-with-chaos-fetch git checkout tests-with-chaos-fetch දැන්, අපි පරීක්ෂණ ක්රියා කළ හැකිය: npm run test දැන්, MSW තවමත් ඒකක පරීක්ෂණ සඳහා වඩාත් ගැලපෙන, එය ඒ අරමුණ සඳහා නිර්මාණය කර ඇති නිසා. ඒ සඳහාත් chaos-fetch Chaos-Driven සංයෝග පරීක්ෂණ අපි ඒකක පරීක්ෂණයට වඩා ඉදිරියට යන්න සහ frontend සහ backend අතර සම්පූර්ණ සම්බන්ධතාවය පරීක්ෂා කිරීමට අවශ්ය නම්, අපි භාවිතා කළ හැකිය. අපගේ ජාල ඉල්ලීම්වලට අපහසුතාවයක් ඉදිරිපත් කිරීම සඳහා.මේ ආකාරයෙන්, අපගේ යෙදුම අහිතකර කොන්දේසි යටතේ හැසිරෙන ආකාරය පරීක්ෂා කළ හැකිය. chaos-fetch පළමුව, ඇතුළත් කිරීමේ පරීක්ෂණ සඳහා, අපි කුඩා refactor කරන්න ඕන: අපි අපගේ පරීක්ෂණවල async සේවාදායක කොටසක් සෘජුවම render කළ නොහැක. ඇතුළත් කරන කොටසක් ප් රතිඵලයක් - මේ ආකාරයෙන් අපි පරීක්ෂා කළ හැකිය අපගේ ඇතුළත් කිරීමේ පරීක්ෂණ වලදී.The code for එය IN . PostPage LikeButton LikeButton PostView src/components/PostView.tsx ඊළඟට, අපි පරීක්ෂණ ක්රියාත්මක කිරීමට පෙර backend ක්රියාත්මක බව තහවුරු කළ යුතුය.අපගේ අවස්ථාවලදී, එය සම්පූර්ණ app වන අතර, එය ස්ථාපනය විනෝදජනක හේතුවක් නිසා අපි එය කොටසක් වන app සමඟ අමුද්රව්ය පරීක්ෂා කරනු ඇත, නමුත් ඔබ backend එක ස්වාධීන සේවාවක් නම් එම ආකාරයෙන් ඇතුළත්තා පරීක්ෂා ස්ථාපනය කළ හැකිය. අපි කරපු එකම විභාගය නැවත ලියන ලදී frontend සහ backend අතර සම්පූර්ණ සම්බන්ධතාවය පරීක්ෂා කිරීම සඳහා. කේතය සමාන වේ, නමුත් backend ප්රතිචාර විහිළුවක් වෙනුවට, අපි ඉල්ලීම් සැබෑ backend වෙත ගමන් කිරීමට ඉඩ ඇත. ඉල්ලීම් වලට වැරදි ඇතුළත් කරන්න. LikeButton.test.tsx PostView.integration.test.tsx chaos-fetch වැදගත් කාරණය තමයි අපි හදන්න ඕනේ URL එකෙන්, එහෙනම් Relative URLs නිවැරදිව විසඳා ගත හැකිය. මෙම සැකසීම තුළ, JSDOM, Native fetch සමග, Relative URLs සඳහා පවා වැඩ නොකරයි! JSDOM හි පටිපාටිය ඒක වැඩ කරන්න. globalThis.location chaos-fetch chaos-fetch location මුලින්ම අපි සකස් කළා : globalThis.location globalThis.location = new URL("http://localhost:3000/posts/1"); එවිට අපි නිර්මාණය කරමු පෞද්ගලිකව, අපගේ ගනුදෙනුකරුවන් ස්ථාවරව ස්ථාවරව ප්රතික්ෂේප කරන විභාග වලදී, අපි latency, errors, සහ තවත් බොහෝ දේ ඉස්මතු කළ හැකිය. chaos-fetch පළමු විභාගය සඳහා, අපි පවා වෙනස් කිරීමට අවශ්ය නැත ; අපි එය සංකේත කරමු, එබැවින් එය සමීප URLs සමඟ ක්රියා කරයි: fetch test("integration: like button disables during request and re-enables after fetch (real backend)", async () => { replaceGlobalFetch(createClient({})); render(<PostView postId={1} />); // 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(); }); දෙවන විභාගය සඳහා, අපි සමාන ඉල්ලීම සඳහා backend වැරදි සකස් කරන සේවාදායකයක් නිර්මාණය කරමු: 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(<PostView postId={1} />); // 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 ඔබ සමග අනුපාතය සීමා කරන්නේ නම් කුමක් සිදුවේද Middleware ගැන throttle rateLimit පරීක්ෂා කිරීම අමාරු තවත් දෙයක් වන්නේ ඉල්ලීම ගුවන් යානයක වන අතර ප්රවේශ ප්රවේශ ප්රවේශයක් පෙන්වන්නේද නැද්ද යන්නයි. මෘදුකාංගය වේගවත් ජාලයක් අනුකූල කිරීමට සහ ඔබේ බාගත තත්ත්වය නිවැරදිව පෙන්වනු ලබන බව පරීක්ෂා කිරීම සඳහා. latency ඔබ determinism ගැන සැලකිලිමත් නොවී නම්, ඔබ පවා ඔබගේ යෙදුම අනාවැකි නොලැබෙන තත්වයන් යටතේ හැසිරෙන ආකාරය බලන්න අසාමාන්ය අසාර්ථකයන් කිහිපයක් එකතු කළ හැකිය. ප් රතිඵල පුළුල් ප්රමාණයේ බෙදාහැරෙන පද්ධති සමඟ බොහෝ විට අවුල පරීක්ෂා කිරීම සම්බන්ධ වේ, නමුත් එය කුඩා යෙදුම් සඳහා සමාන වශයෙන් වැදගත් වේ.මේ ලිපියේදී, අපි සම්පූර්ණ ස්කෑම් යෙදුම් සඳහා සරල අවුල ප්රවේශ පරීක්ෂණය පරීක්ෂා කිරීම සඳහා අවුල පරීක්ෂා කිරීමක් භාවිතා කර ඇත.We saw how to use අපගේ ජාල ඉල්ලීම්වලට අපහසුතාවයක් ඉදිරිපත් කිරීම සහ අපගේ යෙදුම අහිතකර තත්වයන් යටතේ හැසිරෙන ආකාරය පරීක්ෂා කිරීම. chaos-fetch MSW හෝ Playwright හෝ Cypress වැනි end-to-end පරීක්ෂණ පද්ධති සඳහා වඩා හොඳ (හෝ නරක) වෙනසක් නොවේ. ඔබගේ පර්යේෂණ උපායමාර්ගය වැඩි දියුණු කිරීම සඳහා.අපගේ යෙදුම අසාර්ථක තත්ත්වයන් යටතේ හැසිරෙන ආකාරය පරීක්ෂා කිරීමෙන්, ඔබ වඩාත් ප්රතිරෝධී හා ශක්තිමත් යෙදුම් ගොඩනඟා ගත හැකිය. @fetchkit/chaos-fetch @fetchkit/chaos-proxy
