mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
test(Popover): update test cases
This commit is contained in:
chenjiahan
parent
e0ad5107d7
commit
1c034792ca
@ -93,7 +93,6 @@
|
||||
<van-popover
|
||||
v-model:show="show.customContent"
|
||||
placement="top-start"
|
||||
style="margin-left: 16px;"
|
||||
@select="onSelect"
|
||||
>
|
||||
<van-grid
|
||||
|
||||
@ -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>
|
||||
`;
|
||||
|
||||
@ -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">
|
||||
<div class="van-popover__arrow"></div>
|
||||
<div class="van-popover__content"></div>
|
||||
</div>
|
||||
<!---->
|
||||
<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">
|
||||
<div class="van-popover__arrow"></div>
|
||||
<div class="van-popover__content"></div>
|
||||
</div>
|
||||
<!---->
|
||||
<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">
|
||||
<div class="van-popover__arrow"></div>
|
||||
<div class="van-popover__content"></div>
|
||||
</div>
|
||||
<!---->
|
||||
<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>
|
||||
`;
|
||||
|
||||
@ -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);
|
||||
});
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user