Skip to content

Commit 99948f5

Browse files
xanfxanf
authored
feat: remove deprecation warning from isVisible method (vuejs#1675)
update `isVisible` logic to match implementation in `jest-dom`
1 parent 677ba31 commit 99948f5

File tree

12 files changed

+73
-70
lines changed

12 files changed

+73
-70
lines changed

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
Assert every `Wrapper` in `WrapperArray` is visible.
44

5-
Returns `false` if at least one ancestor element has `display: none` or `visibility: hidden` style.
5+
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.
66

77
This can be used to assert that a component is hidden by `v-show`.
88

‎docs/api/wrapper/isVisible.md

+1-9
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,8 @@
11
## isVisible
22

3-
::: warning Deprecation warning
4-
`isVisible` is deprecated and will be removed in future releases.
5-
6-
Consider a custom matcher such as those provided in [jest-dom](https://github.com/testing-library/jest-dom#tobevisible).
7-
8-
When using with findComponent, access the DOM element with `findComponent(Comp).element`
9-
:::
10-
113
Assert `Wrapper` is visible.
124

13-
Returns `false` if an ancestor element has `display: none` or `visibility: hidden` style.
5+
Returns `false` if an ancestor element has `display: none`, `visibility: hidden`, `opacity :0` style, is located inside collapsed `<details>` tag or has `hidden` attribute.
146

157
This can be used to assert that a component is hidden by `v-show`.
168

‎docs/ja/api/wrapper/isVisible.md

-8
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,5 @@
11
## isVisible()
22

3-
::: warning Deprecation warning
4-
`isVisible` は非推奨となり、将来のリリースで削除される予定です。
5-
6-
[jest-dom](https://github.com/testing-library/jest-dom#custom-matchers) で提供されているようなカスタムマッチャの使用を検討してください。
7-
8-
findComponent で使用する場合は、 `findComponent(Comp).element` で DOM 要素にアクセスします。
9-
:::
10-
113
`Wrapper` が表示されているかアサートします。
124

135
style が `display: none` か  `visibility: hidden` の親要素がある場合、 false を返します。

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

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
## isVisible()
22

3-
Утверждает, что каждый `Wrapper` в `WrapperArray` видимый.
3+
Утверждает, что каждый `Wrapper` в `WrapperArray` виден.
44

5-
Возвращает `false`, если по крайней мере один элемент предка имеет стиль `display: none` или `visibility: hidden`.
5+
Возвращает `false`, если по крайней мере для одного из элементов какой-либо предок имеет стили `display: none`, `visibility: hidden`, `opacity: 0`, аттрибут `hidden` или находится в свёрнутом элементе `<details>`.
66

7-
Это можно использовать для утверждения, что компонент скрыт с помощью `v-show`.
7+
Это можно использовать для проверки, что компонент скрыт с помощью `v-show`.
88

99
- **Возвращает:** `{boolean}`
1010

‎docs/ru/api/wrapper/isVisible.md

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
## isVisible()
22

3-
Утверждает, что `Wrapper` видимый.
3+
Проверяет, что `Wrapper` виден.
44

5-
Возвращает `false`, если по крайней мере один элемент предка имеет стиль `display: none` или `visibility: hidden`.
5+
Возвращает `false`, если какой-либо предок имеет стили `display: none`, `visibility: hidden`, `opacity: 0`, аттрибут `hidden` или находится в свёрнутом элементе `<details>`.
66

7-
Это можно использовать для утверждения, что компонент скрыт с помощью `v-show`.
7+
Это можно использовать для проверки, что компонент скрыт с помощью `v-show`.
88

99
- **Возвращает:** `{boolean}`
1010

‎docs/upgrading-to-v1/README.md

-15
Original file line numberDiff line numberDiff line change
@@ -34,21 +34,6 @@ You may rewrite tests using `is` to use `element.tagName` instead. For example,
3434

3535
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.
3636

37-
### `isVisible`
38-
39-
See `isEmpty` above. Consider using [toBeVisible](https://github.com/testing-library/jest-dom#tobevisible) from `jest-dom` if you are using Jest. For example:
40-
41-
```js
42-
// old assertion
43-
expect(wrapper.find('.selector').isVisible()).toBeTruthy()
44-
45-
// new assertion
46-
// consider making this matcher globally availalbe in your tests!
47-
import '@testing-library/jest-dom'
48-
49-
expect(wrapper.find('.selector').element).toBeVisible()
50-
```
51-
5237
### `name`
5338

5439
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.

‎docs/zh/api/wrapper/isVisible.md

-8
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,5 @@
11
## isVisible
22

3-
::: warning 废弃警告
4-
`isVisible` 已经被废弃并会在未来的发布中被移除。
5-
6-
可以考虑一个诸如 [jest-dom](https://github.com/testing-library/jest-dom#tobeempty) 中提供的自定义匹配。
7-
8-
当使用 `findComponent` 时，可以通过 `findComponent(Comp).element` 访问其 DOM 元素。
9-
:::
10-
113
断言 `Wrapper` 是否可见。
124

135
如果有一个祖先元素拥有 `display: none` 或 `visibility: hidden` 样式则返回 `false`。

‎packages/shared/index.js

+1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
export * from './compile-template'
22
export * from './create-component-stubs'
3+
export * from './is-visible'
34
export * from './util'
45
export * from './validators'

‎packages/shared/is-visible.js

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
/*!
2+
* isElementVisible
3+
* Ported from https://github.com/testing-library/jest-dom
4+
* Licensed under the MIT License.
5+
*/
6+
7+
function isStyleVisible(element) {
8+
const { display, visibility, opacity } = element.style
9+
return (
10+
display !== 'none' &&
11+
visibility !== 'hidden' &&
12+
visibility !== 'collapse' &&
13+
opacity !== '0' &&
14+
opacity !== 0
15+
)
16+
}
17+
18+
function isAttributeVisible(element, previousElement) {
19+
return (
20+
!element.hasAttribute('hidden') &&
21+
(element.nodeName === 'DETAILS' && previousElement.nodeName !== 'SUMMARY'
22+
? element.hasAttribute('open')
23+
: true)
24+
)
25+
}
26+
27+
export function isElementVisible(element, previousElement) {
28+
return (
29+
element.nodeName !== '#comment' &&
30+
isStyleVisible(element) &&
31+
isAttributeVisible(element, previousElement) &&
32+
(!element.parentElement || isElementVisible(element.parentElement, element))
33+
)
34+
}

‎packages/test-utils/src/wrapper.js

+2-22
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import {
1919
nextTick,
2020
warnDeprecated
2121
} from 'shared/util'
22+
import { isElementVisible } from 'shared/is-visible'
2223
import find from './find'
2324
import createWrapper from './create-wrapper'
2425
import { recursivelySetData } from './recursively-set-data'
@@ -372,30 +373,9 @@ export default class Wrapper implements BaseWrapper {
372373

373374
/**
374375
* Checks if node is visible
375-
* @deprecated
376376
*/
377377
isVisible(): boolean {
378-
warnDeprecated(
379-
'isVisible',
380-
'Consider a custom matcher such as those provided in jest-dom: https://github.com/testing-library/jest-dom#tobevisible. ' +
381-
'When using with findComponent, access the DOM element with findComponent(Comp).element'
382-
)
383-
let element = this.element
384-
while (element) {
385-
if (
386-
// $FlowIgnore
387-
element.hidden ||
388-
// $FlowIgnore
389-
(element.style &&
390-
(element.style.visibility === 'hidden' ||
391-
element.style.display === 'none'))
392-
) {
393-
return false
394-
}
395-
element = element.parentElement
396-
}
397-
398-
return true
378+
return isElementVisible(this.element)
399379
}
400380

401381
/**

‎test/specs/wrapper/isVisible.spec.js

+27
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,33 @@ describeWithShallowAndMount('isVisible', mountingMethod => {
3232
expect(element.isVisible()).toEqual(false)
3333
})
3434

35+
it('returns false if element has inline style opacity: 0', () => {
36+
const compiled = compileToFunctions(
37+
'<div><div><span style="opacity: 0;" class="visible"></span></div></div>'
38+
)
39+
const wrapper = mountingMethod(compiled)
40+
const element = wrapper.find('.visible')
41+
expect(element.isVisible()).toEqual(false)
42+
})
43+
44+
it('returns false if element is inside closed details tag', () => {
45+
const compiled = compileToFunctions(
46+
'<div><details><summary>Summary</summary><span class="visible"></span></details></div>'
47+
)
48+
const wrapper = mountingMethod(compiled)
49+
const element = wrapper.find('.visible')
50+
expect(element.isVisible()).toEqual(false)
51+
})
52+
53+
it('returns true if element is inside opened details tag', () => {
54+
const compiled = compileToFunctions(
55+
'<div><details open><summary>Summary</summary><span class="visible"></span></details></div>'
56+
)
57+
const wrapper = mountingMethod(compiled)
58+
const element = wrapper.find('.visible')
59+
expect(element.isVisible()).toEqual(true)
60+
})
61+
3562
it('returns false if element has hidden attribute', () => {
3663
const compiled = compileToFunctions(
3764
'<div><div><span class="visible" hidden></span></div></div>'

‎test/specs/wrapper/overview.spec.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -127,7 +127,7 @@ describeWithShallowAndMount('overview', mountingMethod => {
127127

128128
const expectedConsoleOutput = [
129129
'',
130-
'Wrapper (Visible):',
130+
'Wrapper (Not visible):',
131131
'',
132132
'Html:',
133133
'',

0 commit comments

Comments
 (0)