测试每一层
如何测试实现 MVVM 架构的应用程序。
测试 UI 层
#确定你的架构是否合理的一种方法是考虑应用程序的可测试性（或难度）。由于 ViewModel 和 View 具有明确定义的输入，因此它们的依赖项可以轻松地被模拟或伪造，并且可以轻松编写单元测试。
ViewModel 单元测试
#为了测试 ViewModel 的 UI 逻辑，你应该编写不依赖于 Flutter 库或测试框架的单元测试。
Repository 是 ViewModel 的唯一依赖项（除非你正在实现 用例），编写 Repository 的 mocks 或 fakes 是你唯一需要做的设置。在这个示例测试中，使用了名为 FakeBookingRepository 的假对象。
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 类得到了彻底的解释。
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 和所需的 Repository 设置 HomeScreen 组件测试
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));
});
// ...
});
}
此设置创建了两个所需的假 Repository，并将它们传递到 HomeViewModel 对象中。 此类不需要被伪造。
在定义了 ViewModel 及其依赖项之后，需要创建将要测试的 Widget 树。 在 HomeScreen 的测试中，定义了一个 loadWidget 方法。
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 应用中所有组件测试的通用方法。 它看起来像这样
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,
),
),
),
);
});
}
此函数的唯一作用是创建一个可以进行测试的 Widget 树。
loadWidget 方法传递了 Widget 树的唯一部分以进行测试。 在这种情况下，包括 HomeScreen 及其 ViewModel，以及位于 Widget 树中更高位置的一些额外的伪造 Repository。
最重要的是，如果你的架构合理，View 和 ViewModel 测试只需要模拟 Repository。
测试数据层
#与 UI 层类似，数据层的组件具有明确定义的输入和输出，使得双方都可以被伪造。 要为任何给定的 Repository 编写单元测试，请模拟它所依赖的服务。 以下示例展示了 BookingRepository 的单元测试。
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);
});
});
}
要了解更多关于编写 mocks 和 fakes 的信息，请查看 Compass App testing 目录 中的示例，或阅读 Flutter 的测试文档。
反馈
#由于本网站的这一部分正在不断发展，我们 欢迎你的反馈！