【ut】fix ut

SuperMap · Apr 15, 2024 · 49b7797 · 49b7797
1 parent a5d191c
commit 49b7797
Show file tree

Hide file tree

Showing 11 changed files with 688 additions and 65 deletions.
diff --git a/src/mapboxgl/web-map/__tests__/WebMapViewModel.spec.js b/src/mapboxgl/web-map/__tests__/WebMapViewModel.spec.js
@@ -28,6 +28,7 @@ import {
 } from 'vue-iclient/test/unit/mocks/data/CapabilitiesText.js';
 import restmapLayer from 'vue-iclient/test/unit/mocks/data/WebMap/restmapLayer.json';
 import dataflowLayer from 'vue-iclient/test/unit/mocks/data/WebMap/dataflowLayer.json';
+import webmap3Datas from 'vue-iclient/test/unit/mocks/data/WebMap/webmap3.json';
 import dataflowLayerData from 'vue-iclient/test/unit/mocks/data/dataflowLayerData.json';
 import mockFetch from 'vue-iclient/test/unit/mocks/FetchRequest';
 import { webmap_MAPBOXSTYLE_Tile } from 'vue-iclient/test/unit/mocks/services';
@@ -1939,4 +1940,19 @@ describe('WebMapViewModel.spec', () => {
     await flushPromises();
     jest.advanceTimersByTime(0);
   });
+
+  it('webmap3.0', async done => {
+    const fetchResource = {
+      'https://localhost:8190/iportal/web/maps/249495311': webmap3Datas[1]
+    };
+    mockFetch(fetchResource);
+    const viewModel = new WebMapViewModel(webmap3Datas[0]);
+    const callback = function () {
+      expect(viewModel.getAppreciableLayers().length).toBeLessThanOrEqual(webmap3Datas[0].layers.length);
+      done();
+    };
+    viewModel.on({ addlayerssucceeded: callback });
+    await flushPromises();
+    jest.advanceTimersByTime(0);
+  });
 });
diff --git a/src/mapboxgl/web-map/control/legend/Legend.vue b/src/mapboxgl/web-map/control/legend/Legend.vue
@@ -162,7 +162,7 @@ export default {
     }
   },
   loaded() {
-    this.viewModel = new LegendViewModel(this.webmap);
+    this.viewModel = new LegendViewModel();
     this.initLegendList();
   },
   removed() {

diff --git a/src/mapboxgl/web-map/control/legend/LegendViewModel.js b/src/mapboxgl/web-map/control/legend/LegendViewModel.js
@@ -7,14 +7,18 @@ import mapboxgl from 'vue-iclient/static/libs/mapboxgl/mapbox-gl-enhance';
  * @extends mapboxgl.Evented
  */
 class LegendViewModel extends mapboxgl.Evented {
-  constructor(webmap) {
-    super(webmap);
+  constructor() {
+    super();
+    this.legendInfo = [];
+  }
+
+  setMap({ webmap }) {
     this.webmap = webmap;
     this.legendInfo = this.webmap.getLegendInfo();
   }
 
   getStyle(layerName) {
-    return this.legendInfo.filter((info) => {
+    return this.legendInfo.filter(info => {
       return info.layerId === layerName && info.styleGroup.length > 0;
     });
   }

diff --git a/src/mapboxgl/web-map/control/legend/__tests__/legend.spec.js b/src/mapboxgl/web-map/control/legend/__tests__/legend.spec.js
@@ -1,14 +1,32 @@
 import { mount } from '@vue/test-utils';
 import SmLegend from '../Legend.vue';
-import mockFetch from 'vue-iclient/test/unit/mocks/FetchRequest';
+import StyleRenderer from '../subs/StyleRenderer.vue';
+import ImageRenderer from '../subs/ImageRenderer.vue';
 import mapLegends from 'vue-iclient/test/unit/mocks/data/WebMap/map_legends.json';
 
 describe('Legend.vue', () => {
   let wrapper;
   let mapWrapper;
 
-  beforeEach(() => {
-  });
+  document.getElementById = () => {
+    return {
+      getContext: () => ({
+        arc: jest.fn(),
+        fill: jest.fn(),
+        fillRect: jest.fn(),
+        strokeRect: jest.fn(),
+        clearRect: jest.fn(),
+        beginPath: jest.fn(),
+        setLineDash: jest.fn(),
+        moveTo: jest.fn(),
+        lineTo: jest.fn(),
+        stroke: jest.fn(),
+        drawImage: jest.fn()
+      })
+    };
+  };
+
+  beforeEach(() => {});
 
   afterEach(() => {
     jest.resetAllMocks();
@@ -20,19 +38,26 @@ describe('Legend.vue', () => {
     }
   });
 
-  it('render default correctly', done => {
+  it('render default correctly', async done => {
     wrapper = mount(SmLegend, {
       propsData: {
-        layerNames: ['民航数据'],
+        layerNames: ['上海疫情点标注', '站点3', '未命名数据', '未命名数据(1)', '未命名数据(3)'],
         mapTarget: 'map'
       }
     });
-    wrapper.vm.webmap = {
-      getLegendInfo: jest.fn(() => mapLegends)
-    }
+    const webmap = {
+      getLegendInfo: () => mapLegends
+    };
     wrapper.vm.$options.loaded.call(wrapper.vm);
+    wrapper.vm.viewModel.setMap({
+      webmap
+    });
+    wrapper.vm.initLegendList();
+    await wrapper.vm.$nextTick();
     expect(wrapper.vm.legendList).not.toEqual({});
     expect(wrapper.vm.mapTarget).toBe('map');
+    expect(wrapper.find(StyleRenderer).exists()).toBeTruthy()
+    expect(wrapper.find(ImageRenderer).exists()).toBeTruthy()
     done();
   });
 });
diff --git a/src/mapboxgl/web-map/control/legend/subs/StyleRenderer.vue b/src/mapboxgl/web-map/control/legend/subs/StyleRenderer.vue
@@ -125,24 +125,6 @@ export default {
     drawShape() {
       const canvas = document.getElementById(this.canvasId);
       const ctx = canvas.getContext('2d');
-      // const { colors } = this.styleRendererData;
-      // if (colors) {
-      //   const rect = {
-      //     width: 214,
-      //     height: 10
-      //   };
-      //   const gap = 5;
-      //   canvas.width = rect.width + gap * 2;
-      //   canvas.height = rect.height + gap * 6;
-      //   const gradient = ctx.createLinearGradient(gap, 0, rect.width + gap, 0);
-      //   gradient.addColorStop(0, colors[0].value);
-      //   gradient.addColorStop(1, colors[1].value);
-      //   ctx.beginPath();
-      //   ctx.fillStyle = gradient;
-      //   ctx.fillRect(gap, 0, rect.width, rect.height);
-      //   this.drawMinMaxShape({ ctx, gap, rect, colors });
-      //   return;
-      // }
       switch (this.shapeType) {
         case 'point': {
           const { fontSize, color, opacity } = this.styleRendererData;
@@ -185,37 +167,6 @@ export default {
       }
       this.drawDashedLine(canvas, ctx);
     },
-    drawMinMaxShape({ ctx, gap, rect, colors }) {
-      const width = gap * 2;
-      const height = gap + 3;
-      const outlineColor = '#d9d9d9';
-      const arrowY = gap;
-      ctx.globalAlpha = 0.25;
-      // min
-      ctx.beginPath();
-      ctx.moveTo(gap, rect.height);
-      ctx.lineTo(0, rect.height + arrowY);
-      ctx.lineTo(width, rect.height + arrowY);
-      ctx.fillStyle = outlineColor;
-      ctx.fill();
-      ctx.fillStyle = colors[0].value;
-      ctx.fillRect(0, rect.height + arrowY, width, height);
-      ctx.strokeStyle = outlineColor;
-      ctx.strokeRect(0, rect.height + arrowY, width, height);
-      // max
-      ctx.moveTo(gap + rect.width, rect.height);
-      ctx.lineTo(rect.width, arrowY + rect.height);
-      ctx.lineTo(rect.width + gap * 2, arrowY + rect.height);
-      ctx.fillStyle = outlineColor;
-      ctx.fill();
-      ctx.fillStyle = colors[1].value;
-      ctx.fillRect(rect.width, arrowY + rect.height, width, height);
-      ctx.strokeStyle = outlineColor;
-      ctx.strokeRect(rect.width, arrowY + rect.height, width, height);
-      ctx.globalAlpha = 1;
-      ctx.fillText(colors[0].key, 0, rect.height + arrowY + height + 12, 80);
-      ctx.fillText(colors[1].key, rect.width, arrowY + rect.height + height + 12, 80);
-    },
     drawDashedLine(canvas, ctx) {
       const LEGEND_LINE_WIDTH = 100;
       const LINE_DASH_WIDTH = 1;

diff --git a/test/unit/mocks/crs.js b/test/unit/mocks/crs.js
@@ -6,12 +6,12 @@ class CRS extends Evented {
   constructor(options) {
     super();
     this.unit='m';
+    this.epsgCode = options.epsgCode;
   }
 
   getExtent() {
     return [-20037508.3427892, -20037508.3427892, 20037508.3427892, 20037508.3427892];
   }
-  u
   getOrigin() { return jest.fn()}
   getLngLatCenter() { return [0,0];}
 }

diff --git a/test/unit/mocks/data/WebMap/map_legends.json b/test/unit/mocks/data/WebMap/map_legends.json
@@ -53,7 +53,7 @@
       {
         "styleField": null,
         "style": {
-          "type": "style",
+          "type": "image",
           "shape": "POINT",
           "sprite": { "sdf": false, "pixelRatio": 1, "width": 9, "x": 0, "y": 0, "height": 9 },
           "url": "http://localhost:8190/iportal/web/maps/168769956/sprites/sprite.png"