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があれば、テストを書くことができます.
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を使用する場合に使用できる他の方法を提供しています.
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コードを書く
flutter_road_test/
lib/
main.dart
test_driver/
app.dart
app_test.dart
ステップ4:命令化されたFlutterアプリケーションの作成
命令化されたFlutterアプリケーションを作成するには、次の2つのステップが必要です.
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つのステップが必要です.
// 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
コマンドの役割:
コードアドレス
github.com/draftbk/flu…
Flutter学習の道Githubアドレス
これはプロジェクトのGitHubアドレスで、更新が続いています.スターを歓迎します.╮( ̄▽ ̄)╭
github.com/draftbk/flu…