在 TabBar 小部件 Flutter 上测试 Tabbar 边框

Question

我有一个 CustomTabBar class 其中 returns 一个 TabBarWidget。所以 CustomTabBar 小部件的基本结构如下：

class CustomTabBar extends StatelessWidget {
  ...
  final bool isBottomIndicator;
  ...

  @override
  Widget build(BuildContext context) {
    return TabBar(
      .....
      indicator: BoxDecoration(
        border: isBottomIndicator
            ? Border(
                bottom: BorderSide(
                  color: Theme.of(context).colorScheme.tabbarSelectorColor,
                  width: 3.0,
                ),
              )
            : Border(
                top: BorderSide(
                  color: Theme.of(context).colorScheme.tabbarSelectorColor,
                  width: 3.0,
                ),
              ),
      ),
      ......
    );
  }
}

指标的位置由变量isBottomIndicator控制。

现在我正在尝试为这个小部件编写一个测试用例。到目前为止，我已经尝试过这个测试用例：

testWidgets('CustomTabBar with bottom indicator',
      (WidgetTester tester) async {
    final _customTabBar = CustomTabBar(
      tabs: _tabs,
      selectedIndex: _selectedIndex,
      onTap: (_) {},
      isBottomIndicator: true,
    );
    await tester.pumpWidget(makeTestableWidgets(child: _customTabBar));

    final tabBar = find.byType(TabBar).first as TabBar;

    expect(
      tabBar.indicator,
      BoxDecoration(
        border: Border(
          bottom: BorderSide(
            width: 3.0,
          ),
        ),
      ),
    );
  });

我从编译器得到的异常是

The following _CastError was thrown running a test:
type '_WidgetTypeFinder' is not a subtype of type 'TabBar' in type cast

我不确定如何投射通过 find.byType()

找到的 wiget

以下测试通过，我检查 TabBar 是否存在。

testWidgets('CustomTabBar has a TabBar', (WidgetTester tester) async {
    await tester.pumpWidget(makeTestableWidgets(child: _customTabBar));
    expect(find.byType(TabBar), findsOneWidget);
  });

如果您对 makeTestableWidgets 感兴趣。该功能只是为TabBar提供了MaterialApp。

Widget makeTestableWidgets({Widget child}) {
    return MaterialApp(
      home: DefaultTabController(
        length: 1,
        child: Scaffold(
          body: Container(),
          bottomNavigationBar: _customTabBar,
        ),
      ),
    );
  }

Answer 1

在您的测试用例中，替换行

final tabBar = find.byType(TabBar).first as TabBar;

和

final tabBar = tester.widget(find.byType(TabBar)) as TabBar;

我自己还没有测试过，但我认为它可以解决问题。

在 TabBar 小部件 Flutter 上测试 Tabbar 边框

Testing Tabbar border on TabBar widget Flutter

flutter

dart

widget

widget-test-flutter