[feature] have `isVisible` return false on things like 0 opacity

[TheDutchCoder]

Currently isVisible will return true even though an element is not visible due to something like opacity.

I don't know what the options are for this and if it's even feasible, but it would be nice to have support for this (I know Cypress does this, but I'm not sure VTU has the same tools to work with).

[afontcu]

Hi! AFAICT isVisible actually checks for opacity: https://github.com/vuejs/vue-test-utils-next/blob/9d3c2a6526f3d8751d29b2f9112ad2a3332bbf52/src/utils/isElementVisible.ts#L18

maybe we're missing some use case?

[lmiller1990]

Probably that only works if you do element.style.opacity = 0. I am guessing @TheDutchCoder may be applying opacity with a class as opposed to style? Cypress will figure this out, I don't believe jsdom will because as a headless browser it doesn't bother applying css at all.

[lmiller1990]

@TheDutchCoder any update? How are you applying opacity?

[TheDutchCoder]

Sorry, this slipped passed my emails.
Yes I'm applying a class instead of a direct style binding.

I'm assuming JSDOM had some limitations in this regard (for checking the style attribute directly)?

[lmiller1990]

Yeah, I do not think we can detect any styles applied from <style> - jsdom will only handle style attributes explicitly set in JS.

Unless I am missing something, this is a limitation we cannot work around.

[lmiller1990]

I looked into this - jsdom limitation.

Keep an eye out, the Cypress team are working on a component testing runner that works with Test Utils (for Vue integration). That might be more up your alley if you like true UI tests (I do).

[lmiller1990]

@TheDutchCoder #454

Looks like it can be done here, too.