颤抖。如何通过集成测试来测试不存在溢出？

Question

我使用 flutter_driver 在 Flutter 中进行集成测试。在某些屏幕上，按钮上的文本会出现溢出错误。我想创建一个可以显示发生溢出的测试。因此，当我在一堆虚拟/真实设备上运行所有集成测试时，我可以看到 UI 位置不正确。

Answer 1

不需要为此进行集成测试。小部件测试就可以了。

由于小部件测试在启用断言的情况下运行，因此使用会溢出的小部件调用

tester.pumpWidget

将引发异常，从而导致测试失败。

例如，以下测试将失败：

testWidgets('overflow', (tester) async {
  await tester.pumpWidget(Row(
    textDirection: TextDirection.ltr,
    children: <Widget>[
      // too big to fit in the default size of the row
      Container(width: 99999),
    ],
  ));
});

请注意，小部件测试的屏幕尺寸可以自定义。请参阅如何在不同屏幕尺寸上测试 Flutter 小部件？

或者，我们可以将测试的小部件包装到

Container

中，如下所示：

await tester.pumpWidget(Container(
  alignment: Alignment.center,
  width: <my screen widget>,
  height: <my screen height>,
  child: <the widget which I want to test overflow on>,
);

Answer 2

我在我的包上发布了 2 个辅助函数，名为

hrk_flutter_test_batteries

。
它们如下：

1. disableOverflowError()

2. tester.getOverflowingRenderFlexList()

您可以按如下方式使用它们：
来源 - get_overflowing_render_flex_list_test.dart

import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';
import 'package:hrk_flutter_test_batteries/hrk_flutter_test_batteries.dart';

void main() {
  group('getOverflowingRenderFlexList()', () {
    const overflowingFlexKey = Key('overflowing_flex');
    final overflowingFlexFinder = find.byKey(overflowingFlexKey);

    // Doesn't work. See test/error/disable_overflow_error_test.dart
    // setUp(() {
    //   disableOverflowError();
    // });

    // Doesn't work. See test/error/disable_overflow_error_test.dart
    // setUpAll(() {
    //   disableOverflowError();
    // });

    // setUpAll(() {
    //   configureHrkLogging();
    //   packageLogger.level = Level.ALL;
    // });

    testWidgets('1', (tester) async {
      disableOverflowError();
      tester.view.physicalSize = Size(100, tester.view.physicalSize.height);
      addTearDown(() => tester.view.resetPhysicalSize());
      await tester.pumpWidget(const Row(
        textDirection: TextDirection.ltr,
        children: <Widget>[
          SizedBox(width: 110),
        ],
      ));
      final overflowingRenderFlexList = tester.getOverflowingRenderFlexList();
      expect(overflowingRenderFlexList.length, 1);
    });

    testWidgets('0', (tester) async {
      disableOverflowError();
      tester.view.physicalSize = Size(100, tester.view.physicalSize.height);
      addTearDown(() => tester.view.resetPhysicalSize());
      await tester.pumpWidget(const Row(
        key: overflowingFlexKey,
        textDirection: TextDirection.ltr,
        children: <Widget>[
          SizedBox(width: 10),
        ],
      ));
      final overflowingRenderFlexList = tester.getOverflowingRenderFlexList();
      expect(overflowingRenderFlexList.length, 0);
    });

    testWidgets('2', (tester) async {
      disableOverflowError();
      tester.view.physicalSize = Size(100, tester.view.physicalSize.height);
      addTearDown(() => tester.view.resetPhysicalSize());
      await tester.pumpWidget(const Column(
        children: [
          Row(
            textDirection: TextDirection.ltr,
            children: <Widget>[
              SizedBox(width: 110),
            ],
          ),
          Row(
            textDirection: TextDirection.ltr,
            children: <Widget>[
              SizedBox(width: 110),
            ],
          ),
        ],
      ));
      final overflowingRenderFlexList = tester.getOverflowingRenderFlexList();
      expect(overflowingRenderFlexList.length, 2);
    });

    testWidgets('of, 2', (tester) async {
      disableOverflowError();
      tester.view.physicalSize = Size(100, tester.view.physicalSize.height);
      addTearDown(() => tester.view.resetPhysicalSize());
      await tester.pumpWidget(const Column(
        children: [
          Row(
            textDirection: TextDirection.ltr,
            children: <Widget>[
              SizedBox(width: 110),
            ],
          ),
          Column(
            key: overflowingFlexKey,
            children: [
              Row(
                textDirection: TextDirection.ltr,
                children: <Widget>[
                  SizedBox(width: 110),
                ],
              ),
              Row(
                textDirection: TextDirection.ltr,
                children: <Widget>[
                  SizedBox(width: 110),
                ],
              ),
            ],
          ),
        ],
      ));
      final overflowingRenderFlexList = tester.getOverflowingRenderFlexList(
        of: overflowingFlexFinder,
      );
      expect(overflowingRenderFlexList.length, 2);
    });

    testWidgets('of, matchRoot, 1', (tester) async {
      disableOverflowError();
      tester.view.physicalSize = Size(100, tester.view.physicalSize.height);
      addTearDown(() => tester.view.resetPhysicalSize());
      await tester.pumpWidget(const Column(
        children: [
          Row(
            textDirection: TextDirection.ltr,
            children: <Widget>[
              SizedBox(width: 110),
            ],
          ),
          Row(
            key: overflowingFlexKey,
            textDirection: TextDirection.ltr,
            children: <Widget>[
              SizedBox(width: 110),
            ],
          ),
        ],
      ));
      final overflowingRenderFlexList = tester.getOverflowingRenderFlexList(
        of: overflowingFlexFinder,
        matchRoot: true,
      );
      expect(overflowingRenderFlexList.length, 1);
    });
  });
}