Flutter - 如何在小部件测试中选择DropdownButton项目

Question

我尝试像这样选择一个下拉按钮项目：

import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';
import 'package:dropdown_test_sample/main.dart';

void main() {
  testWidgets('Select Dropdown item test', (WidgetTester tester) async {
    // Build our app and trigger a frame.
    await tester.pumpWidget(const SampleApp());

    final dropdown = find.byKey(const ValueKey('dropdown'));

    await tester.tap(dropdown);
    await tester.pumpAndSettle();

    final dropdownItem = find.byKey(const ValueKey('First item key'));

    await tester.tap(dropdownItem);
    await tester.pumpAndSettle();
  });
}

但不幸的是，它抛出了这个异常：

似乎有些东西一直在创建一个相同的带有相同key值的DropdownButton item，从而使小部件测试失败，因为tester.tap()无法同时"点击"两个小部件。

Here's the full implementation of the DropdownButton widget:

import 'package:flutter/material.dart';

void main() {
  runApp(const SampleApp());
}

class SampleApp extends StatelessWidget {
  const SampleApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Dropdown Test Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const Home(),
    );
  }
}

class Home extends StatelessWidget {
  const Home({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      body: Center(
        child: DummyDropdown(
          key: ValueKey('dropdown'),
        ),
      ),
    );
  }
}

class DummyDropdown extends StatefulWidget {
  const DummyDropdown({Key? key}) : super(key: key);

  @override
  State<DummyDropdown> createState() => _DummyDropdownState();
}

class _DummyDropdownState extends State<DummyDropdown> {
  String? text = 'Dropdown';
  String? textValue;

  @override
  Widget build(BuildContext context) {
    return DropdownButton<String>(
      value: textValue,
      underline: Container(),
      dropdownColor: Theme.of(context).cardColor,
      style: Theme.of(context).textTheme.bodyText2,
      hint: Text(
        text!,
      ),
      icon: const Icon(Icons.keyboard_arrow_down),
      onChanged: (newValue) {
        setState(
          () {
            textValue = newValue;
            text = newValue;
          },
        );
      },
      items: <String>['First item', 'Second item', 'Third item']
          .map<DropdownMenuItem<String>>(
        (value) {
          return DropdownMenuItem<String>(
            value: value,
            key: ValueKey('$value key'),
            child: Text(
              value,
            ),
          );
        },
      ).toList(),
    );
  }
}

- Joshua Erinosho

Answer 1

下拉菜单中的小部件测试与其他小部件不同，请参见此处了解更多信息。在这种情况下，从文本“第一个项目”中选择最后一个元素即可。这将有效。

    import 'package:flutter/material.dart';
    import 'package:flutter_test/flutter_test.dart';
    
    import 'package:testapp/main.dart';
    
    void main() {
  testWidgets('Select Dropdown item test', (WidgetTester tester) async {
    // Build our app and trigger a frame.
    await tester.pumpWidget(const SampleApp());

    final dropdown = find.byKey(const ValueKey('dropdown'));

    await tester.tap(dropdown);
    await tester.pumpAndSettle();

    ///if you want to tap first item
    final dropdownItem = find.text('First item').last;

    await tester.tap(dropdownItem);
    await tester.pumpAndSettle();
  });

}

问题出在这里。当我们点击下拉菜单时，一个已经被选中，另一个没有被选中。因此，您可以使用文本值测试该项。

final dropdownItem = find.text('First item').last;

- Dineth Prabashwara

---

如果下拉菜单包含动态值怎么办？ - Onalo Joseph