Testing in Flutter

The App navigates automatically to the Quotes page after the user logs in. So we will test if the App navigates to the Quotes page after the user taps the login button with the correct credentials.

I 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.

At the end of the login test just write this code

await tester.pumpAndSettle();
var quotesPageTitle = find.text('All Quotes');
expect(quotesPageTitle, findsOneWidget);

Because we have commented out the code that navigates to the Quotes page. The test will fail. Uncomment the code and rerun the test.

Navigator.push(
  context,
  MaterialPageRoute(
    builder: (_) => AllQuotesScreen(),
  ),
);

Now rerun the test and check if it passes. The test still fails, and now the Fail message is a bit unclear. Let’s debug the test and see why it’s failing.

Click on the debug button instead of the run button. The test will run in debug mode, and it gets easier to debug the test. The error message we see right now is Failed to load Quotes, And that is the cause of us not mocking the Quotes data. And quotes page is making an actual HTTP request to fetch the quotes. So we need to mock the Quotes data.

We will be using overrides to mock the Quotes data. The Overrides are used to override the dependencies in the widget tree. We will override the QuotesService dependency with a mock object of QuotesService class.

But first, let’s create a Mock class like we did in Unit tests. Add this code to the test file on the top. To create a Mock class of our QuotesService class.

class MockQuotesService extends Mock implements QuotesService {}

Inside the test function, create a mock object of the QuotesService class and pass this mock object to the overrides.

MockQuotesService mockQuotesService = MockQuotesService();
await tester.pumpWidget(
  ProviderScope(
    overrides: [
      quotesNotifierProvider
          .overrideWith((ref) => QuotesNotifier(mockQuotesService)),
    ],
    child: MaterialApp(
      home: LoginScreen(),
    ),
  ),
);

when(() => mockQuotesService.getQuotes())
  .thenAnswer((_) async => mockQuotesForTesting);
await tester.pumpAndSettle();

Run the test, and it must pass now. Also, we should be able to navigate to the Quotes page. Thats it. We are done with testing the Login Screen. In the next episode, we will test the Quotes Screen.