Testing text in TextSpan

Question

If we have a TextSpan that is a child of a RichText widget, how would you test the text content.

new TextSpan(
  text: 'Hello world!',
  style: new TextStyle(color: Colors.black),
)

In your tests, with a Text widget, you can use expect(find.text('Hello world!'), findsOneWidget), but this doesn't work if you have a TextSpan.

expect(find.byType(TextSpan), findsOneWidget) also does not find any widgets of type TextSpan.

score 8 · Answer 1 · answered Sep 09 '19 at 19:18

In addition to Rémi's answer, here is the way to find the text from a RichText. You set the key to the RichText and then you can do:

Finder widgetFinder = find.byKey(key);

Finder rtFinder =
   find.descendant(of: widgetFinder, matching: find.byType(RichText));
RichText richText = rtFinder.evaluate().first.widget as RichText;
String richTextText = richText.text.toPlainText();

print('Text from Text widget: $richTextText');
expect(richTextText, 'This is my text',
   reason: 'Text from found text widget do not match');

score 7 · Accepted Answer · answered Jul 09 '18 at 08:22

7

That's not possible. As TextSpan doesn't actually render anything. It is data information used by another object to actually render something.

What you can do instead is to find the widget to which you pass your TextSpan. And then verify it's correct

answered Jul 09 '18 at 08:22

Rémi Rousselet

256,336
79
519
432

how would you find the widget to which you pass the TextSpan (which is the RichText, correct)? – sceee Sep 09 '19 at 18:19
I answered my question from the comment by myself, see my answer to this question which clarifies Rémi's second point. – sceee Sep 09 '19 at 19:19

score 5 · Answer 3 · answered Oct 22 '21 at 15:40

5

It can be achieved by using byWidgetPredicate

expect(
    find.byWidgetPredicate((widget) =>
        widget is RichText &&
        widget.text.toPlainText() ==
            'Hello World!.'),
    findsOneWidget);

answered Oct 22 '21 at 15:40

Sathish

96
1
9

score 2 · Answer 4 · answered Mar 21 '20 at 17:40

You can find the RichText widget instead. Here's the find.byWidgetPredicate call.

expect(find.byWidgetPredicate((widget) => fromRichTextToPlainText(widget) == 'Hello world!'), findsOneWidget);

Here's the fromRichTextToPlainText helper function. Pass it the RichText widget, it will return the plain text for all the underlying TextSpans.

String fromRichTextToPlainText(final Widget widget) {
  if (widget is RichText) {
    if (widget.text is TextSpan) {
      final buffer = StringBuffer();
      (widget.text as TextSpan).computeToPlainText(buffer);
      return buffer.toString();
    }
  }
  return null;
}

score 0 · Answer 5 · answered Jun 18 '21 at 06:31

From above snippets - I found below bit customised version helpful to me..

String? fromRichTextToPlainText(final Widget widget) {
  if (widget is RichText) {
    return widget.text.toPlainText();
  }
  return null;
}

expect(
          find.byWidgetPredicate(
              (widget) => fromRichTextToPlainText(widget) == 'My Rich Text'),
          findsOneWidget);

score 0 · Answer 6 · answered Nov 25 '21 at 00:17

0

In case someone needs to not just find the widget, but also tap on it:

Finding a TextSpan to tap on with Flutter tests

answered Nov 25 '21 at 00:17

David Schneider

472
5
13

Testing text in TextSpan

6 Answers6