How to properly test a component that displays an Image texture?

Get Help
1

Hi, I’m trying to create some unit tests for a component that displays an image as a texture, and has some animated loader that hides as soon as the image texture is loaded. It makes use of the txLoaded and txError texture events to control what happens with the image resource in case is ok and in case of any error.

I was checking the Lightning-UI-Components and the lightning-ui-tmdb repos to get an idea on how to test the mentioned events, because that’s what a I really need to test, how the component handles both, a correct and an invalid image resource, but nothing seems to work as the events are never triggered by the component’s instance.

So my questions is if is it possible to test these texture events and how to do it?, since these events fire some changes in the component such as hiding the loader and changing the alpha of the texture from almost 0 to 1, but none of these properties are updated over the time because the events handlers in the component (or in the test as in the Lightning-UI-Components repo) are never called when I run the test.

Thanks.

2

Hi - You can fake the events to happen:

setTimeout(() => {
      component._Image.emit('txLoaded'); 
    }, 500);

That will trigger the txLoaded event or you could do txError. Also note that all these events happen async, so you’d need some setup which then waits for the component to be fully loaded before you try testing that these events happened. Usually we do that in a before and await some promise before running a test.

1 Like