Container with position:fixed/absolute is not visible during tests (due to being inside qunit-fixture)

[slavreniuk]

This is my first time filling an issue in this project so please let me know if I need to provide more information.

After recent update to v5.1.1 we got some tests failing.
Basically the setup is container with position:fixed; top:0; right:0; bottom:0; left:0; that got some content inside. In non test setup its visible, however during tests execution its being reported as isNotVisible(). Same situation is for position:absolute; which is probably even more common case.

Tests setup (container is not visible):
https://jsfiddle.net/wmgr5467/

Non tests setup (container is visible):
https://jsfiddle.net/7jngepau/

Here's the commit that is the cause. If I disable styling changes introduced in that commit, it fixes the tests.

I saw related conversation going in this PR and I think that custom CSS played bad trick here. Can we consider rolling it back and fixing it in a different way?

[MrChocolatine]

I take the opportunity of this ticket (while it is still related) to ask:
why these recent changes regarding the container element (and more globally all the styles) of the tests suite? Looks like everything is messed up after upgrading to v5.0.0 🤔 , transparent background, bad positioning...

It seems to be intended but I think I am missing something:

This dove tails with the changes to make qunit a peer dependency as this now puts the app in full control of the testing fixtures. (link to this comment)

[drewlee]

Created an Ember app demonstrating the minimal reproduction case at https://github.com/drewlee/ember-qunit-layout-bugs/.

Specifically, a failing test: https://github.com/drewlee/ember-qunit-layout-bugs/blob/main/tests/integration/components/is-visible-test.js#L9.

[rwjblue]

I think this is fixed as of https://github.com/emberjs/ember-qunit/releases/tag/v5.1.3 (thanks @drewlee!)

[MrChocolatine]

@rwjblue I just tested the new release and it does not seem to fix everything.

The frame stays in this corner when tests are running.

[slavreniuk]

I think it was a problem before that this frame was not having size, that's why some elements was considered as not visible.
Also I can confirm that it fixed initial problem we had in our repo.
Thanks @drewlee & @rwjblue

[drewlee]

@MrChocolatine, this is intentional. Going forward, what was known as the "Dock container" option is now the default layout for the test page. The specific reasoning is due to the way QUnit styling was changed in v2.14.0 to fixed positioning. It is no longer possible to maintain the previous layout (where the testing container flowed underneath the test results), without resorting to heavy CSS overrides/hacks. The main issues that have been addressed include:

1. Preventing the testing container from occluding QUnit's UI controls,
2. Preventing false test failures for visibility based assertions,
3. And preventing false test failures for accessibility assertions in the ember-a11y-testing addon.

While it's not a perfect solution, it's a pretty good compromise between usability and avoiding regressions for application test suites.

[MrChocolatine]

@drewlee thank you for the explanations.

For now, and actually since we upgraded to v5, me and my team implemented a quick fix by adding the following CSS in /tests/index.html.

But I don't know the internal mechanics etc of QUnit / ember-qunit so this might be not correct (especially when compared to your PR and the quantity of changes that was necessary ahah). But so far, in our situation, it has been working pretty well.

<style>
  #qunit {
    /**
     * Force the testing container to render correctly instead of out of the screen, see:
     * https://github.com/emberjs/ember-qunit/issues/801
     */
    position: unset;
  }
</style>

Without the fix (the issue we know)

With our custom fix

The container stays in this position, below all the tests, each time a single test is running