Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Closed
jaswilli opened this issue Jan 18, 2021 · 8 comments
Closed

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

jaswilli opened this issue Jan 18, 2021 · 8 comments

Comments

@jaswilli
Copy link

jaswilli commented Jan 18, 2021 •
edited
Loading

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
Copy link
Member

Turbo87 commented Jan 19, 2021

/cc @BryanCrotaz

@Turbo87
Copy link
Member

Turbo87 commented Jan 19, 2021

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
Copy link
Member

rwjblue commented Jan 20, 2021

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
Copy link
Member

Turbo87 commented Jan 20, 2021

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
Copy link
Member

rwjblue commented Jan 20, 2021

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.

@ijlee2 ijlee2 mentioned this issue Jan 24, 2021
Merged
@alexlafroscia
Copy link
Contributor

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.

@drewlee drewlee mentioned this issue Feb 12, 2021
Merged
@jordpo
Copy link

jordpo commented Feb 17, 2021

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>

@rwjblue
Copy link
Member

rwjblue commented Feb 18, 2021

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

@rwjblue rwjblue closed this as completed Feb 18, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@rwjblue @Turbo87 @jaswilli @alexlafroscia @jordpo