From 3d66a9da7eacd3d23390e330ccff1024fc5535df Mon Sep 17 00:00:00 2001
From: Nandor Kraszlan <nandor.kraszlan@gmail.com>
Date: Wed, 10 Mar 2021 17:39:14 +0000
Subject: [PATCH] feat: make isVisible more comprehensive

---
 src/utils/isElementVisible.ts |  2 +-
 tests/isVisible.spec.ts       | 15 +++++++++++++++
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/utils/isElementVisible.ts b/src/utils/isElementVisible.ts
index 82ccb7abc..27aa0cfd4 100644
--- 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
index 0ac38876b..d01230766 100644
--- 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)
+  })
 })