Mock dependencies in Flutter - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the mockito package for mocking dependencies in Flutter tests.

Flutter

import '[1]';

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

Apackage:flutter_test/flutter_test.dart

Bpackage:flutter/material.dart

Cpackage:mockito/mockito.dart

Dpackage:test/test.dart

Attempts:

3 left

💡 Hint

Common Mistakes

Importing flutter_test instead of mockito.

Using the material package import by mistake.

The mockito package is imported with 'package:mockito/mockito.dart' to create mock classes for testing.

2fill in blank

medium

Complete the code to create a mock class for a dependency named ApiService.

Flutter

class MockApiService extends [1] implements ApiService {}

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

AFake

BMock

CWidget

DStatelessWidget

Attempts:

3 left

💡 Hint

Common Mistakes

Extending Fake instead of Mock.

Trying to extend Widget or StatelessWidget.

Mockito requires mock classes to extend the Mock class to provide mocking behavior.

3fill in blank

hard

Fix the error in the test setup by completing the code to register the mock ApiService with the dependency injector.

Flutter

setUp(() {
  [1](MockApiService());
});

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

AregisterSingleton

BregisterFactory

CregisterLazySingleton

DregisterProvider

Attempts:

3 left

💡 Hint

Common Mistakes

Using registerLazySingleton which expects a factory function.

Using registerFactory which creates new instances every time.

registerSingleton registers the provided mock instance directly as a singleton, suitable for test setups.

4fill in blank

hard

Fill both blanks to stub the getData method of the mock ApiService to return a Future with 'Hello'.

Flutter

when(mockApiService.[1]()).thenAnswer((_) async => [2]);

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

AgetData

BfetchData

CFuture.value('Hello')

DFuture.delayed(Duration(seconds: 1), () => 'Hello')

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong method name like fetchData.

Returning a plain string instead of a Future.

The method getData is stubbed to return a Future with the string 'Hello' using Future.value.

5fill in blank

hard

Fill both blanks to verify that the getData method was called exactly once on the mock ApiService.

Flutter

verify(mockApiService.[1]()).called([2]);

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

AgetData

BfetchData

C1

D2

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong method name in verify.

Using called(2) when only one call was made.

The verify function checks that getData was called exactly once using called(1).

Practice

1. What is the main purpose of using mocks in Flutter testing?

easy

A. To write less code in the app

B. To speed up the app in production

C. To create UI components faster

D. To replace real services and control their behavior during tests

Solution

1. Step 1: Understand what mocks do

   Mocks replace real services or dependencies in tests to simulate their behavior.

2. Step 2: Identify the purpose in testing

   This helps tests run faster and more reliably by controlling external factors.

3. Final Answer:

   To replace real services and control their behavior during tests -> Option D

4. Quick Check:

   Mocks replace services = A [OK]

Hint: Mocks simulate services in tests to control behavior [OK]

Common Mistakes:

• Thinking mocks speed up production app
• Confusing mocks with UI widgets
• Believing mocks reduce app code size

2. Which of the following is the correct way to create a mock class using the mocktail package in Flutter?

easy

A. class MockService extends Service implements Mock {}

B. class MockService extends Mock implements Service {}

C. class MockService with Mock implements Service {}

D. class MockService implements Mock, Service {}

Solution

1. Step 1: Recall mocktail syntax

   In mocktail, a mock class extends Mock and implements the interface to mock.

2. Step 2: Match syntax to options

   class MockService extends Mock implements Service {} correctly extends Mock and implements Service.

3. Final Answer:

   class MockService extends Mock implements Service {} -> Option B

4. Quick Check:

   Extend Mock, implement interface = A [OK]

Hint: Mock classes extend Mock and implement the target interface [OK]

Common Mistakes:

• Swapping extends and implements order
• Using with instead of extends
• Not implementing the interface

3. Given the following code snippet using mocktail, what will be the output of print(service.getData())?

class MockService extends Mock implements Service {}

final service = MockService();
when(() => service.getData()).thenReturn('Mocked Data');
print(service.getData());

medium

A. Returns 'Mocked Data'

B. Throws an error because getData is not defined

C. Returns null

D. Returns the real data from Service

Solution

1. Step 1: Understand when-thenReturn usage

   The when() function sets up the mock to return 'Mocked Data' when getData() is called.

2. Step 2: Check the print statement

   Calling service.getData() returns the mocked value 'Mocked Data'.

3. Final Answer:

   Returns 'Mocked Data' -> Option A

4. Quick Check:

   when().thenReturn() sets output = B [OK]

Hint: when().thenReturn() sets mock return value [OK]

Common Mistakes:

• Expecting real method call instead of mock
• Thinking it returns null by default
• Confusing syntax causing runtime error

4. Identify the error in this mocktail test setup:

class MockService extends Mock implements Service {}

final service = MockService();
when(service.getData()).thenReturn('Data');

medium

A. Missing parentheses in when() argument

B. MockService should not implement Service

C. Incorrect use of when() without a lambda function

D. thenReturn() cannot return a string

Solution

1. Step 1: Check when() syntax

   when() requires a lambda function like () => service.getData(), not a direct call.

2. Step 2: Identify the error

   Passing service.getData() calls the method immediately, causing error.

3. Final Answer:

   Incorrect use of when() without a lambda function -> Option C

4. Quick Check:

   when() needs lambda = C [OK]

Hint: Use () => method() inside when() [OK]

Common Mistakes:

• Calling method directly inside when()
• Forgetting to implement interface
• Misusing thenReturn() with wrong types

5. You want to test a Flutter widget that depends on a service fetching user data. How do mocks help in this scenario?

hard

A. Mocks allow you to simulate user data responses without real network calls

B. Mocks automatically generate UI for the widget

C. Mocks replace the widget with a simpler version

D. Mocks speed up the app by caching data

Solution

1. Step 1: Understand widget dependency on service

   The widget depends on a service that fetches user data, usually from network.

2. Step 2: Role of mocks in testing

   Mocks simulate the service to provide controlled user data without real network calls.

3. Step 3: Benefits in testing

   This makes tests faster, reliable, and independent of external systems.

4. Final Answer:

   Mocks allow you to simulate user data responses without real network calls -> Option A

5. Quick Check:

   Mocks simulate data, no real calls = D [OK]

Hint: Mocks simulate service data to avoid real network calls [OK]

Common Mistakes:

• Thinking mocks generate UI automatically
• Confusing mocks with widget replacements
• Believing mocks cache data for performance