Flutter App Testing

Mainly three main types of testing in Flutter.

1. Unit Test -> Test isolated class, methods.. etc. we use.
2. Widget Test -> Testing widget and who’s working.
3. Integration Test -> Automation test test like a user view action.
4. Create a simple flutter app for Reverse String.

UI part

import 'package:flutter/material.dart';

class HomeScreen extends StatefulWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  final controller = TextEditingController();
  String reverse ="";
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        padding: EdgeInsets.all(20),
        width: double.infinity,
        height: double.infinity,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [

            TextField(
              controller: controller,
              decoration: InputDecoration(
                border: OutlineInputBorder(),
                labelText: "String To Reverse..!"
              ),
            ),
            const SizedBox(height: 10,),
            Text(reverse,style: const TextStyle(fontSize: 22),),
            const SizedBox(height: 30,),
            ElevatedButton(
                onPressed: (){
                  setState(() {
                    reverse = reverseOdString(controller.text);
                  });
                },
                child: Text("Reversed"),)
          ],
        ),
      ),
    );
  }
}
String reverseOdString(String reverseStr){
  return reverseStr.split('').reversed.join();
}

A. Unit Test

Here reverseOdString is an isolated method that exists outside.

Create a Dart file inside the Test folder named reverse_string_unittest.dart.

import 'package:flutter_test/flutter_test.dart';
import 'package:flutter_unittest/homescreen.dart';

void main(){
  test("String should be reverse", (){
    String name = "hello";
    String reversed = reverseOdString(name);
    expect(reversed, 'olleh');
  });
}

B. Widget Test

widget_test.dart inside the Test folder.

import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';
import 'package:flutter_unittest/main.dart';

void main() {
  testWidgets("Test String Reverse Widget", (WidgetTester tester) async{
    await tester.pumpWidget(const MyApp());

    var textField = find.byType(TextField);
    expect(textField, findsOneWidget);
    await tester.enterText(textField, "Hello");
    expect(find.text("Hello"), findsOneWidget);
    var button = find.text("Reversed");
    expect(button, findsOneWidget);
    await tester.tap(button);
    await tester.pump();
    expect(find.text('olleH'), findsOneWidget);
  });
}

C. Integration Test

Add dependency in pubspec.yaml file.

dev_dependencies:
  flutter_driver:
    sdk: flutter
  test: any

Create a new folder inside the project named test_driver

Inside the folder create a dart file app.dart

import 'package:flutter_driver/driver_extension.dart';
import 'package:flutter_unittest/main.dart' as app;

void main(){
  enableFlutterDriverExtension();
  app.main();
}

another dart file named app_test.dart

import 'package:flutter_driver/flutter_driver.dart';
import 'package:test/test.dart';

void main(){
  group("Flutter Reverse String App Test", (){
    FlutterDriver? driver;

    setUpAll(()async{
      driver = await FlutterDriver.connect();
    });

    tearDownAll((){
      if(driver != null){
        driver?.close();
      }
    });

    var textField = find.byType("TextField");
    var button = find.text("Reversed");
    var reverse = find.text("dlrow olleH");
    test("Reverse the string", ()async{
      await driver?.tap(textField);
      await driver?.enterText("Hello world");
      await driver?.waitForAbsent(reverse);
      await driver?.tap(button);
      await driver?.waitFor(reverse);
      await driver?.waitUntilNoTransientCallbacks();
      assert(reverse != null);
    });

  });
}

Run -> app.dart file inside test_driver folder .