freat：页面添加 测试用例

nezha-fronted/.babelrc

@@ -8,7 +8,7 @@
     }],
     "stage-2"
   ],
-  "plugins": ["transform-vue-jsx", "transform-runtime", "transform-es2015-modules-commonjs"],
+  "plugins": ["transform-vue-jsx", "transform-runtime"],
   "env": {
     "utils": {
       "presets": [
@@ -32,9 +32,9 @@
         }]
       ]
     },
-    "jest": {
+    "test": {
       "presets": ["env"],
-//      "plugins": ["transform-es2015-modules-commonjs"]
+      "plugins": ["transform-es2015-modules-commonjs"]
     }
   }
 }

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

@@ -144,6 +144,7 @@ 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)
@@ -292,7 +293,7 @@ export default {
     }
   },
   mounted () {
-    
+
     this.chartId = `${this.chartInfo.id}${this.isFullscreen ? '-fullscreen' : ''}`
   },
   beforeDestroy () {

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

@@ -0,0 +1,26 @@
+/* 处理legend的别名 */
+export function dealLegendAlias (legend, aliasExpression) {
+  if (/\{\{.+\}\}/.test(aliasExpression)) {
+    const labelValue = aliasExpression.replace(/(\{\{.+?\}\})/g, function (i) {
+      const label = i.substr(i.indexOf('{{') + 2, i.indexOf('}}') - i.indexOf('{{') - 2)
+      // if (!legend) {
+      //   return label
+      // }
+      const reg = new RegExp(label + '=".+?"')
+      let value = null
+      if (reg.test(legend)) {
+        const find = legend.match(reg)[0]
+        value = find.substr(find.indexOf('"') + 1, find.lastIndexOf('"') - find.indexOf('"') - 1)
+      }
+      return value || ''
+    })
+    return labelValue
+  } else {
+    if (!aliasExpression) {
+      return legend
+      // let result =legend.substr(legend.indexOf('"') + 1,legend.lastIndexOf('"') - legend.indexOf('"') - 1);
+      // return result
+    }
+    return aliasExpression
+  }
+}

nezha-fronted/src/libs/bus.js

@@ -83,38 +83,6 @@ export default new Vue({
         return date
       }
     },
-    // 格式化tag为字符串表达式
-    tagsToString (metric, arr) {
-      let str = metric
-      let sepStr = ''
-      arr.forEach((item, index) => {
-        if (index === 0) {
-          str += '{'
-          if (item.value.length === 1) {
-            str += `${item.name}='${item.value.join('|')}'`
-            sepStr = ','
-          } else if (item.value.length > 1) {
-            str += `${item.name}=~'${item.value.join('|')}'`
-            sepStr = ','
-          }
-        } else {
-          if (item.value.length === 1) {
-            str += sepStr + `${item.name}='${item.value.join('|')}'`
-            sepStr = ','
-          } else if (item.value.length > 1) {
-            str += sepStr + `${item.name}=~'${item.value.join('|')}'`
-            sepStr = ','
-          }
-        }
-      })
-      if (str.indexOf('{') > -1) {
-        str += '}'
-      }
-      if (str.endsWith('{}')) {
-        str = str.substring(0, str.indexOf('{'))
-      }
-      return str
-    },
     getStep (startTime, endTime) {
       const start = new Date(startTime)
       const end = new Date(endTime)
@@ -125,9 +93,9 @@ export default new Vue({
       const thirtyDay = 2592000000
       if (numInterval < oneDay) { // 小于1天，step为15s
         step = '15s'
-      } else if (numInterval < sevenDay) {
+      } else if (numInterval < sevenDay) { // 小于7天，step为15s
         step = '5m'
-      } else if (numInterval < thirtyDay) {
+      } else if (numInterval < thirtyDay) { // 小于30天，step为15s
         step = '10m'
       } else {
         step = '30m'

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

@@ -13,13 +13,20 @@ module.exports = {
   //   'json',
   //   'vue'
   // ],
+  transformIgnorePatterns: ['/node_modules/(?!vue-awesome)', 'element-ui'],
   moduleNameMapper: {
+    '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
     '\\.(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'　　// 模拟加载样式文件
   },
   testMatch: [ // 匹配测试用例的文件
-    '<rootDir>/test/unit/specs/*.spec.js'
+    '<rootDir>/test/unit/specs/*.spec.js',
+    '<rootDir>/test/unit/specs/lib/*.spec.js',
+    '<rootDir>/test/unit/specs/components/*.spec.js',
   ],
   moduleDirectories: [
     'node_modules'
@@ -27,14 +34,17 @@ module.exports = {
   // testPathIgnorePatterns: [
   //   '<rootDir>/test/e2e'
   // ],
-  // setupFiles: ['<rootDir>/test/unit/setup'],
+  setupFiles: ['<rootDir>/test/unit/jest.setup'],
   // snapshotSerializers: ['<rootDir>/node_modules/jest-serializer-vue'],
   coverageDirectory: '<rootDir>/test/unit/coverage', // 覆盖率报告的目录
   collectCoverageFrom: [ // 测试报告想要覆盖那些文件，目录，前面加！是避开这些文件
     // 'test/unit/specs/*.(js)',
-    'src/components/common/js/tool.js'
-    // '!src/main.js',
-    // '!src/router/index.js',
-    // '!**/node_modules/**'
+    'src/components/common/js/example.js',
+    'src/libs/bus.js',
+    // 'src/components/common/js/tools.js',
+    '!src/*.(js)',
+    '!src/http.js',
+    '!src/router/index.js',
+    '!**/node_modules/**'
   ]
 }

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

@@ -0,0 +1,7 @@
+jest.mock('request', () => {
+  return {
+    addEventListener: jest.fn(),
+    requestPermissions: jest.fn(() => Promise.resolve()),
+    getInitialNotification: jest.fn(() => Promise.resolve()),
+  };
+});

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

@@ -1,17 +1,23 @@
-import { dealLegendAlias } from '@/components/common/js/tools'
+import { dealLegendAlias } from '@/components/common/js/example'
+
 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('{a:1,b:2}', '{{a}}')).toBe('1')
+    expect(dealLegendAlias(str, '{{module}}')).toBe('node-exporter')
   })
   it('正常替换多个个', () => {
-    expect(dealLegendAlias('{a:1,b:2}', '{{a}}{{b}}')).toBe('12')
+    expect(dealLegendAlias(str, '{{module}}{{endpoint_id}}')).toBe('node-exporter69')
   })
   it('匹配不到', () => {
-    expect(dealLegendAlias('{a:1,b:2}', '{{c}}')).toBe('')
+    expect(dealLegendAlias(str, '{{c}}')).toBe('')
   })
   it('没有legend', () => {
-    expect(dealLegendAlias('{a:1,b:2}', '')).toBe('{a:1,b:2}')
+    expect(dealLegendAlias(str, '')).toBe(str)
+  })
+  it('legend没有变量', () => {
+    expect(dealLegendAlias(str, 'c')).toBe('c')
   })
 })
+

nezha-fronted/test/unit/specs/lib/bus.spec.js

@@ -0,0 +1,40 @@
+// import { mount, createLocalVue } from '@vue/test-utils'
+// import Vue from 'vue'
+// import ElementUI from 'element-ui'
+
+import bus from '@/libs/bus'
+// const localVue = createLocalVue()
+// localVue.use(ElementUI)
+
+describe('bus时间函数', () => {
+  // 测试代码可读性最好
+  // 分组
+  it('正常替换', function () {
+    // console.log(bus)
+    expect(bus.timeFormate(1650006960000)).toBe('2022-04-15 15:16:00')
+  })
+  it('文字替换', function () {
+    // console.log(bus)
+    expect(bus.timeFormate('2022-04-15 15:16:00')).toBe('2022-04-15 15:16:00')
+  })
+})
+describe('bus getStep', () => {
+  // 测试代码可读性最好
+  // 分组
+  it('15s', function () {
+    // console.log(bus)
+    expect(bus.getStep('2022-04-15 15:16:00', '2022-04-15 16:16:00')).toBe('15s')
+  })
+  it('5m', function () {
+    // console.log(bus)
+    expect(bus.getStep('2022-04-15 15:16:00', '2022-04-16 16:16:00')).toBe('5m')
+  })
+  it('10m', function () {
+    // console.log(bus)
+    expect(bus.getStep('2022-04-15 15:16:00', '2022-04-23 16:16:00')).toBe('10m')
+  })
+  it('30m', function () {
+    // console.log(bus)
+    expect(bus.getStep('2022-04-15 15:16:00', '2022-05-23 16:16:00')).toBe('30m')
+  })
+})