Strange error generated by img tag in an acceptance test

Testing
1

I was having this error in an acceptance test

Uncaught (in promise) EmberError {description: undefined, fileName: undefined, lineNumber: undefined, message: "Assertion Failed: You have turned on testing mode,… any code with asynchronous side-effects in a run", name: "Error"…}

until I finally managed to isolate it and find the cause. For some reason, it’s considering the image url in the src attribute as a promise

<img id="avatar-image" src="/assets/img/user-avatar.png" class="sign-up__avatar" alt="Avatar image"/>

This img tag is inside a component that I’m calling in the register route in which I’m performing the acceptance test.

I’ve tried to reproduce it in a new project but there it has worked without problems. So I it must be something in my code that is interfering in some way.

I’ve tried several things to discover what is different from the new project in which it works:

  1. reduce the acceptance test only to check the default test (visiting the register route). The error still persists.
  2. reduce the component to its default form, having in the template the img tag with the src attribute set. The error still persists.
  3. reduce the register route to its default form with the img tag in its template. The error still persists

Placing the img tag in other routes or in the application template don’t raise the error (not even in their acceptance tests).

I’ve also checked if there is something different from my acceptance test and a generated one but they are the same.

Do you have any idea/similar experiences why this could be happening?

2

Ok, I found the cause. It was because of <container> of the addon flexi. Having this:

<container>
<img src="/assets/img/user-avatar.png"/>
</container>

Raises the error. It happens also in the new project.

3

I believe this is the cause https://github.com/html-next/flexi/blob/master/addon/mixins/container.js#L41-L46 (or you are using run loop somewhere) and this is why The Run Loop - Understanding Ember.js - Ember Guides (HOW IS RUNLOOP BEHAVIOUR DIFFERENT WHEN TESTING?).