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

[rohitpaulk]

👋

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:

ember-qunit/index.js

Lines 55 to 60 in 74057af

	<div id="qunit"></div>
	<div id="qunit-fixture"></div>
	<div id="ember-testing-container">
	<div id="ember-testing"></div>
	</div>

Now, it is inside qunit-fixture:

ember-qunit/tests/index.html

Lines 24 to 29 in 7b33387

	<div id="qunit"></div>
	<div id="qunit-fixture">
	<div id="ember-testing-container">
	<div id="ember-testing"></div>
	</div>
	</div>

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]

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 emberjs/ember-test-helpers#910 for some additional context on the extraneous work that was being done).

[rwjblue]

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.

Let's go with the latter option (making qunit-fixture in viewport).

[rwjblue]

Oh, also, thank you for testing and reporting this!

[rwjblue]

@rohitpaulk - Think you might have time to help push this forward? No worries if not, I'm just a bit swamped at the moment and don't want this to fall through the cracks...

[rwjblue]

On second thought, I'd prefer to do:

so I'm not sure if the fix is to change the structure to what it was before

So that ember-testing-container is a peer of qunit-fixture. It will be somewhat more difficult for us, but not too bad.

[rohitpaulk]

Yep, I can take a look at this sometime this week!

So that ember-testing-container is a peer of qunit-fixture. It will be somewhat more difficult for us, but not too bad.

@rwjblue does that mean that we'd need to bring back the DOM cleanup code that was removed here?

[rwjblue]

Yeah. But I think we can do it here instead of inside @ember/test-helpers itself by leveraging the @ember/destroyables API directly.

[rohitpaulk]

Thanks for the pointers! I'm not aware of the @ember/destroyables API, but will look into what it does.

@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?

[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).