emberjs/ember-qunit

Qunit-fixture css overrides no longer producing desired result as of qunit 2.14?

jaswilli opened this issue · 8 comments

jaswilli commented

Hi,

It seems as though this change that landed in qunit 2.14 has altered the assumptions that ember-qunit uses when attempting to affect the placement of the testing container by overriding the css on #qunit-fixture. Now that qunit marks #qunit as position: fixed the container has shifted up to the top of the window and occludes the menu:

qunit 2.14
Screen Shot 2021-01-18 at 3 55 55 PM


And the expected behavior (shown using qunit 2.13)
Screen Shot 2021-01-18 at 2 59 43 PM

It seems like this is probably related to #793 but is concerned with the actual visual layout instead of underlying test failures.

Turbo87 commented

it looks like #786 tried to fix this, but is causing some other issues too and is only available for the ember-qunit v5 release 😞

rwjblue commented

If we have an idea of what is required, we can backport to v4. I'd like to see it fixed correctly for v5 before the backporting though...

Turbo87 commented

I'm not sure we can actually fix this properly unless we want to override the new QUnit CSS. The new structure doesn't seem to allow additional content after the UI anymore and requires it to hover over the page instead (as we already allowed with the "Dock Container" option). The only option I can think of right now is pinning QUnit to v2.13 but that's obviously not a long-term solution. 😞

you don't happen to have a better idea?

rwjblue commented

No, I haven't really looked into it too much yet. Will try to poke at it to get a feel for what is going on this week.

alexlafroscia commented

We're having additional issues as fall-out from the changes to the position of the app "preview" window. It totally blocks many of the check-boxes in the QUnit controls at the top of the page

Screen Shot 2021-02-05 at 12 50 37 PM

Not only that, but despite the Abort button being visible, it's basically impossible to actually click on. You have to time the click just in the gap between two tests running, which is very difficult.

jordpo commented

We ran into this as well and use Development mode often and styles were off there. Adding this to the <head> in our index.html file seems to have fixed most of the style issues

    <style>
      #qunit {
        position: relative;
      }

      #ember-testing-container {
        overflow: hidden;
      }

      #ember-testing-container.full-screen {
        max-height: none;
        max-width: none;
        right: 0;
      }
    </style>