feat: isVisible

Author: lmiller1990

src/domWrapper.ts

@@ -2,6 +2,7 @@ import { nextTick } from 'vue'
 
 import { createWrapperError } from './errorWrapper'
 import { TriggerOptions, createDOMEvent } from './createDomEvent'
+import { isElementVisible } from './utils/isElementVisible'
 
 export class DOMWrapper<ElementType extends Element> {
   element: ElementType
@@ -36,6 +37,10 @@ export class DOMWrapper<ElementType extends Element> {
     return true
   }
 
+  isVisible() {
+    return isElementVisible(this.element)
+  }
+
   text() {
     return this.element.textContent?.trim()
   }

src/utils/isElementVisible.ts

@@ -0,0 +1,33 @@
+/*!
+ * isElementVisible
+ * Adapted from https://github.com/testing-library/jest-dom
+ * Licensed under the MIT License.
+ */
+
+type StylableElement = HTMLElement | SVGElement
+
+function isStyleVisible<T extends StylableElement>(element: T) {
+  const { display, visibility, opacity } = element.style
+  return (
+    display !== 'none' &&
+    visibility !== 'hidden' &&
+    visibility !== 'collapse' &&
+    opacity !== '0'
+  )
+}
+
+function isAttributeVisible<T extends StylableElement>(element: T) {
+  return (
+    !element.hasAttribute('hidden') &&
+    (element.nodeName === 'DETAILS' ? element.hasAttribute('open') : true)
+  )
+}
+
+export function isElementVisible<T extends StylableElement>(element: T) {
+  return (
+    element.nodeName !== '#comment' &&
+    isStyleVisible(element) &&
+    isAttributeVisible(element) &&
+    (!element.parentElement || isElementVisible(element.parentElement))
+  )
+}

tests/isVisible.spec.ts

@@ -0,0 +1,48 @@
+import { mount } from '../src'
+
+describe('isVisible', () => {
+  const Comp = {
+    template: `<div><span v-show="show" /></div>`,
+    props: {
+      show: {
+        type: Boolean
+      }
+    }
+  }
+
+  it('returns false when element hidden via v-show', () => {
+    const wrapper = mount(Comp, {
+      props: {
+        show: false
+      }
+    })
+
+    expect(wrapper.find('span').isVisible()).toBe(false)
+  })
+
+  it('returns true when element is visible via v-show', () => {
+    const wrapper = mount(Comp, {
+      props: {
+        show: true
+      }
+    })
+
+    expect(wrapper.find('span').isVisible()).toBe(true)
+  })
+
+  it('element becomes hidden reactively', async () => {
+    const Comp = {
+      template: `<button @click="show = false" /><span v-show="show" />`,
+      data() {
+        return {
+          show: true
+        }
+      }
+    }
+    const wrapper = mount(Comp)
+
+    expect(wrapper.find('span').isVisible()).toBe(true)
+    await wrapper.find('button').trigger('click')
+    expect(wrapper.find('span').isVisible()).toBe(false)
+  })
+})