ولكن ما هي الاختبارات؟

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

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

بشكل عام، الاختبارات الآلية هي في الأساس أكواد تم تصميمها لاختبار أكواد أخرى، مما يضمن عمل التطبيق بجودة عالية.
نظرًا لأن الجودة هي الكلمة الأساسية، فمن المهم أن يكون الجميع داخل فريق الهندسة والإنتاج على دراية بالأهمية والقيمة التي تولدها الاختبارات، بحيث يمكن دمجها في عمليات التسليم بطريقة طبيعية.

لماذا يجب أن أختبر؟

أحضر هنا بعض الأسباب لإقناعك بالبدء في تنفيذ الاختبارات في الكود الخاص بك الآن:

رمز آمن من الفشل: يساعد الاختبار على التأكد من أن الكود الخاص بك سيعمل بدون أخطاء، حتى بعد إضافة ميزات جديدة أو إجراء تغييرات.

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

إصلاحات أسرع: باستخدام الاختبارات الآلية، ستتمكن من تصحيح المشكلات بسهولة أكبر، مما يوفر الكثير من الوقت

مفاجآت أقل أثناء النشر: هل يمكنك أن تتخيل أنك قد قمت للتو بالنشر وتلقيت بالفعل مكالمة من المستخدمين بها خطأ في شيء كان من الممكن توقعه؟! وتأتي الاختبارات للمساعدة على وجه التحديد في هذه الوقاية

مساعدتك أنت وزميلك في ضمان الجودة: هل تعرف متى تنتهي من هذه الميزة وتمررها إلى ضمان الجودة للاختبار ويعطيك تقريرًا يحتوي على 357 شيئًا لإصلاحها؟ سيتم أيضًا تقليل هذه المشكلة نظرًا لأنك توقعت معظم الأخطاء التي من المحتمل أن يواجهها

ما هي أنواع الاختبارات؟

هناك العديد من أنواع الاختبارات التي سيتم تطويرها في الواجهة الأمامية، ولكن اليوم سأركز على ثلاثة منها: اختبارات واجهة المستخدم (UI)، والاختبارات الوظيفية (من النهاية إلى النهاية) واختبارات التحقق من الصحة و ولتوضيح كل منها، سأقوم بإنشاء اختبارات لشاشة تسجيل دخول بسيطة في تطبيق React.js باستخدام مكتبة الاختبار.

اختبارات واجهة المستخدم (UI)

تتحقق اختبارات واجهة المستخدم (UI) مما إذا كان يتم عرض المكونات كما هو متوقع، بالإضافة إلى أنها تعتمد على العرض، فإنها تتحقق من وجود عناصر مهمة، مثل حقول النموذج والأزرار والتسميات.

it('should render login form', () => {
  render();
  expect(screen.getByLabelText(/email/i)).toBeInTheDocument();
  expect(screen.getByLabelText(/senha/i)).toBeInTheDocument();
  expect(screen.getByRole('button', { name: /login/i })).toBeInTheDocument();
});

ما يتم اختباره: يضمن هذا الاختبار أن مكون LoginForm يعرض عناصر الواجهة الأساسية: حقول البريد الإلكتروني وكلمة المرور وزر تسجيل الدخول. يبحث screen.getByLabelText عن العناصر حسب التسميات المرتبطة بها ويبحث screen.getByRole عن الزر حسب النص والوظيفة.

الاختبارات الوظيفية (شاملة)

الاختبارات الوظيفية أو الاختبارات الشاملة (E2E)، للتحقق من عمل التطبيق بالكامل من وجهة نظر المستخدم، ومحاكاة التفاعلات الحقيقية مع الواجهة، مثل ملء النماذج والنقر على الأزرار، وتقييم ما إذا كان يستجيب التطبيق للتفاعلات كما هو متوقع.

it('should call onLogin with the username and password when submitted', async () => {
  const handleLogin = jest.fn();
  render();

  fireEvent.change(screen.getByLabelText(/email/i), {
    target: { value: '[email protected]' },
  });
  fireEvent.change(screen.getByLabelText(/senha/i), {
    target: { value: '123456' },
  });

  await fireEvent.click(screen.getByRole('button', { name: /login/i }));

  await waitFor(() => {
    expect(handleLogin).toHaveBeenCalledWith({
      email: '[email protected]',
      password: '123456'
    })
  })

  await waitFor(() => {
    expect(handleLogin).toHaveBeenCalledTimes(1)
  })

});

ما يتم اختباره: هنا، تتم محاكاة تفاعل المستخدم مع نموذج تسجيل الدخول عن طريق ملء حقلي البريد الإلكتروني وكلمة المرور، ثم النقر فوق زر تسجيل الدخول. يتحقق الاختبار أيضًا من استدعاء وظيفة onLogin بالبيانات الصحيحة وأنه تم استدعاؤها مرة واحدة بالضبط.

اختبارات التحقق

تضمن اختبارات التحقق من الصحة أن التطبيق يتحقق من صحة المدخلات غير الصالحة ويعرض رسائل الخطأ المناسبة. تعتبر هذه الاختبارات مهمة للتحقق من أن النموذج يتعامل مع البيانات غير الصحيحة بشكل فعال ويقدم تعليقات كافية للمستخدم.

test('should show error messages for invalid inputs', async () => {
  render();

  fireEvent.change(screen.getByLabelText(/email/i), {
    target: { value: 'invalid-email' },
  });
  fireEvent.change(screen.getByLabelText(/senha/i), {
    target: { value: '123' },
  });

  await fireEvent.click(screen.getByRole('button', { name: /login/i }));

  expect(await screen.findByText(/Email inválido/i)).toBeInTheDocument();
  expect(await screen.findByText(/A senha deve ter pelo menos 6 caracteres/i)).toBeInTheDocument();
});

ما يتم اختباره: هنا نتحقق مما إذا كان النموذج يعرض رسائل خطأ مناسبة عندما يمتلئ حقلا البريد الإلكتروني وكلمة المرور ببيانات غير صالحة. نقوم بمحاكاة إدخال قيم غير صحيحة عن طريق التحقق من ظهور رسائل الخطأ المتوقعة.

هل تفهم لماذا يجب عليك الاختبار؟

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

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

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

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