feat: remove deprecation warning from isVisible method

update `isVisible` logic to match implementation in `jest-dom`

docs/api/wrapper-array/isVisible.md

@@ -2,7 +2,7 @@
 
 Assert every `Wrapper` in `WrapperArray` is visible.
 
-Returns `false` if at least one ancestor element has `display: none` or `visibility: hidden` style.
+Returns `false` if at least one ancestor element has `display: none`, `visibility: hidden`, `opacity :0` style, is located inside collapsed `<details>` tag or has `hidden` attribute.
 
 This can be used to assert that a component is hidden by `v-show`.
 

docs/api/wrapper/isVisible.md

@@ -1,16 +1,8 @@
 ## isVisible
 
-::: warning Deprecation warning
-`isVisible` is deprecated and will be removed in future releases.
-
-Consider a custom matcher such as those provided in [jest-dom](https://github.com/testing-library/jest-dom#tobevisible).
-
-When using with findComponent, access the DOM element with `findComponent(Comp).element`
-:::
-
 Assert `Wrapper` is visible.
 
-Returns `false` if an ancestor element has `display: none` or `visibility: hidden` style.
+Returns `false` if an ancestor element has `display: none`, `visibility: hidden`, `opacity :0` style, is located inside collapsed `<details>` tag or has `hidden` attribute.
 
 This can be used to assert that a component is hidden by `v-show`.
 

docs/ja/api/wrapper/isVisible.md

@@ -1,13 +1,5 @@
 ## isVisible()
 
-::: warning Deprecation warning
-`isVisible` は非推奨となり、将来のリリースで削除される予定です。
-
-[jest-dom](https://github.com/testing-library/jest-dom#custom-matchers) で提供されているようなカスタムマッチャの使用を検討してください。
-
-findComponent で使用する場合は、 `findComponent(Comp).element` で DOM 要素にアクセスします。
-:::
-
 `Wrapper` が表示されているかアサートします。
 
 style が `display: none` か  `visibility: hidden` の親要素がある場合、 false を返します。

docs/ru/api/wrapper-array/isVisible.md

@@ -1,10 +1,10 @@
 ## isVisible()
 
-Утверждает, что каждый `Wrapper` в `WrapperArray` видимый.
+Утверждает, что каждый `Wrapper` в `WrapperArray` виден.
 
-Возвращает `false`, если по крайней мере один элемент предка имеет стиль `display: none` или `visibility: hidden`.
+Возвращает `false`, если по крайней мере для одного из элементов какой-либо предок имеет стили `display: none`, `visibility: hidden`, `opacity: 0`, аттрибут `hidden` или находится в свёрнутом элементе `<details>`.
 
-Это можно использовать для утверждения, что компонент скрыт с помощью `v-show`.
+Это можно использовать для проверки, что компонент скрыт с помощью `v-show`.
 
 - **Возвращает:** `{boolean}`
 

docs/ru/api/wrapper/isVisible.md

@@ -1,10 +1,10 @@
 ## isVisible()
 
-Утверждает, что `Wrapper` видимый.
+Проверяет, что `Wrapper` виден.
 
-Возвращает `false`, если по крайней мере один элемент предка имеет стиль `display: none` или `visibility: hidden`.
+Возвращает `false`, если какой-либо предок имеет стили `display: none`, `visibility: hidden`, `opacity: 0`, аттрибут `hidden` или находится в свёрнутом элементе `<details>`.
 
-Это можно использовать для утверждения, что компонент скрыт с помощью `v-show`.
+Это можно использовать для проверки, что компонент скрыт с помощью `v-show`.
 
 - **Возвращает:** `{boolean}`
 

docs/zh/api/wrapper/isVisible.md

@@ -1,13 +1,5 @@
 ## isVisible
 
-::: warning 废弃警告
-`isVisible` 已经被废弃并会在未来的发布中被移除。
-
-可以考虑一个诸如 [jest-dom](https://github.com/testing-library/jest-dom#tobeempty) 中提供的自定义匹配。
-
-当使用 `findComponent` 时，可以通过 `findComponent(Comp).element` 访问其 DOM 元素。
-:::
-
 断言 `Wrapper` 是否可见。
 
 如果有一个祖先元素拥有 `display: none` 或 `visibility: hidden` 样式则返回 `false`。

packages/shared/index.js

@@ -1,4 +1,5 @@
 export * from './compile-template'
 export * from './create-component-stubs'
+export * from './is-visible'
 export * from './util'
 export * from './validators'

packages/shared/is-visible.js

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

packages/test-utils/src/wrapper.js

@@ -19,6 +19,7 @@ import {
   nextTick,
   warnDeprecated
 } from 'shared/util'
+import { isElementVisible } from 'shared/is-visible'
 import find from './find'
 import createWrapper from './create-wrapper'
 import { recursivelySetData } from './recursively-set-data'
@@ -367,30 +368,9 @@ export default class Wrapper implements BaseWrapper {
 
   /**
    * Checks if node is visible
-   * @deprecated
    */
   isVisible(): boolean {
-    warnDeprecated(
-      'isVisible',
-      'Consider a custom matcher such as those provided in jest-dom: https://github.com/testing-library/jest-dom#tobevisible. ' +
-        'When using with findComponent, access the DOM element with findComponent(Comp).element'
-    )
-    let element = this.element
-    while (element) {
-      if (
-        // $FlowIgnore
-        element.hidden ||
-        // $FlowIgnore
-        (element.style &&
-          (element.style.visibility === 'hidden' ||
-            element.style.display === 'none'))
-      ) {
-        return false
-      }
-      element = element.parentElement
-    }
-
-    return true
+    return isElementVisible(this.element)
   }
 
   /**

test/specs/wrapper/isVisible.spec.js

@@ -32,6 +32,33 @@ describeWithShallowAndMount('isVisible', mountingMethod => {
     expect(element.isVisible()).toEqual(false)
   })
 
+  it('returns false if element has inline style opacity: 0', () => {
+    const compiled = compileToFunctions(
+      '<div><div><span style="opacity: 0;" class="visible"></span></div></div>'
+    )
+    const wrapper = mountingMethod(compiled)
+    const element = wrapper.find('.visible')
+    expect(element.isVisible()).toEqual(false)
+  })
+
+  it('returns false if element is inside closed details tag', () => {
+    const compiled = compileToFunctions(
+      '<div><details><summary>Summary</summary><span class="visible"></span></details></div>'
+    )
+    const wrapper = mountingMethod(compiled)
+    const element = wrapper.find('.visible')
+    expect(element.isVisible()).toEqual(false)
+  })
+
+  it('returns true if element is inside opened details tag', () => {
+    const compiled = compileToFunctions(
+      '<div><details open><summary>Summary</summary><span class="visible"></span></details></div>'
+    )
+    const wrapper = mountingMethod(compiled)
+    const element = wrapper.find('.visible')
+    expect(element.isVisible()).toEqual(true)
+  })
+
   it('returns false if element has hidden attribute', () => {
     const compiled = compileToFunctions(
       '<div><div><span class="visible" hidden></span></div></div>'

test/specs/wrapper/overview.spec.js

@@ -127,7 +127,7 @@ describeWithShallowAndMount('overview', mountingMethod => {
 
         const expectedConsoleOutput = [
           '',
-          'Wrapper (Visible):',
+          'Wrapper (Not visible):',
           '',
           'Html:',
           '',