كيف تتحقق من الشكل البصري لتطبيقك

الاختبارات الذهبية Golden Tests ، تخيل هذا المشهد:
تقوم بتحديث تصميم تطبيقك في Flutter — تغيّر حجم الزر قليلًا، أو تعدّل اللون الأساسي، أو تستبدل خط النص.
كل شيء يبدو طبيعيًا… حتى تكتشف بعد أيام أن التصميم انكسر في شاشة أخرى، أو أن لون الخلفية تغيّر في أحد الصفحات دون قصد! 😱

هذه المشكلة شائعة جدًا، خصوصًا في المشاريع الكبيرة.
ولحسن الحظ، Flutter يمنحك سلاحًا بصريًا قويًا اسمه الاختبارات الذهبية Golden Tests ، والتي تعمل كـ “مرآة زمنية” تحفظ شكل تطبيقك بدقة وتخبرك متى تغيّر أي تفصيل في الواجهة.

ما هو الاختبار الذهبي؟

الاختبار الذهبي هو نوع من اختبارات واجهة المستخدم (Widget Tests) يقوم بمقارنة لقطة بصرية (screenshot) من واجهتك الحالية مع صورة مرجعية ذهبية (Golden Image) محفوظة سابقًا.

إذا اختلفت أي بكسلات بين الصورتين، يفشل الاختبار فورًا.
ببساطة:

Golden Test = “هل ما أراه الآن مطابق لما كان يجب أن أراه؟”

لماذا يُسمى “ذهبيًا”؟

لأن الصورة المرجعية التي تحفظها تمثل “النسخة الذهبية” — أي الشكل المثالي الذي يُفترض أن تظل الواجهة عليه دائمًا.
أي تغيير بعد ذلك (ولو بكسل واحد) يعتبر انحرافًا عن هذا المعيار الذهبي.

متى نستخدم الاختبارات الذهبية؟

• عند بناء تصميمات ثابتة مثل الشاشات الرئيسية أو بطاقات العرض.
• بعد كل تعديل بصري (تغيير لون، حجم، أو خط).
• قبل إصدار نسخة جديدة من التطبيق للتأكد أن الواجهة لم تتأثر.

الاختبارات الذهبية مثالية في المشاريع التي تهتم بالدقة البصرية، مثل تطبيقات المتاجر، المعارض، أو الشاشات التسويقية.

إعداد اختبار ذهبي في Flutter

لنبدأ بخطوات بسيطة:

1. تأكد من إضافة مكتبة الاختبار في pubspec.yaml:

dev_dependencies:
  flutter_test:
    sdk: flutter

2. أنشئ ملفًا داخل مجلد test/ مثل:

test/golden_test.dart

3. أضف المثال التالي:

import 'package:flutter_test/flutter_test.dart';
import 'package:flutter/material.dart';

void main() {
  testWidgets('واجهة البطاقة يجب أن تطابق الصورة الذهبية', (tester) async {
    await tester.pumpWidget(
      MaterialApp(
        home: Card(
          child: Padding(
            padding: const EdgeInsets.all(16),
            child: Text('Hello Flutter!'),
          ),
        ),
      ),
    );

    await expectLater(
      find.byType(Card),
      matchesGoldenFile('goldens/card_golden.png'),
    );
  });
}

4. شغّل الأمر التالي لإنشاء الصورة الذهبية لأول مرة:

flutter test --update-goldens

سيقوم Flutter بإنشاء ملف الصورة في المسار test/goldens/.
في المرات القادمة، سيقارن بين الصورة الجديدة وهذه الصورة المرجعية.

كيف تعرف أن الاختبار فشل؟

إذا تغيّر شكل الواجهة (حتى لو اختلافًا طفيفًا)، ستظهر رسالة مثل:

Golden "card_golden.png" did not match.
See diff in failure output.

وسيقوم Flutter بإنشاء ملف مقارنة (diff) يوضح الأماكن التي تغيرت باللون الأحمر أو الأخضر.

مقارنة الصور عمليًا

الاختلافات بين الصور تُعرض عادة في 3 ملفات:

يمكنك فتح ملفات الـ diff لتكتشف أين تغير التصميم بالضبط.
أحيانًا يكون التغيير بسيطًا جدًا مثل تدرج لون أو اختلاف حجم خط — لكنك ستكتشفه فورًا 👀.

نصائح عملية لكتابة اختبارات ذهبية قوية

1. ثبت حجم الشاشة:
   استخدم tester.binding.setSurfaceSize(Size(400, 800)); لضمان ثبات العرض.
2. استخدم خطوط النظام الافتراضية:
   لأن الاختبارات قد تختلف بين الأنظمة حسب الخطوط المثبتة.
3. تجنب التحميل من الإنترنت:
   استخدم صورًا محلية بدلًا من الشبكة أثناء الاختبار.
4. أنشئ مجلدًا خاصًا بالصور الذهبية:
   مثل test/goldens/ لتبقى منظمة وسهلة التحديث.
5. حدث الصور فقط عند الحاجة:
   لا تستخدم --update-goldens إلا عندما تتأكد أن التغيير مقصود.

دمج الاختبارات الذهبية مع CI/CD

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

مثلاً باستخدام GitHub Actions:

- name: تشغيل الاختبارات الذهبية
  run: flutter test

سيتم مقارنة جميع الصور الذهبية تلقائيًا مع كل عملية دمج (merge) في المشروع.

أدوات مفيدة

• flutter_goldens: لتخصيص اختبارات Golden مع إعدادات متقدمة.
• golden_toolkit: مكتبة تسهّل إنشاء صور متعددة لمختلف أحجام الشاشات.
• flutter test –coverage: لتقارير الدمج مع باقي أنواع الاختبارات.

الخلاصة

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

“مهلاً، شيء ما تغيّر في واجهتك!”

ابدأ باستخدام Golden Tests اليوم، وستضمن أن تطبيقك يظل جميلًا ودقيقًا تمامًا كما صممته في المرة الأولى — في كل إصدار جديد.

✨ تذكّر: الكود يمكن إصلاحه بسهولة، لكن الثقة في التصميم لا تُبنى إلا بالاختبار الذهبي.