【登壇しました】「テストの可読性を支える技術」と、登壇のメリットなど

Dart

2021.11.01

概要

どうも、@daiki1003です！

お久しぶりのブログになってしまいました。

さて、10/23 (土)に「DevFest Kyoto 2021 Flutterテスト講座」に登壇しました。

DevFest Kyoto 2021 (2021/10/23 13:30〜)

# 概要 DevFest は、世界各国のGDGが8月〜12月に開催するグローバルイベントです。各地のGDGが趣向を凝らしたイベントを開催します。 GDG Kyoto では、Flutter開発でテストができるようになる視点や技術基礎と経験談を紹介します。 ## コンセプト Flutter を使ったプロダク...

発表内容スライドはこちらです。
気付いたら3,700人もの方に見ていただいて本当にありがとうございます！！

本記事では、

・発表と同等の内容を軽くまとめ
・登壇のメリットなど

の２つについて書いていきたいと思います。

・テスト書いてるのは良いけど、可読性低いんだよなぁ…
・登壇を考えてるんだけどコスパ悪すぎでは…

なんて人に最適な記事になってると思います！

それでは行きましょー！

テストの可読性を支える技術

本発表では、１つの概念と３つのパッケージを説明しました。

・group
・given_when_then
・flutter_test_ui
・dart_dot_reporter

簡単に一つずつ説明したいと思います。
詳しくは、各パッケージページやスライドをどうぞ！

group

テストをグループ化出来ます。
また、 VSCodeであれば結果もグループによってまとまって出力されたりもします。

個人的には、この groupで RSpecの様に
describe, context, it
なんかを表現するのも良いなーと思っています。

group('#Increment Button', () { // describe
  group('displaying "0"', () { // context
    test('displays "1", () { // it
      // test codes...
    });
  });
});

given_when_then

given_when_then | Flutter package

A Flutter package to enable code reuse while making tests more readable.

テストの前提条件(given)、テスト対象の処理(when)、期待する結果(then)を
ラップするパッケージです。
作る人が作れば、テストコードが英語を読むかの様に理解することができます。

test('displays "1", harness(given, when, then) async {
  await given.pumpMyWidget();
  given.canFineZero();
  given.cannotFindOne();

  await when.userTapsIncrementButton();
 
  then.cannotFindZero();
  then.canFindOne();
});

ただ、ちょっとラップするクラスを作るのが大変だったりするので

test('displays "1", (tester) async {
  // given
  await tester.pumpWidget(const MyApp());
  expect(find.text('0'), findsOneWidget);
  expect(find.text('0'), findsNothing);

  // when
  await tester.tap(find.byKey(incrementKey));
  tester.pump();
 
  // then
  expect(find.text('0'), findsNothing);
  expect(find.text('1'), findsOneWidget);
});

くらいで良い気はしています。

flutter_test_ui

flutter_test_ui | Flutter package

Wrapper for flutter_test that adds a tester argument to setUp and tearDown functions

setup, tearDownなどのウィジェットテスト版です。
setupUI, tearDownUI, testUIなどを提供してくれています。

void main() {
  setupUI((tester) async {
    await tester.pump(const MyApp());
  }

  testUI('displays "1"', (tester) async {
    // test code
  });
}

setupではWidgetTesterインスタンスがないので重宝するかもしれません。