diff --git a/src/popover/demo/index.vue b/src/popover/demo/index.vue index 76deaf814..111e6f757 100644 --- a/src/popover/demo/index.vue +++ b/src/popover/demo/index.vue @@ -93,7 +93,6 @@ -
-
-
选择弹出位置
+
+ +
选择弹出位置 + +
-
-
+
+ + + +
+ + +
+ + +
+ + + + + +
-
-
- +
+
`; diff --git a/src/popover/test/__snapshots__/index.spec.js.snap b/src/popover/test/__snapshots__/index.spec.js.snap index 5cb3f0706..4667f7003 100644 --- a/src/popover/test/__snapshots__/index.spec.js.snap +++ b/src/popover/test/__snapshots__/index.spec.js.snap @@ -2,29 +2,47 @@ exports[`should allow to custom the className of action 1`] = `
+
Option
`; -exports[`should locate to reference element when showed 1`] = ``; +exports[`should locate to reference element when showed 1`] = ` + + + + +`; exports[`should locate to reference element when showed 2`] = ` -
-
-
-
+ + +
+
+
+ +
+
`; exports[`should locate to reference element when showed 3`] = ` - + + + + `; exports[`should watch placement prop and update location 1`] = ` -
-
-
-
+ + +
+
+
+ +
+
`; diff --git a/src/popover/test/index.spec.js b/src/popover/test/index.spec.js index 3a64d5e6d..9b220759c 100644 --- a/src/popover/test/index.spec.js +++ b/src/popover/test/index.spec.js @@ -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); });