测试 UI 层

#

判断一个架构是否健全的一种方式是考虑应用程序的测试难易程度。由于 ViewModel 和 View 具有明确定义的输入,它们的依赖项可以轻松被模拟(mocked)或伪造(faked),并且可以轻松编写单元测试。

ViewModel 单元测试

#

要测试 ViewModel 的 UI 逻辑,您应该编写不依赖于 Flutter 库或测试框架的单元测试。

存储库(Repositories)是 ViewModel 唯一的依赖项(除非您正在实现用例(use-cases)),您只需要对存储库编写模拟(mocks)伪造(fakes)。在此示例测试中,使用了名为FakeBookingRepository的伪造类。

home_screen_test.dart
dart
void main() {
  group('HomeViewModel tests', () {
    test('Load bookings', () {
      // HomeViewModel._load is called in the constructor of HomeViewModel.
      final viewModel = HomeViewModel(
        bookingRepository: FakeBookingRepository()
          ..createBooking(kBooking),
        userRepository: FakeUserRepository(),
      );

      expect(viewModel.bookings.isNotEmpty, true);
    });
  });
}

FakeBookingRepository 类实现了BookingRepository。在此案例研究的数据层部分,对BookingRepository类进行了详细解释。

fake_booking_repository.dart
dart
class FakeBookingRepository implements BookingRepository {
  List<Booking> bookings = List.empty(growable: true);

  @override
  Future<Result<void>> createBooking(Booking booking) async {
    bookings.add(booking);
    return Result.ok(null);
  }
  // ...
}

View 部件测试

#

一旦您为 ViewModel 编写了测试,您就已经创建了编写部件测试所需的伪造对象。以下示例展示了如何使用HomeViewModel和所需的存储库来设置HomeScreen的部件测试。

home_screen_test.dart
dart
void main() {
  group('HomeScreen tests', () {
    late HomeViewModel viewModel;
    late MockGoRouter goRouter;
    late FakeBookingRepository bookingRepository;

    setUp(() {
      bookingRepository = FakeBookingRepository()
        ..createBooking(kBooking);
      viewModel = HomeViewModel(
        bookingRepository: bookingRepository,
        userRepository: FakeUserRepository(),
      );
      goRouter = MockGoRouter();
      when(() => goRouter.push(any())).thenAnswer((_) => Future.value(null));
    });

    // ...
  });
}

此设置创建了两个所需的伪造存储库,并将它们传递给HomeViewModel对象。此类不需要被伪造。

在定义了 ViewModel 及其依赖项之后,需要创建将被测试的部件树。在HomeScreen的测试中,定义了一个loadWidget方法。

home_screen_test.dart
dart
void main() {
  group('HomeScreen tests', () {
    late HomeViewModel viewModel;
    late MockGoRouter goRouter;
    late FakeBookingRepository bookingRepository;

    setUp(
      // ...
    );

    void loadWidget(WidgetTester tester) async {
      await testApp(
        tester,
        ChangeNotifierProvider.value(
          value: FakeAuthRepository() as AuthRepository,
          child: Provider.value(
            value: FakeItineraryConfigRepository() as ItineraryConfigRepository,
            child: HomeScreen(viewModel: viewModel),
          ),
        ),
        goRouter: goRouter,
      );
    }

    // ...
  });
}

此方法接着调用testApp,这是一个用于 compass 应用所有部件测试的通用方法。它的样子如下:

testing/app.dart
dart
void testApp(
  WidgetTester tester,
  Widget body, {
  GoRouter? goRouter,
}) async {
  tester.view.devicePixelRatio = 1.0;
  await tester.binding.setSurfaceSize(const Size(1200, 800));
  await mockNetworkImages(() async {
    await tester.pumpWidget(
      MaterialApp(
        localizationsDelegates: [
          GlobalWidgetsLocalizations.delegate,
          GlobalMaterialLocalizations.delegate,
          AppLocalizationDelegate(),
        ],
        theme: AppTheme.lightTheme,
        home: InheritedGoRouter(
          goRouter: goRouter ?? MockGoRouter(),
          child: Scaffold(
            body: body,
          ),
        ),
      ),
    );
  });
}

此函数唯一的作用是创建一个可供测试的部件树。

loadWidget方法传入了部件树中独有的部分进行测试。在这种情况下,包括HomeScreen及其 ViewModel,以及位于部件树更上层的附加伪造存储库。

最重要的一点是,只要您的架构健全,视图和 ViewModel 测试仅需要模拟存储库。

测试数据层

#

与 UI 层类似,数据层的组件也具有明确定义的输入和输出,使得双方都可以被伪造。要为任何给定的存储库编写单元测试,请模拟它所依赖的服务。以下示例展示了BookingRepository的单元测试。

booking_repository_remote_test.dart
dart
void main() {
  group('BookingRepositoryRemote tests', () {
    late BookingRepository bookingRepository;
    late FakeApiClient fakeApiClient;

    setUp(() {
      fakeApiClient = FakeApiClient();
      bookingRepository = BookingRepositoryRemote(
        apiClient: fakeApiClient,
      );
    });

    test('should get booking', () async {
      final result = await bookingRepository.getBooking(0);
      final booking = result.asOk.value;
      expect(booking, kBooking);
    });
  });
}

要了解有关编写模拟和伪造的更多信息,请查看Compass App testing 目录中的示例,或阅读Flutter 的测试文档

反馈

#

本网站的此部分正在不断完善中,我们欢迎您的反馈