Flutter Mobile Development · Pelajaran

Pengujian Integrasi

Lakukan pengujian integrasi untuk memvalidasi interaksi antara beberapa widget dan seluruh alur pengguna dalam aplikasi Anda.

Pelajaran 2 dari 411 langkah

Pengujian Integrasi adalah pelajaran Flutter Mobile Development gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Flutter Mobile Development, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Flutter Mobile Development mencakup 4 pelajaran total.

Apa Itu Pengujian Integrasi?

Selamat datang! Dalam pelajaran ini, kita akan mempelajari pengujian integrasi, yaitu langkah penting untuk membangun aplikasi Flutter yang tangguh.

Pengujian integrasi memverifikasi cara berbagai bagian aplikasi Anda bekerja sama. Anggaplah ini sebagai simulasi pengguna yang berinteraksi dengan aplikasi melalui alur lengkap, seperti masuk, berpindah halaman, dan melakukan tindakan.

Mengapa Pengujian Integrasi Penting

Pengujian komponen (yang telah kita bahas sebelumnya) berfokus pada setiap komponen antarmuka secara terpisah, sedangkan pengujian integrasi memberi Anda keyakinan bahwa seluruh perjalanan pengguna berfungsi dengan benar.

Skenario dunia nyata: Meniru perilaku pengguna sebenarnya.
Menemukan kesalahan lebih awal: Mengungkap masalah yang hanya muncul ketika beberapa komponen atau layanan saling berinteraksi.
Memastikan stabilitas: Memvalidasi bahwa perubahan tidak merusak fitur yang sudah ada.

Menyiapkan Pengujian Integrasi

Flutter menggunakan paket integration_test untuk mengaktifkan pengujian ini. Paket tersebut memungkinkan Anda menjalankan pengujian langsung pada perangkat nyata atau emulator, sehingga memberikan gambaran yang akurat tentang perilaku aplikasi Anda.

Pertama, tambahkan dependensi integration_test ke pubspec.yaml di proyek Anda, baik di bawah dependencies maupun dev_dependencies:

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

Struktur Pengujian Integrasi

Pengujian integrasi biasanya melibatkan dua file utama:

Pengendali pengujian, biasanya berada di test_driver/app_test.dart. File ini menyiapkan lingkungan untuk menjalankan pengujian integrasi.
Kumpulan pengujian yang sebenarnya, biasanya berada di integration_test/app_test.dart. Di sinilah Anda menulis logika pengujian.

Titik Masuk Pengendali Pengujian

File test_driver/app_test.dart sederhana. File ini menginisialisasi IntegrationTestWidgetsFlutterBinding dan memanggil integrationDriver() untuk menangani pelaksanaan pengujian.

import 'package:integration_test/integration_test_driver.dart';

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

Aplikasi untuk Pengujian Integrasi

Mari kita buat aplikasi penghitung sederhana untuk mendemonstrasikan pengujian integrasi. Perhatikan bahwa kita menambahkan Key ke komponen yang ingin kita temukan dan gunakan dalam pengujian.

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),
        ),
      ),
    );
  }
}

Menulis Pengujian Integrasi

Sekarang, mari kita tulis pengujian yang sebenarnya di integration_test/app_test.dart. Kita akan menggunakan tester.pumpAndSettle() untuk menunggu animasi dan pembaruan antarmuka, serta tester.tap() untuk menyimulasikan interaksi pengguna.

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');
    });
  });
}

Menjalankan Pengujian Integrasi

Untuk menjalankan pengujian integrasi, Anda akan menggunakan perintah flutter drive dari direktori utama proyek. Pastikan emulator/perangkat Android atau simulator/perangkat iOS sedang berjalan.

Perintah ini memberi tahu Flutter untuk menggunakan pengendali pengujian Anda guna menjalankan kumpulan pengujian integrasi pada aplikasi.

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

Interaksi Lanjutan

Pengujian integrasi dapat menyimulasikan alur pengguna yang kompleks di beberapa layar. Anda dapat:

Memasukkan teks: Gunakan tester.enterText(find.byType(TextField), 'Hello');
Menggulir: Gunakan tester.scrollUntilVisible() untuk menampilkan komponen di layar.
Berpindah halaman: Ketuk tombol yang memicu Navigator.push() atau Navigator.pop(), lalu verifikasi perubahan layar.

Selalu gunakan Key untuk mengidentifikasi komponen secara andal, terutama saat menangani antarmuka dinamis atau beberapa komponen yang serupa.

Pemeriksaan Cepat

Manakah dari pilihan berikut yang merupakan manfaat utama penggunaan pengujian integrasi dalam pengembangan Flutter?

Jawab di pelajaran interaktif

Ringkasan: Pengujian Integrasi

Bagus! Anda telah mempelajari pengujian integrasi di Flutter. Kita telah membahas:

Apa itu pengujian integrasi dan mengapa pengujian ini penting untuk stabilitas aplikasi.
Cara menyiapkan paket integration_test.
Struktur pengujian integrasi dan cara menulisnya.
Cara menjalankan pengujian menggunakan flutter drive.

Pengujian integrasi memberikan keyakinan tinggi bahwa fitur-fitur aplikasi Anda bekerja sama dengan lancar, seperti yang dialami pengguna.

Gratis untuk memulai

Belajar Dart dengan tutor AI — gratis

Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.

Kursus: 22
Pelajaran: 88

Mulai belajar gratis Lihat kursus lengkapnya

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Pengujian Integrasi” gratis?

Ya — teks lengkap “Pengujian Integrasi” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Flutter Mobile Development, upgrade ke CoddyKit PRO. Kursus Flutter Mobile Development mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Pengujian Integrasi”?

Lakukan pengujian integrasi untuk memvalidasi interaksi antara beberapa widget dan seluruh alur pengguna dalam aplikasi Anda. Kamu berlatih Flutter Mobile Development dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Flutter Mobile Development?

Tidak diperlukan pengalaman sebelumnya. Flutter Mobile Development di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.

Berapa lama pelajaran “Pengujian Integrasi” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Flutter Mobile Development ini?

Ya. Setiap pelajaran Flutter Mobile Development menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke Flutter Mobile Development