Testing Flutter apps翻譯-滾動

翻譯首頁

許多應用程序都包含列表，從email應用程序到音樂應用程序等等。咱們指望使用集成測試驗證列表中的內容，咱們須要一個方法去滾動列表來查找特定的item。

爲了使用集成測試滾動列表，咱們可使用FlutterDriver類提供的方法, 該類包含在 flutter_driver 包裏:

在文本里，咱們將會學習到如何滾動列表並驗證列表裏顯示的一個特定的Widget，而且討論不一樣方法的利弊。 若是你剛剛開始集成測試，能夠閱讀集成測試介紹 獲取更多信息。

步驟：

1. 建立一個列表應用程序
2. 檢查應用程序
3. 編寫測試代碼來滾動列表
4. 運行測試

1. 建立一個列表應用程序

在本文裏，咱們將會build一個app來顯示一個長列表。爲了將本文重點放在測試上，咱們使用Working with long lists文章裏建立的app。若是你不知道如何處理列表，請自行查看相關介紹。

像咱們在集成測試介紹 裏作的那樣，咱們也將添加key給集成測試裏須要和咱們交互的widget。

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp(
    items: List<String>.generate(10000, (i) => "Item $i"),
  ));
}

class MyApp extends StatelessWidget {
  final List<String> items;

  MyApp({Key key, @required this.items}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final title = 'Long List';

    return MaterialApp(
      title: title,
      home: Scaffold(
        appBar: AppBar(
          title: Text(title),
        ),
        body: ListView.builder(
          // Add a key to the ListView. This allows us to find the list and
          // scroll through it in our tests
          key: Key('long_list'),
          itemCount: items.length,
          itemBuilder: (context, index) {
            return ListTile(
              title: Text(
                '${items[index]}',
                // Add a key to the Text Widget for each item. This allows
                // us to look for a particular item in the list and verify the
                // text is correct
                key: Key('item_${index}_text'),
              ),
            );
          },
        ),
      ),
    );
  }
}
複製代碼

2. 檢測應用程序

下一步，咱們須要建立咱們應用程序的可檢測版本。這個代碼位於test_driver/app.dart文件裏。

import 'package:flutter_driver/driver_extension.dart';
import 'package:scrollable_app/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();
}
複製代碼

3. 編寫測試代碼來滾動列表

如今，咱們能夠編寫咱們的測試了！在這個例子裏，咱們須要滾動列表並驗證一個特定的item是否存在於列表裏。這個FlutterDriver類提供了3個滾動列表的方法：

• 這個 scroll 方法容許咱們根據給定的數量去滾動列表。
• 這個 scrollIntoView 方法能夠找到已經被渲染的特定Widget，而後將它滾動到可見區域。某些Widget，好比ListView.builder，只有將要顯示的時候纔會去渲染item。
• 這個 scrollUntilVisible 方法滾動列表直到特定Widget被顯示（譯者注：通過個人測試發現scrollIntoView和scrollUntilVisible的區別是scrollIntoView查找的是已經渲染過的item，若是這個item尚未被渲染過的話用scrollIntoView就找不到這個item）。

雖然這三種方法均可以做用於特定的用例，可是scrollUntilVisible是最常使用的，爲何呢？

1. 若是咱們單獨使用scroll方法，咱們可能不正確的假設列表中item的高度。這將致使滾動的太多或者太少。
2. 若是咱們使用scrollIntoView方法，咱們可能假定該Widget已經被實例化而且被渲染。爲了驗證咱們的app可工做在更多的設備裏，咱們須要針對不一樣屏幕大小的設備運行咱們的集成測試。由於ListView.builder只有將要顯示的時候纔會去渲染item，因此一個特定的Widget是否能被渲染取決於設備屏幕的大小。

因此，咱們既不須要知道列表中全部item的高度，也不須要知道一個特定的Widget何時在不一樣的設備被渲染，咱們只須要調用scrollUntilVisible方法反覆滾動列表直到找到咱們須要的那個item！

讓咱們來看看如何經過scrollUntilVisible方法去查找列表中的特定Widget！這些代碼咱們放到了test_driver/app_test.dart文件裏。

// Imports the Flutter Driver API
import 'package:flutter_driver/flutter_driver.dart';
import 'package:test/test.dart';

void main() {
  group('Scrollable App', () {
    FlutterDriver driver;

    // Connect to the Flutter driver before running any tests
    setUpAll(() async {
      driver = await FlutterDriver.connect();
    });

    // Close the connection to the driver after the tests have completed
    tearDownAll(() async {
      if (driver != null) {
        await driver.close();
      }
    });

    test('verifies the list contains a specific item', () async {
      // Create two SerializableFinders. We will use these to locate specific
      // Widgets displayed by the app. The names provided to the byValueKey
      // method correspond to the Keys we provided to our Widgets in step 1.
      final listFinder = find.byValueKey('long_list');
      final itemFinder = find.byValueKey('item_50_text');

      await driver.scrollUntilVisible(
        // Scroll through this list
        listFinder,
        // Until we find this item
        itemFinder,
        // In order to scroll down the list, we need to provide a negative
        // value to dyScroll. Ensure this value is a small enough increment to
        // scroll the item into view without potentially scrolling past it.
        //
        // If you need to scroll through horizontal lists, provide a dxScroll
        // argument instead
        dyScroll: -300.0,
      );

      // Verify the item contains the correct text
      expect(
        await driver.getText(itemFinder),
        'Item 50',
      );
    });
  });
}
複製代碼

4. 運行測試

最後，咱們能夠在項目的根目錄裏使用下面的命令運行測試：

flutter drive --target=test_driver/app.dart
複製代碼