تمرين عملي: اختبار دالة fizzBuzz

أهلاً بك في أول تمرين عملي حقيقي في هذه الدورة! الآن بعد أن تعرفت على أساسيات كتابة الاختبارات باستخدام Vitest، حان الوقت لتطبيق ما تعلمته على مشكلة برمجية كلاسيكية ومشهورة جداً في عالم المقابلات التقنية: تحدي FizzBuzz.

قد يبدو هذا التحدي بسيطًا، ولكنه مثالي للمبتدئين في اختبار الوحدات لأنه يغطي حالات متعددة ويتطلب التفكير في الشروط المختلفة للدالة. هذا التمرين سيساعدك على ترسيخ فهمك لكيفية تقسيم المشكلة إلى أجزاء صغيرة قابلة للاختبار.

الهدف من التمرين

الهدف هو كتابة مجموعة كاملة من اختبارات الوحدات (Unit Tests) لدالة fizzBuzz. سنقوم بتغطية جميع الحالات المنطقية الممكنة للتأكد من أن الدالة تعمل تمامًا كما هو متوقع.

فهم متطلبات fizzBuzz

قبل أن نكتب أي اختبار، يجب أن نفهم تمامًا ما الذي من المفترض أن تفعله الدالة. قواعد fizzBuzz بسيطة:

1. إذا كان الرقم المُدخل قابلاً للقسمة على 3، يجب أن تُرجع الدالة السلسلة النصية "Fizz".
2. إذا كان الرقم المُدخل قابلاً للقسمة على 5، يجب أن تُرجع الدالة السلسلة النصية "Buzz".
3. إذا كان الرقم المُدخل قابلاً للقسمة على كل من 3 و 5، يجب أن تُرجع الدالة السلسلة النصية "FizzBuzz".
4. إذا لم يتحقق أي من الشروط السابقة، يجب أن تُرجع الدالة الرقم نفسه.

الخطوة 1: الدالة التي سنختبرها

لنفترض أن لدينا الدالة التالية في ملف باسم fizzbuzz.js. هذه هي الدالة التي سنكتب اختباراتنا لها. لا تقلق بشأن فهم كل تفاصيلها الآن؛ ركز على ما يجب أن تكون عليه المخرجات بناءً على المدخلات.

// src/fizzbuzz.js

export const fizzBuzz = (number) => {
  if (number % 3 === 0 && number % 5 === 0) {
    return 'FizzBuzz';
  }
  if (number % 3 === 0) {
    return 'Fizz';
  }
  if (number % 5 === 0) {
    return 'Buzz';
  }
  return number;
};

الخطوة 2: إعداد ملف الاختبار

الآن، دعنا ننشئ ملف اختبار جديد. بناءً على هيكل المشروع الذي نعمل عليه، قم بإنشاء ملف جديد باسم fizzbuzz.test.js داخل مجلد src.

في بداية هذا الملف، ستحتاج إلى استيراد دوال Vitest والدالة التي تريد اختبارها:

// src/fizzbuzz.test.js

import { describe, it, expect } from 'vitest';
import { fizzBuzz } from './fizzbuzz';

الخطوة 3: كتابة مجموعة الاختبارات

سنستخدم الدالة describe لتجميع كل الاختبارات المتعلقة بدالة fizzBuzz معًا. هذا يجعل مخرجات الاختبار أكثر تنظيمًا وقابلية للقراءة.

// src/fizzbuzz.test.js

import { describe, it, expect } from 'vitest';
import { fizzBuzz } from './fizzbuzz';

describe('fizzBuzz', () => {
  // Our tests will go here
});

اختبار الحالة الأولى: "Fizz"

أول قاعدة تقول إنه إذا كان الرقم يقبل القسمة على 3، يجب أن تكون النتيجة "Fizz". لنكتب اختبارًا (it) يتحقق من هذا الشرط. الرقم 3 هو مثال جيد.

// Inside the describe block

it('should return "Fizz" if the number is divisible by 3', () => {
  // Arrange: Define the input for our test
  const number = 3;

  // Act: Call the function we are testing
  const result = fizzBuzz(number);

  // Assert: Check if the result is what we expect
  expect(result).toBe('Fizz');
});

اختبار الحالة الثانية: "Buzz"

الآن، لنكتب اختبارًا للقاعدة الثانية: إذا كان الرقم يقبل القسمة على 5، يجب أن تكون النتيجة "Buzz". سنستخدم الرقم 5 كمثال.

// Inside the describe block

it('should return "Buzz" if the number is divisible by 5', () => {
  const result = fizzBuzz(5);
  expect(result).toBe('Buzz');
});

لاحظ كيف قمنا بدمج خطوات Arrange و Act في سطر واحد للاختصار، وهذا شائع في الاختبارات البسيطة.

اختبار الحالة الثالثة: "FizzBuzz"

ماذا عن الأرقام التي تقبل القسمة على 3 و 5 معًا؟ يجب أن تكون النتيجة "FizzBuzz". الرقم 15 هو المثال الكلاسيكي هنا.

// Inside the describe block

it('should return "FizzBuzz" if the number is divisible by 3 and 5', () => {
  expect(fizzBuzz(15)).toBe('FizzBuzz');
});

اختبار الحالة الرابعة: الرقم نفسه

أخيرًا، نحتاج إلى التأكد من أن الدالة تُرجع الرقم نفسه إذا لم يكن قابلاً للقسمة على 3 أو 5. لنجرب الرقم 1.

// Inside the describe block

it('should return the number if it is not divisible by 3 or 5', () => {
  expect(fizzBuzz(1)).toBe(1);
});

الكود النهائي لملف الاختبار

بعد كتابة جميع الحالات، يجب أن يبدو ملف fizzbuzz.test.js الخاص بك هكذا:

// src/fizzbuzz.test.js

import { describe, it, expect } from 'vitest';
import { fizzBuzz } from './fizzbuzz';

describe('fizzBuzz', () => {
  it('should return "Fizz" if the number is divisible by 3', () => {
    // Test with a few numbers divisible by 3
    expect(fizzBuzz(3)).toBe('Fizz');
    expect(fizzBuzz(6)).toBe('Fizz');
  });

  it('should return "Buzz" if the number is divisible by 5', () => {
    // Test with a few numbers divisible by 5
    expect(fizzBuzz(5)).toBe('Buzz');
    expect(fizzBuzz(10)).toBe('Buzz');
  });

  it('should return "FizzBuzz" if the number is divisible by 3 and 5', () => {
    expect(fizzBuzz(15)).toBe('FizzBuzz');
    expect(fizzBuzz(30)).toBe('FizzBuzz');
  });

  it('should return the number if it is not divisible by 3 or 5', () => {
    expect(fizzBuzz(1)).toBe(1);
    expect(fizzBuzz(2)).toBe(2);
    expect(fizzBuzz(4)).toBe(4);
  });
});

لاحظ أننا أضفنا بعض التأكيدات (expect) الإضافية في كل اختبار لزيادة الثقة في صحة الكود.

تشغيل الاختبارات

الآن، افتح الطرفية (Terminal) في مشروعك وقم بتشغيل الأمر الذي تعلمته في الدرس السابق:

npm test

أو

npx vitest

إذا سارت الأمور على ما يرام، يجب أن ترى مخرجات تشير إلى أن جميع اختباراتك قد نجحت. تهانينا، لقد كتبت أول مجموعة اختبارات حقيقية لك!

خلاصة

في هذا التمرين، قمت بـ:

• تحليل متطلبات دالة بسيطة.
• تقسيم المتطلبات إلى حالات فردية قابلة للاختبار.
• استخدام describe لتنظيم مجموعة من الاختبارات ذات الصلة.
• استخدام it لتعريف كل حالة اختبار على حدة.
• استخدام expect و toBe للتأكد من أن المخرجات الفعلية للدالة تتطابق مع المخرجات المتوقعة.

أنت الآن جاهز للانتقال إلى مفاهيم أكثر تقدمًا في عالم اختبار الوحدات. عمل رائع!