feat: make isVisible more comprehensive (backport from v2) (fix #1456) (#2013)

* feat: make isVisible more comprehensive (backport from v2)

* feat: make isVisible more comprehensive (backport from v2)

Author: IGx89

packages/shared/is-visible.js

@@ -5,7 +5,15 @@
  */
 
 function isStyleVisible(element) {
-  const { display, visibility, opacity } = element.style
+  if (!(element instanceof HTMLElement) && !(element instanceof SVGElement)) {
+    return false
+  }
+
+  // Per https://lists.w3.org/Archives/Public/www-style/2018May/0031.html
+  // getComputedStyle should only work with connected elements.
+  const { display, visibility, opacity } = element.isConnected
+    ? getComputedStyle(element)
+    : element.style
   return (
     display !== 'none' &&
     visibility !== 'hidden' &&

test/specs/wrapper/isVisible.spec.js

@@ -176,4 +176,19 @@ describeWithShallowAndMount('isVisible', mountingMethod => {
 
     expect(wrapper.find('.child.ready').isVisible()).toEqual(true)
   })
+
+  it('returns false if element has class with opacity: 0', async () => {
+    const style = document.createElement('style')
+    style.type = 'text/css'
+    document.head.appendChild(style)
+    style.sheet.insertRule('.opacity-0 { opacity: 0; }')
+
+    const compiled = compileToFunctions('<div id="my-div" class="opacity-0" />')
+    const wrapper = mountingMethod(compiled, {
+      attachTo: document.body
+    })
+    expect(wrapper.get('#my-div').isVisible()).toBe(false)
+
+    document.head.removeChild(style)
+  })
 })