feat: remove deprecation warning from isVisible method (#1675)

update `isVisible` logic to match implementation in `jest-dom`
vuejs · Sep 8, 2020 · 99948f5 · 99948f5
1 parent 677ba31
commit 99948f5
Show file tree

Hide file tree

Showing 12 changed files with 73 additions and 70 deletions.
diff --git a/docs/api/wrapper-array/isVisible.md b/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`.
 

diff --git a/docs/api/wrapper/isVisible.md b/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`.
 

diff --git a/docs/ja/api/wrapper/isVisible.md b/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 を返します。

diff --git a/docs/ru/api/wrapper-array/isVisible.md b/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}`
 

diff --git a/docs/ru/api/wrapper/isVisible.md b/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}`
 

diff --git a/docs/upgrading-to-v1/README.md b/docs/upgrading-to-v1/README.md
@@ -34,21 +34,6 @@ You may rewrite tests using `is` to use `element.tagName` instead. For example,
 
 Finding out whether a DOM node is empty is not a Vue specific feature, and it is something that is difficult to get right. Rather than re-invent the wheel, we have decided it's better to delegate to an existing, well tested solution by default. Consider the excellent `toBeEmpty` matchers from [jest-dom](https://github.com/testing-library/jest-dom#tobeempty), for example, if you are using Jest.
 
-### `isVisible`
-
-See `isEmpty` above. Consider using [toBeVisible](https://github.com/testing-library/jest-dom#tobevisible) from `jest-dom` if you are using Jest. For example:
-
-```js
-// old assertion
-expect(wrapper.find('.selector').isVisible()).toBeTruthy()
-
-// new assertion
-// consider making this matcher globally availalbe in your tests!
-import '@testing-library/jest-dom'
-
-expect(wrapper.find('.selector').element).toBeVisible()
-```
-
 ### `name`
 
 Asserting against `name` encourages testing implementation details, which is a bad practice. If you need this feature, though, you can use `vm.$options.name` for Vue components or `element.tagName` for DOM nodes. Again, consider if you really need this test - it's likely you don't.

diff --git a/docs/zh/api/wrapper/isVisible.md b/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`。

diff --git a/packages/shared/index.js b/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'
diff --git a/packages/shared/is-visible.js b/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))
+  )
+}
diff --git a/packages/test-utils/src/wrapper.js b/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'
@@ -372,30 +373,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)
   }
 
   /**

diff --git a/test/specs/wrapper/isVisible.spec.js b/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>'

diff --git a/test/specs/wrapper/overview.spec.js b/test/specs/wrapper/overview.spec.js
@@ -127,7 +127,7 @@ describeWithShallowAndMount('overview', mountingMethod => {
 
         const expectedConsoleOutput = [
           '',
-          'Wrapper (Visible):',
+          'Wrapper (Not visible):',
           '',
           'Html:',
           '',