question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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?

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:3
  • Comments:7 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
drewleecommented, Feb 18, 2021

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

1reaction
slavreniukcommented, Feb 18, 2021

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

[v5] ember-testing-container is not visible during tests (due to ...
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 ......
Read more >
Why aren't my absolutely/fixed-positioned elements located ...
If the element has 'position: absolute', the containing block is established by the nearest ancestor with a 'position' of 'absolute', 'relative' or 'fixed',...
Read more >
Mocha - the fun, simple, flexible JavaScript test framework
simple, flexible, fun. Mocha is a feature-rich JavaScript test framework running on Node.js and in the browser, making asynchronous testing simple and fun....
Read more >
position - CSS: Cascading Style Sheets - MDN Web Docs
The position CSS property sets how an element is positioned in a document. The top, right, bottom, and left properties determine the final ......
Read more >
Issue when using qunit-fixture container - jQuery Forum
Hi, I have just started writing two small unit tests. The first one checks if elements of a list get appended with a...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found