使用BLoC模式测试小部件

Question

我一直在学习长笛/飞镖和BLoC模式。我以这篇文章为出发点：https://www.didierboelens.com/2018/08/reactive-programming---streams---bloc/

我有bloc类和小部件在工作，但我不知道如何测试小部件。我使用了一个BlocProvider，正如文章中所描述的，但我不知道如何为这个小部件提供一个模拟的bloc类。

如果我有这样的代码：

@override
Widget build(BuildContext context) {
final ProfileBloc profileBloc = BlocProvider.of<ProfileBloc>(context);
return Scaffold(
body: Container(
child: StreamBuilder<AuthModel>(
stream: profileBloc.outAuthModel,
initialData: null,
builder: (BuildContext context, AsyncSnapshot<AuthModel> snapshot) {
if (snapshot.hasData) {
return buildProfilePage(context, snapshot.data.profile);
}
return buildStartPage();
},
),
));
}

我想模拟我的ProfileBlock，但它是在我的build((函数中创建的，需要上下文。如何测试此小部件？我想我需要一种方法来传递一个模拟的ProfileBloc，但我不知道怎么做。我想确保小部件的行为符合预期。

Answer 1

我在测试一个小部件时遇到了完全相同的问题，并能够解决它。下面是不起作用的"Before Code"和成功的"After Code"。。。

代码之前

请注意，当泵送小部件时，MaterialApp被设置为最顶部的小部件。

Future<Null> _buildRideCard(WidgetTester tester) async {
await tester.pumpWidget(MaterialApp( // top most widget 
localizationsDelegates: [
AppLocalizationsDelegate(),
GlobalMaterialLocalizations.delegate,
GlobalWidgetsLocalizations.delegate
],
//some other stuff, irrelevant for this example

));
}

代码之后

请注意MaterialApp小部件现在是如何用BlocProvider包装的，并且它的blocProviders属性得到了小部件测试所需的Bloc列表。这解决了我的问题，现在我的小部件测试中没有任何关于区块的上下文问题。希望它能有所帮助；(

Future<Null> _buildRideCard(WidgetTester tester) async {
await tester.pumpWidget(BlocProviderTree( // <- magic #1
blocProviders: [ <- magic #2
BlocProvider<RideDetailsBloc>(
bloc: RideDetailsBloc(_setupRidesRepo()))
],
child: MaterialApp(
localizationsDelegates: [
AppLocalizationsDelegate(),
GlobalMaterialLocalizations.delegate,
GlobalWidgetsLocalizations.delegate
],
//some other stuff, irrelevant for this example
),
));
}

Answer 2

在本例中，您使用BlocProvider来获得ProfileBloc，但您可以使用final ProfileBloc profileBloc = ProfileBloc;直接创建新的区块。使用外部区块并不重要，因为这是在小部件测试之后。