From 09f18d0302459a9010d38861d172758399c9f1ea Mon Sep 17 00:00:00 2001 From: chenxianhui Date: Thu, 11 Apr 2024 15:17:54 +0800 Subject: [PATCH] add ut --- src/mapboxgl/web-map/WebMapV2.ts | 46 ----- .../layer-list/__tests__/LayerList.spec.js | 173 ++++++++++++++---- test/unit/mocks/data/WebMap/layer_v3.json | 82 +++++++++ 3 files changed, 221 insertions(+), 80 deletions(-) create mode 100644 test/unit/mocks/data/WebMap/layer_v3.json diff --git a/src/mapboxgl/web-map/WebMapV2.ts b/src/mapboxgl/web-map/WebMapV2.ts index 8f7b4780..1f6ed842 100644 --- a/src/mapboxgl/web-map/WebMapV2.ts +++ b/src/mapboxgl/web-map/WebMapV2.ts @@ -157,52 +157,6 @@ export default class WebMap extends WebMapBase { return this._legendList; } - _uniqueSymbolStyle(styleItem) { - const { style, radius, color } = styleItem; - let generateStyle: any = {}; - switch (style.type) { - case 'BASIC_POINT': - generateStyle.color = getColorWithOpacity(style.fillColor || color, style.fillOpacity); - break; - case 'SYMBOL_POINT': - generateStyle.color = getColorWithOpacity(style.fillColor || color, style.fillOpacity); - generateStyle.fontSize = `${radius * 2}px`; - break; - case 'IMAGE_POINT': - generateStyle.background = `url(${style.imageInfo.url})`; - generateStyle.backgroundSize = 'contain'; - generateStyle.width = `${(style.radius || radius) * 2}px`; - generateStyle.height = `${(style.radius || radius) * 2}px`; - break; - case 'SVG_POINT': - generateStyle['-webkit-mask'] = `url(${style.url})`; - generateStyle.backgroundColor = getColorWithOpacity(style.fillColor || color, style.fillOpacity); - generateStyle['-webkit-mask-size'] = 'contain'; - generateStyle.width = `${(style.radius || radius) * 2}px`; - generateStyle.height = `${(style.radius || radius) * 2}px`; - break; - default: - generateStyle.color = getColorWithOpacity(style.fillColor || color, style.fillOpacity); - break; - } - return generateStyle; - } - - _selectLayerType(featureType, style) { - if (style.className) { - return style.className; - } - const result = { - POLYGON: 'sm-components-icon-ploygon', - POINT: 'sm-components-icon-multi-point', - LINE: 'sm-components-icon-line' - }[featureType]; - if (featureType === 'POINT' && style.type !== 'BASIC_POINT') { - return ''; - } - return result; - } - get getSourceListModel(): SourceListModel { return this._sourceListModel; } diff --git a/src/mapboxgl/web-map/control/layer-list/__tests__/LayerList.spec.js b/src/mapboxgl/web-map/control/layer-list/__tests__/LayerList.spec.js index 2a849074..4d1ec574 100644 --- a/src/mapboxgl/web-map/control/layer-list/__tests__/LayerList.spec.js +++ b/src/mapboxgl/web-map/control/layer-list/__tests__/LayerList.spec.js @@ -5,14 +5,82 @@ import LayerList from '../index'; import mockFetch from 'vue-iclient/test/unit/mocks/FetchRequest'; import iportal_serviceProxy from 'vue-iclient/test/unit/mocks/data/iportal_serviceProxy'; import uniqueLayer_point from 'vue-iclient/test/unit/mocks/data/WebMap/uniqueLayer_point'; +import layer_v3 from 'vue-iclient/test/unit/mocks/data/WebMap/layer_v3'; import layerData from 'vue-iclient/test/unit/mocks/data/layerData'; -import mapWrapperLoaded from 'vue-iclient/test/unit/mapWrapperLoaded.js'; -import flushPromises from 'flush-promises'; +import mapboxgl from '@libs/mapboxgl/mapbox-gl-enhance.js'; describe('LayerList.vue', () => { let wrapper; let mapWrapper; + const commonMap = { + map:{ + resize: () => jest.fn(), + getZoom: () => jest.fn(), + setZoom: () => jest.fn(), + setCRS: () => jest.fn(), + getCenter: () => { + return { + lng: 1, + lat: 2 + }; + }, + setCenter: () => jest.fn(), + getBearing: () => 2, + setBearing: () => jest.fn(), + getPitch: () => 2, + setPitch: () => jest.fn(), + getStyle: () => { + return { + layers: [{ + id: 1 + }] + } + }, + addSource: () => jest.fn(), + getSource: () => jest.fn(), + removeSource: jest.fn(), + triggerRepaint: () => jest.fn(), + style: jest.fn(), + getLayer: jest.fn(), + removeLayer: jest.fn(), + getCRS: () => { + return { + epsgCode: 'EPSG:3857', + getExtent: () => jest.fn() + }; + }, + addLayer: () => jest.fn(), + moveLayer: () => jest.fn(), + overlayLayersManager: {}, + on: () => { }, + off: () => { }, + fire: () => { }, + setLayoutProperty: () => jest.fn(), + addStyle: () => jest.fn(), + remove: () => jest.fn(), + setRenderWorldCopies: () => jest.fn(), + setStyle: () => jest.fn(), + loadImage: function (src, callback) { + callback(null, { width: 15 }); + }, + addImage: function () { }, + hasImage: function () { + return false; + } + }, + mapparams: {}, + layers: [] + }; + + mapboxgl.supermap.WebMapV3 = () => { + return { + on: (event, callback) => { + callback(commonMap); + } + } + } + beforeEach(() => { wrapper = null; mapWrapper = null; @@ -46,21 +114,23 @@ describe('LayerList.vue', () => { mapId: '123' } }); - wrapper = mount(SmLayerList, { - propsData: { - mapTarget: 'map' - } - }); - const callback = jest.fn(); - wrapper.vm.$on('loaded', callback); - await mapWrapperLoaded(mapWrapper); - await flushPromises(); - expect(callback.mock.called).toBeTruthy; - let spylayerVisibility = jest.spyOn(wrapper.vm, 'toggleItemVisibility'); - wrapper.findAll('.sm-components-icon-hidden').at(0).trigger('click'); - expect(spylayerVisibility).toHaveBeenCalledTimes(1); - wrapper.vm.$nextTick(); - done(); + const addCallback = function (data) { + wrapper = mount(SmLayerList, { + propsData: { + mapTarget: 'map' + } + }); + const callback = jest.fn(); + wrapper.vm.$on('loaded', callback); + expect(callback.mock.called).toBeTruthy; + let spylayerVisibility = jest.spyOn(wrapper.vm, 'toggleItemVisibility'); + wrapper.vm.$nextTick(() => { + wrapper.find('.sm-component-layer-list__layer > i').trigger('click'); + expect(spylayerVisibility).toHaveBeenCalledTimes(1); + done(); + }); + }; + mapWrapper.vm.viewModel.on({ addlayerssucceeded: addCallback }); }); it('layerGroupVisibility vector-tile', async done => { @@ -122,23 +192,26 @@ describe('LayerList.vue', () => { mapOptions: mapOptions } }); - wrapper = mount(SmLayerList, { - propsData: { - mapTarget: 'map' - } - }); - let spyProperty = jest.spyOn(wrapper.vm.viewModel, 'changeItemVisible'); - const callback = jest.fn(); - wrapper.vm.$on('loaded', callback); - await mapWrapperLoaded(mapWrapper); - await flushPromises(); - expect(callback.mock.called).toBeTruthy; - expect(wrapper.vm.mapTarget).toBe('map'); - wrapper.vm.$nextTick(() => { - wrapper.find('i.sm-components-icon-visible').trigger('click'); - expect(spyProperty).toHaveBeenCalledWith('vector-tiles', 'visible'); - done(); - }); + + const addCallback = function (data) { + wrapper = mount(SmLayerList, { + propsData: { + mapTarget: 'map' + } + }); + let spyProperty = jest.spyOn(wrapper.vm.viewModel, 'changeItemVisible'); + const callback = jest.fn(); + wrapper.vm.$on('loaded', callback); + expect(callback.mock.called).toBeTruthy; + expect(wrapper.vm.mapTarget).toBe('map'); + wrapper.vm.$nextTick(() => { + wrapper.find('.sm-components-icon-partially-visible').trigger('click'); + expect(spyProperty).toHaveBeenCalledTimes(1); + done(); + }); + }; + mapWrapper.vm.viewModel.on({ addlayerssucceeded: addCallback }); + }); it('attributes style', () => { @@ -165,4 +238,36 @@ describe('LayerList.vue', () => { expect(wrapper.find('div.sm-component-layer-list').exists()).toBe(true); expect(wrapper.vm.attributes.position).toBe('left'); }); + + it('render v3 layers', async done => { + const fetchResource = { + 'https://fakeiportal.supermap.io/iportal/web/config/portal.json': iportal_serviceProxy, + 'https://fakeiportal.supermap.io/iportal/web/maps/123/map.json': layer_v3, + 'https://fakeiportal.supermap.io/iportal/web/datas/676516522/content.json?pageSize=9999999¤tPage=1&parentResType=MAP&parentResId=123': layerData + }; + mockFetch(fetchResource); + mapWrapper = mount(SmWebMap, { + propsData: { + serverUrl: 'https://fakeiportal.supermap.io/iportal', + mapId: '123' + } + }); + const addCallback = function (data) { + wrapper = mount(SmLayerList, { + propsData: { + mapTarget: 'map' + } + }); + const callback = jest.fn(); + wrapper.vm.$on('loaded', callback); + expect(callback.mock.called).toBeTruthy; + let spylayerVisibility = jest.spyOn(wrapper.vm, 'toggleItemVisibility'); + wrapper.vm.$nextTick(() => { + wrapper.find('.sm-component-layer-list__layer > i').trigger('click'); + expect(spylayerVisibility).toHaveBeenCalledTimes(1); + done(); + }); + }; + mapWrapper.vm.viewModel.on({ addlayerssucceeded: addCallback }); + }); }); diff --git a/test/unit/mocks/data/WebMap/layer_v3.json b/test/unit/mocks/data/WebMap/layer_v3.json new file mode 100644 index 00000000..71e33566 --- /dev/null +++ b/test/unit/mocks/data/WebMap/layer_v3.json @@ -0,0 +1,82 @@ +{ + "metadata": { + "layerCatalog": [ + { + "visible": true, + "id": "北京市小学", + "title": "北京市小学123", + "type": "basic" + } + ] + }, + "sources": { + "ms_1338191620_1711937658391_18": { + "tiles": [ + "http://fackiportal/web/datas/1338191620/structureddata/tiles/{z}/{x}/{y}.mvt?epsgCode=3857&returnedFieldNames=%5B%22smpid%22%2C%22SmID%22%2C%22SmX%22%2C%22SmY%22%2C%22SmLibTileID%22%2C%22SmUserID%22%2C%22SmGeometrySize%22%2C%22%E5%90%8D%E7%A7%B0%22%2C%22%E5%AD%A6%E6%A0%A1%E7%B1%BB%E5%88%AB%22%2C%22%E7%94%B5%E8%AF%9D%22%2C%22%E5%9C%B0%E5%9D%80%22%2C%22msgeometry%22%5D&geometryFieldName=msgeometry" + ], + "bounds": [ + 115.594446040963, + 39.4576423716415, + 117.322162217816, + 40.899372856284 + ], + "type": "vector" + }, + "CHINA_DARK": { + "tiles": [ + "https://maptiles.supermapol.com/iserver/services/map_China/rest/maps/China_Dark/tileimage.png?scale={scale}&x={x}&y={y}&width={width}&height={height}&transparent=true&redirect=false&cacheEnabled=true" + ], + "tileSize": 256, + "attribution": "", + "bounds": [ + -180, + -90, + 180, + 90 + ], + "type": "raster" + } + }, + "crs": "EPSG:3857", + "center": [ + 12978882.992135866, + 4817539.5448938105 + ], + "zoom": 7.531648800092899, + "glyphs": {}, + "version": "3.1.4", + "rootUrl": "http://fackiportal/services/../", + "maxzoom": 22, + "name": "无标题地图layers", + "viewExtent": [ + 113.56651234883503, + 40.91674111392223, + 119.61606690385673, + 38.39241621316566 + ], + "layers": [ + { + "maxzoom": 12, + "id": "CHINA_DARK", + "source": "CHINA_DARK", + "type": "raster", + "minzoom": 0 + }, + { + "layout": {}, + "metadata": {}, + "paint": { + "circle-color": "#EE4D5A", + "circle-opacity": 0.9, + "circle-radius": 4 + }, + "id": "北京市小学", + "source": "ms_1338191620_1711937658391_18", + "source-layer": "1338191620$msgeometry", + "type": "circle" + } + ], + "sprite": {}, + "pitch": 0, + "minzoom": 0 +} \ No newline at end of file