diff --git a/src/popup/test/__snapshots__/index.legacy.js.snap b/src/popup/test/__snapshots__/index.legacy.js.snap deleted file mode 100644 index 8552d5572..000000000 --- a/src/popup/test/__snapshots__/index.legacy.js.snap +++ /dev/null @@ -1,14 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`close-icon prop 1`] = ` -
-
-`; - -exports[`duration prop when position is center 1`] = `
`; - -exports[`duration prop when position is top 1`] = `
`; - -exports[`reset z-index 1`] = `
`; - -exports[`round prop 1`] = `
`; diff --git a/src/popup/test/__snapshots__/index.spec.js.snap b/src/popup/test/__snapshots__/index.spec.js.snap new file mode 100644 index 000000000..8f55da255 --- /dev/null +++ b/src/popup/test/__snapshots__/index.spec.js.snap @@ -0,0 +1,9 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`should render correct close icon when using close-icon prop 1`] = ` + + +`; diff --git a/src/popup/test/index.legacy.js b/src/popup/test/index.legacy.js deleted file mode 100644 index 93bdecae7..000000000 --- a/src/popup/test/index.legacy.js +++ /dev/null @@ -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: ` -
- -
- `, - 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: ` -
- - -
- `, - 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: ` -
- -
- `, - 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: ` -
- -
- `, - 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: ` -
- -
- `, - 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(); -}); diff --git a/src/popup/test/index.spec.js b/src/popup/test/index.spec.js new file mode 100644 index 000000000..ee1355356 --- /dev/null +++ b/src/popup/test/index.spec.js @@ -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: () =>
, + }, + }); + + 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 ; + }, + }); + + 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(); +});