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',
      );
    });
  });
}
复制代码