Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to find the `text` property of a Widget during testing in Flutter?

I have a piece of code that creates a Table of Text widgets, like this:

return Table(
  defaultColumnWidth: FixedColumnWidth(120.0),
  children: <TableRow>[
    TableRow(
      children: <Widget>[Text('toffee'), Text('potato')],
    ),
    TableRow(
      children: <Widget>[Text('cheese'), Text('pie')],
    ),
  ],
);

I want to test that the first item in the Table is indeed the word 'toffee'. I set up my test and get to this part:

var firstCell = find
      .descendant(
        of: find.byType(Table),
        matching: find.byType(Text),
      )
      .evaluate()
      .toList()[0].widget;

  expect(firstCell, 'toffee');

This definitely doesn't work because firstCell is of type Widget, which is not equal to the String toffee.

I only see a toString() function, like this:

'Text("toffee", inherit: true, color: Color(0xff616161), size: 16.0,
 textAlign: left)'

How do I extract the text property to get the word toffee?

Right now it seems like all I can do is check that the .toString().contains('toffee') which isn't ideal.

like image 764
Mary Avatar asked Sep 13 '18 00:09

Mary


People also ask

What is a text widget in flutter?

A Text widget is simply a widget for displaying text on the screen: Text ("This is my text!"); The Text widget is a part of the flutter/material.dart package, and this package should be imported before using the widget in a flutter app.

What is the testwidgets () function?

The testWidgets () function is the function in which we write our widget tests — and we saw the function broken down in detail. Let’s continue. How Is A Widget Test Written? A Widget Test is usually written for one of two things: Checking if interaction with visual elements gives a correct result

What is a widget test?

A Widget Test is usually written for one of two things: Checking if interaction with visual elements gives a correct result Let’s go with the second type since the first type can be added in as well. To do this, we usually follow a few steps in the test: Find the visual elements on the screen via some kind of property (such as a key)

How does setState () work in a widget test?

setState () does not work as usual in a widget test. While setState () marks the widget to be rebuilt, it does not actually rebuild the tree in a widget test. So how do we do it?


3 Answers

Rémi's example doesn't quite work - it may have worked at the time he answered, but at this time calling whereType<Text>() will always return an empty Iterable because evaluate() returns Iterable<Element>, not Iterable<Widget>. You can however get an Element's Widget by calling .widget on it, so the following code should work:

Text firstText = find
    .descendant(
      of: find.byType(Table),
      matching: find.byType(Text),
    )
    .evaluate()
    .first
    .widget;

expect(firstText.data, 'toffee');

The OP was very close to having working code - there were only 2 minor issues:

  • By using var instead of Text, the type of the variable was Widget
  • The Widget was compared to a String - this could never return true - the intent was to compare a property of the Widget to the String - in the case of a Text, the String it displays is obtained by calling .data on the Text

Edit:

The WidgetTester now has utility functions for retrieving widgets: widget(Finder), widgetList(Finder), firstWidget(Finder) and allWidgets. So for the OP's use case you would be using firstWidget like so:

Text firstText = tester.firstWidget(
    find.descendant(
      of: find.byType(Table),
      matching: find.byType(Text),
    ));

expect(firstText.data, 'toffee');
like image 38
Ovidiu Avatar answered Oct 11 '22 19:10

Ovidiu


Find by text ?

expect(find.text('toffee'), findsOneWidget);
like image 28
Ashfaque Ali Solangi Avatar answered Oct 11 '22 18:10

Ashfaque Ali Solangi


You can cast your firstCell to Text.

var firstCell = find
    .descendant(
      of: find.byType(Table),
      matching: find.byType(Text),
    )
    .evaluate()
    .whereType<Text>()
    .first;

Then test firstCell.data

expect(firstCell.data, 'toffee');
like image 98
Rémi Rousselet Avatar answered Oct 11 '22 20:10

Rémi Rousselet