Add isVisible() and isNotVisible() assertions

[patocallaghan]

Fixes #52

Adds isVisible and isNotVisible assertion helpers.

Visibility is modelled off of jQuery's :visible logic in jQuery 3.0 https://github.com/jquery/jquery/blob/4a2bcc27f9c3ee24b3effac0fbe1285d1ee23cc5/src/css/hiddenVisibleSelectors.js#L11-L13

From https://api.jquery.com/hidden-selector/, an element is considered "hidden" if it follows any of the following criteria

They have a CSS display value of none.
They are form elements with type="hidden".
Their width and height are explicitly set to 0.
An ancestor element is hidden, so the element is not shown on the page.
Elements with visibility: hidden or opacity: 0 are considered to be visible, since they still consume space in the layout.
elements will be considered :hidden if they don't have any layout boxes. For example, br elements and inline elements with no content will not be selected by the :hidden selector.

As mentioned in the issue you may decide not to merge this. If you do, I can then update the README information.

[patocallaghan]

I needed to add the isVisible/isNotVisible tests here as the jest tests always seems to consider elements as hidden. Although I may have been doing something incorrect?

[patocallaghan]

Just fixed some failing tests, they are now ✅

[Turbo87]

could make this check a little more explicit? assuming I understand the logic correctly, maybe something like this:

return el.offsetWidth !== 0 || el.offsetHeight !== 0 || el.getClientRects().length !== 0

[scalvert]

This seems like a good change, though the above is literally what jQuery uses (though that isn't any endorsement for using that code).

[Turbo87]

can you add to the documentation what makes an element "visible"? for example if the browser is scrolled to a different part of the page does that mean that elements are not visible then?

[scalvert]

I tried to push some of these fixes to @patocallaghan's fork, but no dice. Guess we'll have to wait.

[scalvert]

So one thing that needs to be addressed here is that this code will fail if an element is not rendered yet, which may still be considered not visible.

In jQuery, you always get an element back. So, the visible check works well because if jQuery doesn't find the element, it returns a default jQuery object which can be evaluated.

With using querySelector, if an element is not found (not rendered yet) it will return null. Ember's test-helpers use find, which under the covers use querySelector. This means that when passing in an element that was the result of find we could end up passing null in. This will currently error in the above.

To fix is-visible, we should first test for the element's existence:

return el !== null && (el.offsetWidth !== 0 || el.offsetHeight !== 0 || el.getClientRects().length !== 0);

To fix is-not-visible:

return el === null || !(el.offsetWidth !== 0 || el.offsetHeight !== 0 || el.getClientRects().length !== 0);

[patocallaghan]

Apologies I hope to get to addressing the comments and finishing this in the next few days

[scalvert]

Let me know what i can do to help.

[patocallaghan]

Closing this PR as #67 supersedes it