Widget Testing With Flutter: Getting Began

On this tutorial about Widget Testing with Flutter, you’ll learn to guarantee UI widgets look and behave as anticipated by writing check code.

Replace observe: Stephanie Patterson up to date this tutorial for Flutter 3.3 and Dart 2.18. Lawrence Tan wrote the unique.

Testing is necessary throughout your app growth. As your product grows, it will get extra advanced, and performing guide exams turns into harder. Having an automatic testing setting helps optimize this course of.

Widget testing is like UI testing: You develop the appear and feel of your app, making certain each interplay the person makes produces the anticipated end result.

For this tutorial, you’ll write widget exams for a automotive app referred to as Drive Me, which lets customers view an inventory of automobiles, view particulars about them and choose and think about particular automobiles. Within the course of, you’ll learn to check that the app correctly performs the next features:

• Hundreds mock information to the widget exams.
• Injects misguided mock information for unfavourable exams.
• Ensures that the app presents an inventory of sorted automobiles and shows its particulars.
• Checks that the automotive choice seems accurately within the checklist web page.
• Ensures that the automotive particulars web page shows accurately.

Getting Began

To begin, obtain the starter challenge by clicking the Obtain Supplies button on the prime or backside of the tutorial, then discover the starter challenge in Visible Studio Code. You may as well use Android Studio, however this tutorial makes use of Visible Studio Code in its examples.

Be sure that to run flutter packages get both on the command line or when prompted by your IDE. This pulls the newest model of the packages wanted for this challenge.

Be aware: Within the starter challenge, you’ll probably see warnings about Unused import or variables not getting used. Ignore these as they are going to be used by the point you could have accomplished this tutorial.

Construct and run the challenge with flutter run to familiarize your self with how the app works.

Exploring the Starter Mission

The starter challenge consists of the implementation of the app so you’ll be able to deal with widget testing. Check out the contents in lib to know how the app works.

Beginning on the backside, as you realize major.dart is the file the place all Flutter apps begin. dependency_injector.dart is the place the app registers the principle information layer lessons and injects them through get_it.

constants.dart accommodates many of the variables you’ll use all through the app.

The challenge has 4 major folders:

• database
• particulars
• checklist
• fashions

Within the lib/fashions folder, you’ll discover an necessary file. automotive.dart is the place the Automobile() and CarsList() mannequin implementations reside. The CarsList() mannequin holds an inventory of automobiles and an error message if an exception happens.

Subsequent, take a look at lib/checklist/cars_list_bloc.dart. That is the CarsList() information layer. CarsListBloc masses information from the JSON present in property/sample_data/information.json and passes it to the widget checklist. Thereafter, it types the automobiles alphabetically through alphabetizeItemsByTitleIgnoreCases().

Within the lib/particulars folder is car_details_bloc.dart, which will get information from CarsListBloc and passes it to the CarDetails widget in car_details_page.dart.

Open lib/particulars/car_details_page.dart. You’ll see that on init it retrieves the info handed in by CarDetailsBloc and presents it on the widget. When customers choose or deselect objects, CarsListBloc() makes the updates.

When the person selects any automotive, a separate information stream manages it.

lib/database accommodates cars_database.dart, which implements an summary class referred to as CarsDataProvider. This class accommodates loadCars() that parses the JSON file containing an inventory of automotive information. The parsed information returned is a CarsList().

As you guessed it from some filenames, this challenge makes use of BLoC to go information between the widgets layer and the info layer.

Now that you simply’ve tried the app and perceive the implementation particulars, it’s time to begin working some exams.

Earlier than you dive deep into the subject of widget testing with Flutter, take a step again and evaluate it with unit testing.

Unit Testing vs. Widget Testing

Unit testing is a course of the place you verify for high quality, efficiency or reliability by writing additional code that ensures your app logic works as anticipated. It exams for logic written in features and strategies. The unit exams then develop and accumulate to cowl a complete class and subsequently an enormous a part of the challenge, if not all.

The objective of a widget check is to confirm that each widget’s UI seems and behaves as anticipated. Essentially, you carry out exams by re-rendering the widgets in code with mock information.

This additionally tells you that for those who modify the logic of the app — for instance, you alter the login validation of the username from a minimal of six characters to seven — then your unit check and widget check could each fail collectively.

Checks lock down your app’s options, which enable you to to correctly plan your app’s design earlier than creating it.

Testing Pyramid

There are three varieties of exams you’ll be able to carry out with Flutter:

• Unit exams: Used to check a technique or class.
• Widget exams: These check a single widget.
• Integration exams: Use these to check the vital flows of the complete app.

So, what number of exams will you want? To resolve, check out the testing pyramid. It summarizes the important varieties of exams a Flutter app ought to have:

Primarily, unit exams ought to cowl many of the app, then widget exams and, lastly, integration exams.

Even when good testing grounds are in place, you shouldn’t omit guide testing.

As you go up the pyramid, the exams get much less remoted and extra built-in. Writing good unit exams enable you to construct a powerful base to your app.

Now that you simply perceive the necessity for testing, it’s time to dive into the challenge for this tutorial!

Widget Testing the Automobile Record

Open check/checklist/cars_list_bloc_test.dart. Look beneath // TODO 3: Unit Testing Information Loading Logic and also you’ll see the unit exams applied on this challenge. These unit exams be sure that the info construction you present to the widget is correct.

Earlier than going into writing the check scripts, it’s good to have a look at the precise display you’re testing. In check/database/mock_car_data_provider.dart, the person has chosen the primary automotive — the Hyundai Sonata 2017, proven the picture beneath:

Are you prepared to begin including widget exams?

Your First Take a look at

Open check/checklist/cars_list_page_test.dart and add the next beneath // TODO 4: Inject and Load Mock Automobile Information:

carsListBloc.injectDataProviderForTest(MockCarDataProvider());

That is injecting the mock automotive check information into carsListBloc.

Beneath // TODO 5: Load & Type Mock Information for Verification add:

remaining automobiles = await MockCarDataProvider().loadCars();
automobiles.objects.kind(carsListBloc.alphabetizeItemsByTitleIgnoreCases);

Right here you’re ready for the mock automotive information to load after which kind the checklist.

Injecting check information

Now it’s time to inject the check information.

Add these strains of code beneath // TODO 6: Load and render Widget:

await tester.pumpWidget(const ListPageWrapper());
await tester.pump(Period.zero);

pumpWidget() renders and performs a runApp of a stateless ListPage widget wrapped in ListPageWrapper(). Then, you name pump() to render the body and specify how lengthy to attend. On this case you don’t need a delay so Period.zero is used.

This prepares the widget for testing!

Guaranteeing visibility

Beneath // TODO 7: Examine Vehicles Record's part's existence through key to make sure that the Carslist is within the view add these strains of code:

remaining carListKey = discover.byKey(const Key(carsListKey));
count on(carListKey, findsOneWidget);

In case you take a look at lib/checklist/cars_list_page.dart, you will notice that the widget tree identifies ListView() with a key referred to as carsListKey(). findsOneWidget makes use of a matcher to find precisely one such widget.

The mock information in mock_car_data_provider.dart has a complete of six automobiles, however you don’t need to write a check for every one. apply is to make use of a for loop to iterate by way of and confirm every automotive on the checklist.

Return to check/checklist/cars_list_page_test.dart and beneath // TODO 8: Create a perform to confirm checklist's existence add this:

void _verifyAllCarDetails(
  Record<Automobile> carsList,
  WidgetTester tester,
) async {
  for (remaining automotive in carsList) {
    remaining carTitleFinder = discover.textual content(automotive.title);
    remaining carPricePerDayFinder = discover.textual content(
      pricePerDayText.replaceFirst(
        wildString,
        automotive.pricePerDay.toStringAsFixed(2),
      ),
    );
    await tester.ensureVisible(carTitleFinder);
    count on(carTitleFinder, findsOneWidget);
    await tester.ensureVisible(carPricePerDayFinder);
    count on(carPricePerDayFinder, findsOneWidget);
  }
}

This check verifies that the title and the worth per day show accurately. That is doable due to a perform referred to as ensureVisible().

To see extra about ensureVisible(), hover over it to see its description routinely displayed.

To confirm the automotive particulars, discover // TODO 9: Name Confirm Automobile Particulars perform and add this beneath it to name to the perform you simply created:

_verifyAllCarDetails(automobiles.objects, tester);

Within the subsequent part you’ll learn to add exams to confirm the chosen automotive has a blue background.

Widget Testing the Automobile Record Web page with Choice

Keep in mind when you choose a automotive it has a blue background? You might want to create a check to make sure that occurs.

Nonetheless in cars_list_page_test.dart, add this beneath // TODO 10: Choose a Automobile:

carsListBloc.selectItem(1);

The widget tester makes an attempt to pick out Automobile ID 1.

Discover // TODO 11: Confirm that Automobile is highlighted in blue add the next beneath it:

// 1
bool widgetSelectedPredicate(Widget widget) =>
          widget is Card && widget.colour == Colours.blue.shade200;
// 2
bool widgetUnselectedPredicate(Widget widget) =>
          widget is Card && widget.colour == Colours.white;

count on(
   discover.byWidgetPredicate(widgetSelectedPredicate),
   findsOneWidget,
);
count on(
  discover.byWidgetPredicate(widgetUnselectedPredicate),
  findsNWidgets(5),
);

Right here you could have created two predicates:

1. Confirm the chosen card has a blue background
2. Make sure the unselected card stays white

Run this check now. Hurray, your new check passes! :]

You’re doing very properly. It’s time to strive some unfavourable exams earlier than ending with the testing of the automotive particulars web page.

Unfavorable Checks for Automobile Record Web page

Now it’s time to check for errors. To simulate errors, add the next beneath // TODO 12: Inject and Load Error Mock Automobile Information:

carsListBloc.injectDataProviderForTest(MockCarDataProviderError());

You’ve injected information earlier than. The one distinction right here is that you simply inject MockCarDataProviderError(), which accommodates mock error information.

Beneath // TODO 13: Load and render Widget add:

  await tester.pumpWidget(const ListPageWrapper());
  await tester.pump(Period.zero);

As earlier than, pumpWidget() and pump() set off a body to color and render instantly.

Beneath // TODO 14: Confirm that Error Message is proven add the next so as to add error messages.

remaining errorFinder = discover.textual content(
  errorMessage.replaceFirst(
    errorMessage,
    mockErrorMessage,
  ),
);
count on(errorFinder, findsOneWidget);

This replaces the errorMessage with the mockErrorMessage and confirms the error message shows.

Prepared to your fifth check? Run it.

Nice job! Your fifth check handed!

Verifying view replace

There’s one final check it is advisable carry out for this widget, which is to confirm the widget updates its view if information is available in after getting an error.

You might want to check in case your app doesn’t have any automobiles to show.

Since this subsequent step consists of code you’ve already used, you’re going to do a big replace without delay. Discover and exchange // TODO Substitute testWidgets('''After encountering an error...''' and the complete placeholder testWidgets() beneath it with:

testWidgets(
    '''After encountering an error, and stream is up to date, Widget can be 
    up to date.''',
    (WidgetTester tester) async {
      // TODO 15: Inject and Load Error Mock Automobile Information
      carsListBloc.injectDataProviderForTest(MockCarDataProviderError());

      // TODO 16: Load and render Widget
      await tester.pumpWidget(const ListPageWrapper());
      await tester.pump(Period.zero);

      // TODO 17: Confirm that Error Message and Retry Button is proven
      remaining errorFinder = discover.textual content(
        errorMessage.replaceFirst(
          errorMessage,
          mockErrorMessage,
        ),
      );
      remaining retryButtonFinder = discover.textual content(retryButton);
      count on(errorFinder, findsOneWidget);
      count on(retryButtonFinder, findsOneWidget);

      // TODO 18: Inject and Load Mock Automobile Information
      carsListBloc.injectDataProviderForTest(MockCarDataProvider());
      await tester.faucet(retryButtonFinder);

      // TODO 19: Reload Widget
      await tester.pump(Period.zero);

      // TODO 20: Load and Confirm Automobile Information
      remaining automobiles = await MockCarDataProvider().loadCars();
      _verifyAllCarDetails(automobiles.objects, tester);
    },
  );

Right here’s what the code does:

• TODO 15–17: These are the identical because the exams you probably did within the final step.
• TODO 18: Injects automotive mock information.
• TODO 19: Reloads the widget.
• TODO 20: Waits for mock dat to load after which verifies the automotive particulars.

Time to run the check. Run it now, and …

Superior work! Your sixth check passes!

You’ve examined for when a automotive is chosen. What about when it’s been deselected? You guessed it, that’s subsequent.

Widget Testing the Automobile Particulars Web page for the Deselected Automobile

Take one other take a look at the Automobile Particulars Web page. Right here is an instance of a particular automotive and one other that has not been chosen.

Discover how the title and button textual content are completely different relying on the person’s selection. You might want to check for that.
Open check/particulars/car_details_page_test.dart add exchange // TODO Substitute testWidgets('Unselected Automobile Particulars Web page...' together with the corresponding placeholder testWidgets() code with this:

testWidgets(
    'Unselected Automobile Particulars Web page ought to be proven as Unselected',
    (WidgetTester tester) async {
      // TODO 21: Inject and Load Mock Automobile Information
      carsListBloc.injectDataProviderForTest(MockCarDataProvider());
      await carsListBloc.loadItems();

      // TODO 22: Load & Type Mock Information for Verification
      remaining automobiles = await MockCarDataProvider().loadCars();
      automobiles.objects.kind(carsListBloc.alphabetizeItemsByTitleIgnoreCases);

      // TODO 23: Load and render Widget
      await tester.pumpWidget(
          const DetailsPageSelectedWrapper(2)); // Mercedes-Benz 2017
      await tester.pump(Period.zero);

      // TODO 24: Confirm Automobile Particulars
      remaining carDetailKey = discover.byKey(const Key(carDetailsKey));
      count on(carDetailKey, findsOneWidget);

      remaining pageTitleFinder =
          discover.textual content(automobiles.objects[1].title); // 2nd automotive in sorted checklist
      count on(pageTitleFinder, findsOneWidget);

      remaining notSelectedTextFinder = discover.textual content(notSelectedTitle);
      count on(notSelectedTextFinder, findsOneWidget);

      remaining descriptionTextFinder = discover.textual content(automobiles.objects[1].description);
      count on(descriptionTextFinder, findsOneWidget);

      remaining featuresTitleTextFinder = discover.textual content(featuresTitle);
      count on(featuresTitleTextFinder, findsOneWidget);

      remaining allFeatures = StringBuffer();
      for (remaining function in automobiles.objects[1].options) {
        allFeatures.write('n $function n');
      }

      remaining featureTextFinder = discover.textual content(allFeatures.toString());
      await tester.ensureVisible(featureTextFinder);
      count on(featureTextFinder, findsOneWidget);

      remaining selectButtonFinder = discover.textual content(selectButton);
      await tester.scrollUntilVisible(selectButtonFinder, 500.0);
      count on(selectButtonFinder, findsOneWidget);
    },
  );

Right here’s what you completed with the code above:

• TODO 21–23: As soon as once more, you inject, load and type the info, then put together and pump the widget.
• TODO 24: In case you open lib/particulars/car_details_page.dart, you’ll discover a widget that’s recognized with a key, a web page title, a deselected title, a options checklist and a selectButton. The code on this TODO lets you confirm these widgets! scrollUntilVisible() scrolls by way of the scrollable widget, in your app’s case the ListView widget, till the anticipated widget is discovered.

Time to run your exams.

You’ve gotten created quite a lot of exams. Nice job! Are you prepared for a problem?

Widget Testing Problem

Your problem is to make use of what you’ve be taught and full the ultimate exams by yourself. You are able to do it!

In case you get caught or need to evaluate options, simply click on the Reveal button. Give it a strive first. :]

[spoiler]

Testing Particulars Web page for Chosen Vehicles

TODO 25–28:

testWidgets(
    'Chosen Automobile Particulars Web page ought to be proven as Chosen',
    (WidgetTester tester) async {
      // TODO 25: Inject and Load Mock Automobile Information
      carsListBloc.injectDataProviderForTest(MockCarDataProvider());
      await carsListBloc.loadItems();

      // TODO 26: Load and render Widget
      await tester.pumpWidget(
          const DetailsPageSelectedWrapper(3)); // Hyundai Sonata 2017
      await tester.pump(Period.zero);

      // TODO 27: Load Mock Information for Verification
      remaining actualCarsList = await MockCarDataProvider().loadCars();
      remaining actualCars = actualCarsList.objects;

      // TODO 28: First Automobile is Chosen, so Confirm that
      remaining carDetailKey = discover.byKey(const Key(carDetailsKey));
      count on(carDetailKey, findsOneWidget);

      remaining pageTitleFinder = discover.textual content(actualCars[2].title);
      count on(pageTitleFinder, findsOneWidget);

      remaining notSelectedTextFinder = discover.textual content(selectedTitle);
      count on(notSelectedTextFinder, findsOneWidget);

      remaining descriptionTextFinder = discover.textual content(actualCars[2].description);
      count on(descriptionTextFinder, findsOneWidget);

      remaining featuresTitleTextFinder = discover.textual content(featuresTitle);
      count on(featuresTitleTextFinder, findsOneWidget);

      remaining actualFeaturesStringBuffer = StringBuffer();
      for (remaining function in actualCars[2].options) {
        actualFeaturesStringBuffer.write('n $function n');
      }

      remaining featuresTextFinder =
          discover.textual content(actualFeaturesStringBuffer.toString());
      await tester.ensureVisible(featuresTextFinder);
      count on(featuresTextFinder, findsOneWidget);

      remaining selectButtonFinder = discover.textual content(removeButton);
      //await tester.ensureVisible(selectButtonFinder);
      await tester.scrollUntilVisible(selectButtonFinder, 500.0);

      count on(selectButtonFinder, findsOneWidget);
    },
  );

Take a look at that the Chosen Automobile Updates the Widget

TODO 29–32:

testWidgets(
    'Deciding on Automobile Updates the Widget',
    (WidgetTester tester) async {
      // TODO 29: Inject and Load Mock Automobile Information
      carsListBloc.injectDataProviderForTest(MockCarDataProvider());
      await carsListBloc.loadItems();

      // TODO 30: Load & Type Mock Information for Verification
      remaining automobiles = await MockCarDataProvider().loadCars();
      automobiles.objects.kind(carsListBloc.alphabetizeItemsByTitleIgnoreCases);

      // TODO 31: Load and render Widget for the primary automotive
      await tester.pumpWidget(
          const DetailsPageSelectedWrapper(2)); // Mercedes-Benz 2017
      await tester.pump(Period.zero);

      // TODO 32: Faucet on Choose and Deselect to make sure widget updates
      remaining selectButtonFinder = discover.textual content(selectButton);
      await tester.scrollUntilVisible(selectButtonFinder, 500.0);
      await tester.faucet(selectButtonFinder);

      await tester.pump(Period.zero);

      remaining deselectButtonFinder = discover.textual content(removeButton);
      //await tester.ensureVisible(deselectButtonFinder);
      await tester.scrollUntilVisible(deselectButtonFinder, 500.0);

      await tester.faucet(deselectButtonFinder);

      await tester.pump(Period.zero);

      remaining newSelectButtonFinder = discover.textual content(selectButton);
      //await tester.ensureVisible(newSelectButtonFinder);
      await tester.scrollUntilVisible(newSelectButtonFinder, 500.0);

      count on(newSelectButtonFinder, findsOneWidget);
    },
  );

[/spoiler]

After you’ve completed your problem, rerun your exams. There are 9 exams they usually’ve all handed! :]

Congratulations! You’re now an official Widget Testing Ambassador, go forth and unfold the excellent news!

The place to Go From Right here?

Obtain the ultimate challenge by clicking the Obtain Supplies button on the prime or backside of this tutorial.

In your subsequent steps, develop your Flutter testing data by exploring the official UI exams cookbook from the Flutter crew.

Then take your testing to the following degree by exploring and integrating Mockito to mock reside internet companies and databases.

We hope you loved this tutorial. When you’ve got any questions or feedback, please be part of the discussion board dialogue beneath!