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

    Bài đăng phổ biến từ blog này

    Thiết kế giao diện với DotNetBar (Phần 1)

    Đây là phiên bản DotNetBar hỗ trợ C# và Visual Basic https://www.dropbox.com/s/wx80jpvgnlrmtux/DotNetBar.rar  , phiên bản này hỗ trợ giao diện Metro cực kỳ “dễ thương” Các bạn load về và cài đặt, khi cài đặt xong sẽ có source code mẫu của tất cả các control. Để sử dụng được các control của DotNetBar các bạn nhớ add item vào controls box. Thiết kế giao diện với DotNetBar, giao diện sẽ rất đẹp. Link các video hướng dẫn chi tiết cách sử dụng và coding: http://www.devcomponents.com/dotnetbar/movies.aspx Hiện tại DotNetBar có rất nhiều công cụ cực mạnh, trong đó có 3 công cụ dưới đây: DotNetBar for Windows Forms Requires with Visual Studio 2003, 2005, 2008, 2010 or 2012.   DotNetBar for WPF Requires with Visual Studio 2010 or 2012 and Windows Presentation Foundation.   DotNetBar for Silverlight Requires with Visual Studio 2010 or 2012 and Silverlight. Dưới đây là một số hình ảnh về các control trong DotnetBar.   Metro User Interface  controls with Metro Tiles, toolba...
    1 nhận xét
    Đọc thêm

    Jetpack Compose VS SwiftUI !VS Flutter

      Việc phát triển Android đã trở nên dễ dàng hơn khi các bản cập nhật liên tục đến. Sau bản cập nhật 2020.3.1, rất nhiều thứ đã thay đổi. Nhưng thay đổi chính mà tôi nghĩ hầu hết các nhà phát triển phải chờ đợi là Jetpack Compose cho ứng dụng sản xuất. Và Kotlin là lựa chọn duy nhất cho jetpack Compose, cũng là ngôn ngữ được ưu tiên. Để biết thêm chi tiết hoặc các thay đổi trên Jetpack Compose, bạn có thể truy cập vào https://developer.android.com/jetpack/compose Tương tự, IOS Development cũng cung cấp một tùy chọn để phát triển khai báo, SwiftUI. Trong IDE, không có thay đổi nào do điều này. Nhưng khái niệm gần giống với Jetpack Compose. Thay vì bảng phân cảnh, chúng tôi tạo giao diện người dùng bằng Swift. Để biết thêm chi tiết hoặc các thay đổi trên SwiftUI, hãy truy cập https://developer.apple.com/xcode/swiftui/ Hãy xem cách cả hai hoạt động bằng cách sử dụng một dự án demo. Tôi đã lấy một số ví dụ về số lần chạm tương tự của Flutter. 1. Android Jetpack Compose Chúng tôi có thể...
    Đăng nhận xét
    Đọc thêm

    Announcing Flutter 2

      Phụ lục: Flutter on the web Flutter 2 on desktops, foldables, and embedded devices The growing Flutter ecosystem Dart: The secret sauce behind Flutter Flutter 2: Available now Hôm nay, chúng tôi sẽ công bố Flutter 2: một bản nâng cấp lớn cho Flutter cho phép các nhà phát triển tạo các ứng dụng đẹp, nhanh chóng và di động cho bất kỳ nền tảng nào. Với Flutter 2, bạn có thể sử dụng cùng một cơ sở mã để gửi các ứng dụng gốc cho năm hệ điều hành: IOS, Android, Windows, macOS và Linux; cũng như trải nghiệm web nhắm mục tiêu các trình duyệt như Chrome, Firefox, Safari hoặc Edge. Flutter thậm chí có thể được nhúng vào ô tô, TV và thiết bị gia dụng thông minh, mang đến trải nghiệm di động và lan tỏa nhất cho thế giới điện toán xung quanh. Mục tiêu của chúng tôi là thay đổi cơ bản cách các nhà phát triển nghĩ về việc xây dựng ứng dụng, bắt đầu không phải với nền tảng bạn đang nhắm mục tiêu mà là với trải nghiệm bạn muốn tạo. Flutter cho phép bạn tạo ra những trải nghiệm tuyệt đẹp trong đó ...
    Đăng nhận xét
    Đọc thêm