{"id":"l-tj-5-3","courseId":"testing-javascript","lang":"ar","kind":"lesson","summary":"تشرح كيف يقيّم الـ mutation testing مجموعة الاختبارات، وتشغّل StrykerJS مع Vitest على المنطق الأساسي، وتحوّل الـ mutants الناجية إلى الاختبارات المحدّدة التي كانت ناقصة.","html":"

ترك لك التمرين الأخير حقيقة مزعجة: قالت الـ coverage إن النسبة 100%، ولم تلتقط المجموعة شيئًا. تحتاج إلى قياس يطرح السؤال الحقيقي: هل ستلاحظ هذه الاختبارات لو كان الكود خاطئًا؟ يجيب الـ mutation testing (اختبار الطفرات) عن هذا السؤال بالتجربة. وقد كنت تفعل ذلك يدويًا أصلًا: كل تمرين في هذه الدورة شغّل اختباراتك على “mutants” (نسخ طافرة). والأداة تفعل الشيء نفسه بشكل منهجي، لكل سطر.

\n

كيف يعمل

\n
    \n
  1. تصنع الأداة mutant: نسخة من كودك فيها تغيير صغير واحد، من النوع الذي يزلّ فيه الإنسان. يصبح < هو <=، و+ يصبح -، وMath.min يصبح Math.max، ويصبح شرط ما true، وتُفرَّغ كتلة كود.
    2. \n
  2. تشغّل الاختبارات التي تغطّي ذلك السطر على الـ mutant.
    3. \n
  3. إن فشل أيّ اختبار، يُقتَل الـ mutant: اختباراتك ستلتقط ذلك الخطأ. وإن نجحت كل الاختبارات، فقد نجا: ذلك الخطأ سيصل إلى المستخدمين.
    4. \n
\n

تكرّر هذا مع مئات أو آلاف الـ mutants. ومقياس الطفرات (mutation score) هو نسبة المقتول منها.

\n
\n يُنتج الكود المصدري ثلاثة mutants. تعمل مجموعة الاختبارات على كل منها: يفشل اختبار مع اثنين فيُقتلان، وتنجح كلها مع الثالث فينجو، مشيرًا إلى اختبار ناقص.\n \n settleUp\n \n \n \n \n min → max\n \n -cents → +cents\n \n sum !== 0 → false\n \n \n \n \n فشل اختبار: قُتل\n \n فشل اختبار: قُتل\n \n نجحت كلها: نجا\n
كل mutant خطأ صغير متعمَّد واحد؛ فإمّا أن تقتله الاختبارات أو تدعه ينجو
\n

تسأل الـ coverage “هل عمل هذا السطر؟” ويسأل الـ mutation testing “لو كان هذا السطر خاطئًا، هل سيلاحظ أحد؟” والسؤال الثاني هو الذي يهمّك.

\n

تشغيل StrykerJS مع Vitest

\n

StrykerJS هي أداة الـ mutation testing الراسخة لـ JavaScript وTypeScript، ولها plugin مشغّل لـ Vitest:

\n
Terminal
npm install --save-dev @stryker-mutator/core @stryker-mutator/vitest-runner\nnpx stryker init   # interactive; or write the config yourself
\n
stryker.config.json
{\n  \"$schema\": \"./node_modules/@stryker-mutator/core/schema/stryker-schema.json\",\n  \"testRunner\": \"vitest\",\n  \"plugins\": [\"@stryker-mutator/vitest-runner\"],\n  \"mutate\": [\"src/money/**/*.js\", \"!src/**/*.test.js\"],\n  \"reporters\": [\"html\", \"clear-text\", \"progress\"],\n  \"thresholds\": { \"high\": 80, \"low\": 60, \"break\": 50 },\n  \"incremental\": true\n}
\n

يشغّل npx stryker run مجموعتك أولًا مرة واحدة ليعرف أيّ الاختبارات تغطّي أيّ الأسطر، ثم يختبر كل mutant. ويعرض تقرير HTML الكود المصدري مع تعليم كل mutant بأنه قُتل أو نجا. ويُفشل thresholds.break التشغيل إن كان المقياس دونه، ويعيد incremental استخدام النتائج للكود والاختبارات التي لم تتغيّر منذ التشغيل الأخير، وهذا مهم جدًا للسرعة.

\n

قراءة الناجين

\n

الحالات التي ستراها أكثر من غيرها:

\n\n

الناجون هم الكنز. بالنسبة إلى settleUp، قد يقول التقرير:

\n
Text
[Survived] MethodExpression   src/money/settle-up.js:21\n-   const amountCents = Math.min(debtors[d].cents, creditors[c].cents);\n+   const amountCents = Math.max(debtors[d].cents, creditors[c].cents);\n\n[Survived] ConditionalExpression   src/money/settle-up.js:4\n-   if (sum !== 0) throw new Error('Balances must add up to zero');\n+   if (false) throw new Error('Balances must add up to zero');
\n

كل واحد منها تعليمة دقيقة. الأول يقول إن لا اختبار يستخدم مبالغ يدين فيها المدين بمجموع مختلف عمّا يستحقّه الدائن، فيعطي min وmax الإجابة نفسها في كل اختبار. والثاني يقول إن لا اختبار يمرّر مدخلات غير متوازنة أبدًا. اكتب هذين الاختبارين فيُقتل الاثنان معًا.

\n\n

الـ mutants المنتقاة يدويًا مقابل المولّدة

\n

الـ mutants في تمارين هذه الدورة انتُقيت يدويًا: كل واحد منها يحاكي خطأً يكتبه الناس فعلًا، مثل معامل متبادل الموقع أو await منسيّة. أما mutants الـ Stryker فتُولَّد بشكل منهجي من مجموعة ثابتة من المحوِّرات (mutators)، عادةً عشرات منها لكل دالة، فتجد فجوات لم تكن لتخطر لك، وتُنتج أيضًا بعض الضجيج. كلاهما مفيد. حين تراجع اختبارات زميل، فعادة الانتقاء اليدوي هي النسخة السريعة: اسأل “ما الخطأ الأرجح هنا، وأيّ اختبار سيفشل؟” وحين تريد قياسًا على مستوى وحدة كاملة، دع الأداة تولّد القائمة.

\n

أين يناسب

\n

الـ mutation testing بطيء: مئات الـ mutants، كل منها يشغّل جزءًا من مجموعتك. بضع عادات تُبقيه عمليًا:

\n\n

في التمرين تحصل على مجموعة ضعيفة لـ settleUp وقائمة بالناجين، وتكتب الاختبارات التي تقتلهم.

\n","toc":[{"id":"sec-1","text":"كيف يعمل","level":2},{"id":"sec-2","text":"تشغيل StrykerJS مع Vitest","level":2},{"id":"sec-3","text":"قراءة الناجين","level":2},{"id":"sec-4","text":"الـ mutants المنتقاة يدويًا مقابل المولّدة","level":2},{"id":"sec-5","text":"أين يناسب","level":2}],"takeaways":["تصنع أداة الـ mutation testing (اختبار الطفرات) أخطاءً صغيرة متعمَّدة (mutants) في كودك وتعيد تشغيل الاختبارات؛ والـ mutant الذي يُفشل اختبارًا يُقتَل (killed)، والذي لا يُفشل أيّ اختبار ينجو (survived).","مقياس الطفرات (mutation score)، أي نسبة الـ mutants المقتولة من مجموعها، يقيس كم من الأخطاء المعقولة ستلتقطها اختباراتك، وهذا ما لا تستطيعه الـ coverage.","كل mutant ناجٍ يشير إلى assertion ناقص أو ضعيف؛ اقرأه، ثم اكتب الاختبار الذي يقتله.","بعض الـ mutants متكافئة (لا تغيّر السلوك) ولا يمكن قتلها؛ تجاهلها بدل ليّ الاختبارات.","الـ mutation testing بطيء، فشغّله على المنطق الأساسي، بشكل تدريجي أو وفق جدول زمني، لا على كل ملف في كل commit."],"further":[{"title":"Vitest — Coverage guide","url":"https://vitest.dev/guide/coverage"},{"title":"StrykerJS on GitHub","url":"https://github.com/stryker-mutator/stryker-js"}],"quiz":[{"q":"

يبلّغ Stryker بما يلي: ConditionalExpression: if (sum !== 0) → if (false) — Survived. ماذا يخبرك ذلك؟

","options":[{"text":"الفحص غير ضروري ويمكن حذفه.","why":"يخبرك أن لا اختبار يلاحظ حين يُزال الفحص، لا أن الفحص عديم الفائدة؛ فالمدخلات غير المتوازنة ستُنتج تحويلات خاطئة بصمت."},{"text":"لا يوجد اختبار يمرّر أرصدة غير متوازنة ويتوقّع أن ترمي settleUp خطأً.","why":"صحيح. أضف اختبارًا مثل expect(() => settleUp({ Ana: 500, Ben: -400 })).toThrow() فيُقتل الـ mutant."},{"text":"فشل Stryker في تشغيل الاختبارات لذلك السطر.","why":"حين لا تستطيع الاختبارات العمل، تكون الحالة خطأ تشغيل أو ترجمة، أو “no coverage”؛ أما “Survived” فتعني أن الاختبارات عملت ونجحت كلها."}],"answer":1},{"q":"

تغطية الأسطر في مجموعتك 100% ومقياس الطفرات 55%. أيّ تلخيص هو الأفضل؟

","options":[{"text":"كل سطر يعمل، لكن قرابة نصف الأخطاء المعقولة التي أدخلها Stryker ستمرّ دون أن يلاحظها أحد.","why":"صحيح. الـ coverage تُظهر التنفيذ؛ ومقياس الطفرات يُظهر كم من ذلك التنفيذ يُفحص فعلًا."},{"text":"المجموعة ممتازة؛ فمقاييس الطفرات فوق 50% نادرة.","why":"لا يوجد معيار عالمي، لكن نجاة 45% من الـ mutants في المنطق الأساسي تعني عادةً assertions ضعيفة تستحق الإصلاح."},{"text":"الرقمان متناقضان، فإحدى الأداتين مضبوطة بشكل خاطئ.","why":"يقيسان شيئين مختلفين؛ والتغطية العالية مع مقياس طفرات منخفض هو النمط الكلاسيكي للاختبارات الشحيحة بالـ assertions."}],"answer":0},{"q":"

يغيّر mutant التعبير b.cents - a.cents إلى a.cents - b.cents في دالة المقارنة الخاصة بالترتيب، وكل مدخل صالح ما زال يُنتج تسوية صحيحة. ماذا يجب أن تفعل؟

","options":[{"text":"اكتب اختبارًا يؤكّد الترتيب الدقيق للتحويلات في مجموعة كبيرة، كي يموت الـ mutant.","why":"إن كانت عدة ترتيبات صالحة، فتثبيت واحد منها يربط الاختبار بالتفاصيل الداخلية، وهو الخطأ نفسه من القسم 2."},{"text":"اخفض الحدّ الأدنى لمقياس الطفرات إلى الصفر.","why":"mutant متكافئ واحد ليس سببًا للتخلّص من الإشارة التي تأتي من كل الـ mutants الأخرى."},{"text":"تعامل معه على أنه mutant متكافئ على الأرجح وتجاهله (أو عطّل تلك الطفرة على ذلك السطر بتعليق).","why":"صحيح. إن لم يكن بإمكان أي مستدعٍ ملاحظة الفرق، فلا يوجد ما يُختبر؛ ويتيح لك Stryker تعليم هذه الأسطر كي يبقى التقرير ذا معنى."}],"answer":2}],"exercise":{"kind":"web","mode":"test","subject":"// Returns the transfers that settle a group: [{ from, to, amountCents }].\n// balances: { name: cents }, positive = is owed, negative = owes.\n// Throws if the balances don't add up to zero.\nfunction settleUp(balances) {\n const entries = Object.entries(balances);\n const sum = entries.reduce((total, [, cents]) => total + cents, 0);\n if (sum !== 0) throw new Error('Balances must add up to zero');\n\n const debtors = [];\n const creditors = [];\n for (const [name, cents] of entries) {\n if (cents < 0) debtors.push({ name, cents: -cents });\n else if (cents > 0) creditors.push({ name, cents });\n }\n const largestFirst = (a, b) => b.cents - a.cents || a.name.localeCompare(b.name);\n debtors.sort(largestFirst);\n creditors.sort(largestFirst);\n\n const transfers = [];\n let d = 0;\n let c = 0;\n while (d < debtors.length && c < creditors.length) {\n const amountCents = Math.min(debtors[d].cents, creditors[c].cents);\n transfers.push({ from: debtors[d].name, to: creditors[c].name, amountCents });\n debtors[d].cents -= amountCents;\n creditors[c].cents -= amountCents;\n if (debtors[d].cents === 0) d += 1;\n if (creditors[c].cents === 0) c += 1;\n }\n return transfers;\n}\n","mutants":[{"id":"min-to-max","code":"// Returns the transfers that settle a group: [{ from, to, amountCents }].\n// balances: { name: cents }, positive = is owed, negative = owes.\n// Throws if the balances don't add up to zero.\nfunction settleUp(balances) {\n const entries = Object.entries(balances);\n const sum = entries.reduce((total, [, cents]) => total + cents, 0);\n if (sum !== 0) throw new Error('Balances must add up to zero');\n\n const debtors = [];\n const creditors = [];\n for (const [name, cents] of entries) {\n if (cents < 0) debtors.push({ name, cents: -cents });\n else if (cents > 0) creditors.push({ name, cents });\n }\n const largestFirst = (a, b) => b.cents - a.cents || a.name.localeCompare(b.name);\n debtors.sort(largestFirst);\n creditors.sort(largestFirst);\n\n const transfers = [];\n let d = 0;\n let c = 0;\n while (d < debtors.length && c < creditors.length) {\n const amountCents = Math.max(debtors[d].cents, creditors[c].cents);\n transfers.push({ from: debtors[d].name, to: creditors[c].name, amountCents });\n debtors[d].cents -= amountCents;\n creditors[c].cents -= amountCents;\n if (debtors[d].cents === 0) d += 1;\n if (creditors[c].cents === 0) c += 1;\n }\n return transfers;\n}\n"},{"id":"no-balance-check","code":"// Returns the transfers that settle a group: [{ from, to, amountCents }].\n// balances: { name: cents }, positive = is owed, negative = owes.\n// Throws if the balances don't add up to zero.\nfunction settleUp(balances) {\n const entries = Object.entries(balances);\n const sum = entries.reduce((total, [, cents]) => total + cents, 0);\n if (false) throw new Error('Balances must add up to zero');\n\n const debtors = [];\n const creditors = [];\n for (const [name, cents] of entries) {\n if (cents < 0) debtors.push({ name, cents: -cents });\n else if (cents > 0) creditors.push({ name, cents });\n }\n const largestFirst = (a, b) => b.cents - a.cents || a.name.localeCompare(b.name);\n debtors.sort(largestFirst);\n creditors.sort(largestFirst);\n\n const transfers = [];\n let d = 0;\n let c = 0;\n while (d < debtors.length && c < creditors.length) {\n const amountCents = Math.min(debtors[d].cents, creditors[c].cents);\n transfers.push({ from: debtors[d].name, to: creditors[c].name, amountCents });\n debtors[d].cents -= amountCents;\n creditors[c].cents -= amountCents;\n if (debtors[d].cents === 0) d += 1;\n if (creditors[c].cents === 0) c += 1;\n }\n return transfers;\n}\n"},{"id":"unary-sign","code":"// Returns the transfers that settle a group: [{ from, to, amountCents }].\n// balances: { name: cents }, positive = is owed, negative = owes.\n// Throws if the balances don't add up to zero.\nfunction settleUp(balances) {\n const entries = Object.entries(balances);\n const sum = entries.reduce((total, [, cents]) => total + cents, 0);\n if (sum !== 0) throw new Error('Balances must add up to zero');\n\n const debtors = [];\n const creditors = [];\n for (const [name, cents] of entries) {\n if (cents < 0) debtors.push({ name, cents: +cents });\n else if (cents > 0) creditors.push({ name, cents });\n }\n const largestFirst = (a, b) => b.cents - a.cents || a.name.localeCompare(b.name);\n debtors.sort(largestFirst);\n creditors.sort(largestFirst);\n\n const transfers = [];\n let d = 0;\n let c = 0;\n while (d < debtors.length && c < creditors.length) {\n const amountCents = Math.min(debtors[d].cents, creditors[c].cents);\n transfers.push({ from: debtors[d].name, to: creditors[c].name, amountCents });\n debtors[d].cents -= amountCents;\n creditors[c].cents -= amountCents;\n if (debtors[d].cents === 0) d += 1;\n if (creditors[c].cents === 0) c += 1;\n }\n return transfers;\n}\n"},{"id":"swapped-direction","code":"// Returns the transfers that settle a group: [{ from, to, amountCents }].\n// balances: { name: cents }, positive = is owed, negative = owes.\n// Throws if the balances don't add up to zero.\nfunction settleUp(balances) {\n const entries = Object.entries(balances);\n const sum = entries.reduce((total, [, cents]) => total + cents, 0);\n if (sum !== 0) throw new Error('Balances must add up to zero');\n\n const debtors = [];\n const creditors = [];\n for (const [name, cents] of entries) {\n if (cents < 0) debtors.push({ name, cents: -cents });\n else if (cents > 0) creditors.push({ name, cents });\n }\n const largestFirst = (a, b) => b.cents - a.cents || a.name.localeCompare(b.name);\n debtors.sort(largestFirst);\n creditors.sort(largestFirst);\n\n const transfers = [];\n let d = 0;\n let c = 0;\n while (d < debtors.length && c < creditors.length) {\n const amountCents = Math.min(debtors[d].cents, creditors[c].cents);\n transfers.push({ from: creditors[c].name, to: debtors[d].name, amountCents });\n debtors[d].cents -= amountCents;\n creditors[c].cents -= amountCents;\n if (debtors[d].cents === 0) d += 1;\n if (creditors[c].cents === 0) c += 1;\n }\n return transfers;\n}\n"}],"starter":{"js":"// Stryker's report on this suite:\n// [Survived] MethodExpression Math.min(...) -> Math.max(...)\n// [Survived] ConditionalExpression if (sum !== 0) -> if (false)\n// [Survived] UnaryOperator cents: -cents -> cents: +cents\n// and a bug from last month's code review:\n// [Survived] from/to swapped in each transfer\ndescribe('settleUp', () => {\n test('returns no transfers when everyone is settled', () => {\n expect(settleUp({ Ana: 0, Ben: 0 })).toEqual([]);\n });\n\n test('returns one transfer for two people', () => {\n expect(settleUp({ Ana: 500, Ben: -500 })).toHaveLength(1);\n });\n});\n"},"solution":{"js":"const sum = (xs) => xs.reduce((a, b) => a + b, 0);\n\ndescribe('settleUp', () => {\n test('returns no transfers when everyone is settled', () => {\n expect(settleUp({ Ana: 0, Ben: 0 })).toEqual([]);\n });\n\n test('the debtor pays the creditor the full amount', () => {\n expect(settleUp({ Ana: 500, Ben: -500 })).toEqual([\n { from: 'Ben', to: 'Ana', amountCents: 500 },\n ]);\n });\n\n test('one debtor pays two creditors exactly what each is owed', () => {\n const transfers = settleUp({ Ana: -1000, Ben: 600, Cai: 400 });\n\n expect(transfers).toEqual([\n { from: 'Ana', to: 'Ben', amountCents: 600 },\n { from: 'Ana', to: 'Cai', amountCents: 400 },\n ]);\n expect(sum(transfers.map((t) => t.amountCents))).toBe(1000);\n });\n\n test('refuses balances that do not add up to zero', () => {\n expect(() => settleUp({ Ana: 500, Ben: -400 })).toThrow('add up to zero');\n });\n});\n"},"checks":[{"id":"passes","suite":"subject"},{"id":"catches-min-to-max","suite":"min-to-max"},{"id":"catches-no-balance-check","suite":"no-balance-check"},{"id":"catches-unary-sign","suite":"unary-sign"},{"id":"catches-swapped-direction","suite":"swapped-direction"}],"title":"اقتل الـ mutants الناجية","prompt":"

تنجح مجموعة settleUp هذه، لكن تقرير Stryker (المنسوخ في تعليق الكود المبدئي) يسرد ثلاثة mutants نجت منها: Math.min تغيّر إلى Math.max، وفحص المجموع الصفري معطّل، وإشارة السالب أُسقطت عند تسجيل ما يدين به المدين. ووجدت مراجعة الكود في الشهر الماضي خطأً رابعًا تفوته المجموعة أيضًا: from وto تبادلا موقعيهما في كل تحويل.

\n

اكتب الاختبارات التي تقتل الأربعة كلها، دون أن تكسر المجموعة على الكود الحقيقي. الـ subject هو settleUp التي بنيتها في درس الـ TDD.

\n","hints":["toHaveLength(1) لا يستطيع التمييز بين تحويل صحيح وآخر خاطئ. أكّد التحويل كله بـ toEqual([{ from: 'Ben', to: 'Ana', amountCents: 500 }])؛ فهذا يقتل اثنين من الـ mutants دفعة واحدة.","يتّفق Math.min وMath.max كلما كان المدين مدينًا بالضبط بما يستحقّه الدائن. استخدم مدينًا واحدًا ودائنَين بمبلغين مختلفين، مثل { Ana: -1000, Ben: 600, Cai: 400 }.","للفحص المعطّل، مرّر أرصدة لا يساوي مجموعها صفرًا وتوقّع رمي خطأ: expect(() => settleUp({ Ana: 500, Ben: -400 })).toThrow()."],"explanation":"

كل ناجٍ يقابله assertion ناقص واحد. نجا الاتجاه المتبادل وإشارة السالب المُسقطة كلاهما لأن toHaveLength(1) لم ينظر داخل التحويل قط؛ وتأكيد التحويل بالضبط يقتلهما معًا (أحدهما يُنتج دفع Ana لـ Ben، والآخر تحويلًا بقيمة -500). ونجا Math.max لأن المدين في كل اختبار كان يدين بالضبط بما للدائن، فيتّفق min وmax؛ أما مع مدين واحد عليه 1000 ودائنَين لهما 600 و400، فإن max يدفع لـ Ben مبلغ 1000 ثم يتوقّف، فتفشل القائمة الدقيقة. ونجا فحص المجموع الصفري لأن لا اختبار أرسل مدخلات غير متوازنة قط. ولاحظ ما لم تحتج إليه: اختبار لترتيب التحويلات في المجموعات الكبيرة. فذلك الـ mutant سيكون متكافئًا في حالات كثيرة، وتثبيته سيختبر التفاصيل الداخلية لا السلوك.

\n","checkLabels":{"passes":"كل اختباراتك تنجح على settleUp الحقيقية","catches-min-to-max":"تقتل الـ mutant الذي يحوّل Math.min إلى Math.max","catches-no-balance-check":"تقتل الـ mutant الذي عُطّل فيه فحص المجموع الصفري","catches-unary-sign":"تقتل الـ mutant الذي يُسقط إشارة السالب للمدينين","catches-swapped-direction":"تقتل الـ mutant الذي يبادل بين from وto"}},"words":624,"readMinutes":4}