Flutter学習の道-テスト(ユニットテスト、Widgetテスト、統合テスト)

15882 ワード

Flutter学習の道-テスト(ユニットテスト、Widgetテスト、統合テスト)


実験Flutterの3種類の試験方法---コードGithubアドレス

Flutterのテストについて


先日ニューヨークに行ったGoogleがFlutterのパーティーに参加し、Google Material FlutterチームのMH Johnsonが壇上でFlutterのテストについて話しているのを聞いて、自分が勉強しなければならないと思った.
一般的に、良好なテストを受けたアプリケーションにはunit testsとwidget testが多く、コードオーバーライド率(code coverage)によって追跡され、すべての重要な使用シーンをカバーするのに十分な統合テストが必要であるはずです.次の表では、異なるタイプのテストの特徴をまとめ、選択時にバランスをとるのに便利です.
ユニットテスト
Widgetテスト
統合テスト
しんらいど
Low
Higher
Highest
保守コスト
Low
Higher
Highest
に頼る
Few
More
Lots
じっこうそくど
Quick
Slower
Slowest
では、この3つの重要度はどうでしょうか.この図を参考にしてください.

ユニットテスト


参考文章(主にこれによって翻訳を勉強して、英語okは直接公式サイトを見ることができます):link
単一の機能、メソッド、またはクラスをテストします.例えば、package:mockitoのような被測定ユニットの外部依存性は通常シミュレートされる.ユニットテストでは、通常、ディスクの読み取り/書き込み、画面へのレンダリング、テストを実行するプロセスの外部からのユーザー操作の受信は行われません.ユニットテストの目標は,様々な条件下で論理ユニットの正確性を検証することである.
ステップ1:testまたはflutter_を追加test依存
pubspec.yamlには以下の方法を追加します(面倒ならコロンをanyと書いてもいいです)
dev_dependencies:
  test: 

加えてPackages getを押してください
ステップ2:テストファイルの作成
ディレクトリ構造は以下の通りです:(テストファイルはtestファイルに書かれています)
flutter_road_test/
  lib/
    counter.dart
  test/
    counter_test.dart

ステップ3:テストするクラスを作成する
テストするユニットを作成します.このユニットは、lib/counterの下にあるメソッドまたはクラスです.dartファイルにCounterクラスを作成するには、次の手順に従います.
class Counter {
  int value = 0;

  void increment() => value++;

  void decrement() => value--;
}

ステップ4:このクラスにtestを書く
testとexpectはtestというパッケージから来ています.
// Import the test package and Counter class
import 'package:test/test.dart';
import 'package:counter_app/counter.dart';

void main() {
  test('Counter value should be incremented', () {
    final counter = Counter();

    counter.increment();

    expect(counter.value, 1);
  });
}

ステップ5:複数のテストがある場合はgroupを使用します.
グループには3つのテスト(初期状態テスト、incrementメソッドテスト、counter.decrementメソッドテスト)が含まれています.
import 'package:test/test.dart';
import 'package:counter_app/counter.dart';

void main() {
  group('Counter', () {
    test('value should start at 0', () {
      expect(Counter().value, 0);
    });

    test('value should be incremented', () {
      final counter = Counter();

      counter.increment();

      expect(counter.value, 1);
    });

    test('value should be decremented', () {
      final counter = Counter();

      counter.decrement();

      expect(counter.value, -1);
    });
  });
}

ステップ6:テストの実行
コマンド・ラインで実行するには、次の手順に従います.
flutter test test/counter_test.dart

結果:
他の運転方法はここで見ることができます:link

Widgetテスト


参考文章(主にこれによって翻訳を勉強して、英語okは直接公式サイトを見ることができます):link
ステップ1:flutter_を追加するtestパッケージ
なぜこのバッグを使うのか、前のtestバッグを使わないのか、flutter_testパッケージには、次の機能があります.
  • 等再補充
  • dev_dependencies:
      flutter_test:
        sdk: flutter
    

    ステップ2:テストするWidgetを作成する
    class MyWidget extends StatelessWidget {
      final String title;
      final String message;
    
      const MyWidget({
        Key key,
        @required this.title,
        @required this.message,
      }) : super(key: key);
    
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Flutter Demo',
          home: Scaffold(
            appBar: AppBar(
              title: Text(title),
            ),
            body: Center(
              child: Text(message),
            ),
          ),
        );
      }
    }
    

    ステップ3:テストコードを書く
    テストするWidgetがあれば、テストを書くことができます.
  • testWidgetsメソッド
  • を作成
  • 用tester.pumpWidgetは、MyWidget
  • を作成するために使用されます.
  • finderを使用してWidget treeでtitleとmessageのText Widgets
  • を見つけます.
  • expectとfindsOneWidgetでこのWidgetが1回しか現れなかったかどうかをテストします.
    void main() {
      // with Widgets in the test environment.
      testWidgets('MyWidget has a title and message', (WidgetTester tester) async {
        // Create the Widget tell the tester to build it
        await tester.pumpWidget(MyWidget(title: 'T', message: 'M'));
    
        // Create our Finders
        final titleFinder = find.text('T');
        final messageFinder = find.text('M');
    
        // Use the `findsOneWidget` matcher provided by flutter_test to verify our
        // Text Widgets appear exactly once in the Widget tree
        expect(titleFinder, findsOneWidget);
        expect(messageFinder, findsOneWidget);
      });
    }
    

    ステップ4:テストの実行
    Android Studioでメールコードファイルポイントを実行すると実行できます.
    補足
    [1]ステップ3のWidgetTesterは、pumpWidgetの他にも、StatefulWidgetまたはanimationsを使用する場合に使用できる他の方法を提供しています.
  • tester.pump():ドキュメントリンク
  • tester.pumpAndSettings():文書リンク
  • [2]ステップ3のfindsOneWidgetはMatcherであり、他にもいくつかのMatcherが使用できます.
    findsOneWidget   Widget
    findsNothing   Widget
    findsWidgets   Widget
    findsNWidgets   N   Widget
    
      API,  :
    expect(find.text('Save'), findsNWidgets(2));
    

    統合テスト


    参考文章(主にこれによって翻訳を勉強して、英語okは直接公式サイトを見ることができます):link
    ユニットテストおよびWidgetテストは、単独のclass、function、およびWidgetをテストするために使用することができる.各セクションが一緒に実行されるか、アプリケーションが実際のデバイスで実行される表現をテストする場合は、統合テストを使用します.
    ステップ1:テストするAppの作成
    まず、テストされたAppを作成するには、この機能は懸濁ボタン+1を押すことであり、最初に与えられたdemoであり、ここではTextとFloatingActionButtonにValueKeyを追加し、テスト時にこれらの特徴を認識するWidgetsを追加した.
    import 'package:flutter/material.dart';
    
    void main() => runApp(MyApp());
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Counter App',
          home: MyHomePage(title: 'Counter App Home Page'),
        );
      }
    }
    
    class MyHomePage extends StatefulWidget {
      MyHomePage({Key key, this.title}) : super(key: key);
    
      final String title;
    
      @override
      _MyHomePageState createState() => _MyHomePageState();
    }
    
    class _MyHomePageState extends State<MyHomePage> {
      int _counter = 0;
    
      void _incrementCounter() {
        setState(() {
          _counter++;
        });
      }
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text(widget.title),
          ),
          body: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text(
                  'You have pushed the button this many times:',
                ),
                Text(
                  '$_counter',
                  // Provide a Key to this specific Text Widget. This allows us
                  // to identify this specific Widget from inside our test suite and
                  // read the text.
                  key: Key('counter'),
                  style: Theme.of(context).textTheme.display1,
                ),
              ],
            ),
          ),
          floatingActionButton: FloatingActionButton(
            // Provide a Key to this the button. This allows us to find this
            // specific button and tap it inside the test suite.
            key: Key('increment'),
            onPressed: _incrementCounter,
            tooltip: 'Increment',
            child: Icon(Icons.add),
          ),
        );
      }
    }
    

    ステップ2:flutter_を追加driver依存
    統合テストでflutter_を使用するdriver、pubspec.yamlに追加します.
    dev_dependencies:
      flutter_driver:
        sdk: flutter
      test: any
    

    また、testも追加されています.この中の方法や断言も使われるからです.
    ステップ3:testコードを書く
  • フォルダtest_を作成driver(libファイルと同級)
  • フォルダの下に2つのファイル(名前は任意)を作成します.1つは命令化されたFlutterアプリケーションを作成し、このappを「実行」し、実行中のperformance(app.dart)を記録することができます.もう1つは、appが予想通りに実行されているかどうかを判断するためにテストを書くためです(app_test.dart).ディレクトリは次の通りです.
  • flutter_road_test/
      lib/
        main.dart
      test_driver/
        app.dart
        app_test.dart
    

    ステップ4:命令化されたFlutterアプリケーションの作成
    命令化されたFlutterアプリケーションを作成するには、次の2つのステップが必要です.
  • Flutter Driverの拡張機能
  • を有効にします.
  • App
  • の実行
    test_driver/app.dartファイルにはこの2つのステップが書かれています.
    import 'package:flutter_driver/driver_extension.dart';
    import 'package:flutter_road_test/main.dart' as app;
    
    void main() {
      // This line enables the extension
      enableFlutterDriverExtension();
    
      // Call the `main()` function of your app or call `runApp` with any widget you
      // are interested in testing.
      app.main();
    }
    

    ステップ5:書き込みテスト
    命令化されたappがあります.テストを書きます.テストには次の4つのステップが必要です.
  • 特定のWidgets
  • をSeralizableFinderで位置決めする
  • 試験前にsetUpAllメソッドにapp
  • を接続する.
  • いくつかの重要な状況をテスト
  • テストが完了すると、teardownAllメソッドで接続を中断する
  • // Imports the Flutter Driver API
    import 'package:flutter_driver/flutter_driver.dart';
    import 'package:test/test.dart';
    
    void main() {
      group('Counter App', () {
        //   Finders   Widgets
        final counterTextFinder = find.byValueKey('counter');
        final buttonFinder = find.byValueKey('increment');
    
        FlutterDriver driver;
    
        //   Flutter driver 
        setUpAll(() async {
          driver = await FlutterDriver.connect();
        });
    
        //  
        tearDownAll(() async {
          if (driver != null) {
            driver.close();
          }
        });
    
        test('starts at 0', () async {
          //   `driver.getText`   counter   0
          expect(await driver.getText(counterTextFinder), "0");
        });
    
        test('increments the counter', () async {
          //  , 
          await driver.tap(buttonFinder);
    
          //  ,  1
          expect(await driver.getText(counterTextFinder), "1");
        });
      });
    }
    

    ステップ6:テストの実行
    AndroidまたはiOSシミュレータを実行したり、自分の携帯電話に接続したりして、プロジェクトのルートディレクトリから次のコマンドを実行します.
    flutter drive --target=test_driver/app.dart
    

    コマンドの役割:
  • ターゲットappを実行し、
  • をインストールする
  • app
  • を起動
  • app_を実行test.dartのテスト
  • 結果:

    コードアドレス


    github.com/draftbk/flu…

    Flutter学習の道Githubアドレス


    これはプロジェクトのGitHubアドレスで、更新が続いています.スターを歓迎します.╮( ̄▽ ̄)╭
    github.com/draftbk/flu…

    リファレンスドキュメント

  • flutterchina.club/testing
  • flutter.dev/docs/testin…
  • flutter.dev/docs/cookbo…
  • flutter.dev/docs/cookbo…
  • flutter.dev/docs/cookbo…