Dev fest kyoto_2021-flutter_test

初めてFlutterアプリを
作ってテストを書いた話
DevFest Kyoto 2021

自己紹介
加藤正憲
Mobile App Developer@クックビズ株式会社
　@nitakanworld　
やってること：モバイルアプリの開発・運用
(主にFlutter/Android/iOS)
趣味：キャンプ／ロードバイク
2

● はじめてのFlutterアプリ
● テストができない！
● 依存関係をシンプルにしよう
● テストを書こう
● 振り返って
● まとめ
アジェンダ
3

● 発表者が初めてのFlutterプロジェクトで経験した
ことです
● 内容に１年前の事柄があるので今はよりよい方法
があるやもしれません
● Integrationテストはしていません
注意事項
4

Flutterアプリつくったけどどうやってテスト書いて
いけばいいの？
にひとつの道を示せられればいいかなと思います
目的
5

初めてのFlutterアプリ
6

● toB向けサービスのモバイルアプリ
● WEBサービスの一部機能
● Flutterで初めて作った
○ アプリ2名API1名体制
○ 3ヶ月の開発期間
○ 勉強しつつ作り始めた
初めてのFlutterアプリ
7

● コードを触るときにデグレしないようにしたい
● 計算ロジックを網羅テストしたい
● Widgetの表示状態をテストしたい
○ 表示しているか
○ テキストの文字列編集が想定通りか
そろそろテストを書こう
9

● クラス内で他クラスをnewしている
● 依存関係が複雑になっている
● Widgetクラスでデータの変換処理をしている
アプリがテスト可能な状態ではなかった
10

● クラス内で他クラスをnewしている
● 依存関係が複雑になっている
● Widgetクラスでデータの変換処理をしている
アプリがテスト可能な状態ではなかった
😇 11

テストできるようにしよう
12

● クリーンアーキテクチャ
● MVVM＋α
まずは依存関係をきれいにしよう
13

クリーンアーキテクチャ＋MVVMで再構成
https://nrslib.com/clean-architecture-with-java
14

クリーンアーキテクチャ＋MVVMで再構成
https://qiita.com/nrslib/items/a5f902c4defc83bd46b8
🤔
15

クリーンアーキテクチャで再構成
Domain
View
(Widget)
ViewModel
（Controller）
DataSource
UseCase Repository
● 依存方向は一方向のみ
● ドメイン層はどこにも依存しない
16

クリーンアーキテクチャで再構成
DataSource
Repository
Domain
Widget/Controller
UseCase
17

● DI(Dependency Injection)
依存を注入しよう
18

● DI
○ コンストラクタで依存を注入
○ テストダブルなクラスに切り替えられるように
19

class SendMessageInteractor implements SendMessageUseCase {
SendMessageInteractor(this._messageRepository);
static const String _replyPrefix = SendMessage.replyMessageTitlePrefix;
final MessageRepository _messageRepository;
...
}
● コンストラクタで依存を注入
20

class SendMessageInteractor implements SendMessageUseCase {
SendMessageInteractor(this._messageRepository);
static const String _replyPrefix = SendMessage.replyMessageTitlePrefix;
final MessageRepository _messageRepository;
...
}
● コンストラクタで依存を注入
21

● DI
● ServiceLocator(GetIt)を導入
22

● DI
○ 各層でインターフェースと実装を紐付け
23

void installUseCases(GetIt getIt) {
getIt.registerFactory<SendMessageUseCase>(
() => SendMessageInteractor(getIt.get<MessageRepository>(),
));
}
● ServiceLocatorへ登録
24

final _messageUseCase = GetIt.I.get<SendMessageUseCase>();
await _messageUseCase.handle(messageId, message);
● ServiceLocatorから取得して使用
25

● DI
○ 各層でインターフェースと実装を紐付け
○ インターフェースは暗黙的に作られる
26

// A person. The implicit interface contains greet().
class Person {
// Not in the interface, since this is a constructor.
Person(this._name);
// In the interface, but visible only in this library.
final String _name;
// In the interface.
String greet(String who) => 'Hello, $who. I am $_name.';
}
// An implementation of the Person interface.
class Impostor implements Person {
@override
String get _name => '';
@override
String greet(String who) => 'Hi $who. Do you know who I am?';
}
https://dart.dev/guides/language/language-tour#implicit-interfaces 27

// A person. The implicit interface contains greet().
class Person {
// Not in the interface, since this is a constructor.
Person(this._name);
// In the interface, but visible only in this library.
final String _name;
// In the interface.
String greet(String who) => 'Hello, $who. I am $_name.';
}
// An implementation of the Person interface.
class Impostor implements Person {
@override
String get _name => '';
@override
String greet(String who) => 'Hi $who. Do you know who I am?';
}
https://dart.dev/guides/language/language-tour#implicit-interfaces 28

各層をテストしよう
Domain
View
(Widget)
Controller DataSource
UseCase Repository
● 各層でどんなテストをしたのか
30

Domain
View
(Widget)
ViewModel
（Controller）
DataSource
UseCase Repository
● 計算ロジック / 表示条件ロジックのテスト
● テキスト編集のテスト
31

void main() {
test('Test JobPostingId displayId max line', () {
const maxJobPostingId = JobPostingId(123456);
expect(maxJobPostingId.displayId, 'DpJob123-456');
});
test('Test JobPostingId displayId min line', () {
const minJobPostingId = JobPostingId(1);
expect(minJobPostingId.displayId, 'DpJob000-001');
});
}
32

Domain
View
(Widget)
ViewModel
（Controller）
DataSource
UseCase Repository
● APIのレスポンスデータ変換ロジック(含エラー)
● APIのリクエストを検証
33

// レスポンスの変換
test('現在のスカウト数が取得できていること ', () async {
MockedDependencies.apiConnection
.enqueueResponse(MethodType.get, 200, contractsJson);
final ds = MockedDependencies.get<CompanyDataSource>();
final res = await ds.getContracts();
expect(res,
const ContractsResponse(OfferStockResponse(9999, 10, 9990), null));
expect(MockedDependencies.apiConnection.lastUri.toString(),
'${MockedDependencies.apiConnection.getHost()}/api/contracts');
});
34

expect(res,
});
35

expect(res,
});
36

expect(res,
});
37

// レスポンスの変換（エラー時）
test('Test post message error', () async {
.enqueueResponse(MethodType.post, 403, accessDenied);
final ds = MockedDependencies.get<MessagesApiDataSource>();
const request = SendMessageRequestParameter(
matchingConnectionId: 1, title: 'Re:Test', body: 'TEST');
await expectThrows(() => ds.sendMessage(request),
const TypeMatcher<DataSourceAccessDeniedException>());
});
38

});
39

});
40

// Exceptionの検証(Non Future)
expect(() =>　hogehoge(), throwsA(TypeMatcher<HogeException>()));
// Exceptionの検証(Future)
Future<void> expectThrows(FutureCreator creator, dynamic matcher) async {
try {
await creator.call();
fail('Expect an error.');
} on Exception catch (e) {
expect(e, matcher);
// ignore: avoid_catching_errors
} on Error catch (e) {
expect(e, matcher);
}
}
41

// Exceptionの検証(Non Future)
expect(() =>　hogehoge(), throwsA(TypeMatcher<HogeException>()));
// Exceptionの検証(Future)
Future<void> expectThrows(FutureCreator creator, dynamic matcher) async {
try {
await creator.call();
fail('Expect an error.');
} on Exception catch (e) {
expect(e, matcher);
// ignore: avoid_catching_errors
} on Error catch (e) {
expect(e, matcher);
}
}
42

// リクエストの検証
test('Test post message', () async {
final api = MockedDependencies.apiConnection
..enqueueResponse(MethodType.post, 201, created);
matchingConnectionId: 1, title: 'Re: Test', body: 'BodyTest');
await ds.sendMessage(request);
expect(api.lastUri.toString(), '${api.getHost()}/api/messages');
expect(api.lastBody['title'], 'Re: Test');
expect(api.lastBody['body'], 'BodyTest');
expect(api.lastBody['matching_connection_id'], '1');
});
43

});
44

});
45

});
46

Domain
View
(Widget)
ViewModel
（Controller）
DataSource
UseCase Repository
● DataSourceが呼び出せているかのテスト
● ドメインオブジェクトへの変換のテスト
● キャッシュのテスト 47

test('Test send', () async {
final msgDs = MockedDependencies.get<MessagesApiDataSource>()
as MockMessagesApiDataSource;
when(msgDs.sendMessage(any)).thenAnswer((realInvocation) async =>
CommonResponse.test(true, const SendMessageResponse()));
final repo = MockedDependencies.get<MessageRepository>();
final message = SendMessage.validated('12345678', title: 'Re:');
await repo.sendMessage(const MatchingConnectionId(1234), message);
verify(msgDs.sendMessage(argThat(allOf(
predicate<SendMessageRequestParameter>(
(req) => req.matchingConnectionId == 1234),
predicate<SendMessageRequestParameter>((req) => req.title == 'Re:'),
predicate<SendMessageRequestParameter>((req) => req.body == '12345678'),
)))).called(1);
});
48

)))).called(1);
});
49

)))).called(1);
});
50

Domain
View
(Widget)
ViewModel
（Controller）
DataSource
UseCase Repository
● アプリケーションロジックのテスト
● 各リポジトリを操作しているかのテスト
51

test('Test send reply message(without Re:)', () async {
final repo =
MockedDependencies.get<MessageRepository>() as MockMessageRepository;
final send = MockedDependencies.get<SendMessageUseCase>();
when(repo.getLastConversationMessage(any)).thenAnswer(
(realInvocation) => mockedMessage.copyWith(title: 'title'));
await send.handle(mId(1234), SendMessage.validated('body'));
verify(repo.sendMessage(
argThat(equals(mId(1234))),
argThat(
equals(SendMessage.validated('body', title: 'Re:title')))))
.called(1);
verify(repo.fetch(any)).called(1);
});
52

final repo =
argThat(
.called(1);
});
53

final repo =
argThat(
.called(1);
});
54

final repo =
argThat(
.called(1);
});
55

Domain
View
(Widget)
ViewModel
（Controller）
DataSource
UseCase Repository
● ボタンが押されたときに適切なUseCaseがよばれ
ているかをテスト
● Widgetの表示状態をテスト 56

testWidgets('Test clear form after sent message', (WidgetTester tester) async {
final send = MockedDependencies.getAs<SendMessageUseCase, MockSendMessageUseCase>();
when(send.handle(any, any)).thenAnswer((realInvocation) async {});
await _pumpMessageFormComponent(tester);
await tester.enterText(find.byType(TextFormField), 'test message');
await tester.pump();
expect(find.text(_testMessage), findsOneWidget);
await tester.tap(find.byIcon(Icons.send));
verify(send.handle(
argThat(equals(mId(1234))), SendMessage.validated('test message')))
.called(1);
expect(find.text(_testMessage), findsNothing);
});
57

verify(send.handle(
.called(1);
});
58

verify(send.handle(
.called(1);
});
59

verify(send.handle(
.called(1);
});
60

Domain
View
(Widget)
ViewModel
（Controller）
DataSource
UseCase Repository
● 各層でテストすることによって、テスト範囲を狭
め、シンプルに保つことができる
61

振り返って
● DIやServiceLocatorを導入することで各クラス単
体のテストができる
● クリーンアーキテクチャをちゃんと実装しようと
するとクラス数が多くなり大変＝テストも大変
○ ただメソッドを呼び出すだけなどはテスト書か
ない判断も必要かも
64

よかったこと３選
● 機能追加でのデグレを早期発見できた
● 各層に分けたことでアプリ内のフロントエンドと
バックエンドを違う担当者が触ることができた
● テストを書ける粒度でコードを書く習慣がついた
65

まとめ
● テストできるような仕組みにしよう！
○ クラスの粒度は小さく
○ クラス同士の依存は少なく
● 無理にすべてを書こうとしない
● テスト書いて良いコードにしましょう！
67

ご清聴
ありがとうございました
68

Dev fest kyoto_2021-flutter_test

More Related Content

What's hot (19)

Similar to Dev fest kyoto_2021-flutter_test (20)

Recently uploaded (20)

Dev fest kyoto_2021-flutter_test