Testing in Flutter

This video will teach us about Goldens and how to generate them. Goldens are the screenshots of the widgets. We can use these goldens to compare the UI changes. So if there are any UI changes, we can compare the goldens and see what has changed. We can generate goldens by writing code.

await expectLater(
  find.byType(LoginScreen),
  matchesGoldenFile('login_screen.png'),
);

Now generate the goldens by running the command

flutter test --update-goldens

This will run the test and generate the goldens. You can find the goldens in the test folder. You can see a snapshot of the LoginScreen widget in the goldens folder.

Now let us change the LoginScreen widget and see if the goldens are updated. Let us change the color of the text widget to red. Now rerun the test. You can see that the test fails. This is because the goldens are not updated. To update the goldens, we need to rerun the previous command.

Challenge: Here is your next challenge: get goldens for all the scenarios in the login screen. We add the generate goldens functions after every scenario.

await expectLater(
  find.byType(LoginScreen),
  matchesGoldenFile('invalid_credentials.png'),
);

await expectLater(
  find.byType(LoginScreen),
  matchesGoldenFile('valid_credentials.png'),
);

await await expectLater(
  find.byType(LoginScreen),
  matchesGoldenFile('show_indicator.png'),
);

await expectLater(
  find.byType(LoginScreen),
  matchesGoldenFile('login_screen.png'),
);

await expectLater(
  find.byType(LoginScreen),
  matchesGoldenFile('all_quotes_init.png'),
);

In the next episode, we do some refactoring so that we can test generate goldens for multiple screens and test various screen sizes.