From 2600f64a8522e13564eea653fe8d782411f840fd Mon Sep 17 00:00:00 2001 From: Illya Klymov Date: Tue, 1 Sep 2020 23:56:36 +0300 Subject: [PATCH] feat: remove deprecation warning from `isVisible` method update `isVisible` logic to match implementation in `jest-dom` --- docs/api/wrapper-array/isVisible.md | 2 +- docs/api/wrapper/isVisible.md | 10 +------- docs/ja/api/wrapper/isVisible.md | 8 ------ docs/ru/api/wrapper-array/isVisible.md | 6 ++--- docs/ru/api/wrapper/isVisible.md | 6 ++--- docs/upgrading-to-v1/README.md | 23 +++-------------- docs/zh/api/wrapper/isVisible.md | 8 ------ packages/shared/index.js | 1 + packages/shared/is-visible.js | 34 ++++++++++++++++++++++++++ packages/test-utils/src/wrapper.js | 24 ++---------------- test/specs/wrapper/isVisible.spec.js | 27 ++++++++++++++++++++ test/specs/wrapper/overview.spec.js | 2 +- 12 files changed, 77 insertions(+), 74 deletions(-) create mode 100644 packages/shared/is-visible.js diff --git a/docs/api/wrapper-array/isVisible.md b/docs/api/wrapper-array/isVisible.md index 90080cfff..0fb131d8e 100644 --- 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 `
` 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 index 28a55582d..4e2ced422 100644 --- 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 `
` 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 index 2c9577b09..22a15a5ed 100644 --- 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 index 780200799..4fda02623 100644 --- 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` или находится в свёрнутом элементе `
`. -Это можно использовать для утверждения, что компонент скрыт с помощью `v-show`. +Это можно использовать для проверки, что компонент скрыт с помощью `v-show`. - **Возвращает:** `{boolean}` diff --git a/docs/ru/api/wrapper/isVisible.md b/docs/ru/api/wrapper/isVisible.md index f76b445aa..f12353e23 100644 --- 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` или находится в свёрнутом элементе `
`. -Это можно использовать для утверждения, что компонент скрыт с помощью `v-show`. +Это можно использовать для проверки, что компонент скрыт с помощью `v-show`. - **Возвращает:** `{boolean}` diff --git a/docs/upgrading-to-v1/README.md b/docs/upgrading-to-v1/README.md index 9eb3d957f..01663bcae 100644 --- 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. @@ -69,8 +54,8 @@ const Foo = { methods: { getData() { axios.get('...') - } - } + }, + }, } ``` @@ -79,8 +64,8 @@ Instead of doing: ```js mount(Foo, { methods: { - getData: () => {} - } + getData: () => {}, + }, }) ``` diff --git a/docs/zh/api/wrapper/isVisible.md b/docs/zh/api/wrapper/isVisible.md index f572e073e..11ff01c5b 100644 --- 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 index 4e2443b21..874f38743 100644 --- 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 new file mode 100644 index 000000000..3f9030151 --- /dev/null +++ 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 index e7f159862..a7f5a6e70 100644 --- 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' @@ -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) } /** diff --git a/test/specs/wrapper/isVisible.spec.js b/test/specs/wrapper/isVisible.spec.js index fee2290fc..9c6b0478d 100644 --- 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( + '
' + ) + 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( + '
Summary
' + ) + 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( + '
Summary
' + ) + 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( '
' diff --git a/test/specs/wrapper/overview.spec.js b/test/specs/wrapper/overview.spec.js index 60fa00b3f..20efc9bad 100644 --- 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:', '',