diff --git a/src/views/charts2/charts/npm/NpmAppCategoryScore.vue b/src/views/charts2/charts/npm/NpmAppCategoryScore.vue index 8ddabca8..7443f744 100644 --- a/src/views/charts2/charts/npm/NpmAppCategoryScore.vue +++ b/src/views/charts2/charts/npm/NpmAppCategoryScore.vue @@ -48,7 +48,7 @@
  - {{unitConvert(scope.row.bytesRateChainRatio, unitTypes.percent).join('').replaceAll('-', '')}} + {{unitConvert(scope.row.bytesRateChainRatio, unitTypes.percent).join('').replace(/-/g, '')}} >500.00%
@@ -71,7 +71,7 @@
  - {{unitConvert(scope.row.outboundBytesRateChainRatio, unitTypes.percent).join('').replaceAll('-', '')}} + {{unitConvert(scope.row.outboundBytesRateChainRatio, unitTypes.percent).join('').replace(/-/g, '')}} >500.00%
@@ -94,7 +94,7 @@
  - {{unitConvert(scope.row.inboundBytesRateChainRatio, unitTypes.percent).join('').replaceAll('-', '')}} + {{unitConvert(scope.row.inboundBytesRateChainRatio, unitTypes.percent).join('').replace(/-/g, '')}} >500.00%
@@ -378,6 +378,9 @@ export default { }, mounted () { this.init() + }, + beforeUnmount () { + this.unitConvert = null } } diff --git a/src/views/charts2/charts/npm/NpmRecentEvents.vue b/src/views/charts2/charts/npm/NpmRecentEvents.vue index b9c7db4f..78509ca8 100644 --- a/src/views/charts2/charts/npm/NpmRecentEvents.vue +++ b/src/views/charts2/charts/npm/NpmRecentEvents.vue @@ -21,15 +21,15 @@ @@ -48,13 +48,13 @@ diff --git a/test/views/charts2/charts/npm/NpmRecentEvents.test.js b/test/views/charts2/charts/npm/NpmRecentEvents.test.js new file mode 100644 index 00000000..70365657 --- /dev/null +++ b/test/views/charts2/charts/npm/NpmRecentEvents.test.js @@ -0,0 +1,162 @@ +import NpmRecentEvents from '@/views/charts2/charts/npm/NpmRecentEvents' +import { mount } from '@vue/test-utils' +import axios from 'axios' +import ElementPlus from 'element-plus' +// 未下钻 +const mockGet = { + data: {"status":200,"code":200,"queryKey":"68d8aa5867b08b926b5bd38c36add9e5","success":true,"message":null,"statistics":{"elapsed":0,"rows_read":2,"result_size":550,"result_rows":5},"job":null,"formatType":"json","meta":[{"name":"event_id","type":"long","category":"Metric"},{"name":"event_severity","type":"string","category":"Metric"},{"name":"event_key","type":"string","category":"Metric"},{"name":"event_type","type":"string","category":"Metric"}],"data":{"resultType":"table","result":[{"eventId":1173511643475208192,"eventSeverity":"critical","eventKey":"114.114.114.114 dns error","eventType":"dns error"},{"eventId":1173504415263352832,"eventSeverity":"high","eventKey":"116.178.78.241 http error","eventType":"http error"},{"eventId":1173492761289025537,"eventSeverity":"medium","eventKey":"223.6.6.6 dns error","eventType":"dns error"},{"eventId":1173489002890651648,"eventSeverity":"low","eventKey":"114.114.114.114 dns error","eventType":"dns error"},{"eventId":1173482380537620480,"eventSeverity":"info","eventKey":"1.1.1.2 dns error","eventType":"http error"},{"eventId":1173482380537620481,"eventSeverity":"critical","eventKey":"1.1.1.2 dns error","eventType":"dns error"}]},"originalUrl":"http://192.168.44.55:9999?query=SELECT%20event_id%20AS%20event_id%2Cevent_severity%20AS%20event_severity%2C%20event_key%20AS%20event_key%2C%20event_type%20AS%20event_type%20FROM%20performance_event%20WHERE%20start_time%20%3E%3D%201675227528%20AND%20end_time%20%3C%201675231128%20ORDER%20BY%20start_time%20DESC%20%20LIMIT%208%20&format=json&option=real-time","msg":"OK"} +} + +// 下钻 +const mockGet1 = { + data: {"status":200,"code":200,"queryKey":"fc0bd92bf3b48a37310d5c004d8b7a7b","success":true,"message":null,"statistics":{"elapsed":0,"rows_read":2,"result_size":689,"result_rows":7},"job":null,"formatType":"json","meta":[{"name":"event_id","type":"long","category":"Metric"},{"name":"event_severity","type":"string","category":"Metric"},{"name":"event_type","type":"string","category":"Metric"},{"name":"start_time","type":"long","category":"Metric"}],"data":{"resultType":"table","result":[{"eventId":1132790825086844928,"eventSeverity":"critical","eventType":"http error","startTime":1672802700},{"eventId":1132132403379142657,"eventSeverity":"high","eventType":"dns error","startTime":1672763400},{"eventId":1131441760155688960,"eventSeverity":"low","eventType":"dns error","startTime":1672722300},{"eventId":1131411523384598528,"eventSeverity":"medium","eventType":"http error","startTime":1672720500},{"eventId":1131390214323789824,"eventSeverity":"info","eventType":"dns error","startTime":1672719300},{"eventId":1131306200132968450,"eventSeverity":"critical","eventType":"http error","startTime":1672714200}]},"originalUrl":"http://192.168.44.55:9999?query=SELECT%20event_id%20AS%20event_id%2Cevent_severity%20AS%20event_severity%2C%20event_type%20AS%20event_type%2C%20start_time%20AS%20start_time%20FROM%20performance_event%20WHERE%20start_time%20%3E%3D%201672675200%20AND%20start_time%20%3C%201677513600%20AND%20server_ip%20%3D%20%27116.178.236.216%27%20ORDER%20BY%20start_time%20DESC&format=json&option=real-time","msg":"OK"} +} + +const query = { + curTab: "country", + dimensionType: "ip", + fourthMenu: "116.178.214.84", + fourthPanel: "8", + networkOverviewBeforeTab: "ip", + panelName: "116.178.214.84", + queryCondition: "common_client_ip='116.178.214.84' OR common_server_ip='116.178.214.84'", + t: "1675236779453", + tabIndex: "1", + tabOperationBeforeType: "", + tabOperationType: "4", + thirdMenu: "network.ips", + thirdPanel: "12" +} + +const timeFilter = { + dateRangeValue: -1, + startTime: 1675043912, + endTime: 1675047512 +} + +describe('views/charts2/charts/npm/NpmRecentEvents.vue测试', () => { + test('npm events 近期事件表格 未下钻', async () => { + require('vue-router').useRoute.mockReturnValue({ query: {} }) + // 模拟 axios 返回数据 + axios.get.mockResolvedValue(mockGet) + + const wrapper = mount(NpmRecentEvents, { + propsData: { + timeFilter + }, + global: { + plugins: [ElementPlus] + } + }) + await new Promise(resolve => setTimeout(() => { + const severity0 = wrapper.get('[test-id="eventSeverity-critical-0"]') + const severity1 = wrapper.get('[test-id="eventSeverity-high-1"]') + const severity2 = wrapper.get('[test-id="eventSeverity-medium-2"]') + const severity3 = wrapper.get('[test-id="eventSeverity-low-3"]') + const severity4 = wrapper.get('[test-id="eventSeverity-info-4"]') + const severity5 = wrapper.get('[test-id="eventSeverity-critical-5"]') + + expect(severity0.text()).toEqual('critical') + expect(severity1.text()).toEqual('high') + expect(severity2.text()).toEqual('medium') + expect(severity3.text()).toEqual('low') + expect(severity4.text()).toEqual('info') + expect(severity5.text()).toEqual('critical') + + expect(severity0.classes()).toContain('critical') + expect(severity1.classes()).toContain('high') + expect(severity2.classes()).toContain('medium') + expect(severity3.classes()).toContain('low') + expect(severity4.classes()).toContain('info') + expect(severity5.classes()).toContain('critical') + + const eventKey0 = wrapper.get('[test-id="eventKey-114.114.114.114-0"]') + const eventKey1 = wrapper.get('[test-id="eventKey-116.178.78.241-1"]') + const eventKey2 = wrapper.get('[test-id="eventKey-223.6.6.6-2"]') + const eventKey3 = wrapper.get('[test-id="eventKey-114.114.114.114-3"]') + const eventKey4 = wrapper.get('[test-id="eventKey-1.1.1.2-4"]') + + expect(eventKey0.text()).toEqual('114.114.114.114') + expect(eventKey1.text()).toEqual('116.178.78.241') + expect(eventKey2.text()).toEqual('223.6.6.6') + expect(eventKey3.text()).toEqual('114.114.114.114') + expect(eventKey4.text()).toEqual('1.1.1.2') + + const eventType0 = wrapper.get('[test-id="eventType-dns error-0"]') + const eventType1 = wrapper.get('[test-id="eventType-http error-1"]') + const eventType2 = wrapper.get('[test-id="eventType-dns error-2"]') + const eventType3 = wrapper.get('[test-id="eventType-dns error-3"]') + const eventType4 = wrapper.get('[test-id="eventType-http error-4"]') + + expect(eventType0.text()).toEqual('dns error') + expect(eventType1.text()).toEqual('http error') + expect(eventType2.text()).toEqual('dns error') + expect(eventType3.text()).toEqual('dns error') + expect(eventType4.text()).toEqual('http error') + + resolve() + }, 200)) + }) + test('npm events 近期事件表格 下钻', async () => { + require('vue-router').useRoute.mockReturnValue({ query: query }) + // 模拟 axios 返回数据 + axios.get.mockResolvedValue(mockGet1) + + const wrapper = mount(NpmRecentEvents, { + propsData: { + timeFilter + }, + global: { + plugins: [ElementPlus] + } + }) + await new Promise(resolve => setTimeout(() => { + const severity0 = wrapper.get('[test-id="eventSeverity-critical-0"]') + const severity1 = wrapper.get('[test-id="eventSeverity-high-1"]') + const severity2 = wrapper.get('[test-id="eventSeverity-low-2"]') + const severity3 = wrapper.get('[test-id="eventSeverity-medium-3"]') + const severity4 = wrapper.get('[test-id="eventSeverity-info-4"]') + const severity5 = wrapper.get('[test-id="eventSeverity-critical-5"]') + + expect(severity0.text()).toEqual('critical') + expect(severity1.text()).toEqual('high') + expect(severity2.text()).toEqual('low') + expect(severity3.text()).toEqual('medium') + expect(severity4.text()).toEqual('info') + expect(severity5.text()).toEqual('critical') + + expect(severity0.classes()).toContain('critical') + expect(severity1.classes()).toContain('high') + expect(severity2.classes()).toContain('low') + expect(severity3.classes()).toContain('medium') + expect(severity4.classes()).toContain('info') + expect(severity5.classes()).toContain('critical') + + const eventType0 = wrapper.get('[test-id="eventType-http error-0"]') + const eventType1 = wrapper.get('[test-id="eventType-dns error-1"]') + const eventType2 = wrapper.get('[test-id="eventType-dns error-2"]') + const eventType3 = wrapper.get('[test-id="eventType-http error-3"]') + const eventType4 = wrapper.get('[test-id="eventType-dns error-4"]') + + expect(eventType0.text()).toEqual('http error') + expect(eventType1.text()).toEqual('dns error') + expect(eventType2.text()).toEqual('dns error') + expect(eventType3.text()).toEqual('http error') + expect(eventType4.text()).toEqual('dns error') + + const startTime0 = wrapper.get('[test-id="startTime-2023-01-04T11:25:00+08:00-0"]') + const startTime1 = wrapper.get('[test-id="startTime-2023-01-04T00:30:00+08:00-1"]') + const startTime2 = wrapper.get('[test-id="startTime-2023-01-03T13:05:00+08:00-2"]') + const startTime3 = wrapper.get('[test-id="startTime-2023-01-03T12:35:00+08:00-3"]') + const startTime4 = wrapper.get('[test-id="startTime-2023-01-03T12:15:00+08:00-4"]') + + expect(startTime0.text()).toEqual('2023-01-04T11:25:00+08:00') + expect(startTime1.text()).toEqual('2023-01-04T00:30:00+08:00') + expect(startTime2.text()).toEqual('2023-01-03T13:05:00+08:00') + expect(startTime3.text()).toEqual('2023-01-03T12:35:00+08:00') + expect(startTime4.text()).toEqual('2023-01-03T12:15:00+08:00') + + resolve() + }, 300)) + }) +}) diff --git a/test/views/charts2/charts/npm/localComponents/SingleValue.test.js b/test/views/charts2/charts/npm/localComponents/SingleValue.test.js deleted file mode 100644 index e9e906eb..00000000 --- a/test/views/charts2/charts/npm/localComponents/SingleValue.test.js +++ /dev/null @@ -1,133 +0,0 @@ -import SingleValue from '@/views/charts2/charts/npm/localComponents/SingleValue' -import { mount } from '@vue/test-utils' - -const npmNetworkName = [ - { name: 'networkAppPerformance.tcpConnectionEstablishLatency' }, - { name: 'networkAppPerformance.httpResponse' }, - { name: 'networkAppPerformance.sslResponseLatency' }, - { name: 'networkAppPerformance.packetLoss' }, - { name: 'overall.packetRetrans' } -] -const npmNetworkData = [ - { - "establishLatencyMsAvg": 90, - "establishLatencyMsP50": 49, - "establishLatencyMsP90": 91, - "establishLatencyMsP95": 164, - "establishLatencyMsP99": 727, - "value": -0.01098901098901099 - }, - { - "httpResponseLatencyAvg": 178, - "httpResponseLatencyP50": 57, - "httpResponseLatencyP90": 121, - "httpResponseLatencyP95": 256, - "httpResponseLatencyP99": 1616, - "value": 0.017142857142857144 - }, - { - "sslConLatencyAvg": 0, - "sslConLatencyP50": 0, - "sslConLatencyP90": 0, - "sslConLatencyP95": 0, - "sslConLatencyP99": 0, - "value": "-" - }, - { - "tcpLostlenPercentAvg": 0.0088, - "tcpLostlenPercentP50": 0.0057, - "tcpLostlenPercentP90": 0.0184, - "tcpLostlenPercentP95": 0.0226, - "tcpLostlenPercentP99": 0.0397, - "value": 0.10000000000000005 - }, - { - "pktRetransPercentAvg": 0.0388, - "pktRetransPercentP50": 0.0341, - "pktRetransPercentP90": 0.0614, - "pktRetransPercentP95": 0.0691, - "pktRetransPercentP99": 0.0853, - "value": 0 - } -] - -describe('views/charts2/charts/npm/localComponents/SingleValue.vue测试', () => { - test('Npm概况信息：服务质量图', async () => { - // 加载vue组件，获得实例 - const wrapper = mount(SingleValue, { - propsData: { - npmNetworkName, - npmNetworkData - } - }) - // 延迟等待渲染。使用wrapper.vm.$nextTick有时不管用（例如组件中使用了setTimeout的时候） - await wrapper.vm.$nextTick(() => { - const textNode0 = wrapper.get('[test-id="singleValueContent0"]') - const textNode1 = wrapper.get('[test-id="singleValueContent1"]') - const textNode2 = wrapper.get('[test-id="singleValueContent2"]') - const textNode3 = wrapper.get('[test-id="singleValueContent3"]') - const textNode4 = wrapper.get('[test-id="singleValueContent4"]') - - expect(textNode0.text()).toEqual('90 ms') - expect(textNode1.text()).toEqual('178 ms') - expect(textNode2.text()).toEqual('0 ms') - expect(textNode3.text()).toEqual('0.88 %') - expect(textNode4.text()).toEqual('3.88 %') - - const trendIconNode0 = wrapper.get('[test-id="singleValueTrendIcon0"]') - const trendIconNode1 = wrapper.get('[test-id="singleValueTrendIcon1"]') - /* - * 当元素存在的时候，find 和 get 是一样的； - * 当找不到元素的时候: - * (1) find 会返回 null, 不会报错，case 通过 - * (2) get 会报错，case 失败 - * 一般总是使用 get ，除非想要判断一些元素不存在的时候，使用 find； - */ - const trendIconNode2 = wrapper.find('[test-id="singleValueTrendIcon2"]') - const trendIconNode3 = wrapper.get('[test-id="singleValueTrendIcon3"]') - const trendIconNode4 = wrapper.get('[test-id="singleValueTrendIcon4"]') - - expect(trendIconNode0.classes()).toContain('cn-icon-decline') - expect(trendIconNode1.classes()).toContain('cn-icon-rise1') - expect(trendIconNode2 === null) - expect(trendIconNode3.classes()).toContain('cn-icon-rise1') - expect(trendIconNode4.classes()).toContain('cn-icon-constant') - - const trendValueNode0 = wrapper.get('[test-id="singleValueTrendValue0"]') - const trendValueNode1 = wrapper.get('[test-id="singleValueTrendValue1"]') - const trendValueNode2 = wrapper.find('[test-id="singleValueTrendValue2"]') - const trendValueNode3 = wrapper.get('[test-id="singleValueTrendValue3"]') - const trendValueNode4 = wrapper.find('[test-id="singleValueTrendValue4"]') - - expect(trendValueNode0.text()).toEqual('-1.10%') - expect(trendValueNode1.text()).toEqual('1.71%') - expect(trendValueNode2 === null) - expect(trendValueNode3.text()).toEqual('10.00%') - expect(trendValueNode4 === null) - - const p95Node0 = wrapper.get('[test-id="singleValueP950"]') - const p95Node1 = wrapper.get('[test-id="singleValueP951"]') - const p95Node2 = wrapper.get('[test-id="singleValueP952"]') - const p95Node3 = wrapper.get('[test-id="singleValueP953"]') - const p95Node4 = wrapper.get('[test-id="singleValueP954"]') - - expect(p95Node0.text()).toEqual('P95:164 ms') - expect(p95Node1.text()).toEqual('P95:256 ms') - expect(p95Node2.text()).toEqual('P95:0 ms') - expect(p95Node3.text()).toEqual('P95:2.26 %') - expect(p95Node4.text()).toEqual('P95:6.91 %') - - const p99Node0 = wrapper.get('[test-id="singleValueP990"]') - const p99Node1 = wrapper.get('[test-id="singleValueP991"]') - const p99Node2 = wrapper.get('[test-id="singleValueP992"]') - const p99Node3 = wrapper.get('[test-id="singleValueP993"]') - const p99Node4 = wrapper.get('[test-id="singleValueP994"]') - - expect(p99Node0.text()).toEqual('P99:727 ms') - expect(p99Node1.text()).toEqual('P99:1.62 s') - expect(p99Node2.text()).toEqual('P99:0 ms') - expect(p99Node3.text()).toEqual('P99:3.97 %') - expect(p99Node4.text()).toEqual('P99:8.53 %') - }) - }) -})