feat: make isVisible more comprehensive

vuejs · lmiller1990 · Mar 12, 2021 · Mar 10, 2021 · Mar 10, 2021 · 3d66a9da7eacd3d23390e330ccff1024fc5535df
commit 3d66a9da7eacd3d23390e330ccff1024fc5535df
diff --git a/src/utils/isElementVisible.ts b/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' &&

diff --git a/tests/isVisible.spec.ts b/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)
+  })
 })