Flutter: how to mock Bloc

Question

I would like to mock my Bloc in order to test my view.

For example, this is my Bloc:

class SearchBloc extends Bloc<SearchEvent, SearchState> {
  @override
  // TODO: implement initialState
  SearchState get initialState => SearchStateUninitialized();

  @override
  Stream<SearchState> mapEventToState(SearchState currentState, SearchEvent event) async* {
    if (event is UserWrites) {
      yield (SearchStateInitialized.success(objects);
    }
  }
}

And this is the view:

class _SearchViewState extends State<SearchView> {
  final TextEditingController _filterController = new TextEditingController();

  @override
  void initState() {
    _filterController.addListener(() {
    widget._searchBloc.dispatch(FetchByName(_filterController.text));
     }
  }


 TextField buildAppBarTitle(BuildContext context) {
    return new TextField(
      key: Key("AppBarTextField"),
        controller: _filterController,
    );
  }

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: buildAppBarTitle(context),),
      body: buildBlocBuilder(),
    );
  }

BlocBuilder<SearchEvent, SearchState> buildBlocBuilder() {
    return BlocBuilder(
        bloc: widget._searchBloc,
        builder: (context, state) {
          if (state is SearchStateUninitialized) {
            return Container(
              key: Key("EmptyContainer"),
            );
          } 
            return buildInitializedView(state, context);
          }
        });

buildInitializedView(SearchStateInitialized state, BuildContext context) {
    if (state.objects.isEmpty) {
      return Center(child: Text("Nothing found"),);
    } else {
      return buildListOfCards();
    }
  }
    }

Now, this is my test:

testWidgets('Should find a card when the user searches for something', (WidgetTester tester) async {

  _searchView = new SearchView(_searchBloc);

    when(mockService.find( name: "a")).thenAnswer((_) =>
    [objects]);

    await tester.pumpWidget(generateApp(_searchView));
    await tester.enterText(find.byKey(Key("searchBar")), "a");
    await tester.pump();

    expect(find.byType(Card), findsOneWidget);
  });
}

As you can see, I just want to test that, when the user writes something in the search, and the object he's looking for exists, a card should be shown.

Laing

have you found a way how to achieve this? – Lechner

Answer 1

If I understood correctly, you are mocking some service that is used by the searchBloc. I personally try to design the app in a way that the app only depends on a bloc and the bloc may depend on some other services. Then when I would like to make a widget test, I only need to mock the bloc. You can use bloc_test package for that.

There is this example on the bloc_test page for stubbing a counterBloc:

// Create a mock instance
final counterBloc = MockCounterBloc();

// Stub the bloc `Stream`
whenListen(counterBloc, Stream.fromIterable([0, 1, 2, 3]));

however, I often do not need to stub the bloc stream and it is enough to emit the state, like this

when(counterBloc.state).thenAnswer((_) => CounterState(456));

Hope this helps.

Medius

Answer 2

Have a look at a post from David Anaya which deal with Unit Testing with “Bloc” and mockito.

The last version of his example is here

Silvery

david anaya is testing blocs, this question is how to test widgets by mocking blocs – Lechner

Answer 3

Sometimes widgets require a little time to build. Try with:

await tester.pumpWidget(generateApp(_searchView));
await tester.enterText(find.byKey(Key("searchBar")), "a");
await tester.pump(Duration(seconds: 1));

expect(find.byType(Card), findsOneWidget);

Laing

Answer 4

To mock the bloc, you can use the bloc_test package

Also, you may watch this tutorial which covers bloc testing include mock bloc very nice.

Albedo