diff --git a/src/dialog/test/__snapshots__/index.legacy.js.snap b/src/dialog/test/__snapshots__/index.legacy.js.snap deleted file mode 100644 index 9671dce89..000000000 --- a/src/dialog/test/__snapshots__/index.legacy.js.snap +++ /dev/null @@ -1,41 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`allow-html prop 1`] = `
<span>text</span>
`; - -exports[`button color 1`] = ` - -`; - -exports[`button text 1`] = ` - -`; - -exports[`default slot 1`] = ` - -`; - -exports[`title slot 1`] = ` - -`; diff --git a/src/dialog/test/__snapshots__/index.spec.js.snap b/src/dialog/test/__snapshots__/index.spec.js.snap new file mode 100644 index 000000000..b9cb25f85 --- /dev/null +++ b/src/dialog/test/__snapshots__/index.spec.js.snap @@ -0,0 +1,36 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`should render button text correctly 1`] = ` +
+ + +
+`; + +exports[`should render default slot correctly 1`] = ` +
+ Custom Message +
+`; + +exports[`should render title slot correctly 1`] = ` +
+ Custom Title +
+`; diff --git a/src/dialog/test/funciton-call.spec.js b/src/dialog/test/funciton-call.spec.js new file mode 100644 index 000000000..f06a327c0 --- /dev/null +++ b/src/dialog/test/funciton-call.spec.js @@ -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' + ); +}); diff --git a/src/dialog/test/index.legacy.js b/src/dialog/test/index.legacy.js deleted file mode 100644 index 5925e79a3..000000000 --- a/src/dialog/test/index.legacy.js +++ /dev/null @@ -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: 'text', - 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'); -}); diff --git a/src/dialog/test/index.spec.js b/src/dialog/test/index.spec.js new file mode 100644 index 000000000..d19ae3010 --- /dev/null +++ b/src/dialog/test/index.spec.js @@ -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: 'text', + 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'); +});