diff --git a/tests/unit/LMarker.spec.js b/tests/unit/LMarker.spec.js new file mode 100644 index 00000000..2f4e0058 --- /dev/null +++ b/tests/unit/LMarker.spec.js @@ -0,0 +1,92 @@ +import { createLocalVue, mount } from '@vue/test-utils'; +import L from 'leaflet'; +import LMarker from '@/components/LMarker.vue'; +import LMap from '@/components/LMap.vue'; + +const localVue = createLocalVue(); + +function getWrapperWithMap (component, propsData, mountOptions) { + const mapWrapper = mount(LMap, { + localVue + }); + + const wrapper = mount({ + ...component, + // trick from here https://github.com/vuejs/vue-test-utils/issues/560#issuecomment-461865315 + created () { + this.$parent = mapWrapper.vm; + } + }, { + localVue, + propsData, + sync: false, // avoid warning, see + // Removing sync mode #1137 https://github.com/vuejs/vue-test-utils/issues/1137 + ...mountOptions + }); + return { + wrapper, + mapWrapper + }; +} + +describe('LMarker.vue', () => { + test('LMarker.vue change prop latLng', async () => { + const initLatlng = L.latLng([11, 22]); + const wrapperAndMap = getWrapperWithMap(LMarker, { + latLng: initLatlng + }); + const wrapper = wrapperAndMap.wrapper; + expect(wrapper.exists()).toBe(true); + expect(wrapper.vm.mapObject.getLatLng().equals(initLatlng)).toBe(true); + const newLatLng = L.latLng([1, 1]); + wrapper.setProps({ latLng: newLatLng }); + await wrapper.vm.$nextTick(); + const curLatLng = wrapper.vm.mapObject.getLatLng(); + expect(curLatLng.equals(newLatLng)).toBe(true); + }); + + test('LMarker.vue default slot text', async () => { + const markerText = 'Hello from marker!'; + const wrapperAndMap = getWrapperWithMap(LMarker, { + latLng: [0, 0] + }, { + slots: { + default: markerText + } + }); + const wrapper = wrapperAndMap.wrapper; + const mapWrapper = wrapperAndMap.mapWrapper; + expect(mapWrapper.text()).toContain('Leaflet'); + expect(wrapper.exists()).toBe(true); + await wrapper.vm.$nextTick(); + expect(wrapper.text()).toEqual(markerText); + }); + + test('LMarker.vue draggable change', async () => { + const wrapperAndMap = getWrapperWithMap(LMarker, { + latLng: [0, 0] + }); + const wrapper = wrapperAndMap.wrapper; + const markerObject = wrapper.vm.mapObject; + expect(markerObject.dragging.enabled()).toBeFalsy(); + wrapper.setProps({ draggable: true }); + await wrapper.vm.$nextTick(); + expect(markerObject.dragging.enabled()).toBeTruthy(); + wrapper.setProps({ draggable: false }); + await wrapper.vm.$nextTick(); + expect(markerObject.dragging.enabled()).toBeFalsy(); + }); + + test('LMarker.vue not change prop latLng to null', async () => { + const initLatlng = L.latLng([11, 22]); + const wrapperAndMap = getWrapperWithMap(LMarker, { + latLng: initLatlng + }); + const wrapper = wrapperAndMap.wrapper; + expect(wrapper.exists()).toBe(true); + expect(wrapper.vm.mapObject.getLatLng().equals(initLatlng)).toBe(true); + wrapper.setProps({ latLng: null }); + await wrapper.vm.$nextTick(); + expect(wrapper.vm.mapObject.getLatLng().equals(initLatlng)).toBe(true); + }); +});