Test coverage in Flutter - UI Render Trace

Component - Test coverage

This UI component shows a simple Flutter app screen with a button and a text label. It is used to demonstrate how test coverage works by verifying the button press updates the text. The UI updates when the button is tapped, reflecting the state change.

Widget Tree

Scaffold
├── AppBar
│   └── Text
└── Center
    └── Column
        ├── Text
        └── ElevatedButton
            └── Text

The Scaffold provides the basic app structure with an AppBar at the top showing a title text. The body centers a Column containing a Text widget that shows a message and an ElevatedButton below it with a label. This layout stacks the text and button vertically in the center of the screen.

Render Trace - 4 Steps

Step 1: Scaffold

Step 2: Column

Step 3: Text

Step 4: ElevatedButton

State Change - Re-render

Trigger:User taps the 'Press me' button

Before

Button press count is 0, text shows 'You have pressed the button 0 times.'

→

After

Button press count increments to 1, text updates to 'You have pressed the button 1 time.'

Re-renders:The StatefulWidget subtree containing the Text and ElevatedButton re-renders to show updated count

UI Quiz - 3 Questions

What happens to the text when the button is pressed once?

A The text updates to show the count increased by one

B The text disappears from the screen

C The button label changes to 'Pressed'

D Nothing changes visually

Key Insight

In Flutter, test coverage often involves verifying that UI updates correctly when state changes. This example shows how pressing a button triggers a state change that updates the displayed text. Testing this interaction ensures the UI behaves as expected, improving app reliability.

Practice

1.

What does test coverage measure in a Flutter app?

easy

A. How much of the app's code is executed by tests

B. The number of tests written

C. The speed of test execution

D. The size of the app's binary

Solution

1. Step 1: Understand test coverage meaning

   Test coverage shows what percentage of your code runs when tests are executed.

2. Step 2: Compare options to definition

   Only How much of the app's code is executed by tests matches this meaning by describing code executed by tests.

3. Final Answer:

   How much of the app's code is executed by tests -> Option A

4. Quick Check:

   Test coverage = code executed by tests [OK]

Hint: Coverage means code tested, not test count or speed [OK]

Common Mistakes:

• Confusing coverage with number of tests
• Thinking coverage measures test speed
• Assuming coverage relates to app size

2.

Which command runs Flutter tests and collects coverage data?

?

easy

A. flutter test --coverage

B. flutter run --coverage

C. flutter build --coverage

D. flutter analyze --coverage

Solution

1. Step 1: Recall Flutter test commands

   The command to run tests and collect coverage is flutter test --coverage.

2. Step 2: Eliminate incorrect commands

   flutter run runs the app, flutter build builds it, and flutter analyze checks code style, none collect coverage.

3. Final Answer:

   flutter test --coverage -> Option A

4. Quick Check:

   Run tests with coverage = flutter test --coverage [OK]

Hint: Use flutter test --coverage to get coverage data [OK]

Common Mistakes:

• Using flutter run instead of flutter test
• Confusing build or analyze commands with testing
• Omitting the --coverage flag

3.

Given this test code snippet, what is the coverage result for increment() method?

class Counter {
  int value = 0;
  void increment() {
    value++;
  }
}

void main() {
  final counter = Counter();
  test('value starts at 0', () {
    expect(counter.value, 0);
  });
}

medium

A. 100% coverage including increment()

B. Partial coverage of increment() method

C. 0% coverage for increment() method

D. Syntax error prevents coverage

Solution

1. Step 1: Analyze test coverage of increment()

   The test only checks initial value; it never calls increment().

2. Step 2: Determine coverage for increment()

   Since increment() is never executed, coverage for it is 0%.

3. Final Answer:

   0% coverage for increment() method -> Option C

4. Quick Check:

   Method not called = 0% coverage [OK]

Hint: Only called code counts as covered [OK]

Common Mistakes:

• Assuming all methods are covered by default
• Confusing test presence with code execution
• Ignoring that increment() is never called

4.

Identify the error in this test setup that causes coverage to be incomplete:

void main() {
  final counter = Counter();
  test('increment test', () {
    counter.increment;
    expect(counter.value, 1);
  });
}

medium

A. Test name is missing

B. Missing parentheses to call increment() method

C. expect() syntax is incorrect

D. Counter class is not imported

Solution

1. Step 1: Check method call syntax

   The code uses counter.increment; which references the method but does not call it.

2. Step 2: Understand impact on coverage

   Because increment() is not called, coverage misses this method.

3. Final Answer:

   Missing parentheses to call increment() method -> Option B

4. Quick Check:

   Method call needs () to execute [OK]

Hint: Method calls need () to run and count for coverage [OK]

Common Mistakes:

• Forgetting () after method name
• Assuming method reference calls it
• Ignoring test name importance (not required)

5.

You want to improve test coverage for this class. Which test addition best increases coverage?

class Calculator {
  int add(int a, int b) => a + b;
  int subtract(int a, int b) => a - b;
  int multiply(int a, int b) => a * b;
}

Current tests only call add().

hard

A. Add tests checking only Calculator class existence

B. Add tests calling add() multiple times

C. Add tests that print results without assertions

D. Add tests calling subtract() and multiply() methods

Solution

1. Step 1: Identify untested methods

   Only add() is tested; subtract() and multiply() are not covered.

2. Step 2: Add tests for untested methods

   Writing tests that call subtract() and multiply() will increase coverage.

3. Final Answer:

   Add tests calling subtract() and multiply() methods -> Option D

4. Quick Check:

   Test all methods to increase coverage [OK]

Hint: Test all methods, not just one, to boost coverage [OK]

Common Mistakes:

• Testing only one method repeatedly
• Testing class existence without method calls
• Printing results without assertions doesn't count