How to unit test if an image was loaded using Coil + Compose

Question

I'm loading an image using Coil for Compose like below.

@Composable
fun SvgImageSample() {
    val painter = rememberAsyncImagePainter(
        model = ImageRequest.Builder(LocalContext.current)
            .decoderFactory(SvgDecoder.Factory())
            .data("https://someserver.com/SVG_image.svg")
            .size(Size.ORIGINAL)
            .build()
    )
    Image(
        painter = painter,
        modifier = Modifier.size(100.dp).testTag("myImg"),
        contentDescription = null
    )
}

The image is loaded properly. Now, I would like to write a test to check if the image was loaded. Is there any assertion out-of-the-box for that?

Something like this:

class MyTest {
    @get:Rule
    val composeTestRule = createComposeRule()

    @Test
    fun checkIfTheImageLoads() {
        composeTestRule.setContent {
            MyAppThemeTheme {
                SvgImageSample()
            }
        }
        composeTestRule.onNodeWithTag("myImg")
            .assertCoilImageIsLoaded() // <- this is what I want
    }
}

nglauber · Answer 1 · 2022-07-22T12:48:46.137

I found what I was looking for... Please let me know if anyone has a better solution.

This is what I did:

Add this dependency in your build.gradle.

implementation "androidx.test.espresso.idling:idling-concurrent:3.5.0-alpha07"

This is necessary to use the IdlingThreadPoolExecutor class.

Declare the an IdlingThreadPool object like below:

object IdlingThreadPool: IdlingThreadPoolExecutor(
    "coroutinesDispatchersThreadPool",
    Runtime.getRuntime().availableProcessors(),
    Runtime.getRuntime().availableProcessors(),
    0L,
    TimeUnit.MILLISECONDS,
    LinkedBlockingQueue(),
    Executors.defaultThreadFactory()
)

I get this hint from this issue in the Coil github page.

Use the object declared above in the ImageRequest object.

@Composable
fun SvgImageSample() {
    val painter = rememberAsyncImagePainter(
        model = ImageRequest.Builder(LocalContext.current)
            .dispatcher(IdlingThreadPool.asCoroutineDispatcher()) // << here
            .decoderFactory(SvgDecoder.Factory())
            .data("https://someserver.com/SVG_image.svg")
            .size(Size.ORIGINAL)
            .build()
    )
    Image(
        painter = painter,
        modifier = Modifier
            .size(100.dp)
            .semantics {
                testTag = "myImg"
                coilAsyncPainter = painter
            },
        contentDescription = null
    )
}

Notice the IdlingThreadPool object was used in the dispatcher function. The other detail is coilAsyncPainter property which is receiving the painter object. It will be necessary during the test to check if the image was loaded.

Declare the coilAsyncPainter semantic property.

val CoilAsyncPainter = SemanticsPropertyKey<AsyncImagePainter>("CoilAsyncPainter")
var SemanticsPropertyReceiver.coilAsyncPainter by CoilAsyncPainter

This is what you need to do in the application code.

In the test code, declare a new SemanticNodeInteration.

fun SemanticsNodeInteraction.isAsyncPainterComplete(): SemanticsNodeInteraction {
    assert(
        SemanticsMatcher("Async Image is Success") { semanticsNode ->
            val painter = semanticsNode.config.getOrElseNullable(CoilAsyncPainter) { null }
            painter?.state is AsyncImagePainter.State.Success
        }
    )
    return this;
}

So here, basically the painter object is obtained from the semantic property and then is checked if the current state is Success.

Finally, here it is the test.

class MyTest {
    @get:Rule
    val composeTestRule = createComposeRule()

    @Test
    fun async_image_was_displayed() {
        composeTestRule.setContent {
            MyAppThemeTheme {
                SvgImageSample()
            }
        }
        composeTestRule.waitForIdle()
        composeTestRule.onNodeWithTag("myImg")
            .isAsyncPainterComplete()
    }
}

score 1 · Accepted Answer · edited Jul 23 '22 at 12:25

Another way would be to implement an EventListener and check the right events are emitted. Will save you using testTags and semantic properties in the app code.

https://coil-kt.github.io/coil/api/coil-base/coil-base/coil/-event-listener/index.html

A quick hacky attempt, but you could wrap this in a Composable helper that does this for any block passed in.

@Test
fun imageLoader() {
    var success = 0
    var errors = 0

    composeTestRule.setContent {
        Coil.setImageLoader(
            ImageLoader.Builder(context)
                .eventListener(object : EventListener {
                    override fun onSuccess(
                        request: ImageRequest, 
                        result: SuccessResult
                    ) {
                        success++
                    }

                    override fun onError(
                        request: ImageRequest, 
                        result: ErrorResult
                    ) {
                        errors++
                    }
                })
                .build()
        )
        MyAppThemeTheme {
            SvgImageSample()
        }
   }
   Thread.sleep(500)
   assertThat(errors).isEqualTo(0)
   assertThat(success).isEqualTo(1)
}

With this approach, I have to re-declare my UI in the test. I don't think this is good thing to do... — nglauber, Jul 22 '22 at 23:36
Sorry, that was just a bad example from me. You can just use SvgImageSample(), I'll update. Take your pick on approaches, this will work even without modifying the composable code. — Yuri Schimke, Jul 23 '22 at 08:09
Got it! This "local provider" is deprecated, but changing to `Coil.setImageLoader`, it worked. My only concern is the case of the app is already using a custom `ImageLoader` and a `EventListener`. — nglauber, Jul 23 '22 at 12:27

score 1 · Answer 3 · answered Oct 05 '22 at 16:49

First, I have to say that the approach suggested by @nglauber worked. However, I cringed at that level of complexity for a simple test, so I tried a straight forward test and that works as well and I will keep so.

First, I loaded the image simply with AsyncImage

 AsyncImage(
            model = ImageRequest.Builder(LocalContext.current)
                .data(template.previewUrl)
                .crossfade(true)
                .build(),
            placeholder = painterResource(template.thumbNailResId),
            contentDescription = stringResource(R.string.template_description),
            contentScale = ContentScale.Fit,
        )

Then in the test, I simply checked for the node with content description is displayed like so

@Test
fun intialImageDisplayedTest() {
    val template = TemplateRepository.getTemplate()[0]
    composeTestRule.setContent {
        val selectedIndex = remember{ mutableStateOf(-1) }
        TemplateItem(
            selectedId = selectedIndex,
            template = template,
            onPreviewButtonClicked = {}
        )
    }
    composeTestRule.onNodeWithTag("template_${template.templateId}").assertIsDisplayed()
    composeTestRule.onNodeWithContentDescription(getImageDescriptionText()).assertIsDisplayed()
}

private fun getImageDescriptionText(): String {
    return composeTestRule.activity.resources.getString(R.string.template_description)
}

Again keeping it simple. I also added a matcher with a test tag. No Idling resource needed.

How to unit test if an image was loaded using Coil + Compose

3 Answers3