Bloc Testing: Write Your First Simple Unit Test in Flutter

Published in

Flutter Community

5 min readJan 24, 2021

During the development, we need to be sure that everything works fine. So, we need to test our code. There are several testing stages and one of them is Unit Testing. In this article, we will write simple Bloc that will fetch and filter items. Then we will write test for our Bloc.

Add Dependencies

During the coding, we will need following dependencies. Add following to dependencies:

Equatable is used to simplify equality processes (In Dart if we compare to object using == it will not compare them with fields, will compare with hashcode and == operator. To simplify this process I have added this library.

Simple Model

We will use the following model for our data:

Abstraction

Abstraction plays an important role in testing. Best way to understand it, to look at mocking. We will use this abstraction for Dependency Injection. It means that, using abstraction, we will be able to add mock implementation and inject it to bloc for mocking.

Mocking

So, assume that we have a concrete implementation to fetch tasks from any API. But in testing, real cases — like http operations, native device functionalities, database operations and etc are not working correctly. We should mock them for testing. So we will create mock class to handle implementation of our repository:

Task Bloc

Let’s code our simple Task Cubit. States will be following:

And, TaskCubit will be like this:

As you can see, we haven’t injected MockTaskRepository itself. We have used ImpleTaskRepository to pass our repository object to BloC. It allows us to inject our mock or real repositories to BloC. So, We will inject MockTaskRepository to BloC in testing process. Yay!

Testing

Typically, Testing consists of 3 parts: Initialization or Setup, Operations and Expectations.

Initialization => in this part, we should initialize all things which is important for Testing process.
Operations => We call methods or something else, which should be tested.
Expectations => In the end, we add some cases we expect that it will be like this.

Bloc Testing

First of all, we define our group (you can change structure, it is my approach) and using setUp we define our TaskCubit for all tests and with tearDown we close TaskCubit when all tests completed in TaskCubit Test group:

EquatableConfig.stringify = true is added to show Bloc’s states and its parameters pretty.

Now, we add our first test. blocTest is provided by bloc_test library to test blocs easily. Our first test includes followings:

Description text to show when test runs.
build => is used to create BLoC or Cubit object for test.
act => is used to add event or to call method for trigger BLoC.
expect => is a simple Iterable, which is used to ensure that act called from previous parameter will return State or States noted in here.

To run test, we can use the following command (or run with VS Code or Android Studio):

flutter test

And it will print that:

Yuppi, our first test works fine. Now, it is time to test next functionalities.

Let’s write test for next case.

It looks like previous one, but in the second test we are trying to test that if TaskCubit sends urgent tasks correctly or not. In expect parameter, we have added urgent tasks to state because bloc should send only these items.

Let’s run the tests. Whaaat?