feat: make isVisible more comprehensive (#454)

Author: nandi95

src/utils/isElementVisible.ts

@@ -9,7 +9,7 @@ function isStyleVisible<T extends Element>(element: T) {
     return false
   }
 
-  const { display, visibility, opacity } = element.style
+  const { display, visibility, opacity } = getComputedStyle(element)
 
   return (
     display !== 'none' &&

tests/isVisible.spec.ts

@@ -109,4 +109,19 @@ describe('isVisible', () => {
     expect(wrapper.html()).toContain('Item: 1')
     expect(wrapper.html()).not.toContain('Item: 2')
   })
+
+  it('should take css into account', async () => {
+    const style = document.createElement('style')
+    style.type = 'text/css'
+    document.head.appendChild(style)
+    style.sheet!.insertRule('.opacity-0 { opacity: 0; }')
+
+    const wrapper = mount({
+      template: '<div id="my-div" class="opacity-0" />'
+    })
+
+    expect(wrapper.get('#my-div').isVisible()).toBe(false)
+
+    document.head.removeChild(style)
+  })
 })