mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
test(Popup): update test cases
This commit is contained in:
chenjiahan
parent
eed972d99a
commit
a0f18e1e57
@ -1,14 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`close-icon prop 1`] = `
|
||||
<div class="van-popup van-popup--center" name="van-fade"><i role="button" tabindex="0" class="van-icon van-icon-success van-popup__close-icon van-popup__close-icon--top-right">
|
||||
<!----></i></div>
|
||||
`;
|
||||
|
||||
exports[`duration prop when position is center 1`] = `<div class="van-popup van-popup--center" style="animation-duration: 0.5s;" name="van-fade"></div>`;
|
||||
|
||||
exports[`duration prop when position is top 1`] = `<div class="van-popup van-popup--top" style="transition-duration: 0.5s;" name="van-popup-slide-top"></div>`;
|
||||
|
||||
exports[`reset z-index 1`] = `<div class="van-popup van-popup--center" name="van-fade"></div>`;
|
||||
|
||||
exports[`round prop 1`] = `<div class="van-popup van-popup--round van-popup--center" name="van-fade"></div>`;
|
||||
9
src/popup/test/__snapshots__/index.spec.js.snap
Normal file
9
src/popup/test/__snapshots__/index.spec.js.snap
Normal file
@ -0,0 +1,9 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`should render correct close icon when using close-icon prop 1`] = `
|
||||
<i class="van-badge__wrapper van-icon van-icon-success van-popup__close-icon van-popup__close-icon--top-right"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
</i>
|
||||
`;
|
||||
@ -1,277 +0,0 @@
|
||||
import Popup from '..';
|
||||
import { mount, triggerDrag, later } from '../../../test';
|
||||
|
||||
let wrapper;
|
||||
afterEach(() => {
|
||||
wrapper.unmount();
|
||||
});
|
||||
|
||||
test('lazy render', () => {
|
||||
wrapper = mount(Popup);
|
||||
expect(wrapper.vm.$el.tagName).toBeFalsy();
|
||||
wrapper.vm.value = true;
|
||||
expect(wrapper.vm.$el.tagName).toBeTruthy();
|
||||
});
|
||||
|
||||
test('reset z-index', () => {
|
||||
wrapper = mount(Popup, {
|
||||
props: {
|
||||
value: true,
|
||||
zIndex: 10,
|
||||
lockScroll: false,
|
||||
},
|
||||
});
|
||||
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('popup lock scroll', () => {
|
||||
const wrapper1 = mount(Popup, {
|
||||
props: {
|
||||
value: true,
|
||||
},
|
||||
});
|
||||
expect(document.body.classList.contains('van-overflow-hidden')).toBeTruthy();
|
||||
triggerDrag(document, 0, 100);
|
||||
triggerDrag(document, 0, -150);
|
||||
|
||||
const wrapper2 = mount(Popup, {
|
||||
props: {
|
||||
value: true,
|
||||
},
|
||||
});
|
||||
wrapper1.vm.$unmount();
|
||||
expect(document.body.classList.contains('van-overflow-hidden')).toBeTruthy();
|
||||
|
||||
wrapper2.vm.$unmount();
|
||||
expect(document.body.classList.contains('van-overflow-hidden')).toBeFalsy();
|
||||
});
|
||||
|
||||
test('get container with parent', () => {
|
||||
const div1 = document.createElement('div');
|
||||
const div2 = document.createElement('div');
|
||||
wrapper = mount({
|
||||
template: `
|
||||
<div>
|
||||
<popup :value="true" :teleport="teleport" />
|
||||
</div>
|
||||
`,
|
||||
components: {
|
||||
Popup,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
teleport: div1,
|
||||
};
|
||||
},
|
||||
});
|
||||
const popup = wrapper.find('.van-popup').element;
|
||||
|
||||
expect(popup.parentNode).toEqual(div1);
|
||||
wrapper.vm.teleport = () => div2;
|
||||
expect(popup.parentNode).toEqual(div2);
|
||||
wrapper.vm.teleport = null;
|
||||
expect(popup.parentNode).toEqual(wrapper.element);
|
||||
});
|
||||
|
||||
test('get container with selector', () => {
|
||||
wrapper = mount({
|
||||
template: `
|
||||
<div>
|
||||
<popup class="teleport-selector-1" :value="true" teleport="body"></popup>
|
||||
<popup class="teleport-selector-2" :value="true" teleport="unknown"></popup>
|
||||
</div>
|
||||
`,
|
||||
components: {
|
||||
Popup,
|
||||
},
|
||||
});
|
||||
|
||||
const dom1 = document.querySelector('.teleport-selector-1');
|
||||
const dom2 = wrapper.vm.$el.querySelector('.teleport-selector-2');
|
||||
|
||||
expect(dom1.parentNode).toEqual(document.body);
|
||||
expect(dom2.parentNode).toEqual(wrapper.vm.$el);
|
||||
});
|
||||
|
||||
test('render overlay', async () => {
|
||||
const div = document.createElement('div');
|
||||
wrapper = mount({
|
||||
template: `
|
||||
<div>
|
||||
<popup :value="true" :teleport="teleport" />
|
||||
</div>
|
||||
`,
|
||||
components: {
|
||||
Popup,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
teleport: () => div,
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
await later();
|
||||
|
||||
expect(div.querySelector('.van-overlay')).toBeTruthy();
|
||||
});
|
||||
|
||||
test('watch overlay prop', async () => {
|
||||
const div = document.createElement('div');
|
||||
wrapper = mount({
|
||||
template: `
|
||||
<div>
|
||||
<popup :value="show" :overlay="overlay" :teleport="teleport" />
|
||||
</div>
|
||||
`,
|
||||
components: {
|
||||
Popup,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
overlay: false,
|
||||
teleport: () => div,
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
await later();
|
||||
expect(div.querySelector('.van-overlay')).toBeFalsy();
|
||||
|
||||
wrapper.setData({ overlay: true });
|
||||
await later();
|
||||
expect(div.querySelector('.van-overlay')).toBeFalsy();
|
||||
|
||||
wrapper.setData({ show: true });
|
||||
await later();
|
||||
expect(div.querySelector('.van-overlay')).toBeTruthy();
|
||||
});
|
||||
|
||||
test('close on click overlay', async () => {
|
||||
const div = document.createElement('div');
|
||||
const onClickOverlay = jest.fn();
|
||||
|
||||
wrapper = mount({
|
||||
template: `
|
||||
<div>
|
||||
<popup
|
||||
v-model="value"
|
||||
:teleport="teleport"
|
||||
@click-overlay="onClickOverlay"
|
||||
/>
|
||||
</div>
|
||||
`,
|
||||
components: {
|
||||
Popup,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value: true,
|
||||
teleport: () => div,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onClickOverlay,
|
||||
},
|
||||
});
|
||||
|
||||
await later();
|
||||
|
||||
const modal = div.querySelector('.van-overlay');
|
||||
triggerDrag(modal, 0, -30);
|
||||
modal.click();
|
||||
|
||||
expect(wrapper.vm.value).toBeFalsy();
|
||||
expect(onClickOverlay).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
test('open & close event', () => {
|
||||
const wrapper = mount(Popup);
|
||||
wrapper.vm.value = true;
|
||||
expect(wrapper.emitted('open')).toBeTruthy();
|
||||
wrapper.vm.value = false;
|
||||
expect(wrapper.emitted('close')).toBeTruthy();
|
||||
});
|
||||
|
||||
test('click event', () => {
|
||||
const wrapper = mount(Popup, {
|
||||
props: {
|
||||
value: true,
|
||||
},
|
||||
});
|
||||
|
||||
wrapper.trigger('click');
|
||||
expect(wrapper.emitted('click')).toBeTruthy();
|
||||
});
|
||||
|
||||
test('duration prop when position is center', () => {
|
||||
const wrapper = mount(Popup, {
|
||||
props: {
|
||||
value: true,
|
||||
duration: 0.5,
|
||||
},
|
||||
});
|
||||
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('duration prop when position is top', () => {
|
||||
const wrapper = mount(Popup, {
|
||||
props: {
|
||||
value: true,
|
||||
duration: 0.5,
|
||||
position: 'top',
|
||||
},
|
||||
});
|
||||
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('round prop', () => {
|
||||
const wrapper = mount(Popup, {
|
||||
props: {
|
||||
value: true,
|
||||
round: true,
|
||||
},
|
||||
});
|
||||
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('closeable prop', () => {
|
||||
const wrapper = mount(Popup, {
|
||||
props: {
|
||||
value: true,
|
||||
closeable: true,
|
||||
},
|
||||
});
|
||||
|
||||
wrapper.find('.van-popup__close-icon').trigger('click');
|
||||
expect(wrapper.emitted('input')[0][0]).toEqual(false);
|
||||
});
|
||||
|
||||
test('should emit click-close-icon event when close icon is clicked', () => {
|
||||
const wrapper = mount(Popup, {
|
||||
propsData: {
|
||||
value: true,
|
||||
closeable: true,
|
||||
},
|
||||
});
|
||||
|
||||
wrapper.find('.van-popup__close-icon').trigger('click');
|
||||
expect(wrapper.emitted('click-close-icon').length).toEqual(1);
|
||||
});
|
||||
|
||||
test('close-icon prop', () => {
|
||||
const wrapper = mount(Popup, {
|
||||
props: {
|
||||
value: true,
|
||||
closeable: true,
|
||||
closeIcon: 'success',
|
||||
},
|
||||
});
|
||||
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
191
src/popup/test/index.spec.js
Normal file
191
src/popup/test/index.spec.js
Normal file
@ -0,0 +1,191 @@
|
||||
import { nextTick } from 'vue';
|
||||
import { mount, triggerDrag } from '../../../test';
|
||||
import Popup from '..';
|
||||
|
||||
let wrapper;
|
||||
afterEach(() => {
|
||||
wrapper.unmount();
|
||||
});
|
||||
|
||||
test('should lazy render content by default', async () => {
|
||||
wrapper = mount(Popup, {
|
||||
slots: {
|
||||
default: () => <div class="foo" />,
|
||||
},
|
||||
});
|
||||
|
||||
expect(wrapper.find('.foo').exists()).toBeFalsy();
|
||||
|
||||
await wrapper.setProps({ show: true });
|
||||
expect(wrapper.find('.foo').exists()).toBeTruthy();
|
||||
});
|
||||
|
||||
test('should change z-index when using z-index prop', async () => {
|
||||
wrapper = mount(Popup, {
|
||||
props: {
|
||||
show: true,
|
||||
zIndex: 10,
|
||||
},
|
||||
});
|
||||
|
||||
await nextTick();
|
||||
expect(wrapper.find('.van-popup').element.style.zIndex).toEqual('11');
|
||||
expect(wrapper.find('.van-overlay').element.style.zIndex).toEqual('11');
|
||||
});
|
||||
|
||||
test('should lock scroll when showed', async () => {
|
||||
wrapper = mount(Popup);
|
||||
expect(document.body.classList.contains('van-overflow-hidden')).toBeFalsy();
|
||||
|
||||
await wrapper.setProps({ show: true });
|
||||
expect(document.body.classList.contains('van-overflow-hidden')).toBeTruthy();
|
||||
});
|
||||
|
||||
test('should lock page scroll by default', () => {
|
||||
const wrapper1 = mount(Popup, {
|
||||
props: {
|
||||
show: true,
|
||||
},
|
||||
});
|
||||
expect(document.body.classList.contains('van-overflow-hidden')).toBeTruthy();
|
||||
triggerDrag(document, 0, 100);
|
||||
triggerDrag(document, 0, -150);
|
||||
|
||||
const wrapper2 = mount(Popup, {
|
||||
props: {
|
||||
show: true,
|
||||
},
|
||||
});
|
||||
wrapper1.unmount();
|
||||
expect(document.body.classList.contains('van-overflow-hidden')).toBeTruthy();
|
||||
|
||||
wrapper2.unmount();
|
||||
expect(document.body.classList.contains('van-overflow-hidden')).toBeFalsy();
|
||||
});
|
||||
|
||||
test('should allow to using teleport prop', async () => {
|
||||
const div = document.createElement('div');
|
||||
mount({
|
||||
render() {
|
||||
return <Popup show teleport={div} />;
|
||||
},
|
||||
});
|
||||
|
||||
expect(div.querySelector('.van-popup')).toBeTruthy();
|
||||
});
|
||||
|
||||
test('should render overlay by default', () => {
|
||||
wrapper = mount(Popup, {
|
||||
props: {
|
||||
show: true,
|
||||
},
|
||||
});
|
||||
expect(wrapper.find('.van-overlay').exists()).toBeTruthy();
|
||||
});
|
||||
|
||||
test('should not render overlay when overlay prop is false', () => {
|
||||
wrapper = mount(Popup, {
|
||||
props: {
|
||||
show: true,
|
||||
overlay: false,
|
||||
},
|
||||
});
|
||||
expect(wrapper.find('.van-overlay').exists()).toBeFalsy();
|
||||
});
|
||||
|
||||
test('should emit click-overlay event when overlay is clicked', async () => {
|
||||
wrapper = mount(Popup, {
|
||||
props: {
|
||||
show: true,
|
||||
},
|
||||
});
|
||||
const overlay = wrapper.find('.van-overlay');
|
||||
overlay.trigger('click');
|
||||
expect(wrapper.emitted('click-overlay').length).toEqual(1);
|
||||
});
|
||||
|
||||
test('should emit open event when show prop is set to true', async () => {
|
||||
const onOpen = jest.fn();
|
||||
wrapper = mount(Popup, {
|
||||
props: {
|
||||
onOpen,
|
||||
},
|
||||
});
|
||||
|
||||
await wrapper.setProps({ show: true });
|
||||
expect(onOpen).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
test('should emit close event when show prop is set to false', async () => {
|
||||
const onClose = jest.fn();
|
||||
wrapper = mount(Popup, {
|
||||
props: {
|
||||
show: true,
|
||||
onClose,
|
||||
},
|
||||
});
|
||||
|
||||
await wrapper.setProps({ show: false });
|
||||
expect(onClose).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
test('should change duration when using duration prop', () => {
|
||||
wrapper = mount(Popup, {
|
||||
props: {
|
||||
show: true,
|
||||
duration: 0.5,
|
||||
},
|
||||
});
|
||||
|
||||
const popup = wrapper.find('.van-popup').element;
|
||||
const overlay = wrapper.find('.van-overlay').element;
|
||||
expect(popup.style.animationDuration).toEqual('0.5s');
|
||||
expect(overlay.style.animationDuration).toEqual('0.5s');
|
||||
});
|
||||
|
||||
test('should have "van-popup--round" class when setting the round prop', () => {
|
||||
wrapper = mount(Popup, {
|
||||
props: {
|
||||
show: true,
|
||||
round: true,
|
||||
},
|
||||
});
|
||||
|
||||
expect(wrapper.find('.van-popup--round').exists()).toBeTruthy();
|
||||
});
|
||||
|
||||
test('should render close icon when using closeable prop', () => {
|
||||
wrapper = mount(Popup, {
|
||||
props: {
|
||||
show: true,
|
||||
closeable: true,
|
||||
},
|
||||
});
|
||||
|
||||
wrapper.find('.van-popup__close-icon').trigger('click');
|
||||
expect(wrapper.emitted('update:show')[0][0]).toEqual(false);
|
||||
});
|
||||
|
||||
test('should emit click-close-icon event when close icon is clicked', () => {
|
||||
wrapper = mount(Popup, {
|
||||
propsData: {
|
||||
show: true,
|
||||
closeable: true,
|
||||
},
|
||||
});
|
||||
|
||||
wrapper.find('.van-popup__close-icon').trigger('click');
|
||||
expect(wrapper.emitted('click-close-icon').length).toEqual(1);
|
||||
});
|
||||
|
||||
test('should render correct close icon when using close-icon prop', () => {
|
||||
wrapper = mount(Popup, {
|
||||
props: {
|
||||
show: true,
|
||||
closeable: true,
|
||||
closeIcon: 'success',
|
||||
},
|
||||
});
|
||||
|
||||
expect(wrapper.find('.van-popup__close-icon').html()).toMatchSnapshot();
|
||||
});
|
||||
Loading…
x
Reference in New Issue
Block a user