Widget Testing With Flutter: Getting Began

On this tutorial about Widget Testing with Flutter, you’ll discover ways to guarantee UI widgets look and behave as anticipated by writing take a look at code.

Replace notice: 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 complicated, and performing guide exams turns into tougher. Having an automatic testing atmosphere helps optimize this course of.

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

For this tutorial, you’ll write widget exams for a automobile app known as Drive Me, which lets customers view a listing of vehicles, view particulars about them and choose and look at particular vehicles. Within the course of, you’ll discover ways to take a look at that the app correctly performs the next capabilities:

• Masses mock knowledge to the widget exams.
• Injects inaccurate mock knowledge for adverse exams.
• Ensures that the app presents a listing of sorted vehicles and shows its particulars.
• Checks that the automobile choice seems appropriately within the listing web page.
• Ensures that the automobile particulars web page shows appropriately.

Getting Began

To begin, obtain the starter venture by clicking the Obtain Supplies button on the high or backside of the tutorial, then discover the starter venture in Visible Studio Code. You can even 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 venture.

Notice: Within the starter venture, you’ll seemingly see warnings about Unused import or variables not getting used. Ignore these as they are going to be used by the point you might have accomplished this tutorial.

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

Exploring the Starter Challenge

The starter venture contains the implementation of the app so you possibly can deal with widget testing. Check out the contents in lib to grasp how the app works.

Beginning on the backside, as you recognize fundamental.dart is the file the place all Flutter apps begin. dependency_injector.dart is the place the app registers the primary knowledge layer lessons and injects them by way of get_it.

constants.dart comprises a lot of the variables you’ll use all through the app.

The venture has 4 fundamental folders:

• database
• particulars
• listing
• fashions

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

Subsequent, take a look at lib/listing/cars_list_bloc.dart. That is the CarsList() knowledge layer. CarsListBloc hundreds knowledge from the JSON present in property/sample_data/knowledge.json and passes it to the widget listing. Thereafter, it kinds the vehicles alphabetically by way of alphabetizeItemsByTitleIgnoreCases().

Within the lib/particulars folder is car_details_bloc.dart, which will get knowledge 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 gadgets, CarsListBloc() makes the updates.

When the consumer selects any automobile, a separate knowledge stream manages it.

lib/database comprises cars_database.dart, which implements an summary class known as CarsDataProvider. This class comprises loadCars() that parses the JSON file containing a listing of automobile knowledge. The parsed knowledge returned is a CarsList().

As you guessed it from some filenames, this venture makes use of BLoC to move knowledge 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 start out 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 examine for high quality, efficiency or reliability by writing additional code that ensures your app logic works as anticipated. It exams for logic written in capabilities and strategies. The unit exams then develop and accumulate to cowl a complete class and subsequently an enormous a part of the venture, if not all.

The aim of a widget take a look at is to confirm that each widget’s UI seems to be and behaves as anticipated. Essentially, you carry out exams by re-rendering the widgets in code with mock knowledge.

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

Assessments lock down your app’s options, which assist you to correctly plan your app’s design earlier than growing it.

Testing Pyramid

There are three sorts of exams you possibly can carry out with Flutter:

• Unit exams: Used to check a way or class.
• Widget exams: These take a look at a single widget.
• Integration exams: Use these to check the crucial flows of the complete app.

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

Primarily, unit exams ought to cowl a lot 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 assist you construct a powerful base to your app.

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

Widget Testing the Automobile Checklist

Open take a look at/listing/cars_list_bloc_test.dart. Look under // TODO 3: Unit Testing Knowledge Loading Logic and also you’ll see the unit exams carried out on this venture. These unit exams be sure that the info construction you present to the widget is correct.

Earlier than going into writing the take a look at scripts, it’s good to take a look at the precise display screen you’re testing. In take a look at/database/mock_car_data_provider.dart, the consumer has chosen the primary automobile — the Hyundai Sonata 2017, proven the picture under:

Are you prepared to start out including widget exams?

Your First Check

Open take a look at/listing/cars_list_page_test.dart and add the next beneath // TODO 4: Inject and Load Mock Automobile Knowledge:

carsListBloc.injectDataProviderForTest(MockCarDataProvider());

That is injecting the mock automobile take a look at knowledge into carsListBloc.

Beneath // TODO 5: Load & Kind Mock Knowledge for Verification add:

closing vehicles = await MockCarDataProvider().loadCars();
vehicles.gadgets.kind(carsListBloc.alphabetizeItemsByTitleIgnoreCases);

Right here you’re ready for the mock automobile knowledge to load after which kind the listing.

Injecting take a look at knowledge

Now it’s time to inject the take a look at knowledge.

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

await tester.pumpWidget(const ListPageWrapper());
await tester.pump(Length.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 Length.zero is used.

This prepares the widget for testing!

Guaranteeing visibility

Beneath // TODO 7: Verify Vehicles Checklist's part's existence by way of key to make sure that the Carslist is within the view add these strains of code:

closing carListKey = discover.byKey(const Key(carsListKey));
anticipate(carListKey, findsOneWidget);

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

The mock knowledge in mock_car_data_provider.dart has a complete of six vehicles, however you don’t need to write a take a look at for each. A very good apply is to make use of a for loop to iterate by way of and confirm every automobile on the listing.

Return to take a look at/listing/cars_list_page_test.dart and under // TODO 8: Create a operate to confirm listing's existence add this:

void _verifyAllCarDetails(
  Checklist<Automobile> carsList,
  WidgetTester tester,
) async {
  for (closing automobile in carsList) {
    closing carTitleFinder = discover.textual content(automobile.title);
    closing carPricePerDayFinder = discover.textual content(
      pricePerDayText.replaceFirst(
        wildString,
        automobile.pricePerDay.toStringAsFixed(2),
      ),
    );
    await tester.ensureVisible(carTitleFinder);
    anticipate(carTitleFinder, findsOneWidget);
    await tester.ensureVisible(carPricePerDayFinder);
    anticipate(carPricePerDayFinder, findsOneWidget);
  }
}

This take a look at verifies that the title and the value per day show appropriately. That is attainable due to a operate known as ensureVisible().

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

To confirm the automobile particulars, discover // TODO 9: Name Confirm Automobile Particulars operate and add this under it to name to the operate you simply created:

_verifyAllCarDetails(vehicles.gadgets, tester);

Within the subsequent part you’ll discover ways to add exams to confirm the chosen automobile has a blue background.

Widget Testing the Automobile Checklist Web page with Choice

Bear in mind when you choose a automobile it has a blue background? It’s essential create a take a look at 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 Automobile ID 1.

Discover // TODO 11: Confirm that Automobile is highlighted in blue add the next under 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;

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

Right here you might have created two predicates:

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

Run this take a look at now. Hurray, your new take a look at passes! :]

You’re doing very properly. It’s time to attempt some adverse exams earlier than ending with the testing of the automobile particulars web page.

Adverse Assessments for Automobile Checklist Web page

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

carsListBloc.injectDataProviderForTest(MockCarDataProviderError());

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

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

  await tester.pumpWidget(const ListPageWrapper());
  await tester.pump(Length.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.

closing errorFinder = discover.textual content(
  errorMessage.replaceFirst(
    errorMessage,
    mockErrorMessage,
  ),
);
anticipate(errorFinder, findsOneWidget);

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

Prepared to your fifth take a look at? Run it.

Nice job! Your fifth take a look at handed!

Verifying view replace

There’s one final take a look at that you must carry out for this widget, which is to confirm the widget updates its view if knowledge is available in after getting an error.

It’s essential take a look at in case your app doesn’t have any vehicles to show.

Since this subsequent step contains code you’ve already used, you’re going to do a big replace directly. Discover and change // TODO Change 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 Knowledge
      carsListBloc.injectDataProviderForTest(MockCarDataProviderError());

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

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

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

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

      // TODO 20: Load and Confirm Automobile Knowledge
      closing vehicles = await MockCarDataProvider().loadCars();
      _verifyAllCarDetails(vehicles.gadgets, 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 automobile mock knowledge.
• TODO 19: Reloads the widget.
• TODO 20: Waits for mock dat to load after which verifies the automobile particulars.

Time to run the take a look at. Run it now, and …

Superior work! Your sixth take a look at passes!

You’ve examined for when a automobile 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 specific automobile and one other that has not been chosen.

Discover how the title and button textual content are totally different relying on the consumer’s selection. It’s essential take a look at for that.
Open take a look at/particulars/car_details_page_test.dart add change // TODO Change 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 Knowledge
      carsListBloc.injectDataProviderForTest(MockCarDataProvider());
      await carsListBloc.loadItems();

      // TODO 22: Load & Kind Mock Knowledge for Verification
      closing vehicles = await MockCarDataProvider().loadCars();
      vehicles.gadgets.kind(carsListBloc.alphabetizeItemsByTitleIgnoreCases);

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

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

      closing pageTitleFinder =
          discover.textual content(vehicles.gadgets[1].title); // 2nd automobile in sorted listing
      anticipate(pageTitleFinder, findsOneWidget);

      closing notSelectedTextFinder = discover.textual content(notSelectedTitle);
      anticipate(notSelectedTextFinder, findsOneWidget);

      closing descriptionTextFinder = discover.textual content(vehicles.gadgets[1].description);
      anticipate(descriptionTextFinder, findsOneWidget);

      closing featuresTitleTextFinder = discover.textual content(featuresTitle);
      anticipate(featuresTitleTextFinder, findsOneWidget);

      closing allFeatures = StringBuffer();
      for (closing function in vehicles.gadgets[1].options) {
        allFeatures.write('n $function n');
      }

      closing featureTextFinder = discover.textual content(allFeatures.toString());
      await tester.ensureVisible(featureTextFinder);
      anticipate(featureTextFinder, findsOneWidget);

      closing selectButtonFinder = discover.textual content(selectButton);
      await tester.scrollUntilVisible(selectButtonFinder, 500.0);
      anticipate(selectButtonFinder, findsOneWidget);
    },
  );

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

• TODO 21–23: As soon as once more, you inject, load and kind 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 listing 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 created a wide range of exams. Nice job! Are you prepared for a problem?

Widget Testing Problem

Your problem is to make use of what you’ve study 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 attempt 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 Knowledge
      carsListBloc.injectDataProviderForTest(MockCarDataProvider());
      await carsListBloc.loadItems();

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

      // TODO 27: Load Mock Knowledge for Verification
      closing actualCarsList = await MockCarDataProvider().loadCars();
      closing actualCars = actualCarsList.gadgets;

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

      closing pageTitleFinder = discover.textual content(actualCars[2].title);
      anticipate(pageTitleFinder, findsOneWidget);

      closing notSelectedTextFinder = discover.textual content(selectedTitle);
      anticipate(notSelectedTextFinder, findsOneWidget);

      closing descriptionTextFinder = discover.textual content(actualCars[2].description);
      anticipate(descriptionTextFinder, findsOneWidget);

      closing featuresTitleTextFinder = discover.textual content(featuresTitle);
      anticipate(featuresTitleTextFinder, findsOneWidget);

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

      closing featuresTextFinder =
          discover.textual content(actualFeaturesStringBuffer.toString());
      await tester.ensureVisible(featuresTextFinder);
      anticipate(featuresTextFinder, findsOneWidget);

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

      anticipate(selectButtonFinder, findsOneWidget);
    },
  );

Check that the Chosen Automobile Updates the Widget

TODO 29–32:

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

      // TODO 30: Load & Kind Mock Knowledge for Verification
      closing vehicles = await MockCarDataProvider().loadCars();
      vehicles.gadgets.kind(carsListBloc.alphabetizeItemsByTitleIgnoreCases);

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

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

      await tester.pump(Length.zero);

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

      await tester.faucet(deselectButtonFinder);

      await tester.pump(Length.zero);

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

      anticipate(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 venture by clicking the Obtain Supplies button on the high or backside of this tutorial.

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

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

We hope you loved this tutorial. When you have any questions or feedback, please be a part of the discussion board dialogue under!