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

    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ể tạo
    Đăng nhận xét
    Đọc thêm

    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, toolbars, slide panels, forms,
    1 nhận xét
    Đọc thêm

    Một số bài tập Winform C#

    Một số bài tập: 1. Mô phỏng game đoán số. Luật chơi:         o Đúng số và đúng vị trí   +         o Đúng số mà sai vị trí      ?         o Sai số và sai vị trí          -         . . .         - Kết quả được tạo ngẫu nhiên từ các số có 4 chữ số.         - Các chữ số có giá trị từ 0-6.         - Người chơi có 6 lần đoán. Chương trình tham khảo: 2. In số điện tử Yêu cầu: người dùng nhập vào 1 số ( hoặc 1 chuỗi số) yêu cầu in ra số đó dưới dạng số điện tử. Chương trình tham khảo: 3. Mô phỏng game CARO  (update) 4. Mô phỏng game DÒ MÌN (update)
    Đăng nhận xét
    Đọc thêm