معظم الأخطاء لا تعيش في منتصف نطاق المدخلات. لا ينكسر كود أحد مع “$12.34”. بل ينكسر مع “”، ومع “0”، ومع “12.5” حين تُقرأ اثني عشر دولارًا وخمسة سنتات، ومع " 7.10 " حين تُلصق بمسافة في آخرها. إيجاد هذه المدخلات عن قصد هو المهارة التي يعلّمها هذا الدرس.
\nيقبل حقل المبلغ في Splitwise-lite ما يكتبه الناس ويحوّله إلى سنتات صحيحة:
\nfunction parseAmount(input) {\n const text = String(input).trim();\n if (!/^\\d+(\\.\\d{1,2})?$/.test(text)) {\n throw new Error(`Not a valid amount: \"${input}\"`);\n }\n const [whole, fraction = ''] = text.split('.');\n const cents = Number(whole) * 100 + Number(fraction.padEnd(2, '0'));\n if (cents === 0) throw new Error('Amount must be greater than zero');\n return cents;\n}\n\nfor (const input of ['12', '12.5', ' 7.10 ', '0.01']) {\n console.log(JSON.stringify(input), '->', parseAmount(input));\n}\nfor (const input of ['', '0', '-5', '12.345', 'ten']) {\n try { parseAmount(input); } catch (e) { console.log(JSON.stringify(input), '->', e.message); }\n}لا تستطيع اختبار كل نص ممكن، ولا تحتاج إلى ذلك. تقسيم التكافؤ (equivalence partitioning) يعني جمع المدخلات التي يُفترض أن يعاملها الكود بالطريقة نفسها، واختبار ممثّل واحد من كل مجموعة:
\n'12''12.5' (وهي الخطرة: هل هي 1250 أم 1205؟)'12.50'' 7.10 ''ten'، ''، '-5'ثم يضيف تحليل القيم الحدّية (boundary value analysis) المدخلات الواقعة على الحواف بين المجموعات، لأن هناك بالذات يختلط < بـ <=، ويتحوّل {1,2} إلى {1,3}. لكل حدّ، اختبر ما تحته مباشرة، وعليه، وما فوقه مباشرة:
الحدود هنا هي الصفر (مرفوض) مقابل سنت واحد (مقبول)، ومنزلتان عشريتان (مقبول) مقابل ثلاث (مرفوض). وإليك قائمة أمرّ عليها مع أي مدخل:
\n''، ' ''0'، '0.01'، '12345.67''1,000')'12.')كتابة test(...) منفصل لكل واحد من هذه المدخلات تزحم الملف. يأخذ test.each جدولًا وينتج اختبارًا مسمّى لكل صف:
import { describe, test, expect } from 'vitest';\nimport { parseAmount } from './parse-amount.js';\n\ndescribe('parseAmount', () => {\n test.each([\n ['12', 1200],\n ['12.5', 1250],\n ['12.50', 1250],\n ['0.01', 1],\n [' 7.10 ', 710],\n ])('parses %s as %i cents', (input, cents) => {\n expect(parseAmount(input)).toBe(cents);\n });\n\n test.each(['', '0', '0.00', '-5', '12.505', 'ten', '1,000'])(\n 'rejects %s',\n (input) => {\n expect(() => parseAmount(input)).toThrow();\n },\n );\n});يُملأ %s و%i من كل صف، فيقرأ التقرير parses 12.5 as 1250 cents، ويسمّي الفشل المدخل بالضبط. وفي الجداول الأعرض، يمكن أن تكون الصفوف كائنات، ويمكن أن يستخدم الاسم $field:
test.each([\n { input: '12.5', cents: 1250 },\n { input: '0.01', cents: 1 },\n])('parses $input as $cents cents', ({ input, cents }) => {\n expect(parseAmount(input)).toBe(cents);\n});المكسب الحقيقي في الصيانة. حين يبلّغ مستخدم أن '12.' يعطّل النموذج، يكون اختبار الانتكاس (regression test) صفًّا جديدًا واحدًا، لا كتلة كود جديدة.
لا تجد الحالات الحدّية (edge cases) بالتحديق في الكود. ثلاثة مصادر تقوم بمعظم العمل:
\n'12,50' ليست خطأً مطبعيًا بالنسبة إليهم؛ قرّر إن كنت سترفضها برسالة مفيدة أو تقبلها، واكتب الصف في الحالتين.كم صفًّا يكفي؟ صف لكل فئة، وجهتا كل حدّ، وصف لكل خطأ سابق. بالنسبة إلى parseAmount هذا نحو خمسة عشر صفًّا، وبضعة أجزاء من الثانية وقت تشغيل، ونوم هانئ جدًا. وإن وجدت نفسك تريد آلاف المدخلات العشوائية، فانظر في مكتبات الاختبار القائم على الخصائص (property-based testing) مثل fast-check، التي تولّد المدخلات وتقلّص حالات الفشل إلى أصغر مثال؛ لكن في معظم أكواد التطبيقات، يكون الجدول المنتقى يدويًا أوضح.
في التمرين، ابنِ جدولًا يكشف أربعة أخطاء تحليل واقعية. وبعده: دوال ترمي أخطاءً ودوال تعيد promises.
\n","toc":[{"id":"sec-1","text":"الدالة الخاضعة للاختبار","level":2},{"id":"sec-2","text":"فئات التكافؤ والحدود","level":2},{"id":"sec-3","text":"الاختبارات المعتمدة على الجداول باستخدام test.each","level":2},{"id":"sec-4","text":"من أين تأتي الحالات الحدّية","level":2}],"takeaways":["اجمع المدخلات في فئات يُفترض أن يعاملها الكود بالطريقة نفسها، ثم اختبر قيمة نموذجية واحدة من كل فئة، إضافة إلى الحواف بين الفئات.","تتجمّع الأخطاء عند الحدود، لذا اختبر ما تحت كل حدّ مباشرة، وعليه، وما فوقه مباشرة (الصفر، والطول الأقصى، وحدّ المنازل العشرية).","يحوّلtest.each جدولًا من المدخلات والمخرجات المتوقّعة إلى اختبار مسمّى لكل صف، فتصبح إضافة حالة جديدة سطرًا واحدًا.","سمِّ كل صف باستخدام عناصر نائبة مثل %s أو $field كي يخبرك الفشل أيّ مدخل انكسر."],"further":[{"title":"Vitest — test.each","url":"https://vitest.dev/api/test#test-each"},{"title":"MDN — Regular expressions","url":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_expressions"}],"quiz":[{"q":"تقبل parseAmount حتى منزلتين عشريتين. أيّ مجموعة مدخلات تختبر هذه القاعدة على أفضل وجه؟
'12'، '12.5'، '12.50'، '12.505'","why":"صحيح. بلا منازل عشرية، ومنزلة واحدة، ومنزلتان (على الحدّ)، وثلاث (فوقه مباشرة)؛ وهكذا تُغطّى جهتا الحدّ."},{"text":"'12.50'، '99.99'، '0.01'","why":"كلها في الفئة نفسها (منزلتان عشريتان بالضبط)، فالخطأ الذي يقبل ثلاث منازل أيضًا سينجح فيها جميعًا."},{"text":"'abc'، ''، '-5'","why":"مدخلات غير صالحة جيدة، لكن لا شيء منها قريب من حدّ المنازل العشرية، فلا تستطيع التمييز بين منزلتين وثلاث."}],"answer":0},{"q":"ما أسماء الاختبارات التي ينتجها هذا الكود؟
\ntest.each([\n ['12', 1200],\n ['0.5', 50],\n])('parses %s as %i cents', (input, cents) => {\n expect(parseAmount(input)).toBe(cents);\n});parses %s as %i cents، مرتين","why":"العناصر النائبة تُملأ من كل صف، وهذا بالضبط ما يجعل حالات الفشل في الاختبارات المعتمدة على الجداول مقروءة."},{"text":"parses 12 as 1200 cents وparses 0.5 as 50 cents","why":"صحيح. يأخذ %s القيمة الأولى من الصف، و%i الثانية، فيُنتج اختبارًا مسمّى لكل صف."},{"text":"اختبار واحد اسمه parses 12, 0.5 as 1200, 50 cents","why":"يُنشئ test.each اختبارًا لكل صف، لا اختبارًا واحدًا للجدول كله؛ وكل صف ينجح أو يفشل وحده."}],"answer":1},{"q":"حقل المبلغ في نموذج ما يرفض الصفر. أيّ خطأ يلتقطه اختبار بالمدخل '0' ويفوت المدخلين '1' و'-1'؟
'-1' يغطّي الأرقام السالبة أصلًا؛ والصفر لا يضيف شيئًا هنا."},{"text":"محلّل ينسى حذف المسافات الزائدة.","why":"حذف المسافات يتعلّق بالفراغات، ولا يحتوي أيّ من هذه المدخلات الثلاثة على فراغات."},{"text":"شرط مكتوب cents < 0 بدل cents <= 0، فيمرّ الصفر.","why":"صحيح. الصفر يقع على الحدّ تمامًا، ولا يميّز < من <= إلا مدخل يقع على الحدّ."}],"answer":2}],"exercise":{"kind":"web","mode":"test","subject":"// Parses what a user typed in the amount field and returns integer cents.\n// Accepts: digits, optionally a dot and 1 or 2 decimals, surrounding spaces.\n// \"12\" -> 1200, \"12.5\" -> 1250, \" 7.10 \" -> 710\n// Throws an Error for: empty input, zero, negatives, letters,\n// commas and more than 2 decimals.\nfunction parseAmount(input) {\n const text = String(input).trim();\n if (!/^\\d+(\\.\\d{1,2})?$/.test(text)) {\n throw new Error(`Not a valid amount: \"${input}\"`);\n }\n const [whole, fraction = ''] = text.split('.');\n const cents = Number(whole) * 100 + Number(fraction.padEnd(2, '0'));\n if (cents === 0) throw new Error('Amount must be greater than zero');\n return cents;\n}\n","mutants":[{"id":"three-decimals","code":"// Parses what a user typed in the amount field and returns integer cents.\n// Accepts: digits, optionally a dot and 1 or 2 decimals, surrounding spaces.\n// \"12\" -> 1200, \"12.5\" -> 1250, \" 7.10 \" -> 710\n// Throws an Error for: empty input, zero, negatives, letters,\n// commas and more than 2 decimals.\nfunction parseAmount(input) {\n const text = String(input).trim();\n if (!/^\\d+(\\.\\d{1,3})?$/.test(text)) {\n throw new Error(`Not a valid amount: \"${input}\"`);\n }\n const [whole, fraction = ''] = text.split('.');\n const cents = Number(whole) * 100 + Number(fraction.padEnd(2, '0'));\n if (cents === 0) throw new Error('Amount must be greater than zero');\n return cents;\n}\n"},{"id":"pads-wrong-side","code":"// Parses what a user typed in the amount field and returns integer cents.\n// Accepts: digits, optionally a dot and 1 or 2 decimals, surrounding spaces.\n// \"12\" -> 1200, \"12.5\" -> 1250, \" 7.10 \" -> 710\n// Throws an Error for: empty input, zero, negatives, letters,\n// commas and more than 2 decimals.\nfunction parseAmount(input) {\n const text = String(input).trim();\n if (!/^\\d+(\\.\\d{1,2})?$/.test(text)) {\n throw new Error(`Not a valid amount: \"${input}\"`);\n }\n const [whole, fraction = ''] = text.split('.');\n const cents = Number(whole) * 100 + Number(fraction.padStart(2, '0'));\n if (cents === 0) throw new Error('Amount must be greater than zero');\n return cents;\n}\n"},{"id":"accepts-zero","code":"// Parses what a user typed in the amount field and returns integer cents.\n// Accepts: digits, optionally a dot and 1 or 2 decimals, surrounding spaces.\n// \"12\" -> 1200, \"12.5\" -> 1250, \" 7.10 \" -> 710\n// Throws an Error for: empty input, zero, negatives, letters,\n// commas and more than 2 decimals.\nfunction parseAmount(input) {\n const text = String(input).trim();\n if (!/^\\d+(\\.\\d{1,2})?$/.test(text)) {\n throw new Error(`Not a valid amount: \"${input}\"`);\n }\n const [whole, fraction = ''] = text.split('.');\n const cents = Number(whole) * 100 + Number(fraction.padEnd(2, '0'));\n if (cents < 0) throw new Error('Amount must be greater than zero');\n return cents;\n}\n"},{"id":"no-trim","code":"// Parses what a user typed in the amount field and returns integer cents.\n// Accepts: digits, optionally a dot and 1 or 2 decimals, surrounding spaces.\n// \"12\" -> 1200, \"12.5\" -> 1250, \" 7.10 \" -> 710\n// Throws an Error for: empty input, zero, negatives, letters,\n// commas and more than 2 decimals.\nfunction parseAmount(input) {\n const text = String(input);\n if (!/^\\d+(\\.\\d{1,2})?$/.test(text)) {\n throw new Error(`Not a valid amount: \"${input}\"`);\n }\n const [whole, fraction = ''] = text.split('.');\n const cents = Number(whole) * 100 + Number(fraction.padEnd(2, '0'));\n if (cents === 0) throw new Error('Amount must be greater than zero');\n return cents;\n}\n"}],"starter":{"js":"describe('parseAmount', () => {\n test.each([\n ['12', 1200],\n ['12.50', 1250],\n ])('parses %s as %i cents', (input, cents) => {\n expect(parseAmount(input)).toBe(cents);\n });\n\n test.each(['', 'ten', '-5'])('rejects %s', (input) => {\n expect(() => parseAmount(input)).toThrow();\n });\n});\n"},"solution":{"js":"describe('parseAmount', () => {\n test.each([\n ['12', 1200],\n ['12.5', 1250],\n ['12.50', 1250],\n ['0.01', 1],\n [' 7.10 ', 710],\n ])('parses %s as %i cents', (input, cents) => {\n expect(parseAmount(input)).toBe(cents);\n });\n\n test.each(['', 'ten', '-5', '1,000', '12.505'])('rejects %s', (input) => {\n expect(() => parseAmount(input)).toThrow();\n });\n\n test.each(['0', '0.00'])('rejects a zero amount: %s', (input) => {\n expect(() => parseAmount(input)).toThrow('greater than zero');\n });\n});\n"},"checks":[{"id":"passes","suite":"subject"},{"id":"catches-three-decimals","suite":"three-decimals"},{"id":"catches-pads-wrong-side","suite":"pads-wrong-side"},{"id":"catches-accepts-zero","suite":"accepts-zero"},{"id":"catches-no-trim","suite":"no-trim"}],"title":"جدول يكسر parseAmount","prompt":"تحوّل parseAmount(input) ما كتبه المستخدم إلى سنتات صحيحة. قواعدها مذكورة في تعليق الـ subject.
في الكود المبدئي جدولا test.each ينجحان بالكامل لكنهما لا يلتقطان شيئًا مثيرًا للاهتمام: كل صف يقع بأمان داخل فئة واحدة. أضف صفوفًا (وجداول إن شئت) حتى تلتقط مجموعتك أربعة أخطاء مخفيّة: نسخة تقبل ثلاث منازل عشرية، ونسخة تقرأ '12.5' على أنها 1205 سنتًا، ونسخة تقبل الصفر، ونسخة تنسى حذف المسافات.
'12.5' هي 1250 لا 1205. والصفر يقع على الحدّ بين المرفوض والمقبول: جرّب '0'.","أضف ['12.5', 1250] و[' 7.10 ', 710] إلى جدول المدخلات الصالحة، و'12.505' و'0' إلى جدول المدخلات غير الصالحة."],"explanation":"كل خطأ هنا يختبئ عند حدّ، أو في فئة لم يزرها الكود المبدئي قط. '12.505' تقع بعد حدّ المنزلتين بخطوة واحدة، فلا يستطيع غيرها التمييز بين {1,2} و{1,3}. و'12.5' هي فئة المنزلة الواحدة، حيث يحوّل إكمال الصفر في الجهة الخطأ $12.50 إلى $12.05. و'0' تقع على حدّ الصفر تمامًا، وهي المدخل الوحيد الذي يفصل === 0 عن < 0. و' 7.10 ' ضجيج تنسيق يلصقه المستخدمون كل يوم. ومطابقة الرسالة ('greater than zero') في اختبار الصفر تثبت أيضًا أن القاعدة الصحيحة هي التي رفضته، لا مصادفة في الـ regex.