Learn the testing in a flutter with a small demo application

Testing is the most important part after the development of the application. We cannot launch the application without testing it. Testing is done to ensure that whatever features we have created in the application are working fine or not. If not then the developer can rework on it, to launch the final product.

Testing is of two types, manual and automation. In manual testing, the tester is testing the whole application manually. The manual test becomes harder if the application has lots of features to test it. In automation testing, the code will test the feature of the application. We just need to write the logic for testing the application.

In flutter, automated testing comes into three types

Unit testing

Widget testing

Integration testing

Unit testing

Unit testing comes into the picture when we want to test the part of a specific function, method, or class. The main motive of unit testing is to check the function or method is working properly or not under the various condition provided it.

Let's understand unit testing with an example

When we create a flutter project with a flutter create command, it generates predefined directories and files. Here check the project will have a test folder.

No need to add any external packages for unit testing.

In the test folder, lets create file counter.dart and counter_test.dart

counter.dart

class Counter {
  int value = 0;

  /// method to increment the value
  void increment() => value++;

  /// method to decrement the value
  void decrement() => value--;
}

To do unit testing, we have a test method that requires two parameters, such as description and body. In the description, we just need to provide a short description of testing and in the body, it is where the actual logic is written for testing.

import 'package:flutter_test/flutter_test.dart';

import 'counter.dart';

void main() {
  /// test function to check increment
  test('Counter value should be incremented', () {
    /// creating instance of Counter
    final counter = Counter();

    /// calling increment method which is define class Counter
    counter.increment();

    /// expect method provide us what we are expecting
    /// lets say we were expecting the value will increase from 0 to 1.
    expect(counter.value, 1);
  });
}

Now click on the run button, to run testing. After a couple of seconds, the result will be displayed as follow.

So when we create a test method, it provides us the ability to test as a single method. What about when we want to perform more than one test method simultaneously? Here we can use the group() method which requires two parameters description and body.

import 'package:flutter_test/flutter_test.dart';
import 'counter.dart';

void main() {
  group("Testing the increment and decrement", () {
    test('Counter value should be incremented', () {
      final counter = Counter();
      counter.increment();
      expect(counter.value, 1);
    });

    test('Counter value should be decremented', () {
      final counter = Counter();
      counter.decrement();
      expect(counter.value, -1);
    });
  });
}

Widget testing

Widget testing is used to test a single widget. It is used to check whether the widget we created is looking exactly in UI. Widget testing is used to verify the widget we created is performing the event as we created them to behave.

Let's understand widget testing by an example

To test a widget, firstly we need to create a widget. Let's create a page where we display the title in the app bar and the body of the scaffold.

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              widget.title,
            ),
          ],
        ),
      ),
    );
  }
}

Create a separate dart file and name it widget_test.dart. In this, we will write logic to test a widget.

We use testWidgets() function provided by the flutter test package to test the widget which requires two parameters, one is descriptions and another is callback where testing logic is written.

Here we need to create a widget before testing it. So we use the pumpWidget() function which takes parameters as a widget. Here we will check if the title contains any text T in it. So we need to find the text. Flutter test provides us find() function to find the widget.

import 'dart:math';

import 'package:flutter_test/flutter_test.dart';
import 'package:testing_flutter/main.dart';

void main() {
  testWidgets("Testing the title in My home page", (tester) async {
    /// to create the widget
    await tester.pumpWidget(const MyWidget(title: 'T', message: 'M'));

    // Create the Finders.
    final titleFinder = find.text('T');

    /// expect method requires two parameters actual and matcher
    /// findOneWidget is matcher which ensures the Text Widget appear only once
    expect(titleFinder, findsOneWidget);
  });
}

test results

To understand widget testing properly and to explore more methods follow the documentation.

An introduction to widget testing

Integration testing

When we do unit testing and widget testing, they are testing only functions, methods, and widgets. They are not testing the entire thing at once to check whether they are working properly or not. It is then the integration test comes into the picture.

For integration testing, we need to add an external package integration_test.

We have a very good explanation for the integration testing provided by the documentation itself. Follow the example properly and try to implement it practically.

An introduction to integration testing

So in this article, we conclude the unit testing and widget testing in detail with examples and also a small description of the integration testing.

Let me know in the comments if I need to correct anything. I will try to improve it.

Clap if you like the article. 👏