Integration testing in Flutter - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the Flutter integration test package.

Flutter

import 'package:flutter_test/flutter_test.dart';
import 'package:integration_test/[1].dart';

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

Aintegration

Bintegration_test

Ctest_integration

Dintegration_test_flutter

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'flutter_test' instead of 'integration_test'.

Misspelling the package name.

The correct import for Flutter integration testing is 'integration_test'.

2fill in blank

medium

Complete the code to initialize the integration test binding.

Flutter

void main() {
  final binding = [1].ensureInitialized();
}

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

AIntegrationTestWidgetsFlutterBinding

BFlutterBinding

CTestWidgetsFlutterBinding

DWidgetsFlutterBinding

Attempts:

3 left

💡 Hint

Common Mistakes

Using WidgetsFlutterBinding which is for unit/widget tests.

Forgetting to call ensureInitialized().

IntegrationTestWidgetsFlutterBinding is used to initialize integration testing in Flutter.

3fill in blank

hard

Fix the error in the test function declaration for integration testing.

Flutter

testWidgets('tap on button changes text', (WidgetTester [1]) async {
  // test code
});

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

Atest

Bcontext

Cwidget

Dtester

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'context' which is not a parameter here.

Using 'widget' or 'test' which are invalid parameter names.

The parameter name for the testWidgets callback is conventionally 'tester'.

4fill in blank

hard

Fill both blanks to pump the app and wait for animations to settle.

Flutter

await [1].pumpWidget(MyApp());
await [2].pumpAndSettle();

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

Atester

BwidgetTester

CtestController

DappTester

Attempts:

3 left

💡 Hint

Common Mistakes

Using different variable names for the same tester object.

Forgetting to await asynchronous calls.

The 'tester' object is used to pump widgets and wait for animations in integration tests.

5fill in blank

hard

Fill all three blanks to find a button by key, tap it, and verify text change.

Flutter

final button = find.byKey(const Key('[1]'));
await tester.tap(button);
await tester.[2]();
expect(find.text('[3]'), findsOneWidget);

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

Aincrement

BpumpAndSettle

CClicked!

Dsubmit

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong key strings that don't match the widget.

Forgetting to wait after tapping before checking text.

Expecting wrong text that doesn't appear after tap.

The button key is 'increment', after tapping we wait with pumpAndSettle, then expect the text 'Clicked!'.

Practice

1. What is the main purpose of integration testing in Flutter apps?

easy

A. To test individual functions for correctness

B. To check the app's UI design colors

C. To measure app performance under load

D. To check if different parts of the app work together correctly

Solution

1. Step 1: Understand integration testing goal

   Integration testing focuses on how different parts of the app interact and work together.

2. Step 2: Compare with other test types

   Unit tests check individual functions, performance tests check speed, and UI design tests check visuals.

3. Final Answer:

   To check if different parts of the app work together correctly -> Option D

4. Quick Check:

   Integration testing = check parts working together [OK]

Hint: Integration tests check combined parts, not single functions [OK]

Common Mistakes:

• Confusing integration testing with unit testing
• Thinking it tests only UI colors
• Mixing it up with performance testing

2. Which line correctly initializes integration testing in a Flutter test file?

easy

A. IntegrationTestWidgetsFlutterBinding.ensureInitialized();

B. WidgetsFlutterBinding.ensureInitialized();

C. IntegrationTestBinding.initialize();

D. TestWidgetsBinding.ensureInitialized();

Solution

1. Step 1: Identify the correct binding for integration tests

   The official Flutter integration test package uses IntegrationTestWidgetsFlutterBinding.ensureInitialized() to set up.

2. Step 2: Check other options for correctness

   WidgetsFlutterBinding is for widget tests, not integration tests. Others are incorrect or do not exist.

3. Final Answer:

   IntegrationTestWidgetsFlutterBinding.ensureInitialized(); -> Option A

4. Quick Check:

   Use IntegrationTestWidgetsFlutterBinding for integration tests [OK]

Hint: Use IntegrationTestWidgetsFlutterBinding.ensureInitialized() for integration tests [OK]

Common Mistakes:

• Using WidgetsFlutterBinding instead of IntegrationTestWidgetsFlutterBinding
• Misspelling the method name
• Trying to call a non-existent initialize() method

3. Given this integration test snippet, what will the test check?

final button = find.text('Tap me');
await tester.tap(button);
await tester.pumpAndSettle();
expect(find.text('Tapped!'), findsOneWidget);

medium

A. The test checks if the button is disabled

B. The button labeled 'Tapped!' is tapped and text changes to 'Tap me'

C. The button labeled 'Tap me' is tapped and text changes to 'Tapped!'

D. The test waits but does not tap any button

Solution

1. Step 1: Analyze the tap action

   The test finds a button with text 'Tap me' and taps it.

2. Step 2: Check the expected result

   After tapping and waiting for animations, it expects to find text 'Tapped!' on screen.

3. Final Answer:

   The button labeled 'Tap me' is tapped and text changes to 'Tapped!' -> Option C

4. Quick Check:

   Tap 'Tap me' button, expect 'Tapped!' text [OK]

Hint: Look for tap target text and expected text after tap [OK]

Common Mistakes:

• Confusing which text is tapped and which is expected
• Ignoring await pumpAndSettle() for UI update
• Assuming no tap happens

4. What is wrong with this integration test code snippet?

void main() {
  testWidgets('tap test', (tester) async {
    final binding = IntegrationTestWidgetsFlutterBinding.ensureInitialized();
    final button = find.text('Click');
    await tester.tap(button);
    expect(find.text('Clicked'), findsOneWidget);
  });
}

medium

A. Binding initialization should be outside testWidgets, in main() before tests

B. The find.text selector is incorrect syntax

C. Missing await before tester.tap

D. expect should be called before tap

Solution

1. Step 1: Check binding initialization placement

   IntegrationTestWidgetsFlutterBinding.ensureInitialized() should be called once before all tests, not inside testWidgets.

2. Step 2: Verify other code parts

   find.text syntax is correct, await is used before tap, and expect is correctly after tap.

3. Final Answer:

   Binding initialization should be outside testWidgets, in main() before tests -> Option A

4. Quick Check:

   Initialize binding once before tests [OK]

Hint: Initialize binding once before tests, not inside each test [OK]

Common Mistakes:

• Calling ensureInitialized inside each testWidgets
• Forgetting await before tap
• Misordering expect before tap

5. You want to write an integration test that types 'hello' into a TextField and then taps a button labeled 'Send'. Which sequence correctly performs this in Flutter integration tests?

hard

A. await tester.tap(find.text('Send')); await tester.enterText(find.byType(TextField), 'hello'); await tester.pump();

B. await tester.enterText(find.byType(TextField), 'hello'); await tester.tap(find.text('Send')); await tester.pumpAndSettle();

C. await tester.enterText(find.text('Send'), 'hello'); await tester.tap(find.byType(TextField)); await tester.pumpAndSettle();

D. await tester.tap(find.byType(TextField)); await tester.enterText(find.text('Send'), 'hello'); await tester.pump();

Solution

1. Step 1: Enter text into the TextField

   Use tester.enterText with find.byType(TextField) to type 'hello'.

2. Step 2: Tap the 'Send' button and wait for UI update

   Tap the button found by text 'Send' and call pumpAndSettle() to wait for animations.

3. Final Answer:

   await tester.enterText(find.byType(TextField), 'hello'); await tester.tap(find.text('Send')); await tester.pumpAndSettle(); -> Option B

4. Quick Check:

   Type first, then tap button, then wait [OK]

Hint: Type text first, then tap button, then wait for UI [OK]

Common Mistakes:

• Tapping button before typing text
• Using wrong finder for TextField or button
• Not waiting with pumpAndSettle after tap