Flutter Mobile Development · درس

مبادئ اختبار العناصر

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

مبادئ اختبار العناصر درس مجاني في Flutter Mobile Development على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Flutter Mobile Development، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Flutter Mobile Development 4 دروس في المجموع.

بعض أجزاء هذا الدرس لم تُترجم بعد وتظهر باللغة الإنجليزية.

What is Widget Testing?

Welcome to widget testing! It's a key part of building robust Flutter apps.

Widget tests let you check if your individual UI components (widgets) look and behave as expected. Think of it as putting each piece of your app under a microscope.

Focus: Individual widgets.
Goal: Verify UI rendering and interaction in isolation.

Diving into `flutter_test`

Flutter provides a special package called flutter_test for writing widget tests. It's automatically included in new Flutter projects.

The core of widget testing is the testWidgets function. It gives you a WidgetTester to interact with your widgets and an environment to run them.

Where Do Tests Go?

Flutter test files typically live in the test/ folder of your project. For example, if you have a widget in lib/my_widget.dart, its test might be in test/my_widget_test.dart.

Each test file starts with importing package:flutter_test/flutter_test.dart and defines one or more testWidgets blocks.

Your Testing Helper: `WidgetTester`

The WidgetTester is your main tool for interacting with widgets during a test. It provides methods to:

pumpWidget(): Renders a widget tree.
find: Locates widgets in the tree.
tap(): Simulates a tap on a widget.
pump(): Rebuilds the widget tree, often after an interaction.

It helps simulate how a user would interact with your app.

Testing a Basic Stateless Widget

Let's test a simple StatelessWidget. Imagine a widget that just shows some text.

We'll use tester.pumpWidget() to display our widget, then tester.find to locate the text, and finally expect() to assert that it's there.

import 'package:flutter/material.dart';

class MyTextWidget extends StatelessWidget {
  final String message;

  const MyTextWidget({Key? key, required this.message}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Test')),
        body: Center(
          child: Text(message),
        ),
      ),
    );
  }
}

void main() {
  runApp(const MyTextWidget(message: "Hello CoddyKit!"));
}

Code: Testing `MyTextWidget`

Here's how you'd write a test for our MyTextWidget. Notice how we wrap it in MaterialApp and Scaffold to give it a proper context for rendering.

We use find.text() to locate the text and expect() with findsOneWidget to confirm its presence.

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

// Assume MyTextWidget is defined in a separate file or above for testing
class MyTextWidget extends StatelessWidget {
  final String message;
  const MyTextWidget({Key? key, required this.message}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Test')),
        body: Center(
          child: Text(message),
        ),
      ),
    );
  }
}

void main() {
  testWidgets('MyTextWidget displays correct message', (WidgetTester tester) async {
    // Build our widget and trigger a frame.
    await tester.pumpWidget(const MyTextWidget(message: 'Hello CoddyKit!'));

    // Verify that our message appears.
    expect(find.text('Hello CoddyKit!'), findsOneWidget);
    expect(find.text('Goodbye!'), findsNothing);
  });
}

Interacting with Widgets

Widget tests can simulate user interactions. This is crucial for testing StatefulWidgets or widgets with buttons, text fields, etc.

tester.tap(finder): Simulates a tap on the widget found by finder.
tester.enterText(finder, text): Enters text into a TextField.
tester.pump(): After an interaction that causes state changes (like a button tap), you must call pump() to rebuild the UI and reflect those changes.

Testing a Basic Stateful Widget

Let's create a simple counter widget. It has a text displaying a number and a button to increment it. We'll test its initial state and then its behavior after a tap.

import 'package:flutter/material.dart';

class CounterWidget extends StatefulWidget {
  const CounterWidget({Key? key}) : super(key: key);

  @override
  State<CounterWidget> createState() => _CounterWidgetState();
}

class _CounterWidgetState extends State<CounterWidget> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Counter')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              const Text(
                'You have pushed the button this many times:',
              ),
              Text(
                '$_counter',
                key: const Key('counterText'), // Added key for easy finding
                style: Theme.of(context).textTheme.headlineMedium,
              ),
            ],
          ),
        ),
        floatingActionButton: FloatingActionButton(
          key: const Key('incrementButton'), // Added key
          onPressed: _incrementCounter,
          tooltip: 'Increment',
          child: const Icon(Icons.add),
        ),
      ),
    );
  }
}

void main() {
  runApp(const CounterWidget());
}

Code: Testing `CounterWidget`

Here's the test for our CounterWidget. We first verify the initial count, then simulate a tap on the increment button using its Key, and finally assert that the count has updated.

Remember to call tester.pump() after tester.tap() to rebuild the UI and see the state change.

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

// Assume CounterWidget is defined in a separate file or above for testing
class CounterWidget extends StatefulWidget {
  const CounterWidget({Key? key}) : super(key: key);
  @override
  State<CounterWidget> createState() => _CounterWidgetState();
}
class _CounterWidgetState extends State<CounterWidget> {
  int _counter = 0;
  void _incrementCounter() {
    setState(() { _counter++; });
  }
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Counter')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              const Text('You have pushed the button this many times:'),
              Text('$_counter', key: const Key('counterText'), style: Theme.of(context).textTheme.headlineMedium),
            ],
          ),
        ),
        floatingActionButton: FloatingActionButton(
          key: const Key('incrementButton'),
          onPressed: _incrementCounter,
          tooltip: 'Increment',
          child: const Icon(Icons.add),
        ),
      ),
    );
  }
}

void main() {
  testWidgets('CounterWidget increments counter on button tap', (WidgetTester tester) async {
    // Build our CounterWidget.
    await tester.pumpWidget(const CounterWidget());

    // Verify that the counter starts at 0.
    expect(find.text('0'), findsOneWidget);
    expect(find.text('1'), findsNothing);

    // Tap the 'increment' icon and trigger a frame.
    await tester.tap(find.byKey(const Key('incrementButton')));
    await tester.pump(); // Rebuild the widget after interaction

    // Verify that the counter has incremented.
    expect(find.text('0'), findsNothing);
    expect(find.text('1'), findsOneWidget);
  });
}

Essential Test Matchers

When writing tests, you'll use expect() with various "matchers" to verify conditions. Here are some common ones:

findsOneWidget: Expects exactly one widget matching the finder.
findsNWidgets(N): Expects exactly N widgets.
findsNothing: Expects no widgets matching the finder.
findsWidgets: Expects one or more widgets.

These help you precisely assert what should or shouldn't be on screen.

Quick Check on Testing

Imagine you have a Text('Hello World') widget. Which find method would you use to confirm this text is visible on the screen after calling tester.pumpWidget()?

Recap: Widget Testing Basics

Great job! You've learned the fundamentals of widget testing:

Widget tests verify individual UI components.
The flutter_test package provides tools like testWidgets and WidgetTester.
You use tester.pumpWidget() to render, find to locate, and expect() with matchers to assert.
tester.tap() and tester.pump() simulate user interaction and update the UI.

Next, you'll explore more advanced testing techniques!

الأسئلة الشائعة

هل درس «مبادئ اختبار العناصر» مجاني؟

نعم — نص درس «مبادئ اختبار العناصر» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Flutter Mobile Development، انتقل إلى CoddyKit PRO. تتضمن دورة Flutter Mobile Development 4 دروس في المجموع.

ماذا ستتعلم في «مبادئ اختبار العناصر»؟

تعلّم كتابة اختبارات للعناصر للتحقق من واجهة المستخدم وسلوك العناصر الفردية بشكل مستقل، مع ضمان صحتها المرئية تتمرن على Flutter Mobile Development مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Flutter Mobile Development؟

لا تُشترط خبرة سابقة. Flutter Mobile Development على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.

كم من الوقت يستغرق درس «مبادئ اختبار العناصر»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Flutter Mobile Development هذا؟

نعم. كل درس في Flutter Mobile Development يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى Flutter Mobile Development