Golden tests for UI in Flutter - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the Flutter golden test package.

Flutter

import 'package:flutter_test/flutter_test.dart';
import 'package:flutter/material.dart';

void main() {
  testWidgets('MyWidget golden test', (WidgetTester tester) async {
    await tester.pumpWidget(const MyWidget());
    await expectLater(find.byType(MyWidget), matchesGoldenFile('[1]'));
  });
}

Drag options to blanks, or click blank then click option'

A'goldens/my_widget.png'

B'assets/image.png'

C'lib/main.dart'

D'test/widget_test.dart'

Attempts:

3 left

💡 Hint

Common Mistakes

Using a Dart or asset file path instead of a golden image path.

Forgetting to wrap the widget with a MaterialApp if needed.

The golden file path should point to the saved golden image, usually inside a 'goldens' folder with a .png extension.

2fill in blank

medium

Complete the code to pump the widget and settle animations before the golden test.

Flutter

await tester.[1](const MyWidget());
await tester.pumpAndSettle();

Drag options to blanks, or click blank then click option'

ApumpWidget

BbuildWidget

CrenderWidget

DloadWidget

Attempts:

3 left

💡 Hint

Common Mistakes

Using non-existent methods like buildWidget or renderWidget.

Not calling pumpAndSettle after pumpWidget to wait for animations.

The method to load a widget into the test environment is pumpWidget.

3fill in blank

hard

Fix the error in the golden test assertion method.

Flutter

await expectLater(find.byType(MyWidget), [1]('goldens/my_widget.png'));

Drag options to blanks, or click blank then click option'

AmatchesImageFile

BmatchesGoldenImage

CmatchesGoldenFile

DmatchesSnapshot

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect matcher names that cause runtime errors.

Misspelling the method name.

The correct matcher method for golden tests is matchesGoldenFile.

4fill in blank

hard

Fill both blanks to create a golden test that updates the golden file.

Flutter

await expectLater(find.byType(MyWidget), [1]('goldens/my_widget.png',
  [2]: true
));

Drag options to blanks, or click blank then click option'

AmatchesGoldenFile

Bskip

Cskip: false

Dskip: true

Attempts:

3 left

💡 Hint

Common Mistakes

Confusing skip: true with skip: false.

Using incorrect matcher names.

To update a golden file, use matchesGoldenFile with skip: true to skip comparison and update the file.

5fill in blank

hard

Fill all three blanks to write a golden test that pumps a widget with a key and compares it.

Flutter

final widget = MyWidget(key: const Key('[1]'));
await tester.[2](widget);
await expectLater(find.byKey(const Key('[3]')), matchesGoldenFile('goldens/my_widget.png'));

Drag options to blanks, or click blank then click option'

AmyWidgetKey

BpumpWidget

DpumpAndSettle

Attempts:

3 left

💡 Hint

Common Mistakes

Using different keys in widget and find.byKey.

Using pumpAndSettle instead of pumpWidget without animations.

The key must be consistent in both places, and pumpWidget loads the widget for testing.