Testing In Flutter: Widget Test

Introduction

In the previous blog, we saw the Unit Test in Flutter.
https://dhruvnakum.xyz/testing-in-flutter-unit-test
Unit Testing is a great testing technique. It allows us to test a single function, method, or class individually. This is a fantastic way to make sure that a unit of logic produces the expected value.
However, they don't provide much confidence since they focus on small pieces of code and not on how the pieces integrate with each other.
In this blog, we are going to see another testing technique in Flutter which is Widget Test.

Widget testing is a technique that allows us to ensure that various portions of the user interface work as intended without the need for a physical device or simulator.
They can be a great way to isolate small parts of your app and find out whether your code is behaving as expected.
They usually increase the level of confidence compared to unit tests. And the execution time allows us to run hundreds of tests in less than a minute.
They will seem familiar to you since they are very similar to the unit test that we have previously written.
However, due to the flutter_test package, we can utilize several handy tools and utilities to interact with our application.
To continue with our calculator project, we will now add widget testing to our flutter application.
The first step is to make a test folder if you don't already have one.
Next, we'll create our first test file, calculator_app_test.dart, in which we'll write our test.
Now we are going to create our first tests. This time however we need to make sure that we import the flutter_test package so we can use the testWidgets() method instead of the previous test() method that we use for unit test.

import 'package:flutter_test/flutter_test.dart';

void main() {
  group(' ', () {
    testWidgets(' ',
        (WidgetTester tester) async {
       }
    );
  });
}

To begin testing, we must first develop a page that has some widgets. Let's make a CalculatorApp page that displays four ListTile widgets. Which displays several icons for operations and related titles.

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text("Calculator"),
        ),
        body: Column(
          children: const [
            ListTile(
              title: Text("Addition"),
              leading: Icon(Icons.add),
            ),
            ListTile(
              title: Text("Subtraction"),
              leading: Icon(Icons.minimize),
            ),
            ListTile(
              title: Text("Multiplication"),
              leading: Icon(Icons.cancel_outlined),
            ),
            ListTile(
              title: Text("Division"),
              leading: Icon(Icons.architecture),
            ),
          ],
        ),
      ),
    );
  }
}

To test these widgets, navigate to the calculator app test.dart file.

Now create a group called 'CalculatorApp.'

void main() {
   group('CalculatorApp', () {
   });
}

Then insert the test description within the testWidgets method. testWidgets is like test in unit testing, but for widget testing.

void main() {
   group('CalculatorApp', () {
     testWidgets('Render 4 widgets of Type ListTile',
         (WidgetTester tester) async {
     });
   });
}

The function takes one argument called WidgetTester, which is used to interact with the application.
When we launch the application, we can see four list tile widgets on the screen. As a result, the most basic test we can write here is: When we launch the application, the four widgets are rendered.
In a flutter, we use the function runApp to inflate our application and attach it to the screen of the device.

Similarly the pumpWidget method from the widget tester class achieves the same. On a test environment it renders the initial UI of the given widget.

void main() {
   group('CalculatorApp', () {
     testWidgets('Render 4 widgets of Type ListTile',
         (WidgetTester tester) async {
       await tester.pumpWidget(const CalculatorPage());
       expect(find.byType(ListTile), findsNWidgets(4)); // Expecting 4 ListTile widget on    Screen. 
     });
});
}

calculatorapp_test passes.png

Difference Between `pumpWidget()`, `pump()` & `pumpAndSettle()`

Interacting with our application is crucial during the testing phase. After all, being able to tap a button, fill a form, or scroll through views is what adds value to our project.
Consider the following example, where I’ve created two Textfield for inputting two numbers for calculation. I also gave each of the Textfield a unique Key So that we can find that particular widget inside our tests.

As you can see as soon as I fill up the Textfields the result gets appeared with a little background color animation.
Let’s see how to test this behavior in our Calculator Test file.
First of all, let’s create a group named add. And then using pumpWidget let’s render the CalculatorPage.

group('add',(){
    testWidget('Show result when two inputs are given',(WidgetTester tester) async{
        await tester.pumpWidget(const CalculatorPage())
    })
})

Now that we’ve rendered the UI. It’s time to input the numbers in the TextField. In order to find the particular TextField, I’ve assigned a unique Key to each of them.

In order to enter the value from the test, the WidgetTester provides us a method called enterText().

group('add',(){
  testWidget('Show result when two inputs are given',(WidgetTester tester) async{
      await tester.pumpWidget(const CalculatorPage())
      await tester.enterText(find.byKey(const Key('textfield_top_plus')), '3');
      await tester.enterText(find.byKey(const Key('textfield_bottom_plus')), '6');
  })
})

It takes two parameters:
- Finder: This must be an EditableText or have an EditableText descendant. For example TextField or TextFormField , or EditableText.
- String: It is basically the value which we want to be entered in the Field.
Once the text is typed into the textfield, the result is shown, as seen in the output above.
So now we can check if there is a text widget on the screen that has the string Result: 9 or not.
To do this, we can use the find.text() function to obtain the Text, and then use findsOneWidget to determine whether or not any widget has the expected string.

group('add', () {
    testWidgets('Show result when two inputs are given',
        (WidgetTester tester) async {
      await tester.pumpWidget(const CalculatorPage());
      await tester.enterText(find.byKey(const Key('textfield_top_plus')), '3');
      await tester.enterText(find.byKey(const Key('textfield_bottom_plus')), '6');
      expect(find.text('Result: 9.0'), findsOneWidget);
    });
  });

If you run the test, you will get an error that says zero widgets with the text "Result: 9.0". This means none were found but one was expected. Why did this happen?
This is due to the fact that when we input a number, the UI changes and shows the result. This change in the UI, or the new frame that was rendered, is exactly what we are lacking in our test.
We need to figure out how to inform our widget test to render a new frame after we enter both numbers.
The answer is to use the tester instance to invoke the pump() method.
pump() instructs the system to paint a new frame so that we can meet our expectations with a newly updated user interface.

group('add', () {
    testWidgets('Show result when two inputs are given',
        (WidgetTester tester) async {
      await tester.pumpWidget(const CalculatorPage());
      await tester.enterText(find.byKey(const Key('textfield_top_plus')), '3');
      await tester.enterText(
          find.byKey(const Key('textfield_bottom_plus')), '6');
      await tester.pump();
      expect(find.text('Result: 9.0'), findsOneWidget);
    });
  });

However, the method pump() is rather restricted. Because it just refreshes a single frame, which is useless when working with animations.
For instance, in our Calculator Page, let's show the result only when the background animation has finished.
To do this, I've created a new variable called resultAfterAnimation, and I'm setting its value when the animation has finished.

AnimatedContainer(
            padding: const EdgeInsets.all(8),
            duration: const Duration(milliseconds: 1000),
            onEnd: () {
              setState(() {
                resultAfterAnimation = result.toString();
              });
            },
            color: result == null ? Colors.transparent : Colors.green,
            curve: Curves.easeInOut,
            child: Text(
              resultAfterAnimation != null
                  ? 'Result: $resultAfterAnimation'
                  : 'Result: ',
              style: Theme.of(context).textTheme.bodyText1,
              textAlign: TextAlign.end,
  ),
),

If you try to run the test now, you will receive an error. It's because there is no longer a single frame. The animation is updating many frames at the same time.
To wait for the animation to finish, we must use the pumpAndSettle() function provided by the WidgetTest.
Simply replace the pump() method with pumpAndSettle() and you're done.

group('add', () {
    testWidgets('Show result when two inputs are given',
        (WidgetTester tester) async {
      await tester.pumpWidget(const CalculatorPage());
      await tester.enterText(find.byKey(const Key('textfield_top_plus')), '3');
      await tester.enterText(
          find.byKey(const Key('textfield_bottom_plus')), '6');
      await tester.pumpAndSettle();
      expect(find.text('Result: 9.0'), findsOneWidget);
    });
  });

Finding a Widget in Widget Tree Using `CommonFinders`

Finding and locating the widget is very important in the Widget Test.
The flutter test Package provides top-level find methods that allow us to locate the widgets.
While there are plenty of ways to find the widgets, the most common method is finding widgets using byKey().
byType(): If we know the class name of the widget that we want to locate or
byText(): If what we want to locate is a certain string on the screen
You can find more common finders by visiting this link

Interacting with Your Widgets Using `WidgetTester`

Interacting with the Widget is very important in Widget Test. After all what we want to validate in most cases is that after the user interacted with our app like a button tap, our application transitions to a known state that we can assert in our tests.
The testWidget() method provides us a callback that gives us tester instance of a WidgetTester.
With this object, we can interact with the widget that we have previously inflated with the pumpWidget(). (In our case that is CalculatorPage()) .
In our test, we can use tester that ensureVisible() to make sure that a given widget is visible within a scrollable view.
Then we can use tester.tap() on TextFormField so they can gain focus.

And tester.enterText() to type the given text in the text field .

group('add', () {
  testWidgets('Show result when two inputs are given',
      (WidgetTester tester) async {

    await tester.pumpWidget(const CalculatorPage());

    final topTextFieldFinder = find.byKey(const Key('textfield_top_plus'));
    final bottomTextFieldFinder = find.byKey(const Key('textfield_bottom_plus'));

    await tester.ensureVisible(topTextFieldFinder);
    await tester.tap(topTextFieldFinder);
    await tester.enterText(topTextFieldFinder, '3');

    await tester.ensureVisible(bottomTextFieldFinder);
    await tester.tap(bottomTextFieldFinder);
    await tester.enterText(bottomTextFieldFinder, '6');

    await tester.pumpAndSettle();
    expect(find.text('Result: 9.0'), findsOneWidget);
  });
});

You can study plenty of other tester methods here

Testing Smaller Widgets in Isolation

One of the greatest benefits of widget testing is that we can test different widgets and components in isolation without needing to launch the application.
By doing this, our tests can be much more focused, faster and our code base will be much more modular, developer-friendly, and easy to maintain over time.
Continuing with our calculator project we are going to apply this principle to the OperationWidget.

To test this widget in isolation the approach did not differ from what we've already learned.
The first step will be to pump our widget under test using pumpWidget().
Our OperationWidget has five dependencies in its constructor, the icon, title, two keys, and the operation enum.
Now we will pump our OperationWidget using pumpWidget and all the other things remain the same.

main() {
  group('TwoDigit Addition Operation', () {
    testWidgets('render 10 when 5 and 5 added', (tester) async {
      final topTextFieldFinder = find.byKey(const Key('textfield_top_plus'));
      final bottomTextFieldFinder =
          find.byKey(const Key('textfield_bottom_plus'));

      await tester.pumpWidget(
         OperationWidget(
              operationIcon: Icons.add,
              operationTitle: "Addition",
              operationType: OperationType.add,
              textFieldTopKey: 'textfield_top_plus',
              textFieldBottomKey: 'textfield_bottom_plus',
            ),
      );

      await tester.enterText(topTextFieldFinder, '5');
      await tester.enterText(bottomTextFieldFinder, '5');

      await tester.pumpAndSettle();

      expect(find.text('Result: 10.0'), findsOneWidget);
    });
  });
}

But now if you run this test, you will get an error saying: Saying The specific widget that could not find a Material ancestor was: TextField.
In order to solve this issue, we need to wrap the OperationWidget around MaterialApp and Scaffold widget.

main() {
  group('TwoDigit Addition Operation', () {
    //...
      await tester.pumpWidget(
        MaterialApp(
          home: Scaffold(
            body: OperationWidget(
              operationIcon: Icons.add,
              operationTitle: "Addition",
              operationType: OperationType.add,
              textFieldTopKey: 'textfield_top_plus',
              textFieldBottomKey: 'textfield_bottom_plus',
            ),
          ),
        ),
      );

     //...
    });
  });
}

Now if you will run the test, it should pass.

Wrapping Up

I hope you enjoyed and learned something from this article. If you have any feedback/queries, leave them in the comments.
In the next blog we are going to see the final testing method: Integration Test
I've learned to test and wrote this article using the example provided by VGV. So big thanks to VGV.
Thank you for spending time reading this article. See you in the next article. Until then...

Follow me on : Twitter, LinkedIn, Github

Testing In Flutter: Widget Test

Comments (1)

Flutter

Testing In Flutter: Unit Test 🧪

More from this blog

100 Blogs Later: Lessons from Code, Content, and Consistency

A Practical Journey from Application to Distributed Systems - Part 6

A Practical Journey from Application to Distributed Systems - Part 5

A Practical Journey from Application to Distributed Systems - Part 4

A Practical Journey from Application to Distributed Systems - Part 3

Introduction

Widget Test

Difference Between `pumpWidget()`, `pump()` & `pumpAndSettle()`

Finding a Widget in Widget Tree Using `CommonFinders`

Interacting with Your Widgets Using `WidgetTester`

Testing Smaller Widgets in Isolation

Wrapping Up

Command Palette

Comments (1)

Flutter

Testing In Flutter: Unit Test 🧪

More from this blog

Introduction

Widget Test

Difference Between pumpWidget(), pump() & pumpAndSettle()

Finding a Widget in Widget Tree Using CommonFinders

Interacting with Your Widgets Using WidgetTester

Testing Smaller Widgets in Isolation

Wrapping Up

Difference Between `pumpWidget()`, `pump()` & `pumpAndSettle()`

Finding a Widget in Widget Tree Using `CommonFinders`

Interacting with Your Widgets Using `WidgetTester`