-
Notifications
You must be signed in to change notification settings - Fork 233
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #212 from vuejs/issue-210-is-visible
Add isVisible and stub transition/transition-group by default
- Loading branch information
Showing
8 changed files
with
262 additions
and
10 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,36 @@ | ||
/*! | ||
* isElementVisible | ||
* Adapted from https://github.com/testing-library/jest-dom | ||
* Licensed under the MIT License. | ||
*/ | ||
|
||
function isStyleVisible<T extends Element>(element: T) { | ||
if (!(element instanceof HTMLElement) && !(element instanceof SVGElement)) { | ||
return false | ||
} | ||
|
||
const { display, visibility, opacity } = element.style | ||
|
||
return ( | ||
display !== 'none' && | ||
visibility !== 'hidden' && | ||
visibility !== 'collapse' && | ||
opacity !== '0' | ||
) | ||
} | ||
|
||
function isAttributeVisible<T extends Element>(element: T) { | ||
return ( | ||
!element.hasAttribute('hidden') && | ||
(element.nodeName === 'DETAILS' ? element.hasAttribute('open') : true) | ||
) | ||
} | ||
|
||
export function isElementVisible<T extends Element>(element: T) { | ||
return ( | ||
element.nodeName !== '#comment' && | ||
isStyleVisible(element) && | ||
isAttributeVisible(element) && | ||
(!element.parentElement || isElementVisible(element.parentElement)) | ||
) | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,118 @@ | ||
import { mount } from '../src' | ||
|
||
describe('isVisible', () => { | ||
const Comp = { | ||
template: `<div><span v-show="show" /></div>`, | ||
props: { | ||
show: { | ||
type: Boolean | ||
} | ||
} | ||
} | ||
|
||
it('returns false when element hidden via v-show', () => { | ||
const wrapper = mount(Comp, { | ||
props: { | ||
show: false | ||
} | ||
}) | ||
|
||
expect(wrapper.find('span').isVisible()).toBe(false) | ||
}) | ||
|
||
it('returns true when element is visible via v-show', () => { | ||
const wrapper = mount(Comp, { | ||
props: { | ||
show: true | ||
} | ||
}) | ||
|
||
expect(wrapper.find('span').isVisible()).toBe(true) | ||
}) | ||
|
||
it('returns false when element parent is invisible via v-show', () => { | ||
const Comp = { | ||
template: `<div v-show="false"><span /></div>` | ||
} | ||
const wrapper = mount(Comp) | ||
|
||
expect(wrapper.find('span').isVisible()).toBe(false) | ||
}) | ||
|
||
it('element becomes hidden reactively', async () => { | ||
const Comp = { | ||
template: `<button @click="show = false" /><span v-show="show" />`, | ||
data() { | ||
return { | ||
show: true | ||
} | ||
} | ||
} | ||
const wrapper = mount(Comp) | ||
|
||
expect(wrapper.find('span').isVisible()).toBe(true) | ||
await wrapper.find('button').trigger('click') | ||
expect(wrapper.find('span').isVisible()).toBe(false) | ||
}) | ||
|
||
it('handles transitions', async () => { | ||
const Comp = { | ||
template: ` | ||
<button @click="show = false" /> | ||
<transition name="fade"> | ||
<span class="item" v-show="show"> | ||
Content | ||
</span> | ||
</transition> | ||
`, | ||
data() { | ||
return { | ||
show: true | ||
} | ||
} | ||
} | ||
const wrapper = mount(Comp, {}) | ||
|
||
expect(wrapper.find('span').isVisible()).toBe(true) | ||
await wrapper.find('button').trigger('click') | ||
expect(wrapper.find('span').isVisible()).toBe(false) | ||
}) | ||
|
||
it('handles transition-group', async () => { | ||
const Comp = { | ||
template: ` | ||
<div id="list-demo"> | ||
<button @click="add" id="add">Add</button> | ||
<button @click="remove" id="remove">Remove</button> | ||
<transition-group name="list" tag="p"> | ||
<span v-for="item in items" :key="item" class="list-item"> | ||
Item: {{ item }} | ||
</span> | ||
</transition-group> | ||
</div> | ||
`, | ||
methods: { | ||
add() { | ||
this.items.push(2) | ||
}, | ||
remove() { | ||
this.items.splice(1) // back to [1] | ||
} | ||
}, | ||
data() { | ||
return { | ||
items: [1] | ||
} | ||
} | ||
} | ||
const wrapper = mount(Comp) | ||
|
||
expect(wrapper.html()).toContain('Item: 1') | ||
await wrapper.find('#add').trigger('click') | ||
expect(wrapper.html()).toContain('Item: 1') | ||
expect(wrapper.html()).toContain('Item: 2') | ||
await wrapper.find('#remove').trigger('click') | ||
expect(wrapper.html()).toContain('Item: 1') | ||
expect(wrapper.html()).not.toContain('Item: 2') | ||
}) | ||
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters