How to test image load with Espresso

When we try to test our applications we confront a lot of problems. Some of them can have easy solutions and others not so much.

One of the problems I had to face was how to assert with Espresso that images are correctly loaded.

First, I am going to explain the situation.

The problem

I wanted to test my loaded images. Some images are loading with the Glide library from the network and other images are loading from the system resources. On one hand, I want to test that the image is loading with the correct URL in the case of Network loading, and on the other hand, I want to check that the images have the correct resource in the case of loading resources.

The idea

I had an idea of creating my solution based on saving the image loading state and check this with a custom matcher in Espresso.

ImageLoader

It is function is centralizing the image loads function, this ImageLoader save a tag only in Test mode for Espresso is able to check that the image load is correct, also hide the implementation of third party libraries as Glide or Picasso.

Finally, write the information about the image’s load in a keyed tag.

I had to create two loaders: one of them is to load from resources, and the other is to load from the network.

It is not our responsibility to check that the Glide works correctly. We only have to check that we use their methods correctly.

LoaderImageNetwork

The network loader receives an interface to be able to change the network load in Test. We do not want that Glide to try to load images in test because this can be a problem with the performance of tests.

For my Test, I have a loader that only checks if the URL image is not empty and is correctly formatted.

For my production code, I have a loader that uses Glide to load images like on a normal project.

How we use these loaders from my code?. Is easy you only use the ImageLoader

Then, we have a loader that saves the tag only in tests. So, what is it we have to save?

StateLoaded

We have to save a state that allows us to check if the images loaded correctly. I had to do a little sealed class to save both states.

Then in the test, I could check the URL, placeholder, etc. Also, I can check the ones loaded from resources.

Espresso matcher

At the end of my solution, I did Espresso’s matcher to check different cases.

Now, in the tests, we can check the images loaded. We can check that the images are correctly loaded and the placeholders are correct.

But, how we can sure that the TestLoaderImageNetwork is setting the tag correctly? Easy, we can do a test to are sure that the ImageLoader works correctly and this way makes a contract between the two tests.

TestImageLoader

I know that not is an easy solution, but is a strong solution for being able to check images loaded with espresso.

Sometimes we confront new problems that seem not to have a solution, in this cases only have to think creatively and invent a solution that covers our needed.

You can find all the code on my GitHub.

Greetings and good coding.