Testing in Flutter

Now let us start with testing the quotes. Head over test folder and create a new file named quotes_page_test.dart. To test the quotes page first, we will have to Mock the quotes so that we can populate the quotes list on the quotes page.

class MockQuotesService extends Mock implements QuotesService {}

Widget createWidgetUnderTest() {
  return ProviderScope(
      overrides: [
        quotesNotifierProvider
            .overrideWith((ref) => QuotesNotifier(mockQuotesService))
      ],
      child: MaterialApp(
        home: AllQuotesScreen(),
      ));
}

Here we create a Function named createWidgetUnderTest, which returns a widget. This function will be used to create the widget tree for the test. We will be calling this function inside the pumpWidget method.

testWidgets('All Quotes Widget Test', (WidgetTester tester) async {
  await tester.pumpWidget(createWidgetUnderTest());
});

We need to return mock quotes when getQuotes() function is called. Let’s create a function that will return mock Quotes instead. We will add a delay of two seconds to depict the real-world scenario. Add this function before the createWidgetUnderTest function.

void getQuotesAdter2secondsDelay() {
 when(() => mockQuotesService.getQuotes()).thenAnswer((_) async {
   return await Future.delayed(
       const Duration(seconds: 2), () => mockQuotesForTesting);
 });
}

We call the function before we have pumped the widget. This is how is it should look

void getQuotesAdter2secondsDelay() {
  when(() => mockQuotesService.getQuotes()).thenAnswer((_) async {
    return await Future.delayed(
        const Duration(seconds: 2), () => mockQuotesForTesting);
  });
}


  // Pumping All Quotes
Widget createWidgetUnderTest() {
  return ProviderScope(
      overrides: [
        quotesNotifierProvider
            .overrideWith((ref) => QuotesNotifier(mockQuotesService))
      ],
      child: MaterialApp(
        home: AllQuotesScreen(),
      ));
}

// Mock the Quotes
getQuotesAdter2secondsDelay();

// Pump All Quotes screen
await tester.pumpWidget(createWidgetUnderTest());

Now that our Quotes setup is done, lets start with testing.

First, we will check if we are on the correct screen. We will check for the Quotes page title to check if the App navigates to the Quotes page. If the Quotes page title is present in the widget tree, it will pass the test else it will fail the test.

So here is the next challenge for you. Write a Widget test to check if we are on the correct screen. Pause the video.

I hope you were able to write the test. If not, here is the code for the test.

 expect(find.text('All Quotes'), findsOneWidget);

A simple find by text All Quotes can be used to check if we are on the correct screen.

Now let’s test if the quotes are loading. We will check if the loading indicator is present in the widget tree. If the loading indicator is present in the widget tree, it will pass the test else it will fail the test.

So here is the next challenge for you. Write a Widget test to check if the loading indicator is present in the widget tree.

I hope you were able to write the test for the loading indicator, if you faced difficulties, I would suggest you rewatch the Login Widget test video where we used a pump with duration.

Here is how to test the loader indicator.

await tester.pump(const Duration(seconds: 1));
expect(find.byKey(quotesCircularProgressKey), findsOneWidget);
await tester.pumpAndSettle();
expect(find.byKey(quotesCircularProgressKey), findsNothing);

Here we also check if the loader indicator is removed from the widget tree after the quotes are loaded.

Now let’s test if the quotes are loaded. We will check if the quotes are present in the widget tree. If the quotes are present in the widget tree, it will pass the test else it will fail the test.

expect(find.text('Test Quote 1'), findsOneWidget);
expect(find.text('Test Quote 2'), findsOneWidget);
expect(find.text('Test Quote 3'), findsOneWidget);

Run the test, and it should pass.

We have finally tested the Quotes page as well. With this, we have also completed the Widget testing section. Next, we will be doing Integration testing.