Chuyển đến nội dung chính

Unit test for Flutter: Best practice UI test, widget test, logic test

 

1. Install Flutter Unit test: coverage

brew install lcov

Unit test gồm những gì?
  • Unit Test case: là 1 chuỗi code để đảm bảo rằng đoạn code được kiểm thử làm việc như mong đợi. Mỗi function sẽ có nhiều test case, ứng với mỗi trường hợp function chạy.
  • Setup: Đây là hàm được chạy trước khi chạy các test case, thường dùng để chuẩn bị dữ liệu để chạy test.
  • Teardown: Đây là hàm được chạy sau khi các test case chạy xong, thường dùng để xóa dữ liệu, giải phóng bộ nhớ.
  • Mock: là một đối tượng ảo, mô phỏng các tính chất và hành vi giống hệt như đối tượng thực được truyền vào bên trong khối mã đang vận hành nhằm kiểm tra tính đúng đắn của các hoạt động bên trong. Giả sử chương trình của chúng ta được chia làm 2 module: A và B. Module A đã code xong, B thì chưa. Để test module A, ta dùng mock để làm giả module B, không cần phải đợi tới khi module B code xong mới test được.
  • Test Suite : Test suite là một tập các test case và nó cũng có thể bao gồm nhiều test suite khác, test suite chính là tổ hợp các test.

    2.  Logic test:  Dart language

    Code cần viết unit test 

    → Ready add Unit test 
    import 'package:flutter_test/flutter_test.dart';
    import 'package:appflutter/common/utils/string_utils.dart';

    void main() {
      test('shoud append String correct format default', () {
        expect(StringUtils.append(['a', 'b', 'c']), 'abc');
        expect(StringUtils.append(['a', 'b']), 'ab');
        expect(StringUtils.append(['a']), 'a');
      });
      test('shoud append String correct format with character', () {
        expect(StringUtils.append(['a', 'b', 'c'], character: '+'), 'a+b+c');
        expect(StringUtils.append(['a', 'b'], character: '+'), 'a+b');
        expect(StringUtils.append(['a'], character: '+'), 'a');
      });
      test('shoud append String correct format with character', () {
        expect(StringUtils.append(['a', 'b', 'c'], character: ' '), 'a b c');
        expect(StringUtils.append(['a', 'b'], character: ' '), 'a b');
        expect(StringUtils.append(['a'], character: ' '), 'a');
      });
    }

    3. UI test 

    Dùng lệnh để chạy test thư mục 
    flutter test ./lib/presentation/widgets/appbar_widget

    Unit Test  trường hợp sẽ hiện đỏ  


    Unit Test coverage 100% 

    import 'package:flutter/material.dart';
    import 'package:flutter_test/flutter_test.dart';
    import 'package:appflutter/common/test/material_test_widget.dart';
    import 'package:appflutter/presentation/widgets/appbar_widget/appbar_widget.dart';

    void main() {
      testWidgets('should render success Appbar Widget basic',
          (WidgetTester tester) async {
        // Give
        final Widget child =
            wrapWidgetWithBuilderContext(renderWidget: (BuildContext context) {
          return AppbarWidget.normal(
            context,
            title: 'abc',
          );
        });
        // When
        await tester.pumpWidget(child);
        // Then
        expect(find.byType(Text), findsOneWidget);
        expect(find.byType(IconButton), findsOneWidget);
        final btnLeading = find.byKey(leadingButtonKey);
        expect(btnLeading, findsOneWidget);
        await tester.tap(btnLeading);
      });

      testWidgets('should render success Appbar Widget not show button leading',
          (WidgetTester tester) async {
        // Give
        final Widget child =
            wrapWidgetWithBuilderContext(renderWidget: (BuildContext context) {
          return AppbarWidget.normal(
            context,
            title: 'abc',
            isShowLeading: false,
          );
        });
        // When
        await tester.pumpWidget(child);
        // Then
        final btnLeading = find.byKey(leadingButtonKey);
        expect(btnLeading, findsNothing);
        expect(find.byType(SizedBox), findsOneWidget);
      });

      testWidgets('should render success Appbar Widget custom onLeading',
          (WidgetTester tester) async {
        // Give
        bool tap = false;
        final Widget child =
            wrapWidgetWithBuilderContext(renderWidget: (BuildContext context) {
          return AppbarWidget.normal(
            context,
            title: 'abc',
            onLeading: () {
              tap = true;
            },
          );
        });
        // When
        await tester.pumpWidget(child);
        expect(tap, false);
        // Then
        final btnLeading = find.byKey(leadingButtonKey);
        expect(btnLeading, findsOneWidget);
        await tester.tap(btnLeading);
        expect(tap, true);
      });
    }


    Widget Cần test 
    import 'package:flutter/material.dart';
    import 'package:appflutter/common/constants/layout_constants.dart';
    import 'package:appflutter/presentation/theme/theme_color.dart';

    const leadingButtonKey = ValueKey('appbarWidget_leadingButton');
    class AppbarWidget extends AppBar {
      AppbarWidget.normal(
        BuildContext context, {
        Key key,
        @required String title,
        Function onLeading,
        bool isShowLeading = true,
      }) : super(
              key: key,
              title: Text(
                title ?? '',
                style: const TextStyle(
                  fontSize: LayoutConstants.sizeTitleAppbar,
                ),
              ),
              centerTitle: true,
              elevation: 0,
              leading: isShowLeading
                  ? IconButton(
                      key: leadingButtonKey,
                      icon: Icon(
                        Icons.chevron_left,
                        size: LayoutConstants.sizeIconAppBar,
                        color: AppColor.iconLight,
                      ),
                      onPressed: () => onLeading == null
                          ? Navigator.of(context).pop()
                          : onLeading(),
                    )
                  : const SizedBox(),
            );
    }



    Code có sủ dụng hàm để wrap lấy context 
    Widget wrapWidgetWithBuilderContext({Function renderWidget}) {
      return MaterialApp(home: Builder(builder: (context) {
        return Scaffold(body: renderWidget(context));
      }));
    }


    Tham khảo
    Nhãn:

    Nhận xét

    Đăng nhận xét