gfwleak/cyber-narrator-cn-ui
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

CN-1063 fix: 单元测试--实体详情流量折线图和底下3个tab

Browse Source
This commit is contained in:
刘洪洪
2023-06-07 10:34:01 +08:00
parent 73f72b3116
commit d2a3ee8cf9
9 changed files with 581 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/views/charts2/charts/entityDetail/tabs/InformationAggregation.vue
View File

@@ -2,7 +2,7 @@
<div>
<!--初步方案：error提示替换table。后续若改为table内error提示，记得在此修改-->
<chart-error v-if="showError" :content="errorMsg" class="entity-detail-event-error"></chart-error>
<chart-no-data v-if="isNoData && !showError"></chart-no-data>
<chart-no-data v-if="isNoData && !showError" test-id="no-data"></chart-no-data>
<div v-if="!isNoData && !showError" class="information-aggregation__table">
<el-table
@@ -44,13 +44,13 @@
<!-- <div class="information-aggregation-tags">
<template v-for="ic in scope.row.intelligenceContent" >
<template v-if="ic.type === 0" >
<div v-if="ic.threatLevel === -1" class="entity-tag entity-tag&#45;&#45;small entity-tag&#45;&#45;level-one-negative margin-r-6">
<div v-if="ic.threatLevel === -1" class="entity-tag entity-tag--small entity-tag--level-one-negative margin-r-6">
{{ic.value}}
</div>
<div v-else-if="ic.threatLevel === 0" class="entity-tag entity-tag&#45;&#45;small entity-tag&#45;&#45;level-one-normal margin-r-6">
<div v-else-if="ic.threatLevel === 0" class="entity-tag entity-tag--small entity-tag--level-one-normal margin-r-6">
{{ic.value}}
</div>
<div v-else-if="ic.threatLevel === 1" class="entity-tag entity-tag&#45;&#45;small entity-tag&#45;&#45;level-one-positive margin-r-6">
<div v-else-if="ic.threatLevel === 1" class="entity-tag entity-tag--small entity-tag--level-one-positive margin-r-6">
{{ic.value}}
</div>
</template>
@@ -59,7 +59,7 @@
<div class="information-aggregation-tags">
<div v-for="ic in scope.row.intelligenceContent" :key="ic.key">
<div>
<div class="entity-tag entity-tag--small margin-r-6" :class="`entity-tag--level-two-${ic.type}`">
<div class="entity-tag entity-tag--small margin-r-6" :test-id="`entity-tag${scope.$index}`" :class="`entity-tag--level-two-${ic.type}`">
{{ic.value}}
</div>
</div>
@@ -75,10 +75,10 @@
prop="status"
>
<template #default="scope">
<div v-if="scope.row.status === 1" class="information-aggregation__valid">
<div v-if="scope.row.status === 1" :test-id="`entity-status${scope.$index}`" class="information-aggregation__valid">
{{ $t("entity.detail.valid") }}
</div>
<div v-else-if="scope.row.status === 0" class="information-aggregation__invalid">
<div v-else-if="scope.row.status === 0" :test-id="`entity-status${scope.$index}`" class="information-aggregation__invalid">
{{ $t("entity.detail.invalid") }}
</div>
</template>
@@ -107,7 +107,7 @@ export default {
components: { chartNoData },
methods: {
dateFormatByAppearance,
intelligenceContentClass ({ row, column, rowIndex, columnIndex }) {
intelligenceContentClass ({ columnIndex }) {
if (columnIndex === 2) {
return 'padding-0'
}
@@ -120,6 +120,7 @@ export default {
if (res.code === 200) {
this.isNoData = res.data.result.length === 0
this.showError = false
if (!this.isNoData) {
res.data.result.forEach(r => {
Object.keys(r).forEach(k => {
const aggregation = {
@@ -143,6 +144,7 @@ export default {
}
})
})
}
} else {
this.showError = true
this.isNoData = false

9
src/views/charts2/charts/entityDetail/tabs/PerformanceEvent.vue
View File

@@ -5,7 +5,7 @@
<div v-if="!isNoData && !showError" class="entity-detail-event-block">
<div
class="entity-detail-event-border"
v-for="item in eventList"
v-for="(item, index) in eventList"
:key="item.eventId">
<div class="cn-detection--list">
<div class="cn-detection__case entity-detail-performance">
@@ -13,6 +13,7 @@
<div class="cn-detection__row">
<div class="cn-detection__header">
<span
:test-id="`severity-color-block${index}`"
class="detection-event-severity-color-block"
:style="`background-color: ${eventSeverityColor[item.eventSeverity]}`">
</span>
@@ -25,17 +26,17 @@
<div class="basic-info__item" v-if="item.eventSeverity">
<i class="cn-icon cn-icon-severity-level"></i>
<span>{{ $t('network.severity') }}&nbsp;:&nbsp;&nbsp;</span>
<span>{{ toUpperCaseByString(item.eventSeverity) || '-' }}</span>
<span :test-id="`severity${index}`">{{ toUpperCaseByString(item.eventSeverity) || '-' }}</span>
</div>
<div class="basic-info__item">
<i class="cn-icon cn-icon-time2"></i>
<span>{{ $t('detection.list.startTime') }}&nbsp;:&nbsp;&nbsp;</span>
<span>{{ dateFormatByAppearance(item.startTime) || '-' }}</span>
<span :test-id="`start-time${index}`">{{ dateFormatByAppearance(item.startTime) || '-' }}</span>
</div>
<div class="basic-info__item">
<i class="cn-icon cn-icon-duration"></i>
<span>{{ $t('overall.duration') }}&nbsp;:&nbsp;&nbsp;&nbsp;</span>
<span>{{ unitConvert(item.durationMs, 'time', null, null, 0).join(' ') || '-' }}</span>
<span :test-id="`duration-time${index}`">{{ unitConvert(item.durationMs, 'time', null, null, 0).join(' ') || '-' }}</span>
</div>
</div>
</div>

14
src/views/charts2/charts/entityDetail/tabs/SecurityEvent.vue
View File

@@ -1,11 +1,11 @@
<template>
<chart-error v-if="showError" :content="errorMsg" class="entity-detail-event-error"></chart-error>
<chart-no-data v-if="isNoData && !showError"></chart-no-data>
<chart-no-data v-if="isNoData && !showError" test-id="no-data"></chart-no-data>
<div v-if="!isNoData && !showError" class="entity-detail-event-block">
<div
class="entity-detail-event-border"
v-for="item in eventList"
v-for="(item, index) in eventList"
:key="item.eventId">
<div class="cn-detection--list">
<div class="cn-detection__case entity-detail-security">
@@ -13,15 +13,18 @@
<div class="cn-detection__row">
<div class="cn-detection__header">
<span
:test-id="`severity-color-block${index}`"
class="detection-event-severity-color-block"
:style="`background-color: ${eventSeverityColor[item.eventSeverity]}`">
</span>
<span class="detection-event-severity-block">{{ toUpperCaseByString(item.securityType) || '-' }}</span>
<i class="cn-icon cn-icon-attacker"></i>{{ item.offenderIp || '-' }}
<i class="cn-icon cn-icon-attacker"></i>
<span :test-id="`offender-ip${index}`">{{ item.offenderIp || '-' }}</span>
<div class="domain">{{ item.offenderDomain }}</div>
<span class="line">-------</span>
<span class="circle"></span>
<i class="cn-icon cn-icon-attacked"></i>{{ item.victimIp || '-' }}
<i class="cn-icon cn-icon-attacked"></i>
<span :test-id="`victim-ip${index}`">{{ item.victimIp || '-' }}</span>
<div class="domain">{{ item.victimDomain }}</div>
</div>
<div class="cn-detection__body">
@@ -73,7 +76,7 @@
</template>
<script>
import { getSecond } from '@/utils/date-util'
import { getSecond, dateFormatByAppearance } from '@/utils/date-util'
import { eventSeverityColor } from '@/utils/constants'
import unitConvert from '@/utils/unit-convert'
import axios from 'axios'
@@ -111,6 +114,7 @@ export default {
methods: {
unitConvert,
toUpperCaseByString,
dateFormatByAppearance,
initData () {
const params = {
resource: this.entityName,

96
test/views/charts2/charts/entityDetail/InformationAggregation.test.js Normal file
View File

@@ -0,0 +1,96 @@
import InformationAggregation from '@/views/charts2/charts/entityDetail/tabs/InformationAggregation'
import { mount } from '@vue/test-utils'
import axios from 'axios'
import mockData from './mockData/InformationAggregation'
import ElementPlus from '_element-plus@1.0.2-beta.71@element-plus'
let wrapper = null
const mockGet = mockData.common
const timeFilter = {
dateRangeValue: -1,
startTime: 1673244000000,
endTime: 1673247600000
}
const entity = {
entityType: 'ip',
entityName: '153.99.250.123'
}
/**
* 进行axios请求，并挂载vue实例
* @param data
*/
function axiosPostAndMounted (data) {
require('vue-router').useRoute.mockReturnValue({ query: {} })
const _data = data || mockGet
// 模拟 axios 数据
axios.get.mockResolvedValue(_data)
// 加载vue组件，获得实例
wrapper = mount(InformationAggregation, {
global: {
plugins: [ElementPlus]
},
propsData: {
entity,
timeFilter
}
})
}
describe('views/charts2/charts/entityDetail/tabs/InformationAggregation.vue测试', () => {
test('实体详情tabs-情报聚合：表格信息验证（情报内容列）', async () => {
axiosPostAndMounted()
// 延迟等待渲染。使用wrapper.vm.$nextTick有时不管用（例如组件中使用了setTimeout的时候）
await new Promise(resolve => setTimeout(async () => {
const textNode0 = await wrapper.find('[test-id="entity-tag0"]')
const textNode1 = await wrapper.find('[test-id="entity-tag1"]')
const textNode2 = await wrapper.find('[test-id="entity-tag2"]')
const textNode3 = await wrapper.find('[test-id="entity-tag3"]')
const textNode4 = await wrapper.find('[test-id="entity-tag4"]')
expect(textNode0.classes()).toContain('entity-tag--level-two-normal')
expect(textNode1.classes()).toContain('entity-tag--level-two-negative')
expect(textNode2.classes()).toContain('entity-tag--level-two-negative')
expect(textNode3.classes()).toContain('entity-tag--level-two-normal')
expect(textNode4.classes()).toContain('entity-tag--level-two-normal')
expect(textNode0.text()).toEqual('dba Omsoft')
expect(textNode1.text()).toEqual('IcedID')
expect(textNode2.text()).toEqual('i2p')
expect(textNode3.text()).toEqual('门户网站')
expect(textNode4.text()).toEqual('用户tag')
resolve()
}, 400))
})
test('实体详情tabs-情报聚合：表格信息验证（状态列）', async () => {
axiosPostAndMounted()
// 延迟等待渲染。使用wrapper.vm.$nextTick有时不管用（例如组件中使用了setTimeout的时候）
await new Promise(resolve => setTimeout(async () => {
const textNode0 = await wrapper.get('[test-id="entity-status0"]')
const textNode1 = await wrapper.get('[test-id="entity-status1"]')
const textNode2 = await wrapper.get('[test-id="entity-status2"]')
const textNode3 = await wrapper.get('[test-id="entity-status3"]')
const textNode4 = await wrapper.get('[test-id="entity-status4"]')
expect(textNode0.text()).toEqual('entity.detail.valid')
expect(textNode1.text()).toEqual('entity.detail.valid')
expect(textNode2.text()).toEqual('entity.detail.valid')
expect(textNode3.text()).toEqual('entity.detail.valid')
expect(textNode4.text()).toEqual('entity.detail.valid')
resolve()
}, 200))
})
test('实体详情tabs-安全事件：请求无数据', async () => {
axiosPostAndMounted(mockData.empty)
// 延迟等待渲染。使用wrapper.vm.$nextTick有时不管用（例如组件中使用了setTimeout的时候）
await new Promise(resolve => setTimeout(async () => {
const noData = wrapper.get('[test-id="no-data"]')
expect(noData.text()).toBe('npm.noData')
resolve()
}, 200))
})
})

96
test/views/charts2/charts/entityDetail/PerformanceEvent.js Normal file
View File

@@ -0,0 +1,96 @@
import PerformanceEvent from '@/views/charts2/charts/entityDetail/tabs/PerformanceEvent'
import { mount } from '@vue/test-utils'
import axios from 'axios'
import mockData from './mockData/PerformanceEvent'
const timeFilter = {
dateRangeValue: -1,
startTime: 1673244000000,
endTime: 1673247600000
}
const entity = {
entityType: 'ip',
entityName: '153.99.250.123'
}
function init (query) {
require('vue-router').useRoute.mockReturnValue({ query: query || {} })
}
function getRgb (str) {
return str.substring(str.indexOf('rgb'), str.indexOf(';'))
}
describe('views/charts2/charts/entityDetail/tabs/PerformanceEvent.vue测试', () => {
test('实体详情tabs-性能事件：信息展示', async () => {
init()
axios.get.mockResolvedValue(mockData.common)
const wrapper = mount(PerformanceEvent, {
propsData: {
entity,
timeFilter
}
})
// 延迟等待渲染。使用wrapper.vm.$nextTick有时不管用（例如组件中使用了setTimeout的时候）
await new Promise(resolve => setTimeout(async () => {
const textNode0 = await wrapper.get('[test-id="severity-color-block0"]')
const textNode1 = await wrapper.get('[test-id="severity-color-block1"]')
expect(getRgb(textNode0.html())).toEqual('rgb(216, 76, 76)')
expect(getRgb(textNode1.html())).toEqual('rgb(255, 216, 45)')
const severity0 = await wrapper.get('[test-id="severity0"]')
const severity1 = await wrapper.get('[test-id="severity1"]')
expect(severity0.text()).toEqual('critical')
expect(severity1.text()).toEqual('info')
const startTime0 = await wrapper.get('[test-id="start-time0"]')
const startTime1 = await wrapper.get('[test-id="start-time1"]')
expect(startTime0.text()).toEqual('2023-06-07 10:16:16')
expect(startTime1.text()).toEqual('2023-06-07 10:16:16')
const duration0 = await wrapper.get('[test-id="duration-time0"]')
const duration1 = await wrapper.get('[test-id="duration-time1"]')
expect(duration0.text()).toEqual('15 m')
expect(duration1.text()).toEqual('15 m')
resolve()
}, 200))
})
test('实体详情tabs-性能事件：持续时间过小或过大，单位转换', async () => {
init()
axios.get.mockResolvedValue(mockData.empty)
const wrapper = mount(PerformanceEvent, {
propsData: {
entity,
timeFilter
}
})
// 延迟等待渲染。使用wrapper.vm.$nextTick有时不管用（例如组件中使用了setTimeout的时候）
await new Promise(resolve => setTimeout(async () => {
const duration0 = await wrapper.get('[test-id="duration-time0"]')
const duration1 = await wrapper.get('[test-id="duration-time1"]')
expect(duration0.text()).toEqual('900 ms')
expect(duration1.text()).toEqual('104167 d')
resolve()
}, 200))
})
test('实体详情tabs-性能事件：请求无数据', async () => {
init()
axios.get.mockResolvedValue(mockData.empty)
const wrapper = mount(PerformanceEvent, {
propsData: {
entity,
timeFilter
}
})
// 延迟等待渲染。使用wrapper.vm.$nextTick有时不管用（例如组件中使用了setTimeout的时候）
await new Promise(resolve => setTimeout(async () => {
const noData = wrapper.get('[test-id="no-data"]')
expect(noData.text()).toBe('npm.noData')
resolve()
}, 200))
})
})

75
test/views/charts2/charts/entityDetail/SecurityEvent.test.js Normal file
View File

@@ -0,0 +1,75 @@
import SecurityEvent from '@/views/charts2/charts/entityDetail/tabs/SecurityEvent'
import { mount } from '@vue/test-utils'
import axios from 'axios'
import mockData from './mockData/SecurityEvent'
const timeFilter = {
dateRangeValue: -1,
startTime: 1673244000000,
endTime: 1673247600000
}
const entity = {
entityType: 'ip',
entityName: '153.99.250.123'
}
function init (query) {
require('vue-router').useRoute.mockReturnValue({ query: query || {} })
}
function getRgb (str) {
return str.substring(str.indexOf('rgb'), str.indexOf(';'))
}
describe('views/charts2/charts/entityDetail/tabs/SecurityEvent.vue测试', () => {
test('实体详情tabs-安全事件：信息展示，severity严重程度与色块验证', async () => {
init()
axios.get.mockResolvedValue(mockData.common)
const wrapper = mount(SecurityEvent, {
propsData: {
entity,
timeFilter
}
})
// 延迟等待渲染。使用wrapper.vm.$nextTick有时不管用（例如组件中使用了setTimeout的时候）
await new Promise(resolve => setTimeout(async () => {
const textNode0 = await wrapper.get('[test-id="severity-color-block0"]')
const textNode1 = await wrapper.get('[test-id="severity-color-block1"]')
const textNode2 = await wrapper.get('[test-id="severity-color-block2"]')
expect(getRgb(textNode0.html())).toEqual('rgb(216, 76, 76)')
expect(getRgb(textNode1.html())).toEqual('rgb(255, 216, 45)')
expect(getRgb(textNode2.html())).toEqual('rgb(255, 216, 45)')
const offenderIp1 = await wrapper.get('[test-id="offender-ip0"]')
const offenderIp2 = await wrapper.get('[test-id="offender-ip1"]')
const offenderIp3 = await wrapper.get('[test-id="offender-ip2"]')
const victimIp1 = await wrapper.get('[test-id="victim-ip0"]')
const victimIp2 = await wrapper.get('[test-id="victim-ip1"]')
const victimIp3 = await wrapper.get('[test-id="victim-ip2"]')
expect(offenderIp1.text()).toEqual('213.186.33.5')
expect(offenderIp2.text()).toEqual('213.186.33.5')
expect(offenderIp3.text()).toEqual('213.186.33.5')
expect(victimIp1.text()).toEqual('116.178.217.92')
expect(victimIp2.text()).toEqual('116.178.217.93')
expect(victimIp3.text()).toEqual('116.178.217.93')
resolve()
}, 200))
})
test('实体详情tabs-安全事件：请求无数据', async () => {
init()
axios.get.mockResolvedValue(mockData.empty)
const wrapper = mount(SecurityEvent, {
propsData: {
entity,
timeFilter
}
})
// 延迟等待渲染。使用wrapper.vm.$nextTick有时不管用（例如组件中使用了setTimeout的时候）
await new Promise(resolve => setTimeout(async () => {
const noData = wrapper.get('[test-id="no-data"]')
expect(noData.text()).toBe('npm.noData')
resolve()
}, 200))
})
})

86
test/views/charts2/charts/entityDetail/mockData/InformationAggregation.js Normal file
View File

@@ -0,0 +1,86 @@
const mockData = {
// 空
empty: {
data: {
status: 200,
code: 200,
data: {
resultType: 'object',
result: []
}
}
},
bytes: {
// 边界
boundary: {
data: {
status: 200,
code: 200,
data: {
resultType: 'object',
result: []
},
msg: 'OK'
}
}
},
// 正常数据
common: {
data: {
status: 200,
code: 200,
data: {
resultType: 'object',
result: [
{
location: {
isp: 'dba Omsoft',
updateTime: 1685696510,
createTime: 1685696510,
isValid: 1
}
},
{
malware: {
threatType: 'command and control',
malwareName: 'IcedID',
malwareAlias: 'BokBot,IceID',
updateTime: 1685696510,
createTime: 1685696510,
isValid: 1
}
},
{
darkweb: {
nodeType: 'i2p',
updateTime: 1685696510,
createTime: 1685696510,
isValid: 1
}
},
{
userDefinedTag: {
id: 1,
tagValue: '门户网站',
updateTime: 1685696500,
createTime: 1685696500,
isValid: 1
}
},
{
userDefinedTag: {
id: 1,
tagValue: '用户tag',
updateTime: 1685696500,
createTime: 1685696500,
isValid: 1
}
}
]
},
msg: 'OK'
}
}
}
export default mockData

91
test/views/charts2/charts/entityDetail/mockData/PerformanceEvent.js Normal file
View File

@@ -0,0 +1,91 @@
const mockData = {
// 空
empty: {
data: {
status: 200,
code: 200,
data: {
resultType: 'object',
result: []
}
}
},
bytes: {
// 边界
boundary: {
data: {
status: 200,
code: 200,
data: {
resultType: 'object',
result: [
{
eventId: '1308078720390412288',
entityType: 'ip',
serverIp: '116.178.78.180',
domain: null,
appName: null,
eventSeverity: 'critical',
eventType: 'Http error',
startTime: 1686100507,
durationMs: 900,
endTime: 1686104107
},
{
eventId: '1308078720390412289',
entityType: 'ip',
serverIp: '116.178.78.180',
domain: null,
appName: null,
eventSeverity: 'info',
eventType: 'Http error',
startTime: 1686100507,
durationMs: 9000000000000,
endTime: 1686104107
}
]
},
msg: 'OK'
}
}
},
// 正常数据
common: {
data: {
status: 200,
code: 200,
data: {
resultType: 'object',
result: [
{
eventId: '1308078720390412288',
entityType: 'ip',
serverIp: '116.178.78.180',
domain: null,
appName: null,
eventSeverity: 'critical',
eventType: 'Http error',
startTime: 1686100507,
durationMs: 900000,
endTime: 1686104107
},
{
eventId: '1308078720390412289',
entityType: 'ip',
serverIp: '116.178.78.180',
domain: null,
appName: null,
eventSeverity: 'info',
eventType: 'Http error',
startTime: 1686100507,
durationMs: 900000,
endTime: 1686104107
}
]
},
msg: 'OK'
}
}
}
export default mockData

87
test/views/charts2/charts/entityDetail/mockData/SecurityEvent.js Normal file
View File

@@ -0,0 +1,87 @@
const mockData = {
// 空
empty: {
data: {
status: 200,
code: 200,
data: {
resultType: 'object',
result: []
}
}
},
bytes: {
// 边界
boundary: {
data: {
status: 200,
code: 200,
data: {
resultType: 'object',
result: []
},
msg: 'OK'
}
}
},
// 正常数据
common: {
data: {
status: 200,
code: 200,
data: {
resultType: 'object',
result: [
{
eventId: '1298414830886991872',
securityType: 'command and control',
domain: null,
offenderIp: '213.186.33.5',
victimIp: '116.178.217.92',
offenderDomain: 'baidu.com',
victimDomain: 'mi.com',
eventSeverity: 'critical',
malwareName: 'NetWire RC',
cryptominingPool: null,
startTime: 1683186600,
durationMs: 300000,
endTime: 1683186900
},
{
eventId: '1298414830886991873',
securityType: 'command and control',
domain: null,
offenderIp: '213.186.33.5',
victimIp: '116.178.217.93',
offenderDomain: 'baidu.com',
victimDomain: 'mi.com',
eventSeverity: 'low',
malwareName: 'NetWire RC',
cryptominingPool: null,
startTime: 1683186600,
durationMs: 300000,
endTime: 1683186900
},
{
eventId: '1298414830886991873',
securityType: 'command and control',
domain: null,
offenderIp: '213.186.33.5',
victimIp: '116.178.217.93',
offenderDomain: 'baidu.com',
victimDomain: 'mi.com',
eventSeverity: 'low',
malwareName: 'NetWire RC',
cryptominingPool: null,
startTime: 1683186600,
durationMs: 300000,
endTime: 1683186900
}
]
},
msg: 'OK'
}
}
}
export default mockData