ورود و عضویت
0
سبد خرید شما خالی است
0
سبد خرید شما خالی است

آموزش تست نوشتن TDD در فلاتر

0 دیدگاه
10 دقیقه برای مطالعه
برنامه نویسی فلاتر

جمله معروفی است که میگوید هزینه دیباگ و رفع اشکلات یک پروژه معمولا از هزینه اولیه پروژه بیشتر است. این عبارت اهمیت ساخت یک برنامه اصولی و قاعده مند را نشان میدهد که باعث میشود از هزینه و هدر رفتن وقت در آینده جلوگیری کند.

اگر میخواهید برنامه شما انعطاف و قابلیت گسترش در آینده داشته باشد نیاز به تست نوشتن دارید.

نوشتن تست در پروژه های برنامه نویسی یکی از راه های اطمینان پیدا کردن از کارکرد صحیح برنامه است, البته نه کاملا 100%

انواع مختلفی تست وجود دارد و هر کدام هم بر اساس روش های مختلفی پیاده سازی میشوند.

یکی از محبوب ترین روش های توسعه نرم افزار مبتنی بر تست استفاده از TDD یا به شکل کامل Test Driven Development است.

این روش به این دلیل کاربرد زیادی دارد که ابتدا تست ها نوشته میشوند و سپس براساس این تست ها کدهای مورد نظر برنامه پیاده سازی میشوند. این کار باعث میشود برنامه همیشه براساس یک سری تست هایی که با موفقیت پشت سرگذاشته شده اند توسعه یابد.

روش توسعه با استفاده از TDD براساس یک سری قواعد و ریتم های منظم میباشد که با رعایت و تکرار کردن آنها هیچ مشکلی بابت نوشتن تست نخواهید داشت.

  • نوشتن تست هایی که با خطا مواجه میشوند. رنگ قرمز
  • قبول شدن تست. رنگ سبز
  • بازنویسی کدهای نوشته شده برای ایجاد یک برنامه تمیز
فلاتر TDD

فریمورک فلاتر نیز خود دارای سه نوع تست مختلف میباشد:

  • تست ویجت, در این حالت فقط یک ویجت تست میشود
  • تست واحد یا unit test, هدف تست کردن یک کلاس یا متد است
  • تست یکپارچگی یا integration test, هدف تست کردن تمام اپلیکیشن یا بخش بزرگی از آن است

در این مقاله به بررسی تست ویجت بر اساس روش TDD میپردازیم که هدف آن مطمئن شدن از نمایش صحیح اطلاعات است.

پروژه TDD فلاتر

برای نوشتن تست ویجت با مثال خیلی ساده ای این کار را انجام میدهیم. یک صفحه با رابط کاربری که شامل متن و دکمه است به شکل زیر ایجاد میکنیم.

رابط کاربری فلاتر

برای شروع کار یک پروژه جدید فلاتر ایجاد کنید. در اولین مرحله به هیچ وجه نباید رابط کاربری مدنظر را طراحی کنید بلکه همانطور که گفته شد ابتدا تست مورد نظر باید نوشته شود.

مرحله اول: قرمز

در پوشه تست یک فایل به نام widget_test وجود دارد که تست زیر را میتوانید داخل آن بنویسید.

testWidgets('home page is created', (WidgetTester tester) async {
  final testWidget = MaterialApp(
    home: HomePage(),
  );

  await tester.pumpWidget(testWidget);
  await tester.pumpAndSettle();
});

همانطور که انتظار داشتیم تست نوشته شده از ما خطا میگیرد به دلیل اینکه ویجت HomePage را هنوز طراحی نکرده ایم.

مرحله دوم: سبز

در مرحله دوم یا همان رنگ سبز کاری که باید انجام دهیم رفع خطای تست است به همین منظور ویجت HomePage را به شکل زیر تعریف میکنیم.

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

اگر هم اکنون به بخش تست بازگردید خطای مورد نظر رفع شده است و از نظر دستوری برنامه مشکلی ندارد.

برای اجرا تست دستور flutter test را در ترمینال اجرا کنید تا وضعیت تست مشخص شود.

با اجرای این دستور مشاهده میکنید که تست به شکل رنگ سبز در آمده است و مشکلی وجود ندارد.

بازنویسی کدهای فلاتر

در مرحله سوم بازنویسی کدها را در بخش فلاتر انجام میدهیم, اما در حال حاضر کد خاصی ننوشته ایم هنوز تا بخواهیم آن را بازنویسی کنیم به همین خاطر به مرحله چرخه بازمیگردیم. قصد داریم تا یک ویجت متن را داخل صفحه قرار دهیم.

testWidgets('home page contains hello world text',
    (WidgetTester tester) async {
  final testWidget = MaterialApp(
    home: HomePage(),
  );

  await tester.pumpWidget(testWidget);
  await tester.pumpAndSettle();

  expect(find.text('Hello World!'), findsOneWidget);
});

دستور expect بررسی میکند آیا ویجت مورد نظر در بخش HomePage وجود دارد یا خیر که برای بررسی یک متن را مشخص کرده ایم

با اجرای مجدد دستور flutter test متن خطای زیر را مشاهده میکنید که نشان از شکست تست دارد.

The following TestFailure object was thrown running a test:
 Expected: exactly one matching node in the widget tree
 Actual: _TextFinder:<zero widgets with text “Hello World!” (ignoring offstage widgets)>
 Which: means none were found but one was expected

برنامه نویسی چیست؟

برای رفع مشکل تستی که نوشته ایم به فایل ویجت HomePage مراجعه کرده و به شکل زیر آن را ویرایش میکنیم.

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text('Hello World!');
  }
}

با اجرا کردن تست مشاهده میکنید که برنامه با موفقیت این تست را میگذراند و خطای مورد نظر رفع شده است.

آیا در این مرحله نیاز به بازنویسی کدها داریم؟ بستگی به شما دارد ممکن است بخواهید برای متنی که قرار داده اید یک استایل مشخص کنید.

برای اضافه کردن دکمه به تست و رابط کاربری کمی مراحل بیشتری را طی میکنیم تا با روند تست نوشتن آشناتر شوید.

ابتدا یک تست به شکل زیر ایجاد میکنیم:

testWidgets('home page contains button', (WidgetTester tester) async {
  final testWidget = MaterialApp(
    home: HomePage(),
  );

  await tester.pumpWidget(testWidget);
  await tester.pumpAndSettle();

  final buttonMaterial = find.descendant(
    of: find.byType(ElevatedButton),
    matching: find.byType(Material),
  );

  final materialButton = tester.widget<Material>(buttonMaterial);

  expect(materialButton.color, Colors.blue);
  expect(find.text('Weather today'), findsOneWidget);
  expect(find.byKey(Key('icon_weather')), findsOneWidget);
});

در این تست بررسی میکنیم آیا دکمه ای وجود دارد که رنگ آن آبی, دارای متن Weather today و یک آیکون است یا خیر؟

طبیعتا همانطور که میدانید اگر این تست را اجرا کنیم با خطا مواجه میشویم چون چنین دکمه ای در صفحه وجود ندارد پس برای حل آن دست به کار میشویم.

به سراغ ویجت HomePage میرویم و کدهای خود را به شکل زیر تغییر میدهیم:

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(children: [
      Text('Hello World!'),
      ElevatedButton(
          onPressed: () {},
          style: ElevatedButton.styleFrom(primary: Colors.blue),
          child: Row(children: [
            Icon(
              Icons.wb_sunny,
              key: Key('icon_weather'),
            ),
            Text('Weather today')
          ])),
    ]);
  }
}

نوشتن تست های TDD در ابتدا شاید به نظر بیهوده باشد که به دلیل وقت گیر بودن آن است. اما وقتی زمان بازنویسی پروژه و اضافه کردن امکانات مختلف میرسد از آن لذت خواهید برد.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

Hesam
07 سپتامبر 2021
آموزش فارسی فلاتر
آموزش فارسی flutter