CN-879 单测用例--npm events 最底下的表格
This commit is contained in:
hyx
@@ -1,29 +1,11 @@
|
||||
<template>
|
||||
<div class="npm-app-event">
|
||||
<!-- <div class="metric-select">
|
||||
<el-select
|
||||
v-model="metric"
|
||||
class="option__select select-column"
|
||||
popper-class="option-popper common-select"
|
||||
:popper-append-to-body="false"
|
||||
key="tabMetric"
|
||||
@change="changeMetric"
|
||||
size="mini"
|
||||
width="100">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.label"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
<span>{{ $t('network.metric') }}：</span>
|
||||
</div>-->
|
||||
<el-table
|
||||
id="tabTable"
|
||||
ref="dataTable"
|
||||
:data="tableData"
|
||||
class="npm-app-event-table"
|
||||
:row-class-name="rowClassName"
|
||||
height="100%"
|
||||
empty-text=""
|
||||
>
|
||||
@@ -33,34 +15,33 @@
|
||||
<span class="data-column__span">{{ $t(item.label) }}</span>
|
||||
</template>
|
||||
<template #default="scope" :column="item">
|
||||
<div class="data-app-event-table">
|
||||
<div class="data-app-event-table" :test-id="`${item.prop}${scope.row.index}`">
|
||||
<template v-if="item.prop === 'domain' ||item.prop === 'appName' ||item.prop === 'serverIp' ">
|
||||
<span class="data-applications">{{ scope.row[item.prop] }}</span>
|
||||
</template>
|
||||
<template v-else-if="item.prop === 'eventSeverity'">
|
||||
<template v-else-if="item.prop === 'eventSeverity'" >
|
||||
<template v-if="scope.row[item.prop]==='critical'">
|
||||
<div v-for="item in 5" class="red-dot" :key="item"></div>
|
||||
<div v-for="item in 5" class="red-dot" :key="item" :test-id="`eventSeverityValue${scope.row.index}${item}`"></div>
|
||||
</template>
|
||||
<template v-else-if="scope.row[item.prop]==='high'">
|
||||
<div v-for="item in 4" class="red-dot" :key="item"></div>
|
||||
<div class="grey-dot"></div>
|
||||
<div v-for="item in 4" class="red-dot" :key="item" :test-id="`eventSeverityValue${scope.row.index}${item}`"></div>
|
||||
<div v-for="item in 1" class="grey-dot" :key="item" :test-id="`eventSeverityValue${scope.row.index}${4+item}`"></div>
|
||||
</template>
|
||||
<template v-else-if="scope.row[item.prop]==='medium'">
|
||||
<div v-for="item in 3" class="red-dot" :key="item"></div>
|
||||
<div v-for="item in 2" class="grey-dot" :key="item"></div>
|
||||
<div v-for="item in 3" class="red-dot" :key="item" :test-id="`eventSeverityValue${scope.row.index}${item}`"></div>
|
||||
<div v-for="item in 2" class="grey-dot" :key="item" :test-id="`eventSeverityValue${scope.row.index}${3+item}`"></div>
|
||||
</template>
|
||||
<template v-else-if="scope.row[item.prop]==='low'">
|
||||
<div v-for="item in 2" class="red-dot" :key="item"></div>
|
||||
<div v-for="item in 3" class="grey-dot" :key="item"></div>
|
||||
<div v-for="item in 2" class="red-dot" :key="item" :test-id="`eventSeverityValue${scope.row.index}${item}`"></div>
|
||||
<div v-for="item in 3" class="grey-dot" :key="item" :test-id="`eventSeverityValue${scope.row.index}${2+item}`"></div>
|
||||
</template>
|
||||
<template v-else-if="scope.row[item.prop]==='info'">
|
||||
<div v-for="item in 1" class="red-dot" :key="item"></div>
|
||||
<div v-for="item in 4" class="grey-dot" :key="item"></div>
|
||||
<div v-for="item in 1" class="red-dot" :key="item" :test-id="`eventSeverityValue${scope.row.index}${item}`"></div>
|
||||
<div v-for="item in 4" class="grey-dot" :key="item" :test-id="`eventSeverityValue${scope.row.index}${1+item}`"></div>
|
||||
</template>
|
||||
<span class="data-severity">{{ scope.row[item.prop] }}</span>
|
||||
</template>
|
||||
<template v-else-if="item.prop === 'eventType'">
|
||||
<!-- <span class="data-eventType" v-for="type in scope.row[item.prop]">{{type}}</span>-->
|
||||
<span class="data-eventType">{{ scope.row[item.prop] }}</span>
|
||||
</template>
|
||||
<template v-else-if="item.prop === 'count'">
|
||||
@@ -153,6 +134,10 @@ export default {
|
||||
this.init()
|
||||
},
|
||||
methods: {
|
||||
rowClassName ({ row, rowIndex }) {
|
||||
// 把每一行的索引放进row
|
||||
row.index = rowIndex
|
||||
},
|
||||
init () {
|
||||
this.toggleLoading(true)
|
||||
this.isNoData = false
|
||||
|
||||
260
test/views/charts2/charts/npm/NpmAppEventTable.test.js
Normal file
260
test/views/charts2/charts/npm/NpmAppEventTable.test.js
Normal file
@@ -0,0 +1,260 @@
|
||||
import NpmAppEventTable from '@/views/charts2/charts/npm/NpmAppEventTable'
|
||||
import { mount } from '@vue/test-utils'
|
||||
import axios from 'axios'
|
||||
import ElementPlus from "element-plus"
|
||||
|
||||
const timeFilter = {
|
||||
dateRangeValue: -1,
|
||||
startTime: 1675558657,
|
||||
endTime: 1675731457
|
||||
}
|
||||
|
||||
const mockGet = {
|
||||
data: {"status":200,"code":200,"queryKey":"88eeb92e0ddb40c0327db494cfe5c74c","success":true,"message":null,"statistics":{"elapsed":0,"rows_read":2,"result_size":752,"result_rows":10},"job":null,"formatType":"json","meta":[{"name":"app_name","type":"string","category":"Dimension"},{"name":"event_severity","type":"string","category":"Dimension"},{"name":"event_type","type":"string","category":"Dimension"},{"name":"count","type":"long","category":"Metric"}],"data":{"resultType":"table","result":[{"appName":"youku","eventSeverity":"info","eventType":"http error","count":6},{"appName":"uplive","eventSeverity":"critical","eventType":"http error","count":5},{"appName":"youku","eventSeverity":"low","eventType":"http error","count":4},{"appName":"apple_hls","eventSeverity":"info","eventType":"http error","count":3},{"appName":"apple_hls","eventSeverity":"low","eventType":"http error","count":3},{"appName":"apple_hls","eventSeverity":"medium","eventType":"http error","count":2},{"appName":"uplive","eventSeverity":"high","eventType":"http error","count":2},{"appName":"windows_update","eventSeverity":"medium","eventType":"http error","count":2},{"appName":"apple_hls","eventSeverity":"critical","eventType":"http error","count":1},{"appName":"cloudflare","eventSeverity":"info","eventType":"http error","count":1}]},"originalUrl":"http://192.168.44.55:9999?query=SELECT%20app_name%20AS%20app_name%2C%20event_severity%20AS%20event_severity%2C%20event_type%20AS%20event_type%2C%20COUNT%28*%29%20AS%20count%20FROM%20performance_event%20WHERE%20start_time%20%3E%3D%201675580110%20AND%20end_time%20%3C%201675752910%20AND%20entity_type%20%3D%20%27app%27%20GROUP%20BY%20app_name%2Cevent_severity%2Cevent_type%20ORDER%20BY%20count%20DESC%20%20LIMIT%2010%20&format=json&option=real-time","msg":"OK"}
|
||||
}
|
||||
|
||||
describe('views/charts2/charts/npm/NpmAppEventTable.vue测试', () => {
|
||||
test('Npm 事件：APP事件信息表格 严重程度色块验证', async () => {
|
||||
require('vue-router').useRoute.mockReturnValue({ query: {} })
|
||||
// 模拟 axios 数据
|
||||
axios.get.mockResolvedValue(mockGet)
|
||||
// 加载vue组件，获得实例
|
||||
const wrapper = mount(NpmAppEventTable, {
|
||||
global: {
|
||||
plugins: [ElementPlus]
|
||||
},
|
||||
propsData: {
|
||||
timeFilter
|
||||
}
|
||||
})
|
||||
|
||||
await new Promise(resolve => setTimeout(() => {
|
||||
// critical
|
||||
let criticalArray = [1,8]
|
||||
for(let index=0; index < criticalArray.length; index++){
|
||||
let rowIndex = criticalArray[index]
|
||||
for(let i=1; i<=5 ; i++){
|
||||
const eventSeverityRedValue = wrapper.find('[test-id="eventSeverityValue'+rowIndex+i+'"]')
|
||||
expect(eventSeverityRedValue.classes()).toContain('red-dot')
|
||||
}
|
||||
}
|
||||
|
||||
// high
|
||||
let highArray = [6]
|
||||
for(let index=0; index < highArray.length; index++){
|
||||
let rowIndex = highArray[index]
|
||||
for(let i=1; i<=4 ; i++){
|
||||
const eventSeverityRedValue = wrapper.find('[test-id="eventSeverityValue'+rowIndex+i+'"]')
|
||||
expect(eventSeverityRedValue.classes()).toContain('red-dot')
|
||||
}
|
||||
for(let i=5; i<=5 ; i++){
|
||||
const eventSeverityGreyValue = wrapper.find('[test-id="eventSeverityValue'+rowIndex+i+'"]')
|
||||
expect(eventSeverityGreyValue.classes()).toContain('grey-dot')
|
||||
}
|
||||
}
|
||||
|
||||
// medium
|
||||
let mediumArray = [5,7]
|
||||
for(let index=0; index < mediumArray.length; index++){
|
||||
let rowIndex = mediumArray[index]
|
||||
for(let i=1; i<=3 ; i++){
|
||||
const eventSeverityRedValue = wrapper.find('[test-id="eventSeverityValue'+rowIndex+i+'"]')
|
||||
expect(eventSeverityRedValue.classes()).toContain('red-dot')
|
||||
}
|
||||
for(let i=4; i<=5 ; i++){
|
||||
const eventSeverityGreyValue = wrapper.find('[test-id="eventSeverityValue'+rowIndex+i+'"]')
|
||||
expect(eventSeverityGreyValue.classes()).toContain('grey-dot')
|
||||
}
|
||||
}
|
||||
|
||||
// low
|
||||
let lowArray = [2,4]
|
||||
for(let index=0; index < lowArray.length; index++){
|
||||
let rowIndex = lowArray[index]
|
||||
for(let i=1; i<=2 ; i++){
|
||||
const eventSeverityRedValue = wrapper.find('[test-id="eventSeverityValue'+rowIndex+i+'"]')
|
||||
expect(eventSeverityRedValue.classes()).toContain('red-dot')
|
||||
}
|
||||
for(let i=3; i<=5 ; i++){
|
||||
const eventSeverityGreyValue = wrapper.find('[test-id="eventSeverityValue'+rowIndex+i+'"]')
|
||||
expect(eventSeverityGreyValue.classes()).toContain('grey-dot')
|
||||
}
|
||||
}
|
||||
|
||||
// info
|
||||
let infoArray = [0,3,9]
|
||||
for(let index=0; index < infoArray.length; index++){
|
||||
let rowIndex = infoArray[index]
|
||||
for(let i=1; i<=1 ; i++){
|
||||
const eventSeverityRedValue = wrapper.find('[test-id="eventSeverityValue'+rowIndex+i+'"]')
|
||||
expect(eventSeverityRedValue.classes()).toContain('red-dot')
|
||||
}
|
||||
for(let i=2; i<=5 ; i++){
|
||||
const eventSeverityGreyValue = wrapper.find('[test-id="eventSeverityValue'+rowIndex+i+'"]')
|
||||
expect(eventSeverityGreyValue.classes()).toContain('grey-dot')
|
||||
}
|
||||
}
|
||||
resolve()
|
||||
}, 200))
|
||||
})
|
||||
test('Npm 事件：APP事件信息表格 数据验证(应用数据列)', async () => {
|
||||
require('vue-router').useRoute.mockReturnValue({ query: {} })
|
||||
// 模拟 axios 数据
|
||||
axios.get.mockResolvedValue(mockGet)
|
||||
// 加载vue组件，获得实例
|
||||
const wrapper = mount(NpmAppEventTable, {
|
||||
global: {
|
||||
plugins: [ElementPlus]
|
||||
},
|
||||
propsData: {
|
||||
timeFilter
|
||||
}
|
||||
})
|
||||
|
||||
await new Promise(resolve => setTimeout(() => {
|
||||
const textNode0 = wrapper.find('[test-id="appName0"]')
|
||||
const textNode1 = wrapper.find('[test-id="appName1"]')
|
||||
const textNode2 = wrapper.find('[test-id="appName2"]')
|
||||
const textNode3 = wrapper.find('[test-id="appName3"]')
|
||||
const textNode4 = wrapper.find('[test-id="appName4"]')
|
||||
const textNode5 = wrapper.find('[test-id="appName5"]')
|
||||
const textNode6 = wrapper.find('[test-id="appName6"]')
|
||||
const textNode7 = wrapper.find('[test-id="appName7"]')
|
||||
const textNode8 = wrapper.find('[test-id="appName8"]')
|
||||
const textNode9 = wrapper.find('[test-id="appName9"]')
|
||||
|
||||
expect(textNode0.text()).toEqual('youku')
|
||||
expect(textNode1.text()).toEqual('uplive')
|
||||
expect(textNode2.text()).toEqual('youku')
|
||||
expect(textNode3.text()).toEqual('apple_hls')
|
||||
expect(textNode4.text()).toEqual('apple_hls')
|
||||
expect(textNode5.text()).toEqual('apple_hls')
|
||||
expect(textNode6.text()).toEqual('uplive')
|
||||
expect(textNode7.text()).toEqual('windows_update')
|
||||
expect(textNode8.text()).toEqual('apple_hls')
|
||||
expect(textNode9.text()).toEqual('cloudflare')
|
||||
|
||||
resolve()
|
||||
}, 200))
|
||||
})
|
||||
test('Npm 事件：APP事件信息表格 数据验证(严重程度数据列)', async () => {
|
||||
require('vue-router').useRoute.mockReturnValue({ query: {} })
|
||||
// 模拟 axios 数据
|
||||
axios.get.mockResolvedValue(mockGet)
|
||||
// 加载vue组件，获得实例
|
||||
const wrapper = mount(NpmAppEventTable, {
|
||||
global: {
|
||||
plugins: [ElementPlus]
|
||||
},
|
||||
propsData: {
|
||||
timeFilter
|
||||
}
|
||||
})
|
||||
|
||||
await new Promise(resolve => setTimeout(() => {
|
||||
const textNode0 = wrapper.find('[test-id="eventSeverity0"]')
|
||||
const textNode1 = wrapper.find('[test-id="eventSeverity1"]')
|
||||
const textNode2 = wrapper.find('[test-id="eventSeverity2"]')
|
||||
const textNode3 = wrapper.find('[test-id="eventSeverity3"]')
|
||||
const textNode4 = wrapper.find('[test-id="eventSeverity4"]')
|
||||
const textNode5 = wrapper.find('[test-id="eventSeverity5"]')
|
||||
const textNode6 = wrapper.find('[test-id="eventSeverity6"]')
|
||||
const textNode7 = wrapper.find('[test-id="eventSeverity7"]')
|
||||
const textNode8 = wrapper.find('[test-id="eventSeverity8"]')
|
||||
const textNode9 = wrapper.find('[test-id="eventSeverity9"]')
|
||||
|
||||
expect(textNode0.text()).toEqual('info')
|
||||
expect(textNode1.text()).toEqual('critical')
|
||||
expect(textNode2.text()).toEqual('low')
|
||||
expect(textNode3.text()).toEqual('info')
|
||||
expect(textNode4.text()).toEqual('low')
|
||||
expect(textNode5.text()).toEqual('medium')
|
||||
expect(textNode6.text()).toEqual('high')
|
||||
expect(textNode7.text()).toEqual('medium')
|
||||
expect(textNode8.text()).toEqual('critical')
|
||||
expect(textNode9.text()).toEqual('info')
|
||||
|
||||
resolve()
|
||||
}, 200))
|
||||
})
|
||||
test('Npm 事件：APP事件信息表格 数据验证(事件类型数据列)', async () => {
|
||||
require('vue-router').useRoute.mockReturnValue({ query: {} })
|
||||
// 模拟 axios 数据
|
||||
axios.get.mockResolvedValue(mockGet)
|
||||
// 加载vue组件，获得实例
|
||||
const wrapper = mount(NpmAppEventTable, {
|
||||
global: {
|
||||
plugins: [ElementPlus]
|
||||
},
|
||||
propsData: {
|
||||
timeFilter
|
||||
}
|
||||
})
|
||||
|
||||
await new Promise(resolve => setTimeout(() => {
|
||||
const textNode0 = wrapper.find('[test-id="eventType0"]')
|
||||
const textNode1 = wrapper.find('[test-id="eventType1"]')
|
||||
const textNode2 = wrapper.find('[test-id="eventType2"]')
|
||||
const textNode3 = wrapper.find('[test-id="eventType3"]')
|
||||
const textNode4 = wrapper.find('[test-id="eventType4"]')
|
||||
const textNode5 = wrapper.find('[test-id="eventType5"]')
|
||||
const textNode6 = wrapper.find('[test-id="eventType6"]')
|
||||
const textNode7 = wrapper.find('[test-id="eventType7"]')
|
||||
const textNode8 = wrapper.find('[test-id="eventType8"]')
|
||||
const textNode9 = wrapper.find('[test-id="eventType9"]')
|
||||
|
||||
expect(textNode0.text()).toEqual('http error')
|
||||
expect(textNode1.text()).toEqual('http error')
|
||||
expect(textNode2.text()).toEqual('http error')
|
||||
expect(textNode3.text()).toEqual('http error')
|
||||
expect(textNode4.text()).toEqual('http error')
|
||||
expect(textNode5.text()).toEqual('http error')
|
||||
expect(textNode6.text()).toEqual('http error')
|
||||
expect(textNode7.text()).toEqual('http error')
|
||||
expect(textNode8.text()).toEqual('http error')
|
||||
expect(textNode9.text()).toEqual('http error')
|
||||
|
||||
resolve()
|
||||
}, 200))
|
||||
})
|
||||
test('Npm 事件：APP事件信息表格 数据验证(事件数量数据列)', async () => {
|
||||
require('vue-router').useRoute.mockReturnValue({ query: {} })
|
||||
// 模拟 axios 数据
|
||||
axios.get.mockResolvedValue(mockGet)
|
||||
// 加载vue组件，获得实例
|
||||
const wrapper = mount(NpmAppEventTable, {
|
||||
global: {
|
||||
plugins: [ElementPlus]
|
||||
},
|
||||
propsData: {
|
||||
timeFilter
|
||||
}
|
||||
})
|
||||
|
||||
await new Promise(resolve => setTimeout(() => {
|
||||
const textNode0 = wrapper.find('[test-id="count0"]')
|
||||
const textNode1 = wrapper.find('[test-id="count1"]')
|
||||
const textNode2 = wrapper.find('[test-id="count2"]')
|
||||
const textNode3 = wrapper.find('[test-id="count3"]')
|
||||
const textNode4 = wrapper.find('[test-id="count4"]')
|
||||
const textNode5 = wrapper.find('[test-id="count5"]')
|
||||
const textNode6 = wrapper.find('[test-id="count6"]')
|
||||
const textNode7 = wrapper.find('[test-id="count7"]')
|
||||
const textNode8 = wrapper.find('[test-id="count8"]')
|
||||
const textNode9 = wrapper.find('[test-id="count9"]')
|
||||
|
||||
expect(textNode0.text()).toEqual('6')
|
||||
expect(textNode1.text()).toEqual('5')
|
||||
expect(textNode2.text()).toEqual('4')
|
||||
expect(textNode3.text()).toEqual('3')
|
||||
expect(textNode4.text()).toEqual('3')
|
||||
expect(textNode5.text()).toEqual('2')
|
||||
expect(textNode6.text()).toEqual('2')
|
||||
expect(textNode7.text()).toEqual('2')
|
||||
expect(textNode8.text()).toEqual('1')
|
||||
expect(textNode9.text()).toEqual('1')
|
||||
|
||||
resolve()
|
||||
}, 200))
|
||||
})
|
||||
})
|
||||
Reference in New Issue
Block a user