Cara menguji aplikasi Flutter

Flutter adalah toolkit UI Google untuk mem-build aplikasi yang cantik dan dikompilasi secara native dari satu codebase untuk seluler, web, dan desktop.

Di codelab ini, Anda akan mem-build dan menguji aplikasi Flutter sederhana. Aplikasi akan menggunakan paket Provider untuk mengelola status.

Yang akan Anda pelajari

  • Cara membuat pengujian widget menggunakan framework pengujian widget
  • Cara membuat dan mengintegrasikan pengujian untuk menguji UI dan performa aplikasi menggunakan paket integration_test
  • Cara menguji class data (penyedia) dengan bantuan pengujian unit

Yang akan Anda buat

Di codelab ini, Anda akan mulai mem-build aplikasi sederhana dengan daftar item. Kami menyediakan kode sumber bagi Anda sehingga Anda dapat langsung ke pengujian. Aplikasi ini mendukung operasi berikut:

  • Menambahkan item ke favorit
  • Melihat daftar favorit
  • Menghapus item dari daftar favorit

Setelah aplikasi selesai, Anda akan menulis pengujian berikut:

  • Pengujian unit untuk memvalidasi operasi tambahkan dan hapus
  • Pengujian widget untuk halaman beranda dan favorit
  • Pengujian dan performa untuk seluruh aplikasi yang menggunakan pengujian integrasi

GIF aplikasi yang berjalan di Android

Apa yang ingin Anda pelajari dari codelab ini?

Saya baru mengenal topik ini, jadi saya ingin melihat ringkasan yang bagus. Saya sedikit paham soal topik ini, tetapi saya perlu mengingat kembali. Saya sedang mencari kode contoh untuk digunakan dalam project saya. Saya sedang mencari penjelasan tentang sesuatu yang spesifik.

Anda memerlukan dua software untuk menyelesaikan lab ini: Flutter SDK dan editor.

Anda dapat menjalankan codelab ini menggunakan perangkat berikut:

  • Perangkat fisik (Android atau iOS) yang terhubung ke komputer Anda dan disetel ke mode developer.
  • Simulator iOS. (Perlu menginstal Xcode.)
  • Emulator Android. (Perlu penyiapan di Android Studio.)

Membuat dependensi update dan aplikasi Flutter baru

Codelab ini berfokus untuk menguji aplikasi seluler Flutter. Anda akan dengan cepat membuat aplikasi yang akan dibuat menggunakan file sumber yang Anda salin dan tempel. Bagian codelab lainnya kemudian berfokus untuk mempelajari berbagai jenis pengujian.

b2f84ff91b0e1396.pngBuat aplikasi Flutter dengan template sederhana, menggunakan petunjuk di Getting Started with your first Flutter app. Beri nama project testing_app (bukan myapp). Anda akan memodifikasi aplikasi awal ini untuk membuat aplikasi yang sudah selesai.

b2f84ff91b0e1396.pngDi IDE atau editor Anda, buka file pubspec.yaml. Tambahkan dependensi yang ditandai dengan new berikut, kemudian simpan file. (Anda dapat menghapus komentar untuk membuat file menjadi lebih mudah dibaca.)

pubspec.yaml

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^0.1.3
  provider: ^4.1.3            # new

dev_dependencies:
  flutter_test:
    sdk: flutter
  integration_test: ^1.0.1    # new
  test: ^1.14.4               # new
  1. Klik tombol Pub get di IDE Anda atau, di baris perintah, jalankan flutter pub get dari atas project.

Jika ini menghasilkan error, pastikan indentasi di blok dependencies Anda benar-benar sama seperti yang ditampilkan di atas, menggunakan spasi (bukan tab). File YAML sensitif terhadap spasi.

Berikutnya, Anda akan mem-build aplikasi sehingga Anda dapat mengujinya. Aplikasi berisi file berikut:

  • lib/main.dart - file utama tempat aplikasi dimulai
  • lib/screens/home.dart - membuat daftar item
  • lib/screens/favorites.dart - membuat tata letak untuk daftar favorit
  • lib/models/favorites.dart - membuat class model untuk daftar favorit

Ganti konten lib/main.dart

b2f84ff91b0e1396.pngGanti konten lib/main.dart dengan kode berikut:

lib/main.dart

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:testing_app/models/favorites.dart';
import 'package:testing_app/screens/favorites.dart';
import 'package:testing_app/screens/home.dart';

void main() {
  runApp(TestingApp());
}

class TestingApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider<Favorites>(
      create: (context) => Favorites(),
      child: MaterialApp(
        title: 'Testing Sample',
        theme: ThemeData(
          primarySwatch: Colors.blue,
          visualDensity: VisualDensity.adaptivePlatformDensity,
        ),
        routes: {
          HomePage.routeName: (context) => HomePage(),
          FavoritesPage.routeName: (context) => FavoritesPage(),
        },
        initialRoute: HomePage.routeName,
      ),
    );
  }
}

Tambahkan Halaman beranda di lib/screens/home.dart

b2f84ff91b0e1396.pngBuat direktori baru, screens, di direktori lib dan, di direktori yang baru dibuat tersebut, buat file baru bernama home.dart. Di lib/screens/home.dart, tambahkan kode berikut:

lib/screens/home.dart

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:testing_app/models/favorites.dart';
import 'package:testing_app/screens/favorites.dart';

class HomePage extends StatelessWidget {
  static String routeName = '/';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Testing Sample'),
        actions: <Widget>[
          TextButton.icon(
            style: TextButton.styleFrom(primary: Colors.white),
            onPressed: () {
              Navigator.pushNamed(context, FavoritesPage.routeName);
            },
            icon: Icon(Icons.favorite_border),
            label: Text('Favorites'),
          ),
        ],
      ),
      body: ListView.builder(
        itemCount: 100,
        cacheExtent: 20.0,
        padding: const EdgeInsets.symmetric(vertical: 16),
        itemBuilder: (context, index) => ItemTile(index),
      ),
    );
  }
}

class ItemTile extends StatelessWidget {
  final int itemNo;

  const ItemTile(
    this.itemNo,
  );

  @override
  Widget build(BuildContext context) {
    var favoritesList = Provider.of<Favorites>(context);

    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: ListTile(
        leading: CircleAvatar(
          backgroundColor: Colors.primaries[itemNo % Colors.primaries.length],
        ),
        title: Text(
          'Item $itemNo',
          key: Key('text_$itemNo'),
        ),
        trailing: IconButton(
          key: Key('icon_$itemNo'),
          icon: favoritesList.items.contains(itemNo)
              ? Icon(Icons.favorite)
              : Icon(Icons.favorite_border),
          onPressed: () {
            !favoritesList.items.contains(itemNo)
                ? favoritesList.add(itemNo)
                : favoritesList.remove(itemNo);
            ScaffoldMessenger.of(context).showSnackBar(
              SnackBar(
                content: Text(favoritesList.items.contains(itemNo)
                    ? 'Added to favorites.'
                    : 'Removed from favorites.'),
                duration: Duration(seconds: 1),
              ),
            );
          },
        ),
      ),
    );
  }
}

Tambahkan Halaman favorit di lib/screens/favorites.dart

b2f84ff91b0e1396.pngDi direktori lib/screens, buat file baru lainnya yang bernama favorites.dart. Di file tersebut, tambahkan kode berikut:

lib/screens/favorites.dart

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:testing_app/models/favorites.dart';

class FavoritesPage extends StatelessWidget {
  static String routeName = '/favorites_page';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Favorites'),
      ),
      body: Consumer<Favorites>(
        builder: (context, value, child) => ListView.builder(
          itemCount: value.items.length,
          padding: const EdgeInsets.symmetric(vertical: 16),
          itemBuilder: (context, index) => FavoriteItemTile(value.items[index]),
        ),
      ),
    );
  }
}

class FavoriteItemTile extends StatelessWidget {
  final int itemNo;

  const FavoriteItemTile(
    this.itemNo,
  );

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: ListTile(
        leading: CircleAvatar(
          backgroundColor: Colors.primaries[itemNo % Colors.primaries.length],
        ),
        title: Text(
          'Item $itemNo',
          key: Key('favorites_text_$itemNo'),
        ),
        trailing: IconButton(
          key: Key('remove_icon_$itemNo'),
          icon: Icon(Icons.close),
          onPressed: () {
            Provider.of<Favorites>(context, listen: false).remove(itemNo);
            ScaffoldMessenger.of(context).showSnackBar(
              SnackBar(
                content: Text('Removed from favorites.'),
                duration: Duration(seconds: 1),
              ),
            );
          },
        ),
      ),
    );
  }
}

Terakhir, buat model Favorites di lib/models/favorites.dart

b2f84ff91b0e1396.pngBuat direktori baru, models dan, di direktori tersebut, buat file baru bernama favorites.dart. Di file tersebut, tambahkan kode berikut:

lib/models/favorites.dart

import 'package:flutter/material.dart';

/// The [Favorites] class holds a list of favorite items saved by the user.
class Favorites extends ChangeNotifier {
  final List<int> _favoriteItems = [];

  List<int> get items => _favoriteItems;

  void add(int itemNo) {
    _favoriteItems.add(itemNo);
    notifyListeners();
  }

  void remove(int itemNo) {
    _favoriteItems.remove(itemNo);
    notifyListeners();
  }
}

Aplikasi sudah selesai, tetapi belum diuji.

b2f84ff91b0e1396.pngJalankan aplikasi dengan mengklik ikon Run 6869d41b089cc745.png di editor. Aplikasi memerlukan beberapa waktu untuk dimuat saat pertama kali dijalankan. Aplikasi akan lebih cepat di langkah-langkah berikutnya. Aplikasi akan terlihat seperti screenshot berikut:

be938199b599b605.png

Aplikasi menampilkan daftar item. Ketuk ikon berbentuk hati di baris mana saja untuk mengisi hati dan menambahkan item ke daftar favorit. Tombol Favorit di AppBar mengarahkan Anda ke layar kedua yang berisi daftar favorit.

Kini aplikasi sudah siap untuk pengujian. Anda akan mulai mengujinya dari langkah berikutnya.

Anda akan memulai dengan melakukan pengujian unit model favorites. Apa itu pengujian unit? Pengujian unit memverifikasi bahwa setiap unit software (seringkali berupa fungsi) melakukan tugas yang ditujukan kepadanya dengan benar.

Semua file pengujian di aplikasi Flutter (kecuali untuk pengujian integrasi) ditempatkan di direktori test.

Hapus test/widget_test.dart

b2f84ff91b0e1396.pngSebelum memulai pengujian, hapus file widget_test.dart. Anda akan menambahkan file pengujian Anda sendiri.

Membuat file pengujian baru

Pertama, Anda akan menguji metode add() di model Favorites untuk memastikan bahwa item baru ditambahkan ke daftar, dan daftar tersebut merefleksikan perubahan. Berdasarkan konvensi, struktur direktori di direktori test meniru yang ada di direktori lib dan file Dart memiliki nama yang sama, tetapi ditambahkan dengan _test.

b2f84ff91b0e1396.pngMembuat direktori models di direktori test. Di direktori baru ini, buat file favourites_test.dart dengan konten berikut:

test/models/favorites_test.dart

import 'package:test/test.dart';
import 'package:testing_app/models/favorites.dart';

void main() {
  group('App Provider Tests', () {
    var favorites = Favorites();

    test('A new item should be added', () {
      var number = 35;
      favorites.add(number);
      expect(favorites.items.contains(number), true);
    });
  });
}

Framework pengujian Flutter memungkinkan Anda mengikat pengujian serupa yang terkait satu sama lain dalam grup. Mungkin terdapat beberapa grup dalam satu file pengujian yang ditujukan untuk menguji bagian yang berbeda dari file yang sesuai di direktori /lib.

Metode test() menggunakan dua parameter posisi: description pengujian dan callback tempat sebenarnya Anda menulis pengujian tersebut.

b2f84ff91b0e1396.pngCoba hapus item dari daftar. Salin dan tempel pengujian berikut di grup pengujian yang sama. Tambahkan kode berikut ke file pengujian:

test/models/favorites_test.dart

test('An item should be removed', () {
  var number = 45;
  favorites.add(number);
  expect(favorites.items.contains(number), true);
  favorites.remove(number);
  expect(favorites.items.contains(number), false);
});

Menjalankan pengujian

b2f84ff91b0e1396.pngJika aplikasi Anda berjalan di emulator atau perangkat, tutup aplikasi sebelum melanjutkan.

b2f84ff91b0e1396.pngDi baris perintah, buka direktori utama project dan masukkan perintah berikut:

$ flutter test test/models/favorites_test.dart

Jika semuanya berfungsi, Anda akan melihat pesan seperti berikut:

00:06 +2: All tests passed!

File pengujian yang lengkap: test/models/favorites_test.dart.

Untuk informasi selengkapnya terkait pengujian unit, kunjungi An introduction to unit testing.

Di langkah ini, Anda akan melakukan pengujian widget. Pengujian widget bersifat unik untuk Flutter, tempat Anda dapat menguji setiap widget pilihan Anda. Langkah ini menguji layar (HomePage dan FavoritesPage) satu per satu.

Pengujian widget menggunakan fungsi testWidget(), bukan fungsi test(). Pengujian ini juga menggunakan dua parameter: description, dan callback. Tetapi di sini, callback menggunakan WidgetTester sebagai argumen.

Pengujian widget menggunakan TestFlutterWidgetsBinding, class yang memberi widget Anda resource yang sama dengan yang ada di aplikasi yang berjalan (informasi mengenai ukuran layar, kemampuan untuk menjadwalkan animasi, dan sebagainya), tetapi tanpa aplikasi sebenarnya. Sebagai gantinya, lingkungan virtual digunakan untuk menjalankan widget, mengukurnya, dan sebagainya, kemudian menguji hasilnya. Di sini, pumpWidget memulai proses dengan memberi tahu framework untuk memasang dan mengukur widget tertentu seperti di aplikasi lengkap.

Framework pengujian widget memberikan pencari untuk menemukan widgets (misalnya, text(), byType(), byIcon()) dan juga matcher untuk memverifikasi hasilnya.

Mulai dengan menguji widget HomePage.

Membuat file pengujian baru

Pengujian pertama memastikan apakah men-scroll HomePage berfungsi dengan baik.

b2f84ff91b0e1396.pngMembuat file baru di direktori test dan menamainya home_test.dart. Di file yang baru dibuat, tambahkan kode berikut:

test/home_test.dart

import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';
import 'package:provider/provider.dart';
import 'package:testing_app/models/favorites.dart';
import 'package:testing_app/screens/home.dart';

Widget createHomeScreen() => ChangeNotifierProvider<Favorites>(
      create: (context) => Favorites(),
      child: MaterialApp(
        home: HomePage(),
      ),
    );

void main() {
  group('Home Page Widget Tests', () {
    testWidgets('Testing Scrolling', (tester) async {
      await tester.pumpWidget(createHomeScreen());
      expect(find.text('Item 0'), findsOneWidget);
      await tester.fling(find.byType(ListView), Offset(0, -200), 3000);
      await tester.pumpAndSettle();
      expect(find.text('Item 0'), findsNothing);
    });
  });
}

Fungsi createHomeScreen() digunakan untuk membuat aplikasi yang memuat widget yang akan diuji di MaterialApp, digabung menjadi ChangeNotifierProvider. Widget HomePage memerlukan kedua widget ini berada di atasnya di hierarki widget agar dapat mewarisi dari kedua widget tersebut dan mendapatkan akses ke data yang ditawarkan. Fungsi ini diteruskan sebagai parameter ke fungsi pumpWidget().

Berikutnya, uji apakah framework dapat menemukan ListView yang dirender ke layar.

b2f84ff91b0e1396.pngTambahkan cuplikan kode berikut ke home_test.dart:

test/home_test.dart

group('Home Page Widget Tests', () {

  // BEGINNING OF NEW CONTENT
  testWidgets('Testing if ListView shows up', (tester) async {
    await tester.pumpWidget(createHomeScreen());
    expect(find.byType(ListView), findsOneWidget);
  });
  // END OF NEW CONTENT

  testWidgets('Testing Scrolling', (tester) async {
    await tester.pumpWidget(createHomeScreen());
    expect(find.text('Item 0'), findsOneWidget);
    await tester.fling(find.byType(ListView), Offset(0, -200), 3000);
    await tester.pumpAndSettle();
    expect(find.text('Item 0'), findsNothing);
  });
});

Menjalankan pengujian

Anda dapat menjalankan pengujian widget dengan cara yang sama seperti pengujian unit, tetapi dengan menggunakan perangkat atau emulator memungkinkan Anda melihat pengujian dijalankan. Hal ini juga memberi Anda kemampuan untuk menggunakan hot restart.

b2f84ff91b0e1396.pngHubungkan perangkat ke sumber listrik atau mulai emulator Anda.

b2f84ff91b0e1396.pngDari baris perintah, buka direktori utama project dan masukkan perintah berikut:

$ flutter run test/home_test.dart

Jika semua berfungsi, Anda akan melihat output seperti berikut:

Launching test/home_test.dart on Mi A3 in debug mode...
Running Gradle task 'assembleDebug'...
Running Gradle task 'assembleDebug'... Done                        62.7s
✓ Built build/app/outputs/flutter-apk/app-debug.apk.
Installing build/app/outputs/flutter-apk/app.apk...                 5.8s
Waiting for Mi A3 to report its views...                            16ms
I/flutter ( 1616): 00:00 +0: Home Page Widget Tests Testing if ListView shows up
Syncing files to device Mi A3...
I/flutter ( 1616): 00:02 +1: Home Page Widget Tests Testing Scrolling
Syncing files to device Mi A3...                                                 4,008ms (!)

Flutter run key commands.
r Hot reload. 🔥🔥🔥
R Hot restart.
h Repeat this help message.
d Detach (terminate "flutter run" but leave application running).
c Clear the screen
q Quit (terminate the application on the device).
An Observatory debugger and profiler on Mi A3 is available at:
http://127.0.0.1:40433/KOsGesHSxR8=/
I/flutter ( 1616): 00:00 +0: Home Page Widget Tests Testing if ListView shows up
I/flutter ( 1616): 00:02 +1: Home Page Widget Tests Testing Scrolling
I/flutter ( 1616): 00:09 +3: All tests passed!

Berikutnya, Anda akan membuat perubahan pada file pengujian dan memasukkan Shift + R untuk melakukan hot restart aplikasi dan menjalan ulang semua pengujian.

b2f84ff91b0e1396.pngTambahkan pengujian lainnya ke grup yang menguji widget HomePage. Salin pengujian berikut ke file Anda:

test/home_test.dart

testWidgets('Testing IconButtons', (tester) async {
  await tester.pumpWidget(createHomeScreen());
  expect(find.byIcon(Icons.favorite), findsNothing);
  await tester.tap(find.byIcon(Icons.favorite_border).first);
  await tester.pumpAndSettle(Duration(seconds: 1));
  expect(find.text('Added to favorites.'), findsOneWidget);
  expect(find.byIcon(Icons.favorite), findsWidgets);
  await tester.tap(find.byIcon(Icons.favorite).first);
  await tester.pumpAndSettle(Duration(seconds: 1));
  expect(find.text('Removed from favorites.'), findsOneWidget);
  expect(find.byIcon(Icons.favorite), findsNothing);
});

Pengujian ini memastikan bahwa mengetuk IconButton akan mengubah Icons.favorite_border (hati yang kosong) menjadi Icons.favorite (hati yang terisi), kemudian kembali menjadi Icons.favorite_border ketika diketuk lagi.

b2f84ff91b0e1396.pngMasukkan Shift + R. Tindakan ini akan memulai hot restart pada aplikasi dan menjalan ulang semua pengujian.

File pengujian lengkap: test/home_test.dart.

b2f84ff91b0e1396.pngGunakan proses yang sama untuk menguji FavoritesPage dengan kode berikut. Ikuti langkah-langkah yang sama dan jalankan.

test/favorites_test.dart

import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';
import 'package:provider/provider.dart';
import 'package:testing_app/models/favorites.dart';
import 'package:testing_app/screens/favorites.dart';

Favorites favoritesList;

Widget createFavoritesScreen() => ChangeNotifierProvider<Favorites>(
      create: (context) {
        favoritesList = Favorites();
        return favoritesList;
      },
      child: MaterialApp(
        home: FavoritesPage(),
      ),
    );

void addItems() {
  for (var i = 0; i < 10; i += 2) {
    favoritesList.add(i);
  }
}

void main() {
  group('Favorites Page Widget Tests', () {
    testWidgets('Test if ListView shows up', (tester) async {
      await tester.pumpWidget(createFavoritesScreen());
      addItems();
      await tester.pumpAndSettle();
      expect(find.byType(ListView), findsOneWidget);
    });

    testWidgets('Testing Remove Button', (tester) async {
      await tester.pumpWidget(createFavoritesScreen());
      addItems();
      await tester.pumpAndSettle();
      var totalItems = tester.widgetList(find.byIcon(Icons.close)).length;
      await tester.tap(find.byIcon(Icons.close).first);
      await tester.pumpAndSettle();
      expect(tester.widgetList(find.byIcon(Icons.close)).length,
          lessThan(totalItems));
      expect(find.text('Removed from favorites.'), findsOneWidget);
    });
  });
}

Pengujian ini memastikan apakah item menghilang ketika tombol tutup (hapus) ditekan.

Untuk informasi selengkapnya mengenai pengujian widget, kunjungi:

Pengujian integrasi digunakan untuk menguji cara setiap bagian aplikasi berfungsi secara keseluruhan. Paket integration_test digunakan untuk melakukan pengujian integrasi di Flutter. Ini adalah versi Flutter dari Selenium WebDriver (web generik), Protractor (Angular), Espresso (Android), atau Earl Gray (iOS). Paket ini secara internal menggunakan flutter_driver untuk menjalankan pengujian di perangkat.

Menginstrumentasikan aplikasi

Untuk menulis pengujian integrasi, Anda harus menginstrumentasikan aplikasi terlebih dahulu. Menginstrumentasikan aplikasi berarti mengonfigurasikan aplikasi sehingga driver dapat mengakses GUI dan fungsinya untuk membuat dan menjalankan pengujian otomatis. Pengujian integrasi diletakkan di direktori yang disebut integration_test. Di langkah ini, Anda akan menambahkan file berikut untuk pengujian integrasi:

  • integration_test/driver.dart - Menginstrumentasikan aplikasi
  • integration_test/app_test.dart - Menjalankan pengujian sebenarnya di aplikasi

b2f84ff91b0e1396.pngBuat direktori yang disebut integration_test di direktori utama project. Di direktori yang baru dibuat tersebut, buat file driver.dart dan tambahkan kode berikut:

integration_test/driver.dart

import 'package:integration_test/integration_test_driver.dart';

Future<void> main() => integrationDriver();

Kode ini mengaktifkan driver pengujian integrasi lalu menunggu pengujian berjalan. Data respons disimpan di file yang diberi nama integration_response_data.json setelah pengujian dijalankan.

Menulis pengujian

b2f84ff91b0e1396.pngBuat file baru dan beri nama app_test.dart.

integration_test/app_test.dart

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

void main() {
  group('Testing App Performance Tests', () {
    final binding = IntegrationTestWidgetsFlutterBinding.ensureInitialized()
        as IntegrationTestWidgetsFlutterBinding;

    binding.framePolicy = LiveTestWidgetsFlutterBindingFramePolicy.fullyLive;
  });
}

Fungsi ensureInitialized() memastikan apakah driver pengujian integrasi diinisialisasi, dan melakukan inisialisasi ulang jika diperlukan. framePolicy ketika ditetapkan ke fullyLive dari enum LiveTestWidgetsFlutterBindingFramePolicy sangat cocok untuk menguji situasi dengan animasi yang berat.

Berikutnya, uji performa scroll aplikasi dan catat menggunakan fungsi watchPerformance().

b2f84ff91b0e1396.pngTempel kode berikut ke grup pengujian yang baru saja Anda buat:

integration_test/app_test.dart

testWidgets('Scrolling test', (tester) async {
  await tester.pumpWidget(TestingApp());

  final listFinder = find.byType(ListView);

  await binding.watchPerformance(() async {
    await tester.fling(listFinder, Offset(0, -500), 10000);
    await tester.pumpAndSettle();

    await tester.fling(listFinder, Offset(0, 500), 10000);
    await tester.pumpAndSettle();
  }, reportKey: 'scrolling_summary');
});

Pengujian ini men-scroll daftar item dengan sangat cepat, kemudian men-scroll ke paling atas. Fungsi watchPerformance() mencatat tindakan tersebut dan menghasilkan ringkasan linimasa yang kemudian dikirimkan kembali sebagai data respons ke driver pengujian di file driver.dart.

Berikutnya, uji operasi add dan remove.

b2f84ff91b0e1396.pngTempelkan pengujian berikut ke grup yang sama:

integration_test/app_test.dart

testWidgets('Favorites operations test', (tester) async {
  await tester.pumpWidget(TestingApp());

  final iconKeys = [
    'icon_0',
    'icon_1',
    'icon_2',
  ];

  for (var icon in iconKeys) {
    await tester.tap(find.byKey(ValueKey(icon)));
    await tester.pumpAndSettle(Duration(seconds: 1));

    expect(find.text('Added to favorites.'), findsOneWidget);
  }

  await tester.tap(find.text('Favorites'));
  await tester.pumpAndSettle();

  final removeIconKeys = [
    'remove_icon_0',
    'remove_icon_1',
    'remove_icon_2',
  ];

  for (final iconKey in removeIconKeys) {
    await tester.tap(find.byKey(ValueKey(iconKey)));
    await tester.pumpAndSettle(Duration(seconds: 1));

    expect(find.text('Removed from favorites.'), findsOneWidget);
  }
});

Menjalankan pengujian

b2f84ff91b0e1396.pngHubungkan perangkat ke sumber listrik atau mulai emulator Anda.

b2f84ff91b0e1396.pngDi baris perintah, buka direktori utama project dan masukkan perintah berikut:

$ flutter drive --driver integration_test/driver.dart --target integration_test/app_test.dart --profile

Jika semuanya berfungsi, Anda akan melihat output seperti ini:

Running "flutter pub get" in step_07...                            930ms
Running Gradle task 'assembleProfile'...
Running Gradle task 'assembleProfile'... Done                      31.3s
✓ Built build/app/outputs/flutter-apk/app-profile.apk (11.3MB).
Installing build/app/outputs/flutter-apk/app.apk...                277ms
VMServiceFlutterDriver: Connecting to Flutter application at http://127.0.0.1:62862/K6QKjUNab8c=/
VMServiceFlutterDriver: Isolate found with number: 1935648057883071
VMServiceFlutterDriver: Isolate is paused at start.
VMServiceFlutterDriver: Attempting to resume isolate
I/flutter (24385): 00:00 +0: Testing App Performance Tests Scrolling test
VMServiceFlutterDriver: Connected to Flutter application.
I/flutter (24385): 00:08 +1: Testing App Performance Tests Favorites operations
test
I/flutter (24385): 00:17 +2: Testing App Performance Tests (tearDownAll)
I/flutter (24385): 00:17 +3: All tests passed!
All tests passed.

Setelah pengujian sukses, direktori build di root project akan berisi satu file bernama integration_response_data.json. File tersebut berisi data respons yang dikirimkan kembali dari pengujian saat berjalan, dalam hal ini, scrolling_summary. Buka file dengan editor teks apa pun untuk melihat informasinya. Dengan penyiapan yang lebih canggih, Anda dapat menyimpan ringkasan setiap kali pengujian berjalan dan membuat grafik hasilnya.

File pengujian lengkap: integration_test/app_test.dart.

Untuk detail selengkapnya mengenai pengujian Driver Flutter (Integrasi), kunjungi:

Anda telah menyelesaikan codelab dan telah mempelajari berbagai cara untuk menguji aplikasi Flutter.

Yang telah Anda pelajari

  • Cara menguji widget menggunakan framework pengujian widget
  • Cara menguji UI aplikasi menggunakan pengujian integrasi
  • Cara menguji performa aplikasi menggunakan pengujian integrasi
  • Cara menguji penyedia dengan bantuan pengujian unit

Untuk mempelajari lebih lanjut pengujian di Flutter, kunjungi