Unit testing in Flutter - UI Render Trace

Component - Unit testing

This UI component shows a simple Flutter widget with a button and a text label. The button increments a counter when pressed. Unit testing checks the logic that updates the counter without running the full app UI.

Widget Tree

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

The Scaffold provides the basic page structure with an AppBar at the top showing a title. The body centers a Column containing a Text widget that displays the current count and an ElevatedButton below it to increment the count.

Render Trace - 6 Steps

Step 1: Scaffold

Step 2: AppBar

Step 3: Center

Step 4: Column

Step 5: Text

Step 6: ElevatedButton

State Change - Re-render

Trigger:User taps the 'Increment' button

Before

count = 0

→

After

count = 1

Re-renders:The entire StatefulWidget subtree including Text displaying count and ElevatedButton re-renders to show updated count.

UI Quiz - 3 Questions

What widget shows the current count number on the screen?

A Text widget inside the Column

B ElevatedButton widget

C AppBar widget

D Center widget

Key Insight

Unit testing in Flutter focuses on testing the logic that changes state, like incrementing a counter, without needing to run the full UI. This helps catch bugs early and keeps UI code simple and testable.

Practice

1.

What is the main purpose of unit testing in Flutter?

easy

A. To check small parts of code for bugs early

B. To design the user interface

C. To deploy the app to the store

D. To write documentation for the app

Solution

1. Step 1: Understand unit testing purpose and compare options

   Unit testing focuses on testing small parts of code independently to find bugs early. Only To check small parts of code for bugs early matches the purpose of unit testing; others relate to different app development stages.

2. Final Answer:

   To check small parts of code for bugs early -> Option A

3. Quick Check:

   Unit testing = check small code parts early [OK]

Hint: Unit tests check small code parts, not UI or deployment [OK]

Common Mistakes:

• Confusing unit testing with UI design
• Thinking unit tests deploy the app
• Believing unit tests write documentation

2.

Which of the following is the correct syntax to write a simple test in Flutter?

?

easy

A. expect('description', test(() => 1 + 1 == 2));

B. test('description', () { expect(1 + 1, 2); });

C. test 'description' { expect(1 + 1 == 2); }

D. test(description, expect(1 + 1, 2));

Solution

1. Step 1: Recall Flutter test syntax and match options

   The correct syntax uses test('description', () { expect(actual, expected); }); Only test('description', () { expect(1 + 1, 2); }); matches the correct syntax with proper function and expect call.

2. Final Answer:

   test('description', () { expect(1 + 1, 2); }); -> Option B

3. Quick Check:

   Correct test syntax = test('description', () { expect(1 + 1, 2); }); [OK]

Hint: Remember test() takes a description and a function with expect() inside [OK]

Common Mistakes:

• Missing parentheses or curly braces
• Swapping test and expect arguments
• Using wrong function call syntax

3.

What will be the output of this test code?

int add(int a, int b) => a + b;

test('add function test', () {
  expect(add(2, 3), 5);
  expect(add(0, 0), 0);
  expect(add(-1, 1), 0);
});

Choose the correct test result.

medium

A. All tests fail

B. First test fails, others pass

C. Second test fails, others pass

D. All tests pass successfully

Solution

1. Step 1: Evaluate add function calls and check expect statements

   add(2, 3) = 5, add(0, 0) = 0, add(-1, 1) = 0, all match expected values. All expect statements compare actual and expected values correctly, so all pass.

2. Final Answer:

   All tests pass successfully -> Option D

3. Quick Check:

   Correct add results = all tests pass [OK]

Hint: Check function output matches expected values exactly [OK]

Common Mistakes:

• Assuming negative numbers cause failure
• Misreading expected values
• Ignoring zero as valid input

4.

Identify the error in this Flutter unit test code:

test('string length test', () {
  var str = 'hello';
  expect(str.length, '5');
});

medium

A. The test description is missing

B. The variable str is not defined

C. The expected value should be an integer, not a string

D. The expect function is used incorrectly

Solution

1. Step 1: Check expect arguments types and type mismatch effect

   str.length returns an integer (5), but expected value is a string ('5'). Expect compares values strictly, so integer 5 != string '5', causing test failure.

2. Final Answer:

   The expected value should be an integer, not a string -> Option C

3. Quick Check:

   Type mismatch in expect causes failure [OK]

Hint: Match expected value type exactly with actual value type [OK]

Common Mistakes:

• Using string instead of int for length
• Forgetting to define test description
• Misusing expect function parameters

5.

You want to test a function that returns a list of even numbers from a given list. Which test code correctly verifies this behavior?

List<int> filterEven(List<int> nums) => nums.where((n) => n % 2 == 0).toList();

// Which test is correct?

hard

A. test('filterEven test', () { expect(filterEven([1,2,3,4]), [2,4]); });

B. test('filterEven test', () { expect(filterEven([1,2,3,4]), [1,3]); });

C. test('filterEven test', () { expect(filterEven([1,2,3,4]), [2,3]); });

D. test('filterEven test', () { expect(filterEven([1,2,3,4]), [1,2,3,4]); });

Solution

1. Step 1: Understand filterEven function and check expected lists

   It returns a list of even numbers from input list. Only test('filterEven test', () { expect(filterEven([1,2,3,4]), [2,4]); }); expects the correct even numbers [2,4]. Others expect incorrect lists.

2. Final Answer:

   test('filterEven test', () { expect(filterEven([1,2,3,4]), [2,4]); }); -> Option A

3. Quick Check:

   Expected even numbers list = test('filterEven test', () { expect(filterEven([1,2,3,4]), [2,4]); }); [OK]

Hint: Expect only even numbers in the output list [OK]

Common Mistakes:

• Expecting odd numbers instead of even
• Including all numbers without filtering
• Mixing even and odd numbers in expected list