Question

说我想断言，当我在搜索栏小部件中输入文本时，占位符文本会消失。这确实只是在测试Flutter框架，但这是我试图了解如何进行窗口小部件测试的第一个窗口小部件测试，并且担心它不仅仅可以正常工作。

接受以下SearchBar小部件进行测试：

import 'package:flutter/material.dart';

const BorderRadius _kBorderRadius = BorderRadius.all(Radius.circular(32.0));
const Color _kBorderColor = Color(0xFF33BFCC);

class SearchBar extends StatelessWidget {
  SearchBar({this.onClose, this.onChanged});

  final Function onClose;
  final Function onChanged;

  @override
  Widget build(BuildContext context) {
    return TextField(
      onChanged: onChanged,
      decoration: InputDecoration(
        suffixIcon: IconButton(
          icon: Icon(Icons.close),
          onPressed: onClose,
        ),
        fillColor: Colors.white,
        filled: true,
        hintText: 'Search',
        contentPadding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 20.0),
        border: OutlineInputBorder(
          borderRadius: _kBorderRadius,
        ),
        enabledBorder: OutlineInputBorder(
          borderSide: BorderSide(color: _kBorderColor, width: 1.0),
          borderRadius: _kBorderRadius,
        ),
        focusedBorder: OutlineInputBorder(
          borderSide: BorderSide(color: _kBorderColor, width: 2.0),
          borderRadius: _kBorderRadius,
        ),
      ),
    );
  }
}

以及该小部件的以下测试：

import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';
import 'package:my_app/ui_components/search_bar.dart';

void main() {
  testWidgets('entering text removes placeholder text',
      (WidgetTester tester) async {
    await tester.pumpWidget(MaterialApp(home: Scaffold(body: SearchBar())));

    await tester.enterText(find.byType(TextField), 'hi');
    await tester.pumpAndSettle();

    final placeholderFinder = find.text('Search');
    final textFinder = find.text('hi');

    expect(textFinder, findsOneWidget);
    expect(placeholderFinder, findsNothing);
  });
}

此测试失败，因为仍然找到“搜索”文本。看着how Flutter tests their own text fields，他们似乎正在使用不透明技巧。如果我通过替换尝试相同的技巧

expect(placeholderFinder, findsNothing);

与

expect(getOpacity(tester, placeholderFinder), 0.0);

其中getOpacity定义为：

double getOpacity(WidgetTester tester, Finder finder) {
  return tester
      .widget<FadeTransition>(
        find.ancestor(
          of: finder,
          matching: find.byType(FadeTransition),
        ),
      )
      .opacity
      .value;
}

我收到以下错误：

在运行测试时引发了以下StateError：不良状态：元素过多引发异常时，这是堆栈： 0 Iterable.single（dart：core / iterable.dart：554：24） 1个WidgetController.widget（package：flutter_test / src / controller.dart：65：30）

有更好的方法吗？

Answer 1

您可以通过 firstWidget 获取小部件并进行测试。

testWidgets('Test name', (WidgetTester tester) async {
  // preparing widget...

  final finder = find.byType(FadeTransition)
  expect(finder, findsOneWidget);

  //getting Text object
  Text widget = tester.firstWidget(finder);

  // validating properies
  expect(widget.opacity.value, equals(0));
}

如何断言占位符文本在Flutter小部件测试中消失了？

1 个答案: