2018.12.04 谷哥宣布發行新的 UI Toolkit Flutter 1.0, 能夠支援 iOS & Android 在同一個 code based, 心裡頭非常之興奮, 身為一個與 Cucumber 為夥伴的測試人員, 一直在思考有沒有可能將 Flutter 也與 Gherkin 做一個結合, 幫助正和 Flutter 奮鬥的開發測試人員們也能將 BDD 的概念應用在測試中.
由於, 前幾週被大師們啟 (ㄊ一ㄠˊ) 發 (ㄓㄥˇ), 在這裡就先不多談 BDD 的概念了. 有興趣的朋友可以參考這篇.
於是乎, 為了實現這個想法, 同樣也把這個問題丟給我的好朋友 谷哥, 問問看它有什麼特別的看法, 大概過了半年, 他説: 「試試這個專案吧!」
Flutter-Gherkin
flutter-gherkin 是一個基於 dart package gherkin parser 而堆積起來的專案, 老樣子, 他的靈感一樣來自於 Cucumber 這類支援於 Gherkin 及可執行化文件的 BDD framework. 那麼我們來看一下, 它有哪些有趣的功能呢?
- 支援 Flutter & Dart 2.
- 同時可以把 Test 跑在 iOS & Android Flutter 專案上面.
- 同樣的不需要像 Appium 或 Calabash (懷念) 另外打包 Test Server 在 App 裡面.
- 提供 Flutter Driver Utilities 可以輕易使用 Flutter Driver 的動作.
- 支援 cucumber-html-report , 可以產生美美的報表.
安裝
Flutter on mac
可以參考官方文件, 目前已經有完整的文件可以參考. 當一切就緒之後, 可以執行一下 flutter doctor 確認環境都準備完畢.
# Flutter Doctor
$ flutter doctorFlutter-Gherkin
在 Flutter 專案下找到 pubspec.yaml 這個檔案, 在 dependencies 填好下列資訊.
dependencies:
flutter_gherkin: ^1.0.0然後使用下列指令安裝.
flutter pub get更多細節可參考下面文件:
配置測試檔案
在 Flutter 中的測試有三種 unit, widget tests 及 integration test, 與前兩者不同的是 flutter-gherkin 主要整合 integration test, 因此, 它不會跟 app test 跑在同一個 process 裡面. 按照慣例, 在 Flutter 專案下面開一個資料夾 test_driver, 接者產生 app.dart 及 app_test.dart 兩個檔案.
可參考下面資料夾結構:
counter_app/
lib/
main.dart
test_driver/
app.dart
app_test.dartapp.dart
這個檔案算是測試的啟動點, 就稱它為掌門人吧!
The first file contains an “instrumented” version of the app. The instrumentation allows you to “drive” the app and record performance profiles from a test suite. This file can have any name that makes sense. For this example, create a file called
test_driver/app.dart.
import 'package:flutter_driver/driver_extension.dart';
import 'package:counter_app/main.dart' as flutter_bdd;
void main() {
// This line enables the extension.
enableFlutterDriverExtension();
// Call the `main()` function of the app, or call `runApp` with
// any widget you are interested in testing.
flutter_bdd.main();
}app_test.dart
這個檔案挺重要, 因為它配置者整個 App 的 Test Suite, flutter_gherkin 的配置也會放在這裏, 後面會再詳細介紹. 根據官方文件, 這個檔案記得要使用 _test 結尾的命名.
The second file contains the test suite, which drives the app and verifies it works as expected. The test suite also records performance profiles. The name of the test file must correspond to the name of the file that contains the instrumented app, with
_testadded at the end. Therefore, create a second file calledtest_driver/app_test.dart.
假設上述安裝及設定的工作告一段落後, 你/妳應該已經有一個基礎的 Flutter 測試架構, 如果你/妳剛好又很熟悉 Cucumber 的架構, 那… 我們就直接來寫個測試範例吧! 接下來使用 Flutter Example 為範例.
範例
- 首先開一個 Features 檔放在 test_driver/features 資料夾下面, 當然也支援 Scenarios Outline.
2. 緊接著開始定義 Step Definition:
值得一提的是, 目前支援跟 Cucumber 一樣支持 Given / When / Then 的句子. 同時也提供個內建的 Step Definition.
3. 接下來設定參數:
The configuration file is important and explained in further detail below. However, all that is happening is a
Globis provide which specifies the path to one or more feature files, it sets the reporters to theProgressReporterreport which prints the result of scenarios and steps to the standard output (console). TheTestRunSummaryReporterprints a summary of the run once all tests have been executed. Finally it specifies the path to the testable app created abovetest_driver/app.dart. This is important as it instructions the library which app to run the tests against.
4. 除此之外, 你/妳也可以導入 Page Object Pattern 讓測試更好維護. 這邊就不多做闡述了. (細節可以直接看 Sample Project)
5. 當一切都完成之後, 我們來執行測試吧!
$ flutter drive --target=test_driver/app.dart
如果要指定特定裝置, 別忘了在 app_test.dart 調整 tagetDeviceId, 將裝置指定到代測的 device is
..targetDeviceId = 「emulator-5554"
Flutter-Gherkin 是怎麼動作的呢?
- 當測試開始時, 每個在 Feature 檔裡的 Scenario 會被 GherkinRunner 裡面的 Gherkin Parser 轉換成 Flutter . 至於 Gherkin Parser 是怎麼動作. (可以參考 Sample Project 下面這個 Ruby 的範例)
- 之後 Scenario 的 Step 會對應到上述定義的 Step Definition.
- 最後測試就這麼被執行起來了.
測試報告
flutter-gherkin 支援 cucumber-html-reporter, 所以能夠產生美美的報表.
結論:
Flutter 的測試沒有想像中那麼複雜, 老樣子, 原生工具的測試最舒服.
