diff --git a/src/popover/index.js b/src/popover/index.js index a06ea3522..943fda9f9 100644 --- a/src/popover/index.js +++ b/src/popover/index.js @@ -13,6 +13,7 @@ import Popup from '../popup'; // add Object.assign polyfill for popper.js // see: https://popper.js.org/docs/v2/browser-support/ +/* istanbul ignore if */ if (!Object.assign) { Object.assign = extendsHelper; } @@ -59,19 +60,12 @@ export default createComponent({ }, watch: { + value: 'updateLocation', placement: 'updateLocation', - - value(value) { - if (value) { - this.updateLocation(); - } - }, }, mounted() { - if (this.value) { - this.updateLocation(); - } + this.updateLocation(); }, beforeDestroy() { @@ -161,6 +155,7 @@ export default createComponent({ this.$emit('open'); }, + /* istanbul ignore next */ onOpened() { this.$emit('opened'); }, @@ -169,6 +164,7 @@ export default createComponent({ this.$emit('close'); }, + /* istanbul ignore next */ onClosed() { this.$emit('closed'); }, diff --git a/src/popover/test/__snapshots__/demo.spec.js.snap b/src/popover/test/__snapshots__/demo.spec.js.snap index 7c04f9b40..643cfa927 100644 --- a/src/popover/test/__snapshots__/demo.spec.js.snap +++ b/src/popover/test/__snapshots__/demo.spec.js.snap @@ -2,57 +2,28 @@ exports[`renders demo correctly 1`] = `
-
-
-
span: 8
-
span: 8
-
span: 8
-
-
-
span: 4
-
- offset: 4, span: 10 -
-
-
-
- offset: 12, span: 12 -
-
-
-
-
-
span: 8
-
span: 8
-
span: 8
-
-
-
-
-
span: 6
-
span: 6
-
span: 6
-
-
-
span: 6
-
span: 6
-
span: 6
-
-
-
span: 6
-
span: 6
-
span: 6
-
-
-
span: 6
-
span: 6
-
span: 6
-
-
-
span: 6
-
span: 6
-
span: 6
-
+
+
+
+
选择弹出位置
+
+
+
+
+
+
+
`; diff --git a/src/popover/test/__snapshots__/index.spec.js.snap b/src/popover/test/__snapshots__/index.spec.js.snap index 2d4588095..08e911b9a 100644 --- a/src/popover/test/__snapshots__/index.spec.js.snap +++ b/src/popover/test/__snapshots__/index.spec.js.snap @@ -1,22 +1,24 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`gutter prop 1`] = ` -
-
24
-
12
-
12
-
8
-
8
-
8
-
6
-
6
-
6
-
6
-
7
-
6
-
5
-
4
-
3
-
2
+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 0ccd98fb1..cca008089 100644 --- a/src/popover/test/index.spec.js +++ b/src/popover/test/index.spec.js @@ -1,2 +1,120 @@ -// import Popover from '..'; -// import { mount } from '../../../test'; +import Popover from '..'; +import { later, mount, trigger } from '../../../test'; + +const baseActions = [ + { text: 'Option 1' }, + { text: 'Option 2' }, + { text: 'Option 3' }, +]; + +test('should emit select event when clicking the action', () => { + const wrapper = mount(Popover, { + propsData: { + value: true, + actions: baseActions, + }, + }); + + wrapper.find('.van-popover__action').trigger('click'); + expect(wrapper.emitted('select')[0]).toEqual([baseActions[0], 0]); +}); + +test('should not emit select event when the action is disabled', () => { + const wrapper = mount(Popover, { + propsData: { + value: true, + actions: [{ text: 'Option', disabled: true }], + }, + }); + + wrapper.find('.van-popover__action').trigger('click'); + expect(wrapper.emitted('select')).toBeFalsy(); +}); + +test('should close popover when clicking the action', () => { + const wrapper = mount(Popover, { + propsData: { + value: true, + actions: baseActions, + }, + }); + + wrapper.find('.van-popover__action').trigger('click'); + expect(wrapper.emitted('input')[0][0]).toEqual(false); + + wrapper.setProps({ closeOnClickAction: false }); + wrapper.find('.van-popover__action').trigger('click'); + expect(wrapper.emitted('input').length).toEqual(1); +}); + +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, + }, + }); + + expect(root.innerHTML).toMatchSnapshot(); + + wrapper.setProps({ value: true }); + await later(); + expect(root.innerHTML).toMatchSnapshot(); + + wrapper.setProps({ value: false }); + expect(root.innerHTML).toMatchSnapshot(); +}); + +test('should watch placement prop and update location', async () => { + const root = document.createElement('div'); + const wrapper = mount(Popover, { + propsData: { + value: true, + getContainer: () => root, + }, + }); + + wrapper.setProps({ + placement: 'top', + }); + + await later(); + expect(root.innerHTML).toMatchSnapshot(); +}); + +test('should close popover when touch outside content', async () => { + const root = document.createElement('div'); + const wrapper = mount(Popover, { + propsData: { + value: true, + getContainer: () => root, + }, + }); + + const popover = root.querySelector('.van-popover'); + trigger(popover, 'touchstart'); + expect(wrapper.emitted('input')).toBeFalsy(); + + document.body.appendChild(root); + trigger(document.body, 'touchstart'); + expect(wrapper.emitted('input')[0][0]).toEqual(false); +});