mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
test(Popover): add test cases
This commit is contained in:
chenjiahan
neverland
parent
1999195c46
commit
99b52726b6
@ -13,6 +13,7 @@ import Popup from '../popup';
|
||||
|
||||
// add Object.assign polyfill for popper.js
|
||||
// see: https://popper.js.org/docs/v2/browser-support/
|
||||
/* istanbul ignore if */
|
||||
if (!Object.assign) {
|
||||
Object.assign = extendsHelper;
|
||||
}
|
||||
@ -59,19 +60,12 @@ export default createComponent({
|
||||
},
|
||||
|
||||
watch: {
|
||||
value: 'updateLocation',
|
||||
placement: 'updateLocation',
|
||||
|
||||
value(value) {
|
||||
if (value) {
|
||||
this.updateLocation();
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
mounted() {
|
||||
if (this.value) {
|
||||
this.updateLocation();
|
||||
}
|
||||
this.updateLocation();
|
||||
},
|
||||
|
||||
beforeDestroy() {
|
||||
@ -161,6 +155,7 @@ export default createComponent({
|
||||
this.$emit('open');
|
||||
},
|
||||
|
||||
/* istanbul ignore next */
|
||||
onOpened() {
|
||||
this.$emit('opened');
|
||||
},
|
||||
@ -169,6 +164,7 @@ export default createComponent({
|
||||
this.$emit('close');
|
||||
},
|
||||
|
||||
/* istanbul ignore next */
|
||||
onClosed() {
|
||||
this.$emit('closed');
|
||||
},
|
||||
|
||||
@ -2,57 +2,28 @@
|
||||
|
||||
exports[`renders demo correctly 1`] = `
|
||||
<div>
|
||||
<div>
|
||||
<div class="van-row">
|
||||
<div class="van-col van-col--8">span: 8</div>
|
||||
<div class="van-col van-col--8">span: 8</div>
|
||||
<div class="van-col van-col--8">span: 8</div>
|
||||
</div>
|
||||
<div class="van-row">
|
||||
<div class="van-col van-col--4">span: 4</div>
|
||||
<div class="van-col van-col--10 van-col--offset-4">
|
||||
offset: 4, span: 10
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-row">
|
||||
<div class="van-col van-col--12 van-col--offset-12">
|
||||
offset: 12, span: 12
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-row">
|
||||
<div class="van-col van-col--8" style="padding-right: 13.333333333333334px;">span: 8</div>
|
||||
<div class="van-col van-col--8" style="padding-left: 6.666666666666666px; padding-right: 6.666666666666668px;">span: 8</div>
|
||||
<div class="van-col van-col--8" style="padding-left: 13.333333333333332px;">span: 8</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-row van-row--flex">
|
||||
<div class="van-col van-col--6">span: 6</div>
|
||||
<div class="van-col van-col--6">span: 6</div>
|
||||
<div class="van-col van-col--6">span: 6</div>
|
||||
</div>
|
||||
<div class="van-row van-row--flex van-row--justify-center">
|
||||
<div class="van-col van-col--6">span: 6</div>
|
||||
<div class="van-col van-col--6">span: 6</div>
|
||||
<div class="van-col van-col--6">span: 6</div>
|
||||
</div>
|
||||
<div class="van-row van-row--flex van-row--justify-end">
|
||||
<div class="van-col van-col--6">span: 6</div>
|
||||
<div class="van-col van-col--6">span: 6</div>
|
||||
<div class="van-col van-col--6">span: 6</div>
|
||||
</div>
|
||||
<div class="van-row van-row--flex van-row--justify-space-between">
|
||||
<div class="van-col van-col--6">span: 6</div>
|
||||
<div class="van-col van-col--6">span: 6</div>
|
||||
<div class="van-col van-col--6">span: 6</div>
|
||||
</div>
|
||||
<div class="van-row van-row--flex van-row--justify-space-around">
|
||||
<div class="van-col van-col--6">span: 6</div>
|
||||
<div class="van-col van-col--6">span: 6</div>
|
||||
<div class="van-col van-col--6">span: 6</div>
|
||||
</div>
|
||||
<div><span class="van-popover__wrapper" style="margin-left: 16px;"><button class="van-button van-button--primary van-button--normal"><div class="van-button__content"><span class="van-button__text">
|
||||
浅色风格
|
||||
</span></div></button></span> <span class="van-popover__wrapper" style="margin-left: 16px;"><button class="van-button van-button--primary van-button--normal"><div class="van-button__content"><span class="van-button__text">
|
||||
深色风格
|
||||
</span>
|
||||
</div></button></span></div>
|
||||
<div>
|
||||
<div role="button" tabindex="0" class="van-cell van-cell--clickable van-field">
|
||||
<div class="van-cell__title van-field__label"><span>选择弹出位置</span></div>
|
||||
<div class="van-cell__value van-field__value">
|
||||
<div class="van-field__body"><input type="text" name="picker" readonly="readonly" class="van-field__control"></div>
|
||||
</div><i class="van-icon van-icon-arrow van-cell__right-icon">
|
||||
<!----></i>
|
||||
</div>
|
||||
</div>
|
||||
<div><span class="van-popover__wrapper" style="margin-left: 16px;"><button class="van-button van-button--primary van-button--normal"><div class="van-button__content"><span class="van-button__text">
|
||||
展示图标
|
||||
</span></div></button></span> <span class="van-popover__wrapper" style="margin-left: 16px;"><button class="van-button van-button--primary van-button--normal"><div class="van-button__content"><span class="van-button__text">
|
||||
禁用选项
|
||||
</span></div></button></span></div>
|
||||
<div><span class="van-popover__wrapper" style="margin-left: 16px;"><button class="van-button van-button--primary van-button--normal"><div class="van-button__content"><span class="van-button__text">
|
||||
自定义内容
|
||||
</span></div></button></span></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -1,22 +1,24 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`gutter prop 1`] = `
|
||||
<div class="van-row">
|
||||
<div class="van-col van-col--24">24</div>
|
||||
<div class="van-col van-col--12" style="padding-right: 12px;">12</div>
|
||||
<div class="van-col van-col--12" style="padding-left: 12px;">12</div>
|
||||
<div class="van-col van-col--8" style="padding-right: 16px;">8</div>
|
||||
<div class="van-col van-col--8" style="padding-left: 8px; padding-right: 8px;">8</div>
|
||||
<div class="van-col van-col--8" style="padding-left: 16px;">8</div>
|
||||
<div class="van-col van-col--6" style="padding-right: 18px;">6</div>
|
||||
<div class="van-col van-col--6" style="padding-left: 6px; padding-right: 12px;">6</div>
|
||||
<div class="van-col van-col--6" style="padding-left: 12px; padding-right: 6px;">6</div>
|
||||
<div class="van-col van-col--6" style="padding-left: 18px;">6</div>
|
||||
<div class="van-col van-col--7" style="padding-right: 18px;">7</div>
|
||||
<div class="van-col van-col--6" style="padding-left: 6px; padding-right: 12px;">6</div>
|
||||
<div class="van-col van-col--5" style="padding-left: 12px; padding-right: 6px;">5</div>
|
||||
<div class="van-col van-col--4" style="padding-left: 18px;">4</div>
|
||||
<div class="van-col van-col--3" style="padding-right: 12px;">3</div>
|
||||
<div class="van-col van-col--2" style="padding-left: 12px;">2</div>
|
||||
exports[`should locate to reference element when showed 1`] = `<!---->`;
|
||||
|
||||
exports[`should locate to reference element when showed 2`] = `
|
||||
<div class="van-popup van-popover van-popover--light" name="van-popover-zoom" style="position: absolute; left: 0px; top: 8px; margin: 0px; z-index: 2005;" data-popper-placement="bottom">
|
||||
<div class="van-popover__arrow"></div>
|
||||
<div class="van-popover__content"></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`should locate to reference element when showed 3`] = `
|
||||
<div class="van-popup van-popover van-popover--light" name="van-popover-zoom" style="position: absolute; left: 0px; top: 8px; margin: 0px; z-index: 2005; display: none;" data-popper-placement="bottom">
|
||||
<div class="van-popover__arrow"></div>
|
||||
<div class="van-popover__content"></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`should watch placement prop and update location 1`] = `
|
||||
<div class="van-popup van-popover van-popover--light" name="van-popover-zoom" style="z-index: 2006; position: absolute; left: 0px; top: -8px; margin: 0px;" data-popper-placement="top">
|
||||
<div class="van-popover__arrow"></div>
|
||||
<div class="van-popover__content"></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -1,2 +1,120 @@
|
||||
// import Popover from '..';
|
||||
// import { mount } from '../../../test';
|
||||
import Popover from '..';
|
||||
import { later, mount, trigger } from '../../../test';
|
||||
|
||||
const baseActions = [
|
||||
{ text: 'Option 1' },
|
||||
{ text: 'Option 2' },
|
||||
{ text: 'Option 3' },
|
||||
];
|
||||
|
||||
test('should emit select event when clicking the action', () => {
|
||||
const wrapper = mount(Popover, {
|
||||
propsData: {
|
||||
value: true,
|
||||
actions: baseActions,
|
||||
},
|
||||
});
|
||||
|
||||
wrapper.find('.van-popover__action').trigger('click');
|
||||
expect(wrapper.emitted('select')[0]).toEqual([baseActions[0], 0]);
|
||||
});
|
||||
|
||||
test('should not emit select event when the action is disabled', () => {
|
||||
const wrapper = mount(Popover, {
|
||||
propsData: {
|
||||
value: true,
|
||||
actions: [{ text: 'Option', disabled: true }],
|
||||
},
|
||||
});
|
||||
|
||||
wrapper.find('.van-popover__action').trigger('click');
|
||||
expect(wrapper.emitted('select')).toBeFalsy();
|
||||
});
|
||||
|
||||
test('should close popover when clicking the action', () => {
|
||||
const wrapper = mount(Popover, {
|
||||
propsData: {
|
||||
value: true,
|
||||
actions: baseActions,
|
||||
},
|
||||
});
|
||||
|
||||
wrapper.find('.van-popover__action').trigger('click');
|
||||
expect(wrapper.emitted('input')[0][0]).toEqual(false);
|
||||
|
||||
wrapper.setProps({ closeOnClickAction: false });
|
||||
wrapper.find('.van-popover__action').trigger('click');
|
||||
expect(wrapper.emitted('input').length).toEqual(1);
|
||||
});
|
||||
|
||||
test('should not init popper.js instance before showed', async () => {
|
||||
const wrapper = mount(Popover);
|
||||
expect(wrapper.vm.popper).toBeFalsy();
|
||||
wrapper.destroy();
|
||||
});
|
||||
|
||||
test('should destroy popper.js instance when unmouted', async () => {
|
||||
const wrapper = mount(Popover, {
|
||||
propsData: {
|
||||
value: true,
|
||||
},
|
||||
});
|
||||
|
||||
await later();
|
||||
expect(wrapper.vm.popper).toBeTruthy();
|
||||
wrapper.destroy();
|
||||
expect(wrapper.vm.popper).toEqual(null);
|
||||
});
|
||||
|
||||
test('should locate to reference element when showed', async () => {
|
||||
const root = document.createElement('div');
|
||||
const wrapper = mount(Popover, {
|
||||
propsData: {
|
||||
getContainer: () => root,
|
||||
},
|
||||
});
|
||||
|
||||
expect(root.innerHTML).toMatchSnapshot();
|
||||
|
||||
wrapper.setProps({ value: true });
|
||||
await later();
|
||||
expect(root.innerHTML).toMatchSnapshot();
|
||||
|
||||
wrapper.setProps({ value: false });
|
||||
expect(root.innerHTML).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('should watch placement prop and update location', async () => {
|
||||
const root = document.createElement('div');
|
||||
const wrapper = mount(Popover, {
|
||||
propsData: {
|
||||
value: true,
|
||||
getContainer: () => root,
|
||||
},
|
||||
});
|
||||
|
||||
wrapper.setProps({
|
||||
placement: 'top',
|
||||
});
|
||||
|
||||
await later();
|
||||
expect(root.innerHTML).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('should close popover when touch outside content', async () => {
|
||||
const root = document.createElement('div');
|
||||
const wrapper = mount(Popover, {
|
||||
propsData: {
|
||||
value: true,
|
||||
getContainer: () => root,
|
||||
},
|
||||
});
|
||||
|
||||
const popover = root.querySelector('.van-popover');
|
||||
trigger(popover, 'touchstart');
|
||||
expect(wrapper.emitted('input')).toBeFalsy();
|
||||
|
||||
document.body.appendChild(root);
|
||||
trigger(document.body, 'touchstart');
|
||||
expect(wrapper.emitted('input')[0][0]).toEqual(false);
|
||||
});
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user