[UT]add图层列表拖拽ut

SuperMap · Sep 26, 2024 · 8aa5062 · 8aa5062
1 parent 1937334
commit 8aa5062
Show file tree

Hide file tree

Showing 3 changed files with 202 additions and 8 deletions.
diff --git a/src/mapboxgl/_types/__tests__/map-event.spec.js b/src/mapboxgl/_types/__tests__/map-event.spec.js
@@ -136,5 +136,97 @@ describe('map-event-mapboxgl', () => {
     expect(legendList[0]).toEqual(mapLegends[1]);
     done();
   });
+
+  it('webmap get ordered LayerList', done => {
+    const layerList1 = [
+      { id: 'layer1', renderSource: { id: 'source1' }, renderLayers: ['layer1'], visible: true },
+      {
+        id: 'group2',
+        type: 'group',
+        visible: true,
+        children: [{ id: 'sourceLayer', renderSource: { id: 'source2', sourceLayer: 'sourceLayer2' }, visible: true }]
+      }
+    ];
+    const layerList2 = [
+      { id: 'layer3', renderSource: { id: 'source3' }, renderLayers: ['layer3'], visible: true },
+      {
+        id: 'group4',
+        renderSource: {},
+        type: 'group',
+        visible: true,
+        children: [{ id: 'sourceLayer4', renderSource: { id: 'source4', sourceLayer: 'sourceLayer4' }, visible: true }]
+      }
+    ]
+    const mainWebMap = {
+      getLayerList: () => layerList1
+    };
+    const webmap2 = {
+      getLayerList: () => layerList2,
+      cacheLayerCatalogIds: ['layer3', 'group4', 'sourceLayer4']
+    };
+    mapEvent.$options.setWebMap(mapTarget, mainWebMap);
+    mapEvent.$options.setWebMap(mapTarget, webmap2, 'webmap2');
+    const webmap = mapEvent.$options.getWebMap(mapTarget);
+    const layerList = webmap.getLayerList();
+    expect(layerList.length).toBe(4);
+    expect(layerList).toEqual(layerList2.concat(layerList1));
+    const OrderedLyerList = layerList1.concat(layerList2);
+    mapEvent.$options.setLayerCatalog(mapTarget, OrderedLyerList);
+    const newLayerList = webmap.getLayerList();
+    expect(newLayerList).toEqual(OrderedLyerList);
+    expect(mapEvent.$options.customLayerCatalogCache[mapTarget].length).toEqual(4);
+    mapEvent.$options.deleteWebMap(mapTarget, 'webmap2');
+    expect(mapEvent.$options.customLayerCatalogCache[mapTarget].length).toEqual(2);
+    done();
+  });
+
+  it('webmap get ordered AppreciableLayers', done => {
+    const mainWebMap = {
+      getAppreciableLayers: () => [
+        { id: 'layer1', renderSource: { id: 'source1' } },
+        { id: 'layer2', renderSource: { id: 'source2' } }
+      ]
+    };
+    mapEvent.$options.setWebMap(mapTarget, mainWebMap);
+    const webmap = mapEvent.$options.getWebMap(mapTarget);
+    const appreciableLayers1 = webmap.getAppreciableLayers();
+    expect(appreciableLayers1[0].id).toBe('layer1');
+    const newLayerList = [
+      { id: 'layer1', renderSource: { id: 'source1' } },
+      { id: 'layer2', renderSource: { id: 'source2' } }
+    ];
+    mapEvent.$options.setLayerCatalog(mapTarget, newLayerList);
+    const appreciableLayers2 = webmap.getAppreciableLayers();
+    expect(appreciableLayers2[0].id).toBe('layer2');
+    done();
+  });
+
+  it('group visible is determined by children', done => {
+    const layerList1 = [
+      {
+        id: 'group1',
+        type: 'group',
+        visible: false,
+        children: [{ id: 'sourceLayer1', renderSource: { id: 'source1', sourceLayer: 'sourceLayer1' }, visible: true }]
+      },
+      {
+        id: 'group2',
+        type: 'group',
+        visible: true,
+        children: [{ id: 'sourceLayer', renderSource: { id: 'source2', sourceLayer: 'sourceLayer2' }, visible: false }]
+      }
+    ];
+    const mainWebMap = {
+      getLayerList: () => layerList1
+    };
+    mapEvent.$options.setWebMap(mapTarget, mainWebMap);
+    const webmap = mapEvent.$options.getWebMap(mapTarget);
+    const layerList = webmap.getLayerList();
+    expect(layerList[0].id).toBe('group1');
+    expect(layerList[0].visible).toBe(true);
+    expect(layerList[1].id).toBe('group2');
+    expect(layerList[1].visible).toBe(false);
+    done();
+  });
 });
 
diff --git a/src/mapboxgl/_types/map-event.js b/src/mapboxgl/_types/map-event.js
@@ -56,8 +56,10 @@ export default new Vue({
           if (['getLegendInfo'].includes(propKey)) {
             datas.push(...mainWebMapDatas);
           }
-          if (propKey === 'getLayerList' && _this.customLayerCatalogCache[webmapTarget]) {
-            datas = sortLayerCatalog(datas, _this.customLayerCatalogCache[webmapTarget]);
+          if (propKey === 'getLayerList') {
+            if (_this.customLayerCatalogCache[webmapTarget]) {
+              datas = sortLayerCatalog(datas, _this.customLayerCatalogCache[webmapTarget]);
+            }
             _this.updateLayerCatalogsVisible(datas);
           }
           if (propKey === 'getAppreciableLayers' && _this.customLayerCatalogCache[webmapTarget]) {

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
@@ -1,6 +1,7 @@
 import { mount } from '@vue/test-utils';
 import SmWebMap from '../../../WebMap';
 import SmLayerList from '../LayerList.vue';
+import LayerGroup from '../../../LayerGroup.vue';
 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';
@@ -58,8 +59,8 @@ describe('LayerList.vue', () => {
       expect(callback.mock.called).toBeTruthy;
       let spylayerVisibility = jest.spyOn(wrapper.vm, 'toggleItemVisibility');
       wrapper.vm.$nextTick(() => {
-        expect(wrapper.find('.sm-component-layer-list__layer').exists()).toBe(true);
-        wrapper.find('.sm-component-layer-list__layer > i').trigger('click');
+        expect(wrapper.find('.header-text').exists()).toBe(true);
+        wrapper.find('.header-text > i').trigger('click');
         expect(spylayerVisibility).toHaveBeenCalledTimes(1);
         done();
       });
@@ -211,7 +212,7 @@ describe('LayerList.vue', () => {
       expect(callback.mock.called).toBeTruthy;
       let spylayerVisibility = jest.spyOn(wrapper.vm, 'toggleItemVisibility');
       await wrapper.vm.$nextTick();
-      wrapper.find('.sm-component-layer-list__layer > i').trigger('click');
+      wrapper.find('.header-text > i').trigger('click');
       expect(spylayerVisibility).toHaveBeenCalledTimes(1);
       done();
     };
@@ -288,7 +289,7 @@ describe('LayerList.vue', () => {
       })
     };
     const callback = function () {
-      expect(wrapper.find('.sm-component-layer-list__layer > .sm-components-icon-hidden').exists()).toBeTruthy();
+      expect(wrapper.find('.header-text > .sm-components-icon-hidden').exists()).toBeTruthy();
       done();
     };
     wrapper.vm.viewModel.on('layersUpdated', callback);
@@ -298,9 +299,108 @@ describe('LayerList.vue', () => {
     wrapper.vm.$options.loaded.call(wrapper.vm);
     await wrapper.vm.$nextTick();
     expect(wrapper.vm.sourceList).toEqual(wrapper.vm.transformLayerList(layerCatalogs));
-    expect(wrapper.find('.sm-component-layer-list__layer > .sm-components-icon-visible').exists()).toBeTruthy();
-    expect(wrapper.find('.header-text > .sm-components-icon-partially-visible').exists()).toBeTruthy();
+    expect(wrapper.find('.header-text > .sm-components-icon-visible').exists()).toBeTruthy();
     wrapper.vm.sourceList[1].visible = false;
     mockOnOptions.layerupdatechanged();
   });
+
+  it('onDrop', async done => {
+    wrapper = mount(SmLayerList);
+    const layerCatalogs = [
+      {
+        dataSource: {
+          serverId: '',
+          type: ''
+        },
+        id: 'ms-fill',
+        title: 'ms-fill',
+        type: 'fill',
+        visible: true,
+        renderSource: {},
+        renderLayers: ['ms-fill'],
+        themeSetting: {}
+      },
+      {
+        dataSource: {
+          serverId: '',
+          type: ''
+        },
+        id: 'ms-background',
+        title: 'ms-background',
+        type: 'background',
+        visible: true,
+        renderSource: {},
+        renderLayers: ['ms-background'],
+        themeSetting: {}
+      },
+      {
+        children: [],
+        id: 'ms-group',
+        title: '未命名分组',
+        type: 'group',
+        visible: true
+      },
+    ];
+    let mockOnOptions;
+    const webmap = {
+      getLayerList: () => layerCatalogs,
+      getAppreciableLayers: () => layerCatalogs,
+      rectifyLayersOrder: jest.fn(),
+      un: jest.fn(),
+      on: jest.fn(options => {
+        mockOnOptions = options;
+      })
+    };
+    wrapper.vm.viewModel.setMap({
+      webmap
+    });
+    wrapper.vm.$options.loaded.call(wrapper.vm);
+    await wrapper.vm.$nextTick();
+    const dropToBottom = {
+      node: {
+        eventKey: 'ms-background',
+        pos: '0-1'
+      },
+      dragNode: {
+        eventKey: 'ms-fill'
+      },
+      dragNodesKeys: ['ms-fill'],
+      dropToGap: true,
+      dropPosition: 2
+    };
+    const dropIntoLayer = {
+      node: {
+        eventKey: 'ms-background',
+        pos: '0-0'
+      },
+      dragNode: {
+        eventKey: 'ms-fill'
+      },
+      dragNodesKeys: ['ms-fill'],
+      dropToGap: false,
+      dropPosition: 0
+    };
+    const dropIntoGroup = {
+      node: {
+        eventKey: 'ms-group',
+        pos: '0-3'
+      },
+      dragNode: {
+        eventKey: 'ms-fill'
+      },
+      dragNodesKeys: ['ms-fill'],
+      dropToGap: false,
+      dropPosition: 0
+    };
+    const layerGroupVm = wrapper.find(LayerGroup).vm;
+    expect(layerGroupVm.treeData.length).toBe(3);
+    expect(layerGroupVm.treeData[0].key).toBe('ms-fill');
+    wrapper.vm.onDropHanlder(dropToBottom);
+    expect(layerGroupVm.treeData[0].key).toBe('ms-background');
+    wrapper.vm.onDropHanlder(dropIntoLayer);
+    expect(layerGroupVm.treeData.length).toBe(3);
+    wrapper.vm.onDropHanlder(dropIntoGroup);
+    expect(layerGroupVm.treeData.length).toBe(2);
+    done();
+  });
 });