Unit & Widget Testing in Flutter

المقدمة

الـ Testing في Flutter هو جزء مهم من عملية تطوير التطبيقات علشان تتأكد إن التطبيق بيشتغل زي ما هو مطلوب ومن غير مشاكل. الموضوع ده بيساعدك إنك تطلع منتج نهائي عالي الجودة وأقل أخطاء.

Flutter Testing

ايه هو الـFlutter Testing؟

في الاول خلينا متفقين ان كل ما عدد الـFeatures في التطبيق بتزيد كل ما بيبقى الـ Manual Test أصعب، فأحسن حل هو استخدام الـ Automated Test. في Flutter، بتتقسم لـ3 أنواع:

1. الـ Unit Test: بنختبر فيها الوحدات الصغيرة زي functions و classes. - هدفها تتأكد إن كل جزء في الكود بيشتغل صح.
2. الـ Widget Test: بنختبر فيها الـWidgets، وده بيتقال عليها في Frameworks تانية إنها Component Test. بنتأكد إن الـ Widgets بيشتغلوا صح في الـUI.
3. الـ Integration Test(End-to-End testing): بنختبر فيها الـ Application كله أو جزء كبير منه. هدفها تتأكد إن كل حاجه في التطبيق بتتفاعل مع بعضها صح.

Unit Testing in Flutter

ايه هو الـ Unit Testing؟

بنختبر فيها الوحدات الصغيرة زي functions و classes. هدفها تتأكد إن كل جزء في الكود بيشتغل صح. خلينا نفترض ان عندك simple class بيحسب شوية calculations زي انو يطرح او يجمع:

ازاي ممكن اطبق الـ Unit Testing هنا بحيث اتأكد من ان كل حاجه شغاله صح وان عمليه الجمع فعلا بتجمع مش مثلا بتقسم او بتطرح او بتقوم بمهام غير اللي معموله عشانها وهكذا.

في الأول ايه الـ packages المستخدمة؟

الـ "yaml"dev_dependencies: test: في الأول هتمسح الـ test file اللي موجود جوا الـ test folder لأن دا كان مثال بسيط للـ testing معمول للـ default demo application لما بننشئ project جديد فبالتالي انت مش محتاجه.

هتـ Create file جديد جوا الـ test folder وتسميه اسم معبر وبعد الاسم _test فمثال:

testing_app/lib/example_page.dart/test/example_unit_test.dart

بعدها هتحط الـ main function عشان دي هتبقا الـ entry point للـ tests بتاعتك. وبعد كدا عندك Three methods مهمين جدا:

1. الأولى (test method): ودي ال method اللي بنعرف فيها ال unit test لحاجه (واحده بس) ودي بتاخد Two Parameters، الأولى description String والتانية callback function اللي بحط فيها الـ test logic.
2. التانيه (group method): نفس الكلام ولكن الفرق انها بضم اكتر من test method ل أكتر من test case.
3. التالته (expect): ودي method موجوده جوا ال test بتضمنلك ان القيم اللي بتمررها بتتوافق مع القيم المتوقعه و هي دي اللي من خلالها لو كان الـ test صح بيطلعلك ان الـ test passed او هيديك exception.

وبما ان عندنا Two methods عايزين نختبرهم (add& subtract) ف هنعمل لكل واحده test جوا الـ group زي ما واضح في الصوره. بعد كده تقدر تـ run بالـ command دا:

flutter test (fileName)

وبعدها هيظهرلك ال Result سواء Test Passed OR Failed.

تقدروا دلوقتي تشتركوا في النشرة الأسبوعية لاقرأ-تِك بشكل مجاني تمامًا عشان يجيلكوا كل جديد بشكل أسبوعي فيما يخص مواضيع متنوعة وبشروحات بسيطة وسهلة وبجودة عالية 🚀

النشرة هيكون ليها شكل جديد ومختلف عن شكلها القديم وهنحاول انها تكون مميزة ومختلفة وخليط بين المحتوى الأساسي اللي بينزل ومفاجآت تانية كتير 🎉

Eqraatech Newsletter | Eqraatech - اقرأ-تِك | Substack

محتوى تقني متميز في مختلف مجالات هندسة البرمجيات باللغة العربية عن طريق تبسيط المفاهيم البرمجية المعقدة بشكل سلس وباستخدام صور توضيحية مذهلة. Click to read Eqraatech Newsletter, a Substack publication with hundreds of subscribers.

SubstackEqraatech - اقرأ-تِك

بفضل الله قمنا بإطلاق قناة اقرأ-تِك على التليجرام مجانًا للجميع 🚀

آملين بده اننا نفتح باب تاني لتحقيق رؤيتنا نحو إثراء المحتوى التقني باللغة العربية ، ومساعدة لكل متابعينا في انهم يوصلوا لجميع أخبار اقرأ-تِك من حيث المقالات ومحتوى ورقة وقلم والنشرة الأسبوعية وكل جديد بطريقة سريعة وسهلة

مستنينكوا تنورونا , وده رابط القناة 👇

https://t.me/eqraatechcom

Widget Test in Flutter

ايه هو الـ Widget Test؟ بنختبر فيها الـWidgets، وده بيتقال عليها في Frameworks تانية إنها Component Test. خلينا ناخد مثال بسيط لـ Text widget:

ايه الـ packages المستخدمة؟

الـ flutter_test:

1. الـ WidgetTester: بتسمحلك انك تبني وتتفاعل مع الـ Widgets في الـ test environment و دي بتوفر methods مهمه كتيره زي:
   1. الـ enterText() function: بتحاكي ادخال الـ user للـ text
   2. الـ tap() function: بتحاكي الضغط على ال ui - و اقدر اضيف فيها button
   3. الـ drag() function: بتحاكي (السحب) على ال screen - بمعنى لما بتسحب حاجه ب صباعك على الشاشة
   4. الـ pump() function: ب rebuild widget بعد ما ال state بتتغير
   5. الـ pumpAndSettle() funcntion: ب rebuild widget tree لحد ما ال animation يكمل , والمقصود بالـ animation هنا هو اي visual changes
2. الـ testWidgets() function: تلقائيا هتعملك WidgetTester جديده لكل test case وبنستخدمها بدل test().
3. الـ Finder classes: بتسمحلك انك تعمل search للـ widgets--
4. الـ Matcher: بتوفرلك طرق عشان تتأكد من القيم انها متطابقة مع ال expectations ولا لا.. و بتتحقق اذا كان الـ Finder بيحدد مكان ال widgets سواء واحده او اكتر من خلال matcher library ودي في الغالب بنستخدمها مع expect function ، وليها اكتر من cases زي:
   1. الـ findsWidgets: بتتأكد من وجود ال widget سواء واحده او اكتر.
   2. الـ findsOneWidget: بتتأكد من وجود ال widget واحده
   3. الـ findsNothing: بتتأكد ان مفيش اي widget موجوده وغيرهم كتير.

طب هنستخدمها ازاي؟

هتحط الـ main function عشان هتبقا الـ entry point للـ tests بتاعتك. و هتستخدم ال testWidget زي ما موضحه في الصوره وبتكون async function وباستخدام الـ pumpWidget بستدعي فيها الـ widget بتاعتي اللي هعملها test واحط الـ expectations اللي متوقعاه منها زي اني هلاقي كلمة Hello في one widget على الاقل ولو عملتلها update يفترض ان الـ text يتغير و الـ test يكون صحيح.

بعد كده تقدر تـ run بالـ command دا:

flutter test (fileName)

بعدها هيظهرلك ال Result سواء Test Passed OR Failed.

في الختام

بكده نكون شوفنا مع بعض بشكل مختصر وبسيط أنواع الـ Testing في Flutter واتكلمنا عن بعض منهم زي الـ Unit-Tests والـ Widget Tests وشوفنا مع بعض اهميتهم وازاي نقدر نعمل Tests وايه الـ Packages الللي ممكم نستعملها

تقدروا تشوفوا الكود على الـ Repo من هنا:

GitHub - wafaMohamed/flutter_testing_example: Flutter Testing Example for (unit-testing & widget-testing & integration-testing) that provide a two simple application

Flutter Testing Example for (unit-testing & widget-testing & integration-testing) that provide a two simple application - wafaMohamed/flutter_testing_example

GitHubwafaMohamed