Widget Test Doesn't Fire DropdownButton onChanged

Question

I have a widget test that taps an item in the DropdownButton. That should fire the onChanged callback but it doesn't. Here is the test code. The mock is Mockito.


void main() {
  //Use a dummy instead of the fake. The fake does too much stuff
  final mockServiceClient = MockTheServiceClient();

  final apiClient = GrpcApiClient(client: mockServiceClient);

  when(mockServiceClient.logEvent(any))
      .thenAnswer((_) => MockResponseFuture(LogEventResponse()));

  testWidgets("select asset type", (tester) async {
    //sets the screen size
    tester.binding.window.physicalSizeTestValue = const Size(3840, 2160);

    // resets the screen to its orinal size after the test end
    addTearDown(tester.binding.window.clearPhysicalSizeTestValue);

    await tester.pumpWidget(AssetApp(apiClient), const Duration(seconds: 5));

    //Construct key with '{DDLKey}_{Id}'
    await tester
        .tap(find.byKey(ValueKey("${assetTypeDropDownKey.value}_PUMP")));

    await tester.pumpAndSettle(const Duration(seconds: 5));

    verify(mockServiceClient.logEvent(any)).called(1);
  });
}

This is the build method of the widget:

  @override
  Widget build(BuildContext context) {
    return DropdownButton<DropDownItemDefinition>(
      underline: Container(),
      dropdownColor: Theme.of(context).cardColor,
      hint: Text(
        hintText,
        style: Theme.of(context).textTheme.button,
      ),
      //TODO: Use the theme here
      icon: Icon(
        Icons.arrow_drop_down,
        color: Theme.of(context).dividerColor,
      ),
      value: getValue(),
      onChanged: (ddd) {
        setState(() {
          onValueChanged(ddd!);
        });
      },
      items: itemss.map<DropdownMenuItem<DropDownItemDefinition>>((value) {
        return DropdownMenuItem<DropDownItemDefinition>(
          key: ValueKey(
              "${(key is ValueKey) ? (key as ValueKey?)?.value.toString() :
               ''}_${value.id}"),
          value: value,
          child: Tooltip(
              message: value.toolTipText,
              child: Container(
                  margin: dropdownPadding,
                  child: Text(value.displayText,
                      style: Theme.of(context).textTheme.headline3))),
        );
      }).toList(),
    );
  }

Note that the onValueChanged function calls the logEvent call. The onChanged callback never happens and the test fails. This is the code it should fire.

  Future onAssetTypeChange(DropDownItemDefinition newValue) async {
    await assetApiClient.logChange(record.id, newValue, DateTime.now());
  }

Why does the callback never fire?

Note: I made another widget test and the Mock does verify that the client was called correctly. I think there is some issue with the callback as part of the widget test.

Adrian Flutur · Accepted Answer · 2021-08-15T18:50:18.237

1

You need to first instruct the driver to tap on the DropdownButton itself, and then, after the dropdown popup shows up, tap on the DropdownMenuItem.

The driver can't find a DropdownMenuItem from the dropdown if the dropdown itself is not active/painted on the screen.

edited Aug 15 '21 at 18:50

answered Aug 14 '21 at 23:14

Adrian Flutur

36
4

You are right. This actually does fix the issue! However, it is still not working for me because it finds two drop down items with the same id – Christian Findlay Aug 15 '21 at 03:29
Tapping either of them fires the callback – Christian Findlay Aug 15 '21 at 03:36
1

Then I guess some of your dynamically-generated keys for those DropdownMenuItems end up having the same value, somehow. I think you should move the computation of the key right before the `return DropdownMenuItem...` and print it's value before assigning it to the widget, so you can find out which ones/why they have the same value. – Adrian Flutur Aug 15 '21 at 08:18
Your answer is correct. Could you reword it so it's clearer to the reader what needs to be done. I.e. just say "You need to do this and this" – Christian Findlay Aug 15 '21 at 08:37
Sure, I'll rephrase. – Adrian Flutur Aug 15 '21 at 18:49

Widget Test Doesn't Fire DropdownButton onChanged

1 Answers1