Skip to content

Commit ed979c8

Browse files
ToilalToilal
committed
feat(visible): Add visible() method on Wrapper (vuejs#327)
1 parent fce6e6e commit ed979c8

File tree

8 files changed

+185
-1
lines changed

8 files changed

+185
-1
lines changed

‎flow/wrapper.flow.js

+1
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ declare interface BaseWrapper { // eslint-disable-line no-undef
1313
emitted(event?: string): { [name: string]: Array<Array<any>> } | Array<Array<any>> | void,
1414
emittedByOrder(): Array<{ name: string; args: Array<any> }> | void,
1515
exists(): boolean,
16+
visible(): boolean,
1617
hasAttribute(attribute: string, value: string): boolean | void,
1718
hasClass(className: string): boolean | void,
1819
hasProp(prop: string, value: string): boolean | void,

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
],
1111
"scripts": {
1212
"build": "node build/build.js",
13-
"build:test": "NODE_ENV=test node build/build.js",
13+
"build:test": "cross-env NODE_ENV=test node build/build.js",
1414
"coverage": "cross-env NODE_ENV=coverage nyc --reporter=lcov --reporter=text npm run test:unit",
1515
"docs": "cd docs && gitbook install && gitbook serve",
1616
"docs:deploy": "build/update-docs.sh",

‎src/wrappers/error-wrapper.js

+4
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,10 @@ export default class ErrorWrapper implements BaseWrapper {
3636
return false
3737
}
3838

39+
visible (): boolean {
40+
return false
41+
}
42+
3943
hasAttribute (): void {
4044
throwError(`find did not return ${this.selector}, cannot call hasAttribute() on empty Wrapper`)
4145
}

‎src/wrappers/wrapper-array.js

+4
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,10 @@ export default class WrapperArray implements BaseWrapper {
4242
return this.length > 0 && this.wrappers.every(wrapper => wrapper.exists())
4343
}
4444

45+
visible (): boolean {
46+
return this.length > 0 && this.wrappers.every(wrapper => wrapper.visible())
47+
}
48+
4549
emitted (): void {
4650
this.throwErrorIfWrappersIsEmpty('emitted')
4751

‎src/wrappers/wrapper.js

+20
Original file line numberDiff line numberDiff line change
@@ -120,6 +120,26 @@ export default class Wrapper implements BaseWrapper {
120120
return true
121121
}
122122

123+
/**
124+
* Utility to check wrapper is visible. Returns false if a parent element has display: none or visibility: hidden style.
125+
*/
126+
visible (): boolean {
127+
let element = this.element
128+
129+
if (!element) {
130+
return false
131+
}
132+
133+
while (element) {
134+
if (element.style && (element.style.visibility === 'hidden' || element.style.display === 'none')) {
135+
return false
136+
}
137+
element = element.parentElement
138+
}
139+
140+
return true
141+
}
142+
123143
/**
124144
* Checks if wrapper has an attribute with matching value
125145
*/

‎test/resources/components/component-with-v-show.vue

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<template>
2+
<div v-show="rootReady">
3+
<div v-show="!ready" class="not-ready">not-ready</div>
4+
5+
<div v-show="ready" class="parent ready">
6+
<div class="child ready">ready</div>
7+
</div>
8+
</div>
9+
</template>
10+
11+
<script>
12+
export default {
13+
name: 'component-with-show',
14+
data: () => ({
15+
ready: false,
16+
rootReady: true
17+
})
18+
}
19+
</script>

‎test/unit/specs/mount/Wrapper/visible.spec.js

+135
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,135 @@
1+
import { compileToFunctions } from 'vue-template-compiler'
2+
import { mount } from '~vue-test-utils'
3+
import ComponentWithVShow from '~resources/components/component-with-v-show.vue'
4+
import ComponentWithVIf from '~resources/components/component-with-v-if.vue'
5+
6+
describe('visible', () => {
7+
it('returns true if element has no inline style', () => {
8+
const compiled = compileToFunctions('<div><div><span class="visible"></span></div></div>')
9+
const wrapper = mount(compiled)
10+
const element = wrapper.find('.visible')
11+
expect(element.visible()).to.equal(true)
12+
})
13+
14+
it('returns false if element has inline style display: none', () => {
15+
const compiled = compileToFunctions('<div><div><span style="display: none;" class="visible"></span></div></div>')
16+
const wrapper = mount(compiled)
17+
const element = wrapper.find('.visible')
18+
expect(element.visible()).to.equal(false)
19+
})
20+
21+
it('returns false if element has inline style visibility: hidden', () => {
22+
const compiled = compileToFunctions('<div><div><span style="visibility: hidden;" class="visible"></span></div></div>')
23+
const wrapper = mount(compiled)
24+
const element = wrapper.find('.visible')
25+
expect(element.visible()).to.equal(false)
26+
})
27+
28+
it('returns true if element has v-show true', () => {
29+
const wrapper = mount(ComponentWithVShow)
30+
wrapper.vm.$set(wrapper.vm, 'ready', true)
31+
wrapper.update()
32+
33+
const notReadyElement = wrapper.find('.not-ready')
34+
expect(notReadyElement.visible()).to.equal(false)
35+
36+
const readyElement = wrapper.find('.parent.ready')
37+
expect(readyElement.visible()).to.equal(true)
38+
})
39+
40+
it('returns false if element has v-show true', () => {
41+
const wrapper = mount(ComponentWithVShow)
42+
wrapper.vm.$set(wrapper.vm, 'ready', true)
43+
wrapper.update()
44+
45+
const notReadyElement = wrapper.find('.not-ready')
46+
expect(notReadyElement.visible()).to.equal(false)
47+
48+
const readyElement = wrapper.find('.parent.ready')
49+
expect(readyElement.visible()).to.equal(true)
50+
})
51+
52+
it('returns true if parent element has v-show true', () => {
53+
const wrapper = mount(ComponentWithVShow)
54+
wrapper.vm.$set(wrapper.vm, 'ready', true)
55+
wrapper.update()
56+
57+
const notReadyElement = wrapper.find('.not-ready')
58+
expect(notReadyElement.visible()).to.equal(false)
59+
60+
const readyChildElement = wrapper.find('.child.ready')
61+
expect(readyChildElement.visible()).to.equal(true)
62+
})
63+
64+
it('returns false if parent element has v-show false', () => {
65+
const wrapper = mount(ComponentWithVShow)
66+
wrapper.vm.$set(wrapper.vm, 'ready', true)
67+
wrapper.update()
68+
69+
const notReadyElement = wrapper.find('.not-ready')
70+
expect(notReadyElement.visible()).to.equal(false)
71+
72+
const readyChildElement = wrapper.find('.child.ready')
73+
expect(readyChildElement.visible()).to.equal(true)
74+
})
75+
76+
it('returns false if root element has v-show false and parent has v-show true', () => {
77+
const wrapper = mount(ComponentWithVShow)
78+
wrapper.vm.$set(wrapper.vm, 'ready', true)
79+
wrapper.vm.$set(wrapper.vm, 'rootReady', false)
80+
wrapper.update()
81+
82+
const notReadyElement = wrapper.find('.not-ready')
83+
expect(notReadyElement.visible()).to.equal(false)
84+
85+
const readyChildElement = wrapper.find('.child.ready')
86+
expect(readyChildElement.visible()).to.equal(false)
87+
})
88+
89+
it('returns false if root element has v-show true and parent has v-show false', () => {
90+
const wrapper = mount(ComponentWithVShow)
91+
wrapper.vm.$set(wrapper.vm, 'ready', false)
92+
wrapper.vm.$set(wrapper.vm, 'rootReady', true)
93+
wrapper.update()
94+
95+
const notReadyElement = wrapper.find('.not-ready')
96+
expect(notReadyElement.visible()).to.equal(true)
97+
98+
const readyChildElement = wrapper.find('.child.ready')
99+
expect(readyChildElement.visible()).to.equal(false)
100+
})
101+
102+
it('returns true if all elements are visible', () => {
103+
const wrapper = mount(ComponentWithVShow)
104+
wrapper.vm.$set(wrapper.vm, 'ready', true)
105+
wrapper.vm.$set(wrapper.vm, 'rootReady', true)
106+
wrapper.update()
107+
108+
const readyChildElement = wrapper.find('.ready')
109+
expect(readyChildElement.visible()).to.equal(true)
110+
})
111+
112+
it('returns false if one element is not visible', () => {
113+
const wrapper = mount(ComponentWithVShow)
114+
wrapper.vm.$set(wrapper.vm, 'ready', true)
115+
wrapper.vm.$set(wrapper.vm, 'rootReady', true)
116+
wrapper.update()
117+
118+
const readyChildElement = wrapper.find('.ready, .not-ready')
119+
expect(readyChildElement.visible()).to.equal(false)
120+
})
121+
122+
it('returns false if one element is absent', () => {
123+
const wrapper = mount(ComponentWithVIf)
124+
wrapper.vm.$set(wrapper.vm, 'ready', false)
125+
wrapper.update()
126+
expect(wrapper.find('.child.ready').visible()).to.equal(false)
127+
})
128+
129+
it('returns true if one element is present', () => {
130+
const wrapper = mount(ComponentWithVIf)
131+
wrapper.vm.$set(wrapper.vm, 'ready', true)
132+
wrapper.update()
133+
expect(wrapper.find('.child.ready').visible()).to.equal(true)
134+
})
135+
})

‎types/index.d.ts

+1
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@ type RefSelector = {
4545
interface BaseWrapper {
4646
contains (selector: Selector): boolean
4747
exists (): boolean
48+
visible (): boolean
4849

4950
attributes(): { [name: string]: string } | void
5051
classes(): Array<string> | void

0 commit comments

Comments
 (0)