Alistair McIntyre
Alistair McIntyre

Reputation: 313

Flutter Driver scrolling through dropdown list

I would like to scroll through a drop-down list as part of a flutter driver test, however I can't seem to figure out exactly how I would do this?

I've tried using a ValueKey, and have tried digging through the Flutter Inspector in Intellij as well, but have had no luck thus far.

Upvotes: 5

Views: 2953

Answers (1)

Omatt
Omatt

Reputation: 10519

I have tried find.byType(Scrollable) and it doesn't seem to work even after widgetTester.tap(). Turns out I need to wait for the screen to update with widgetTester.pumpAndSettle()

testWidgets("Test DropdownButton", (WidgetTester widgetTester) async {
  await widgetTester.pumpWidget(MyApp())
  final dropdownButtonFinder = find.byKey(const ValueKey('DropdownButton'));
  final dropdownItemFinder = find.widgetWithText(InkWell, 'Item 50');
  // find.textContaining() doesn't seem to work here.

  // Tap on the DropdownButton.
  await widgetTester.tap(dropdownButtonFinder);
  await widgetTester.pumpAndSettle(const Duration(seconds: 2));    
  final dropdownListFinder = find.byType(Scrollable);
  expect(dropdownListFinder, findsOneWidget); // Finds Scrollable from tapping DropDownButton.

  // Scroll until the item to be found appears.
  await widgetTester.scrollUntilVisible(dropdownItemFinder, 500.0,
        scrollable: dropdownListFinder);
  await widgetTester.tap(dropdownItemFinder);
  await widgetTester.pumpAndSettle(const Duration(seconds: 2));

  // Verify that the item contains the correct text.
  expect(find.textContaining('Item 50'), findsOneWidget);
});

Main code

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<String> mockList() => List<String>.generate(100, (i) => 'Item $i');
  String? dropdownValue;

  @override
  Widget build(BuildContext context) {
    // debugPrint('${foo!}');
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
        key: Key('Widget1'),
      ),
      body: Center(
        child: DropdownButton(
          key: Key('DropdownButton'),
          value: dropdownValue,
          onChanged: (String? newValue) {
            setState(() {
              dropdownValue = newValue!;
            });
          },
          items: mockList()
              .map<DropdownMenuItem<String>>(
                (String value) => DropdownMenuItem<String>(
                  value: value,
                  child: Text(value),
                  key: Key('item$value'),
                ),
              )
              .toList(),
      )
    );
  }
}

Running the test

enter image description here

Upvotes: 1

Related Questions