fix：main，js 添加组动化测试 ，缓存topology 图片 只请求一次

nezha-fronted/README.md

@@ -24,6 +24,11 @@ For a detailed explanation on how things work, check out the [guide](http://vuej
 
 需要配置 config.json 为 {"baseUrl":"http://192.168.40.42:8080/", "version": "21.04"}
 
+#自动化测试
+npm run unit
+根目录下 /test/jest.conf.js collectCoverageFrom 变量配置需要测试报告的文件 （因为暂时不测所有 只能一个个引入）
+specs 配置对应的测试用例 （https://docs.geedge.net/pages/viewpage.action?pageId=58310079 参考匹配器）
+
 #思维导图
 https://docs.geedge.net/pages/viewpage.action?pageId=67209306
 

nezha-fronted/src/components/chart/chartMixin.js

@@ -145,7 +145,6 @@ export default {
       }
     },
     handleLegendAlias (legend, aliasExpression) {
-      console.log(legend, aliasExpression)
       if (/\{\{.+\}\}/.test(aliasExpression)) {
         const labelValue = aliasExpression.replace(/(\{\{.+?\}\})/g, function (i) {
           const label = i.substr(i.indexOf('{{') + 2, i.indexOf('}}') - i.indexOf('{{') - 2)
@@ -294,7 +293,6 @@ export default {
     }
   },
   mounted () {
-
     this.chartId = `${this.chartInfo.id}${this.isFullscreen ? '-fullscreen' : ''}`
   },
   beforeDestroy () {

nezha-fronted/src/components/common/js/common.js

@@ -34,6 +34,7 @@ export function getHexagon (key) {
 const topologyCache = {}
 
 export function getTopology (key) {
+  // console.log(topologyCache, 'topologyCache')
   return topologyCache[`topology${key}`]
 }
 
@@ -41,6 +42,18 @@ export function setTopology (key, value) {
   topologyCache[`topology${key}`] = value
 }
 
+// const topologyImgList = localStorage.getItem('nz-imgList') ? JSON.parse(localStorage.getItem('nz-imgList')) : {}
+
+export function getTopologyImg (key) {
+  // console.log(topologyCache, 'topologyCache')
+  // console.log(localStorage.getItem('nz-img-' + key), !localStorage.getItem('nz-img-' + key))
+  return localStorage.getItem('nz-img-' + key)
+}
+
+export function setTopologyImg (key, img) {
+  localStorage.setItem('nz-img-' + key, img)
+}
+
 export function setHexagon (key, value) {
   hexagonCache[`hexagon${key}`] = value
 }

nezha-fronted/src/components/common/project/topologyL5.vue

@@ -351,7 +351,7 @@ import {
   myCubec,
   myCubeAnchors
 } from './L5/services/canvas.js'
-import { getTopology, setTopology } from '../js/common'
+import { getTopology, setTopology, getTopologyImg, setTopologyImg } from '../js/common'
 import CanvasProps from './L5/CanvasProps'
 import topologyTopTool from './L5//topologyTopTool'
 import CanvasContextMenu from './L5/CanvasContextMenu'
@@ -1723,13 +1723,21 @@ export default {
           res.data.list.forEach((item, index) => {
             item.imageName = item.name
             delete item.name
+            if (getTopologyImg(item.id)) {
+              promiseArr.push(getTopologyImg(item.id))
+            } else {
               promiseArr.push(this.dealImg(`monitor/project/topo/icon/${item.id}/1`))
+            }
             imgArr.push({ ...item })
           })
           Promise.all(promiseArr).then((res2, header) => {
             this.iconArray = [...res.data.list]
             this.iconArray.forEach((item, index) => {
-              item.image = res2[index].data
+              console.log(res2[index])
+              item.image = res2[index].data || res2[index]
+              if (!getTopologyImg(item.id)) {
+                setTopologyImg(item.id, item.image)
+              }
               const group = this.tools.find(tool => tool.group === item.unit)
               if (group) {
                 group.children.push({
@@ -1780,7 +1788,11 @@ export default {
           }
           imgidList.forEach((item, index) => {
             if (item.data.imageId && imageAllId.data.list.find(image => item.data.imageId === image.id)) {
+              if (getTopologyImg(item.data.imageId)) {
+                promiseArr.push(getTopologyImg(item.data.imageId))
+              } else {
                 promiseArr.push(this.dealImg(`monitor/project/topo/icon/${item.data.imageId}/1`))
+              }
             } else if (item.data.imageId) {
               promiseArr.push(imgDefault)
             } else {
@@ -1795,7 +1807,10 @@ export default {
             })
             this.iconArray.forEach((item, index) => {
               if (item.id) {
-                item.image = res2[index].data
+                item.image = res2[index].data || res2[index]
+                if (!getTopologyImg(item.id)) {
+                  setTopologyImg(item.id, item.image)
+                }
               }
             })
             this.imgInit = true
@@ -2254,6 +2269,10 @@ export default {
     if (getTopology(this.topologyIndex)) {
       getTopology(this.topologyIndex).destroy()
       setTopology(this.topologyIndex, null)
+      window.topology = null
+      window.Le5leTopologyPoint = null
+      window.topologyPoint = null
+      window.topologyRect = null
     }
     if (document.getElementById('topology-canvas' + this.topologyIndexF)) {
       document.getElementById('topology-canvas' + this.topologyIndexF).removeEventListener('mousemove', this.canvasMove)

nezha-fronted/src/main.js

@@ -36,6 +36,18 @@ import myDatePicker from '@/components/common/myDatePicker'
 import vSelectPage from '@/components/common/v-selectpagenew'
 import nzDataList from '@/components/common/table/nzDataList'
 import htmlToPdf from '@/components/common/js/htmlToPdf'
+import { registerNode } from '@topology/core'
+import {
+  myAnchors,
+  myCubeAnchors,
+  myCubec,
+  myIconRect,
+  myShape,
+  myTextRect
+} from '@/components/common/project/L5/services/canvas'
+// 注册到画布
+registerNode('rectangleImg', myShape, myAnchors, myIconRect, myTextRect)
+registerNode('myCube', myCubec, myCubeAnchors, null, null)
 Vue.use(htmlToPdf)
 Vue.use(vSelectPage, {
   dataLoad: function (vue, url, params) {

nezha-fronted/src/store/index.js

@@ -2,6 +2,7 @@ import Vue from 'vue'
 import Vuex from 'vuex'
 import user from './user'
 import panel from './panel'
+// import topology from './topology'
 
 Vue.use(Vuex)
 const store = new Vuex.Store({

nezha-fronted/src/store/topology.js

@@ -0,0 +1,24 @@
+const topology = {
+  state: {
+    imgList: localStorage.getItem('nz-topology-imgList') || {}
+  },
+  mutations: {
+    setImgList (state, imgList) {
+      state.imgList = imgList
+    },
+    setImgListItem (state, item) {
+      state.imgList[item.key] = item.img
+    }
+  },
+  getters: {
+    getImgList (state) {
+      return state.imgList
+    }
+  },
+  actions: {
+    dispatchAddImgList (store, obj) {
+      store.commit('setImgListItem', obj)
+    }
+  }
+}
+export default topology

nezha-fronted/static/config.json

@@ -1 +1 @@
-{"baseUrl":"/", "version": "21.04"}
+{"baseUrl":"http://192.168.40.42:8080/", "version": "21.04"}

nezha-fronted/test/unit/__mocks__/axios.js

@@ -1,3 +1,7 @@
 module.exports = {
-  get: jest.fn(() => Promise.resolve({ status: 200 }))
+  get: jest.fn(() => Promise.resolve({ status: 200 })),
+  post: jest.fn(() => Promise.resolve({ status: 200 })),
+  put: jest.fn(() => Promise.resolve({ status: 200 })),
+  del: jest.fn(() => Promise.resolve({ status: 200 })),
+  requestsArr: []
 }

nezha-fronted/test/unit/__mocks__/fileMock.js

@@ -1 +1,5 @@
-module.exports = 'test-file-stub';
+module.exports = {
+  'test-file-stub': 'test-file-stub',
+  getters: {},
+  commit: ()=>{}
+}

nezha-fronted/test/unit/__mocks__/i18nMock.js

@@ -0,0 +1,3 @@
+module.exports = {
+  t: () => { return 'i18n' }
+}

nezha-fronted/test/unit/jest.conf.js

@@ -8,25 +8,39 @@ module.exports = {
     '^.+\\.js$': '<rootDir>/node_modules/babel-jest',
     '.*\\.(vue)$': '<rootDir>/node_modules/vue-jest'
   },
-  // moduleFileExtensions: [
-  //   'js',
-  //   'json',
-  //   'vue'
-  // ],
+  moduleFileExtensions: [
+    'js',
+    'json',
+    'vue'
+  ],
   transformIgnorePatterns: ['/node_modules/(?!vue-awesome)', 'element-ui'],
-  moduleNameMapper: {
+  moduleNameMapper: { // 处理引入报错的文件 将其改为引入空文件 或者自定义的 function
     'element-ui/*': '<rootDir>/test/unit/__mocks__/fileMock.js',
-    // 'libs/*': '<rootDir>/test/unit/__mocks__/fileMock.js',
-    '/i18n': '<rootDir>/test/unit/__mocks__/fileMock.js',
-    // 'libs/*': '<rootDir>/test/unit/__mocks__/fileMock.js',
-    '^@\/(.*?\.?(js|vue)?|)$': '<rootDir>/src/$1', // @路径转换，例如：@/components/Main.vue -> rootDir/src/components/Main.vue
+    'css/font/*': '<rootDir>/test/unit/__mocks__/fileMock.js',
+    'store/*': '<rootDir>/test/unit/__mocks__/fileMock.js',
+    'elSelect/MyElSelect': '<rootDir>/test/unit/__mocks__/fileMock.js',
+    '/chartList': '<rootDir>/test/unit/__mocks__/fileMock.js',
+    '/myDatePicker/': '<rootDir>/test/unit/__mocks__/fileMock.js',
+    'v-selectpage/': '<rootDir>/test/unit/__mocks__/fileMock.js',
+    '@topology/': '<rootDir>/test/unit/__mocks__/fileMock.js',
+    '/diagram': '<rootDir>/test/unit/__mocks__/fileMock.js',
+    '/topology': '<rootDir>/test/unit/__mocks__/fileMock.js',
+    '@svgdotjs': '<rootDir>/test/unit/__mocks__/fileMock.js',
+    '@interactjs': '<rootDir>/test/unit/__mocks__/fileMock.js',
+    'pl-table': '<rootDir>/test/unit/__mocks__/fileMock.js',
+    '/htmlToPdf': '<rootDir>/test/unit/__mocks__/fileMock.js',
+    '\/*\/http': '<rootDir>/test/unit/__mocks__/axios.js',
+    // '\/*\/permission': '<rootDir>/test/unit/__mocks__/fileMock.js',
+    '/i18n': '<rootDir>/test/unit/__mocks__/i18nMock.js',
     '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': '<rootDir>/test/unit/__mocks__/fileMock.js', // 模拟加载静态文件
-    '\\.(css|less|scss|sass)$': '<rootDir>/test/unit/__mocks__/styleMock.js'　　// 模拟加载样式文件
+    '\\.(css|less|scss|sass)$': '<rootDir>/test/unit/__mocks__/styleMock.js', // 模拟加载样式文件
+    '\\.(css|less|scss|sass|style)$': 'jest-css-modules',
+    '^@\/(.*?\.?(js|vue)?|)$': '<rootDir>/src/$1' // @路径转换，例如：@/components/Main.vue -> rootDir/src/components/Main.vue
   },
   testMatch: [ // 匹配测试用例的文件
     '<rootDir>/test/unit/specs/*.spec.js',
     '<rootDir>/test/unit/specs/lib/*.spec.js',
-    '<rootDir>/test/unit/specs/components/*.spec.js',
+    '<rootDir>/test/unit/specs/components/*.spec.js'
   ],
   moduleDirectories: [
     'node_modules'
@@ -41,8 +55,9 @@ module.exports = {
     // 'test/unit/specs/*.(js)',
     'src/components/common/js/example.js',
     'src/libs/bus.js',
+    'src/main.js',
     // 'src/components/common/js/tools.js',
-    '!src/*.(js)',
+    // '!src/*.(js)',
     '!src/http.js',
     '!src/router/index.js',
     '!**/node_modules/**'

nezha-fronted/test/unit/specs/main.spec.js

@@ -0,0 +1,17 @@
+import main from '@/main'
+import bus from '@/libs/bus'
+describe('时间函数', () => {
+  // 测试代码可读性最好
+  // 分组
+  // const str = 'node_load1{module="node-exporter",endpoint_id="69",project="Common",datacenter="xin_xi_gang_DC",asset_id="11",endpoint="node-exporter-192.168.44.18",module_id="165",nz_agent_id="75",project_id="17",olap="node_exporter_nacos",asset="Bifang-CM-Server2",datacenter_id="4"} '
+  // it('正常替换一个', () => {
+  //   expect(dealLegendAlias(str, '{{module}}')).toBe('node-exporter')
+  // })
+
+  it('正常替换一个', () => {
+    expect(main.utcTimeToTimezone(1650006960000)).toBe(1650006960000)
+  })
+  it('2', () => {
+    expect(main.utcTimeToTimezone('2022-04-15 15:16:00')).toBe(1650006960000)
+  })
+})