blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

test(Popover): update test cases

Browse Source
This commit is contained in:
chenjiahan 2020-11-20 21:19:10 +08:00
parent e0ad5107d7
commit 1c034792ca
4 changed files with 90 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/popover/demo/index.vue
View File

@ -93,7 +93,6 @@
<van-popover
v-model:show="show.customContent"
placement="top-start"
style="margin-left: 16px;"
@select="onSelect"
>
<van-grid

55
src/popover/test/__snapshots__/demo.spec.js.snap
View File

@ -1,29 +1,44 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders demo correctly 1`] = `
<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>
exports[`should render demo and match snapshot 1`] = `
<div><span class="van-popover__wrapper"><!--teleport start--><!--teleport end--><button type="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"><!--teleport start--><!--teleport end--><button type="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 van-cell--clickable van-field" role="button" tabindex="0">
<!---->
<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">
<div class="van-field__body"><input type="text" name="picker" class="van-field__control" readonly="">
<!---->
<!---->
<!---->
</div>
<!---->
<!---->
</div><i class="van-badge__wrapper van-icon van-icon-arrow van-cell__right-icon">
<!---->
<!---->
<!----></i>
<!---->
</div>
<transition-stub>
<!---->
</transition-stub>
<transition-stub>
<!---->
</transition-stub>
</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>
<div><span class="van-popover__wrapper"><!--teleport start--><!--teleport end--><button type="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"><!--teleport start--><!--teleport end--><button type="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"><!--teleport start--><!--teleport end--><button type="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>
`;

26
src/popover/test/__snapshots__/index.spec.js.snap
View File

@ -2,29 +2,47 @@
exports[`should allow to custom the className of action 1`] = `
<div class="van-popover__action foo">
<!---->
<div class="van-popover__action-text van-hairline--bottom">Option</div>
</div>
`;
exports[`should locate to reference element when showed 1`] = `<!---->`;
exports[`should locate to reference element when showed 1`] = `
<!---->
<transition-stub>
<!---->
</transition-stub>
`;
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: 2006;" data-popper-placement="bottom">
<!---->
<transition-stub>
<div style="z-index: 2005; position: absolute; left: 0px; top: 8px; margin: 0px;" class="van-popup van-popover van-popover--light" data-popper-placement="bottom">
<div class="van-popover__arrow"></div>
<div class="van-popover__content"></div>
<!---->
</div>
</transition-stub>
`;
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: 2006; display: none;" data-popper-placement="bottom">
<!---->
<transition-stub>
<div style="z-index: 2005; display: none;" class="van-popup van-popover van-popover--light">
<div class="van-popover__arrow"></div>
<div class="van-popover__content"></div>
<!---->
</div>
</transition-stub>
`;
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: 2007; position: absolute; left: 0px; top: -8px; margin: 0px;" data-popper-placement="top">
<!---->
<transition-stub>
<div style="z-index: 2006; position: absolute; left: 0px; top: -8px; margin: 0px;" class="van-popup van-popover van-popover--light" data-popper-placement="top">
<div class="van-popover__arrow"></div>
<div class="van-popover__content"></div>
<!---->
</div>
</transition-stub>
`;

62
src/popover/test/index.spec.js
View File

@ -7,14 +7,16 @@ const baseActions = [
{ text: 'Option 3' },
];
test('should emit select event when clicking the action', () => {
test('should emit select event when clicking the action', async () => {
const wrapper = mount(Popover, {
propsData: {
value: true,
show: true,
teleport: null,
actions: baseActions,
},
});
await later();
wrapper.find('.van-popover__action').trigger('click');
expect(wrapper.emitted('select')[0]).toEqual([baseActions[0], 0]);
});
@ -22,7 +24,8 @@ test('should emit select event when clicking the action', () => {
test('should not emit select event when the action is disabled', () => {
const wrapper = mount(Popover, {
propsData: {
value: true,
show: true,
teleport: null,
actions: [{ text: 'Option', disabled: true }],
},
});
@ -31,26 +34,28 @@ test('should not emit select event when the action is disabled', () => {
expect(wrapper.emitted('select')).toBeFalsy();
});
test('should close popover when clicking the action', () => {
test('should close popover when clicking the action', async () => {
const wrapper = mount(Popover, {
propsData: {
value: true,
show: true,
teleport: null,
actions: baseActions,
},
});
wrapper.find('.van-popover__action').trigger('click');
expect(wrapper.emitted('input')[0][0]).toEqual(false);
expect(wrapper.emitted('update:show')[0][0]).toEqual(false);
wrapper.setProps({ closeOnClickAction: false });
await wrapper.setProps({ closeOnClickAction: false });
wrapper.find('.van-popover__action').trigger('click');
expect(wrapper.emitted('input').length).toEqual(1);
expect(wrapper.emitted('update:show').length).toEqual(1);
});
test('should allow to custom the className of action', () => {
const wrapper = mount(Popover, {
propsData: {
value: true,
show: true,
teleport: null,
actions: [{ text: 'Option', className: 'foo' }],
},
});
@ -58,40 +63,21 @@ test('should allow to custom the className of action', () => {
expect(wrapper.find('.van-popover__action').html()).toMatchSnapshot();
});
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,
teleport: root,
},
});
expect(root.innerHTML).toMatchSnapshot();
wrapper.setProps({ value: true });
await wrapper.setProps({ show: true });
await later();
expect(root.innerHTML).toMatchSnapshot();
wrapper.setProps({ value: false });
await wrapper.setProps({ show: false });
expect(root.innerHTML).toMatchSnapshot();
});
@ -99,12 +85,12 @@ test('should watch placement prop and update location', async () => {
const root = document.createElement('div');
const wrapper = mount(Popover, {
propsData: {
value: true,
getContainer: () => root,
show: true,
teleport: root,
},
});
wrapper.setProps({
await wrapper.setProps({
placement: 'top',
});
@ -116,16 +102,16 @@ test('should close popover when touch outside content', async () => {
const root = document.createElement('div');
const wrapper = mount(Popover, {
propsData: {
value: true,
getContainer: () => root,
show: true,
teleport: root,
},
});
const popover = root.querySelector('.van-popover');
trigger(popover, 'touchstart');
expect(wrapper.emitted('input')).toBeFalsy();
expect(wrapper.emitted('update:show')).toBeFalsy();
document.body.appendChild(root);
trigger(document.body, 'touchstart');
expect(wrapper.emitted('input')[0][0]).toEqual(false);
expect(wrapper.emitted('update:show')[0][0]).toEqual(false);
});