blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-05 19:41:42 +08:00
Code Issues Projects Releases Wiki Activity

test(Dialog): update test cases

Browse Source
This commit is contained in:
chenjiahan 2021-01-02 21:42:26 +08:00
parent 101b416fa2
commit 711ffd9d30
5 changed files with 218 additions and 199 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
src/dialog/test/__snapshots__/index.legacy.js.snap
View File

@ -1,41 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`allow-html prop 1`] = `<div class="van-dialog__message">&lt;span&gt;text&lt;/span&gt;</div>`;
exports[`button color 1`] = `
<div role="dialog" class="van-dialog" name="van-dialog-bounce">
<div class="van-hairline--top van-dialog__footer"><button class="van-button van-button--default van-button--large van-dialog__cancel" style="color: white;">
<div class="van-button__content"><span class="van-button__text">取消</span></div>
</button><button class="van-button van-button--default van-button--large van-dialog__confirm van-hairline--left" style="color: red;">
<div class="van-button__content"><span class="van-button__text">确认</span></div>
</button></div>
</div>
`;
exports[`button text 1`] = `
<div role="dialog" class="van-dialog" name="van-dialog-bounce">
<div class="van-hairline--top van-dialog__footer"><button class="van-button van-button--default van-button--large van-dialog__cancel">
<div class="van-button__content"><span class="van-button__text">Custom cancel</span></div>
</button><button class="van-button van-button--default van-button--large van-dialog__confirm van-hairline--left">
<div class="van-button__content"><span class="van-button__text">Custom confirm</span></div>
</button></div>
</div>
`;
exports[`default slot 1`] = `
<div role="dialog" class="van-dialog" name="van-dialog-bounce">
<div class="van-dialog__content">Custom Message</div>
<div class="van-hairline--top van-dialog__footer"><button class="van-button van-button--default van-button--large van-dialog__confirm">
<div class="van-button__content"><span class="van-button__text">确认</span></div>
</button></div>
</div>
`;
exports[`title slot 1`] = `
<div role="dialog" class="van-dialog" name="van-dialog-bounce">
<div class="van-dialog__header van-dialog__header--isolated">Custom Title</div>
<div class="van-hairline--top van-dialog__footer"><button class="van-button van-button--default van-button--large van-dialog__confirm">
<div class="van-button__content"><span class="van-button__text">确认</span></div>
</button></div>
</div>
`;

36
src/dialog/test/__snapshots__/index.spec.js.snap Normal file
View File

@ -0,0 +1,36 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`should render button text correctly 1`] = `
<div class="van-hairline--top van-dialog__footer">
<button type="button"
class="van-button van-button--default van-button--large van-dialog__cancel"
>
<div class="van-button__content">
<span class="van-button__text">
Custom Cancel
</span>
</div>
</button>
<button type="button"
class="van-button van-button--default van-button--large van-dialog__confirm van-hairline--left"
>
<div class="van-button__content">
<span class="van-button__text">
Custom Confirm
</span>
</div>
</button>
</div>
`;
exports[`should render default slot correctly 1`] = `
<div class="van-dialog__content">
Custom Message
</div>
`;
exports[`should render title slot correctly 1`] = `
<div class="van-dialog__header van-dialog__header--isolated">
Custom Title
</div>
`;

51
src/dialog/test/funciton-call.spec.js Normal file
View File

@ -0,0 +1,51 @@
import { createApp } from 'vue';
import { later } from '../../../test';
import Dialog from '..';
import DialogComponent from '../Dialog';
test('should update default options when calling setDefaultOptions method', () => {
Dialog.setDefaultOptions({ lockScroll: false });
expect(Dialog.currentOptions.lockScroll).toBeFalsy();
Dialog.resetDefaultOptions();
expect(Dialog.currentOptions.lockScroll).toBeTruthy();
});
test('should expose Dialog component', () => {
expect(Dialog.Component).toEqual(DialogComponent);
});
test('should register component to app', () => {
const app = createApp();
app.use(Dialog);
expect(app.component(DialogComponent.name)).toBeTruthy();
});
test('should render dialog after calling Dialog', async () => {
const wrapper = document.createElement('div');
Dialog.alert({
message: '1',
teleport: wrapper,
});
await later();
const dialog = wrapper.querySelector('.van-dialog');
expect(dialog).toBeTruthy();
});
test('should close dialog after calling Dialog.call', async () => {
const wrapper = document.createElement('div');
Dialog.alert({
message: '1',
teleport: wrapper,
});
await later();
const dialog = wrapper.querySelector('.van-dialog');
expect(dialog.style.display).toEqual('');
Dialog.close();
await later();
expect(dialog.className.split(' ')).toContain(
'van-dialog-bounce-leave-active'
);
});

158
src/dialog/test/index.legacy.js
View File

@ -1,158 +0,0 @@
import Vue from 'vue';
import Dialog from '..';
import DialogComponent from '../Dialog';
import { mount, later, trigger } from '../../../test';
test('Dialog function call', async () => {
Dialog.close();
Dialog.alert({
message: '1',
showCancelButton: true,
});
await later();
const callback = jest.fn();
const dialog = document.querySelector('.van-dialog');
expect(dialog.style.display).toEqual('');
Dialog.close();
await later();
expect(dialog.style.display).toEqual('none');
Dialog.confirm().catch(callback);
document.querySelector('.van-dialog__cancel').click();
await later();
expect(callback).toHaveBeenCalledWith('cancel');
Dialog.confirm().then(callback);
document.querySelector('.van-dialog__confirm').click();
await later();
expect(callback).toHaveBeenNthCalledWith(2, 'confirm');
});
test('before close', () => {
const wrapper = mount(DialogComponent, {
props: {
value: true,
showCancelButton: true,
closeOnClickOverlay: true,
beforeClose: (action, done) => done(false),
},
});
const cancel = wrapper.find('.van-dialog__cancel');
cancel.trigger('click');
expect(wrapper.emitted('input')).toBeFalsy();
wrapper.setProps({
beforeClose: (action, done) => {
if (action === 'cancel') {
done();
}
},
});
const overlay = document.querySelector('.van-overlay');
trigger(overlay, 'click');
expect(wrapper.emitted('input')).toBeFalsy();
cancel.trigger('click');
expect(wrapper.emitted('input')[0]).toBeTruthy();
});
test('set default options', () => {
Dialog.setDefaultOptions({ lockScroll: false });
expect(Dialog.currentOptions.lockScroll).toBeFalsy();
Dialog.resetDefaultOptions();
expect(Dialog.currentOptions.lockScroll).toBeTruthy();
});
test('register component', () => {
Vue.use(Dialog);
expect(Vue.component(DialogComponent.name)).toBeTruthy();
});
test('button color', () => {
const wrapper = mount(DialogComponent, {
props: {
value: true,
showCancelButton: true,
cancelButtonColor: 'white',
confirmButtonColor: 'red',
},
});
expect(wrapper.html()).toMatchSnapshot();
});
test('button text', () => {
const wrapper = mount(DialogComponent, {
props: {
value: true,
showCancelButton: true,
cancelButtonText: 'Custom cancel',
confirmButtonText: 'Custom confirm',
},
});
expect(wrapper.html()).toMatchSnapshot();
});
test('dialog component', () => {
expect(Dialog.Component).toEqual(DialogComponent);
});
test('default slot', () => {
const wrapper = mount(DialogComponent, {
props: {
value: true,
},
slots: {
default: () => 'Custom Message',
},
});
expect(wrapper.html()).toMatchSnapshot();
});
test('title slot', () => {
const wrapper = mount(DialogComponent, {
props: {
value: true,
},
slots: {
title: () => 'Custom Title',
},
});
expect(wrapper.html()).toMatchSnapshot();
});
test('allow-html prop', () => {
const wrapper = mount(DialogComponent, {
props: {
value: true,
message: '<span>text</span>',
allowHtml: false,
},
});
expect(wrapper.find('.van-dialog__message')).toMatchSnapshot();
});
test('open & close event', () => {
const wrapper = mount(DialogComponent);
wrapper.vm.value = true;
expect(wrapper.emitted('open')).toBeTruthy();
wrapper.vm.value = false;
expect(wrapper.emitted('close')).toBeTruthy();
});
test('width prop', () => {
const wrapper = mount(DialogComponent, {
props: {
value: true,
width: 200,
},
});
expect(wrapper.element.style.width).toEqual('200px');
});

131
src/dialog/test/index.spec.js Normal file
View File

@ -0,0 +1,131 @@
import Dialog from '../Dialog';
import { mount } from '../../../test';
test('should allow to intercept closing action with before-close prop', async () => {
const wrapper = mount(Dialog, {
props: {
show: true,
showCancelButton: true,
beforeClose: (action) => action === 'cancel',
},
});
const confirm = wrapper.find('.van-dialog__confirm');
confirm.trigger('click');
expect(wrapper.emitted('update:show')).toBeFalsy();
const cancel = wrapper.find('.van-dialog__cancel');
cancel.trigger('click');
expect(wrapper.emitted('update:show')).toBeTruthy();
});
test('should change confirm button color when using confirm-button-color prop', () => {
const wrapper = mount(Dialog, {
props: {
show: true,
confirmButtonColor: 'red',
},
});
const confirmButton = wrapper.find('.van-dialog__confirm');
expect(confirmButton.element.style.color).toEqual('red');
});
test('should change cancel button color when using cancel-button-color prop', () => {
const wrapper = mount(Dialog, {
props: {
show: true,
showCancelButton: true,
cancelButtonColor: 'red',
},
});
const cancelButton = wrapper.find('.van-dialog__cancel');
expect(cancelButton.element.style.color).toEqual('red');
});
test('should render button text correctly', () => {
const wrapper = mount(Dialog, {
props: {
show: true,
showCancelButton: true,
cancelButtonText: 'Custom Cancel',
confirmButtonText: 'Custom Confirm',
},
});
expect(wrapper.find('.van-dialog__footer').html()).toMatchSnapshot();
});
test('should render default slot correctly', () => {
const wrapper = mount(Dialog, {
props: {
show: true,
},
slots: {
default: () => 'Custom Message',
},
});
expect(wrapper.find('.van-dialog__content').html()).toMatchSnapshot();
});
test('should render title slot correctly', () => {
const wrapper = mount(Dialog, {
props: {
show: true,
},
slots: {
title: () => 'Custom Title',
},
});
expect(wrapper.find('.van-dialog__header').html()).toMatchSnapshot();
});
test('should render message as html when using allow-html prop', async () => {
const wrapper = mount(Dialog, {
props: {
show: true,
message: '<span class="foo">text</span>',
allowHtml: false,
},
});
expect(wrapper.find('.foo').exists()).toBeFalsy();
await wrapper.setProps({ allowHtml: true });
expect(wrapper.find('.foo').exists()).toBeTruthy();
});
test('should emit open event when show prop is set to true', async () => {
const onOpen = jest.fn();
const wrapper = mount(Dialog, {
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();
const wrapper = mount(Dialog, {
props: {
show: true,
onClose,
},
});
await wrapper.setProps({ show: false });
expect(onClose).toHaveBeenCalledTimes(1);
});
test('should update width when using width prop', async () => {
const wrapper = mount(Dialog, {
props: {
show: true,
width: 200,
},
});
const dialog = wrapper.find('.van-dialog').element;
expect(dialog.style.width).toEqual('200px');
});