[v5] ember-testing-container is not visible during tests (due to being inside qunit-fixture)

👋

Following the instructions in the Migration Guide for v5.0.0-beta, and looks like where the ember-testing-container div is placed has changed.

Earlier, it was outside qunit-fixture:

https://github.com/emberjs/ember-qunit/blob/74057af23ae6341364ffb851be27bbe3d9ec53e7/index.js#L55-L60

Now, it is inside qunit-fixture:

https://github.com/emberjs/ember-qunit/blob/7b33387dd9a3d8ba88ce49125734357f24f10292/tests/index.html#L24-L29

Here’s the relevant commit that made this change.

With the new structure, I don’t see ember-testing-container visible in the viewport, since qunit’s CSS places qunit-fixture outside the viewport.

It does look like qunit-fixture is designed for housing the HTML that’s under test, so I’m not sure if the fix is to change the structure to what it was before, or to add additional styling within ember-qunit to place qunit-fixture inside the viewport.

[rwjblue]

@rwjblue what are the downsides to using qunit’s cleanup functionality and just overriding qunit-fixture’s styles? Is there a specific reason to avoid that approach?

It seems fairly brittle since they could change their classes / styling at any time and out of our control. I don’t feel super strongly here though. I definitely prefer the “elegance” of relying on QUnit for its cleanup.

Feel free to PR whichever way seems easier to you, the main goal here is to fix this regression. If fixing it via custom CSS is easier, that seems fine (and we can always come back and change that around if needed in future releases if the QUnit internals change).

[rwjblue]

The goal of moving it into the qunit-fixture was to ensure that QUnit’s own cleanup of the DOM post-test takes care of things for us without us having to manually clean things up ourselves (see https://github.com/emberjs/ember-test-helpers/pull/910 for some additional context on the extraneous work that was being done).