Flutter Mobile Development · บทเรียน

การทดสอบการผสานรวม

ดำเนินการทดสอบการผสานรวมเพื่อตรวจสอบการทำงานร่วมกันระหว่างวิดเจ็ตหลายรายการและลำดับการใช้งานทั้งหมดภายในแอปพลิเคชัน

การทดสอบการผสานรวม เป็นบทเรียน Flutter Mobile Development ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Flutter Mobile Development และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Flutter Mobile Development มีบทเรียนทั้งหมด 4 บทเรียน

บางส่วนของบทเรียนนี้ยังไม่ได้รับการแปล และแสดงเป็นภาษาอังกฤษ

What are Integration Tests?

Welcome! In this lesson, we'll explore integration testing, a crucial step for building robust Flutter apps.

Integration tests verify how different parts of your application work together. Think of it as simulating a user interacting with your app through a complete flow, like logging in, navigating, and performing actions.

Why Integration Tests Matter

While widget tests (which we covered previously) focus on individual UI components, integration tests give you confidence that entire user journeys function correctly.

Real-world scenarios: Mimic actual user behavior.
Catch bugs early: Uncover issues that only appear when multiple widgets or services interact.
Ensure stability: Validate that changes don't break existing features.

Setting Up Integration Tests

Flutter uses the integration_test package to enable these tests. It allows you to run tests directly on a real device or emulator, providing a true representation of your app's behavior.

First, add the integration_test dependency to your pubspec.yaml file under both dependencies and dev_dependencies:

dependencies:
  flutter:
    sdk: flutter
  integration_test:
    sdk: flutter
dev_dependencies:
  flutter_test:
    sdk: flutter
  integration_test:
    sdk: flutter

Integration Test Structure

Integration tests typically involve two main files:

The test driver, usually in test_driver/app_test.dart. This file sets up the environment to run your integration tests.
The actual test suite, typically in integration_test/app_test.dart. This is where you write your test logic.

The Test Driver Entry Point

The test_driver/app_test.dart file is simple. It initializes the IntegrationTestWidgetsFlutterBinding and calls integrationDriver() to handle the test execution.

import 'package:integration_test/integration_test_driver.dart';

Future<void> main() async {
  IntegrationTestWidgetsFlutterBinding.ensureInitialized();
  await integrationDriver();
}

App for Integration Testing

Let's create a simple counter app to demonstrate an integration test. Notice we add Keys to widgets we want to find and interact with in our tests.

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  int _counter = 0;

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Counter App',
      home: Scaffold(
        appBar: AppBar(title: const Text('Counter App')),
        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),
        ),
      ),
    );
  }
}

Writing Your Integration Test

Now, let's write the actual test in integration_test/app_test.dart. We'll use tester.pumpAndSettle() to wait for animations and UI updates, and tester.tap() to simulate user interaction.

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

// Import your app's main file. 
// Replace 'my_app_name' with your actual package name.
import 'package:my_app_name/main.dart' as app;

void main() {
  IntegrationTestWidgetsFlutterBinding.ensureInitialized();

  group('Counter App Integration Tests', () {
    testWidgets('Verify counter increments on button tap', (tester) async {
      app.main(); // Start the application
      await tester.pumpAndSettle(); // Wait for the UI to build

      // Find the counter text and verify its initial value
      final counterTextFinder = find.byKey(const Key('counterText'));
      expect(counterTextFinder, findsOneWidget);
      expect(tester.widget<Text>(counterTextFinder).data, '0');

      // Find and tap the increment button
      final incrementButtonFinder = find.byKey(const Key('incrementButton'));
      await tester.tap(incrementButtonFinder);
      await tester.pumpAndSettle(); // Wait for state change & UI update

      // Verify the counter text has updated to 1
      expect(tester.widget<Text>(counterTextFinder).data, '1');

      // Tap again and verify it updates to 2
      await tester.tap(incrementButtonFinder);
      await tester.pumpAndSettle();
      expect(tester.widget<Text>(counterTextFinder).data, '2');
    });
  });
}

Running Integration Tests

To execute your integration tests, you'll use the flutter drive command from your project's root directory. Make sure you have an Android emulator/device or iOS simulator/device running.

This command tells Flutter to use your test driver to run the integration test suite against your app.

flutter drive \
  --driver=test_driver/app_test.dart \
  --target=integration_test/app_test.dart

Advanced Interactions

Integration tests can simulate complex user flows across multiple screens. You can:

Enter text: Use tester.enterText(find.byType(TextField), 'Hello');
Scroll: Use tester.scrollUntilVisible() to bring widgets into view.
Navigate: Tap buttons that trigger Navigator.push() or Navigator.pop() and verify screen changes.

Always use Keys for robust widget identification, especially when dealing with dynamic UIs or multiple similar widgets.

Quick Check

Which of the following are primary benefits of using integration tests in Flutter development?

Recap: Integration Testing

Great job! You've learned about integration testing in Flutter. We covered:

What integration tests are and why they are vital for app stability.
How to set up the integration_test package.
The structure of integration tests and how to write them.
How to run tests using flutter drive.

Integration tests provide high confidence that your app's features work together seamlessly, just like a user would experience them.

คำถามที่พบบ่อย

บทเรียน “การทดสอบการผสานรวม” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การทดสอบการผสานรวม” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Flutter Mobile Development ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Flutter Mobile Development มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การทดสอบการผสานรวม”

ดำเนินการทดสอบการผสานรวมเพื่อตรวจสอบการทำงานร่วมกันระหว่างวิดเจ็ตหลายรายการและลำดับการใช้งานทั้งหมดภายในแอปพลิเคชัน คุณปฏิบัติ Flutter Mobile Development ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Flutter Mobile Development หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Flutter Mobile Development บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน

บทเรียน “การทดสอบการผสานรวม” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Flutter Mobile Development นี้ได้ไหม

ได้ บทเรียน Flutter Mobile Development ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ Flutter Mobile Development