cyber-narrator-cn-ui/test/views/charts2/charts/networkOverview/NetworkOverviewApps.test.js

import NetworkOverviewApps from '@/views/charts2/charts/networkOverview/NetworkOverviewApps'
import { mount } from '@vue/test-utils'
import axios from 'axios'
import ElementPlus from 'element-plus'

const mockGet = {
  data: { status: 200, code: 200, queryKey: 'd9f5b7769b8c9025354794d6eb053f5c', success: true, message: null, statistics: { elapsed: 8, rows_read: 151581, bytes_read: 9780720, result_size: 364, result_rows: 4 }, job: null, formatType: 'json', meta: [{ name: 'app_label', type: 'string', category: 'Dimension' }, { name: 'bytes_total', type: 'long', category: 'Metric' }, { name: 'packets_total', type: 'long', category: 'Metric' }, { name: 'sessions_total', type: 'long', category: 'Metric' }], data: { resultType: 'object', result: [{ type: 'bytes', qq: { rate: 1010.16, total: 21819167 }, douyin: { rate: '0', total: 589724424997 }, kuaishou: { rate: 7390882.56, total: 159642139901 } }, { type: 'packets', qq: { rate: 2.64, total: 57117 }, douyin: { rate: 25025.84, total: 540554929 }, kuaishou: { rate: 6813.36, total: 147167390 } }, { type: 'sessions', qq: { rate: 0.08, total: 2042 }, douyin: { rate: 25.04, total: 541472 }, kuaishou: { rate: 5.04, total: 108589 } }] }, originalUrl: 'http://192.168.44.55:9999?query=SELECT%20common_app_label%20AS%20app_label%2C%20SUM%28common_c2s_byte_num%20%2B%20common_s2c_byte_num%29%20AS%20bytes_total%2C%20SUM%28common_c2s_pkt_num%20%2B%20common_s2c_pkt_num%29%20AS%20packets_total%2C%20SUM%28common_sessions%29%20AS%20sessions_total%20FROM%20metric_application%20WHERE%20stat_time%20%3E%3D%201675180800-172799%20AND%20stat_time%20%3C%201675353599-172799%20AND%20common_app_label%20IN%20%28%20%27douyin%27%2C%27kuaishou%27%2C%27qq%27%2C%27wechat%27%20%29%20GROUP%20BY%20app_label&format=json&option=real-time', msg: 'OK' }
}

const mockGet1 = {
  data: { status: 200, code: 200, queryKey: '0d6d3c03e630309af3ff000a353145bc', success: true, message: null, statistics: { elapsed: 40, rows_read: 633867, bytes_read: 23030397, result_size: 43140, result_rows: 404 }, job: null, formatType: 'json', meta: [{ name: 'stat_time', type: 'long', category: 'Dimension' }, { name: 'app_label', type: 'string', category: 'Dimension' }, { name: 'bytes_total', type: 'long', category: 'Metric' }, { name: 'packets_total', type: 'long', category: 'Metric' }, { name: 'sessions_total', type: 'long', category: 'Metric' }], data: { resultType: 'object', result: [{ type: 'bytes', qq: { values: [['1675180224', '0'], ['1675181952', '227614'], ['1675183680', '38412'], ['1675185408', '116041'], ['1675187136', '128653'], ['1675188864', '135713'], ['1675190592', '122184'], ['1675192320', '129864'], ['1675194048', '1964603'], ['1675195776', '125529'], ['1675197504', '40230'], ['1675199232', '77972'], ['1675200960', '78289'], ['1675202688', '67906'], ['1675204416', '57945'], ['1675206144', '109257'], ['1675207872', '143575'], ['1675209600', '118119'], ['1675211328', '175533'], ['1675213056', '69095'], ['1675214784', '108809'], ['1675216512', '130300'], ['1675218240', '68447'], ['1675219968', '630788'], ['1675221696', '155681'], ['1675223424', '176030'], ['1675225152', '128553'], ['1675226880', '113247'], ['1675228608', '50118'], ['1675230336', '84248'], ['1675232064', '142975'], ['1675233792', '93655'], ['1675235520', '33835'], ['1675237248', '139744'], ['1675238976', '77275'], ['1675240704', '121832'], ['1675242432', '96674'], ['1675244160', '117739'], ['1675245888', '167341'], ['1675247616', '111160'], ['1675249344', '121214'], ['1675251072', '52357'], ['1675252800', '64871'], ['1675254528', '175765'], ['1675256256', '198280'], ['1675257984', '313557'], ['1675259712', '130227'], ['1675261440', '104428'], ['1675263168', '274705'], ['1675264896', '70431'], ['1675266624', '140682'], ['1675268352', '83156'], ['1675270080', '1294611'], ['1675271808', '62669'], ['1675273536', '95395'], ['1675275264', '65723'], ['1675276992', '100901'], ['1675278720', '79062'], ['1675280448', '169488'], ['1675282176', '129568'], ['1675283904', '53631'], ['1675285632', '97518'], ['1675287360', '119426'], ['1675289088', '52308'], ['1675290816', '1361035'], ['1675292544', '156913'], ['1675294272', '215434'], ['1675296000', '54255'], ['1675297728', '288032'], ['1675299456', '772642'], ['1675301184', '107272'], ['1675302912', '92936'], ['1675304640', '498593'], ['1675306368', '102826'], ['1675308096', '76248'], ['1675309824', '145622'], ['1675311552', '55976'], ['1675313280', '75229'], ['1675315008', '162535'], ['1675316736', '180897'], ['1675318464', '60033'], ['1675320192', '64638'], ['1675321920', '129043'], ['1675323648', '579694'], ['1675325376', '51898'], ['1675327104', '75191'], ['1675328832', '333430'], ['1675330560', '39211'], ['1675332288', '1735358'], ['1675334016', '58490'], ['1675335744', '104864'], ['1675337472', '264375'], ['1675339200', '269080'], ['1675340928', '70592'], ['1675342656', '93411'], ['1675344384', '112441'], ['1675346112', '90449'], ['1675347840', '70863'], ['1675349568', '96436'], ['1675351296', '185547'], ['1675353024', '119575']], analysis: { rate: 910.96, total: 1.9676022E7 } }, douyin: { values: [['1675180224', '0'], ['1675181952', '6840349207'], ['1675183680', '6938901016'], ['1675185408', '7305187539'], ['1675187136', '8188141571'], ['1675188864', '7247690661'], ['1675190592', '6926759120'], ['1675192320', '7380048772'], ['1675194048', '7993802965'], ['1675195776', '6965741583'], ['1675197504', '8346510734'], ['1675199232', '6825635569'], ['1675200960', '8038915184'], ['1675202688', '8477225356'], ['1675204416', '8038673785'], ['1675206144', '7753302399'], ['1675207872', '7465742788'], ['1675209600', '7584210058'], ['1675211328', '7588104529'], ['1675213056', '8582557129'], ['1675214784', '6841255319'], ['1675216512', '7587872713'], ['1675218240', '7466607445'], ['1675219968', '7870624721'], ['1675221696', '7412764966'], ['1675223424', '8223871918'], ['1675225152', '8243945377'], ['167522
}

const mockGet2 = {
  data: { status: 200, code: 200, queryKey: '11e7e2634661a4ac63f45a90a4fbc366', success: true, message: null, statistics: { elapsed: 10, rows_read: 151581, bytes_read: 9629321, result_size: 384, result_rows: 4 }, job: null, formatType: 'json', meta: [{ name: 'app_company', type: 'string', category: 'Dimension' }, { name: 'bytes_total', type: 'long', category: 'Metric' }, { name: 'packets_total', type: 'long', category: 'Metric' }, { name: 'sessions_total', type: 'long', category: 'Metric' }], data: { resultType: 'object', result: [{ type: 'bytes', Baidu: { rate: 1088125.12, total: 23503366121 }, Tencent: { rate: 13817425.76, total: 298454669638 }, Bytedance: { rate: 29791297.68, total: 643488305661 }, Alibaba: { rate: 3822845.52, total: 82572985509 } }, { type: 'packets', Baidu: { rate: 1132.24, total: 24456798 }, Tencent: { rate: 15815.6, total: 341615256 }, Bytedance: { rate: 27681.68, total: 597920164 }, Alibaba: { rate: 4051.04, total: 87502224 } }, { type: 'sessions', Baidu: { rate: 7.36, total: 158507 }, Tencent: { rate: 16.4, total: 355022 }, Bytedance: { rate: 38.56, total: 833195 }, Alibaba: { rate: 24, total: 519104 } }] }, originalUrl: 'http://192.168.44.55:9999?query=SELECT%20app_company%20AS%20app_company%2C%20SUM%28common_c2s_byte_num%20%2B%20common_s2c_byte_num%29%20AS%20bytes_total%2C%20SUM%28common_c2s_pkt_num%20%2B%20common_s2c_pkt_num%29%20AS%20packets_total%2C%20SUM%28common_sessions%29%20AS%20sessions_total%20FROM%20metric_application%20WHERE%20stat_time%20%3E%3D%20toDateTime%281675180800%29-172799%20AND%20stat_time%20%3C%20toDateTime%281675353599%29-172799%20AND%20app_company%20IN%20%28%20%27Bytedance%27%2C%27Tencent%27%2C%27Alibaba%27%2C%27Baidu%27%20%29%20GROUP%20BY%20app_company&format=json&option=real-time', msg: 'OK' }
}

const mockGet3 = {
  data: { status: 200, code: 200, queryKey: '54f7d44a87abfa2643033b45fb9ac1af', success: true, message: null, statistics: { elapsed: 14, rows_read: 633867, bytes_read: 22394902, result_size: 45357, result_rows: 404 }, job: null, formatType: 'json', meta: [{ name: 'stat_time', type: 'long', category: 'Dimension' }, { name: 'app_company', type: 'string', category: 'Dimension' }, { name: 'bytes_total', type: 'long', category: 'Metric' }, { name: 'packets_total', type: 'long', category: 'Metric' }, { name: 'sessions_total', type: 'long', category: 'Metric' }], data: { resultType: 'object', result: [{ type: 'bytes', Baidu: { values: [['1675180224', '0'], ['1675181952', '186922462'], ['1675183680', '246368399'], ['1675185408', '319109553'], ['1675187136', '304441401'], ['1675188864', '535693636'], ['1675190592', '306487561'], ['1675192320', '179845873'], ['1675194048', '240757575'], ['1675195776', '242490898'], ['1675197504', '266812080'], ['1675199232', '285633401'], ['1675200960', '250783731'], ['1675202688', '202741925'], ['1675204416', '288905564'], ['1675206144', '264733418'], ['1675207872', '170662251'], ['1675209600', '188119952'], ['1675211328', '258930258'], ['1675213056', '211813880'], ['1675214784', '311067410'], ['1675216512', '228958245'], ['1675218240', '203782626'], ['1675219968', '258819386'], ['1675221696', '922311133'], ['1675223424', '274140838'], ['1675225152', '214457186'], ['1675226880', '320938298'], ['1675228608', '223494342'], ['1675230336', '263221725'], ['1675232064', '392156448'], ['1675233792', '209510347'], ['1675235520', '233293822'], ['1675237248', '420123341'], ['1675238976', '500120418'], ['1675240704', '306320387'], ['1675242432', '276800750'], ['1675244160', '246412014'], ['1675245888', '213229410'], ['1675247616', '174621303'], ['1675249344', '167818258'], ['1675251072', '311630640'], ['1675252800', '204026984'], ['1675254528', '248019634'], ['1675256256', '225920989'], ['1675257984', '289571558'], ['1675259712', '260433584'], ['1675261440', '267076409'], ['1675263168', '172960469'], ['1675264896', '187771584'], ['1675266624', '241454724'], ['1675268352', '329752706'], ['1675270080', '288552844'], ['1675271808', '248913131'], ['1675273536', '343099199'], ['1675275264', '279732573'], ['1675276992', '199138635'], ['1675278720', '253584024'], ['1675280448', '186462990'], ['1675282176', '241297490'], ['1675283904', '676915126'], ['1675285632', '238702155'], ['1675287360', '349619952'], ['1675289088', '236809805'], ['1675290816', '236038733'], ['1675292544', '276030570'], ['1675294272', '277516641'], ['1675296000', '211822464'], ['1675297728', '272051733'], ['1675299456', '235388507'], ['1675301184', '319171935'], ['1675302912', '192217920'], ['1675304640', '345455785'], ['1675306368', '319848769'], ['1675308096', '303561695'], ['1675309824', '208942533'], ['1675311552', '272791726'], ['1675313280', '204352308'], ['1675315008', '388846886'], ['1675316736', '339402557'], ['1675318464', '260030322'], ['1675320192', '264913750'], ['1675321920', '268731960'], ['1675323648', '245927219'], ['1675325376', '279881933'], ['1675327104', '311843005'], ['1675328832', '282638902'], ['1675330560', '185391416'], ['1675332288', '251799584'], ['1675334016', '206192986'], ['1675335744', '254411430'], ['1675337472', '599077930'], ['1675339200', '257549224'], ['1675340928', '225861527'], ['1675342656', '198703921'], ['1675344384', '209918478'], ['1675346112', '190463924'], ['1675347840', '254093605'], ['1675349568', '229914017'], ['1675351296', '261381749'], ['1675353024', '174475031']], analysis: { rate: 1269032.4, total: 2.7410941385E10 } }, Tencent: { values: [['1675180224', '0'], ['1675181952', '3364312107'], ['1675183680', '4079983457'], ['1675185408', '3664816581'], ['1675187136', '3901897437'], ['1675188864', '3105742432'], ['1675190592', '3109079773'], ['1675192320', '3634085043'], ['1675194048', '3304598207'], ['1675195776', '3364370975'], ['1675197504', '3679341083'], ['1675199232', '4004654138'], ['1675200960', '5075731596'], ['1675202688', '3350826774'], ['1675204416', '3965120815'], ['1675206144', '32
}

const mockGet4 = {
  data: { code: 200, data: { total: 31, pageSize: 24, pages: 2, pageNo: 1, list: [{ id: 5568, name: '供应商', type: 'overviewProvide', code: '1', value: 'Alibaba', sort: 0, remark: 'Alibaba Group Holding Limited, also known as Alibaba, is a Chinese multinational technology company specializing in e-commerce, retail, Internet, and technology.', uby: 1, utime: '2022-08-10 17:52:07', i18n: 'en', state: 1, buildIn: 0, uuser: { id: 1, name: null, username: 'admin', salt: null, lang: null, theme: null, lastLoginIp: null, lastLoginTime: null, ctime: null, cby: null, email: null, mobile: null, status: null, source: null, buildIn: null, roleIds: null, usergroupIds: null, roles: null, apiKeyId: null } }, { id: 5569, name: '供应商', type: 'overviewProvide', code: '1', value: 'Tencent', sort: 0, remark: 'Tencent Holdings Ltd. is a Chinese multinational technology and entertainment conglomerate and holding company headquartered in Shenzhen. It is one of the highest grossing multimedia companies in the world based on revenue.', uby: 1, utime: '2022-08-10 17:52:07', i18n: 'en', state: 1, buildIn: 0, uuser: { id: 1, name: null, username: 'admin', salt: null, lang: null, theme: null, lastLoginIp: null, lastLoginTime: null, ctime: null, cby: null, email: null, mobile: null, status: null, source: null, buildIn: null, roleIds: null, usergroupIds: null, roles: null, apiKeyId: null } }, { id: 5570, name: '供应商', type: 'overviewProvide', code: '1', value: 'Baidu', sort: 0, remark: "Baidu, Inc. is a Chinese multinational technology company specializing in Internet-related services and products and artificial intelligence, headquartered in Beijing's Haidian District. It is one of the largest AI and Internet companies in the world.", uby: 1, utime: '2022-08-10 17:52:07', i18n: 'en', state: 1, buildIn: 0, uuser: { id: 1, name: null, username: 'admin', salt: null, lang: null, theme: null, lastLoginIp: null, lastLoginTime: null, ctime: null, cby: null, email: null, mobile: null, status: null, source: null, buildIn: null, roleIds: null, usergroupIds: null, roles: null, apiKeyId: null } }, { id: 5571, name: '供应商', type: 'overviewProvide', code: '1', value: 'Jingdong', sort: 0, remark: 'JD.com, Inc., also known as Jingdong and formerly called 360buy, is a Chinese e-commerce company headquartered in Beijing. It is one of the two massive B2C online retailers in China by transaction volume and revenue, a member of the Fortune Global 500 and a major competitor to Alibaba-run Tmall.', uby: 1, utime: '2022-08-10 17:52:07', i18n: 'en', state: 1, buildIn: 0, uuser: { id: 1, name: null, username: 'admin', salt: null, lang: null, theme: null, lastLoginIp: null, lastLoginTime: null, ctime: null, cby: null, email: null, mobile: null, status: null, source: null, buildIn: null, roleIds: null, usergroupIds: null, roles: null, apiKeyId: null } }, { id: 5572, name: '供应商', type: 'overviewProvide', code: '1', value: 'Meituan', sort: 0, remark: 'Meituan operates as a web based shopping platform for locally found consumer products and retail services. The Company offers deals of the day by selling vouchers on local services and entertainment, dining, delivery, and other services. Meituan provides its services throughout China.', uby: 1, utime: '2022-08-10 17:52:07', i18n: 'en', state: 1, buildIn: 0, uuser: { id: 1, name: null, username: 'admin', salt: null, lang: null, theme: null, lastLoginIp: null, lastLoginTime: null, ctime: null, cby: null, email: null, mobile: null, status: null, source: null, buildIn: null, roleIds: null, usergroupIds: null, roles: null, apiKeyId: null } }, { id: 5573, name: '供应商', type: 'overviewProvide', code: '1', value: 'Bytedance', sort: 0, remark: 'ByteDance Ltd. is a Chinese multinational internet technology company headquartered in Beijing and incorporated in the Cayman Islands.', uby: 1, utime: '2022-08-10 17:52:07', i18n: 'en', state: 1, buildIn: 0, uuser: { id: 1, name: null, username: 'admin', salt: null, lang: null, theme: null, lastLoginIp: null, lastLoginTime: null, ctime: null, cby: null, email: null, mob
}

const mockGet5 = {
  data: { code: 200, data: { total: 3493, pageSize: 24, pages: 146, pageNo: 1, list: [{ id: 2304, name: '应用名', type: 'overviewApp', code: '1', value: 'avoidr', sort: 0, remark: 'Avoidr is a free web proxy', uby: 1, utime: '2022-08-10 17:52:07', i18n: 'en', state: 1, buildIn: 0, uuser: { id: 1, name: null, username: 'admin', salt: null, lang: null, theme: null, lastLoginIp: null, lastLoginTime: null, ctime: null, cby: null, email: null, mobile: null, status: null, source: null, buildIn: null, roleIds: null, usergroupIds: null, roles: null, apiKeyId: null } }, { id: 2560, name: '应用名', type: 'overviewApp', code: '1', value: 'google_translate', sort: 0, remark: 'Google Translate is the Google translation tool', uby: 1, utime: '2022-08-10 17:52:07', i18n: 'en', state: 1, buildIn: 0, uuser: { id: 1, name: null, username: 'admin', salt: null, lang: null, theme: null, lastLoginIp: null, lastLoginTime: null, ctime: null, cby: null, email: null, mobile: null, status: null, source: null, buildIn: null, roleIds: null, usergroupIds: null, roles: null, apiKeyId: null } }, { id: 2816, name: '应用名', type: 'overviewApp', code: '1', value: 'taobao', sort: 0, remark: 'Taobao is a chinese shopping website', uby: 1, utime: '2022-08-10 17:52:07', i18n: 'en', state: 1, buildIn: 0, uuser: { id: 1, name: null, username: 'admin', salt: null, lang: null, theme: null, lastLoginIp: null, lastLoginTime: null, ctime: null, cby: null, email: null, mobile: null, status: null, source: null, buildIn: null, roleIds: null, usergroupIds: null, roles: null, apiKeyId: null } }, { id: 3072, name: '应用名', type: 'overviewApp', code: '1', value: 'iapp', sort: 0, remark: 'News site about mobile applications', uby: 1, utime: '2022-08-10 17:52:07', i18n: 'en', state: 1, buildIn: 0, uuser: { id: 1, name: null, username: 'admin', salt: null, lang: null, theme: null, lastLoginIp: null, lastLoginTime: null, ctime: null, cby: null, email: null, mobile: null, status: null, source: null, buildIn: null, roleIds: null, usergroupIds: null, roles: null, apiKeyId: null } }, { id: 3328, name: '应用名', type: 'overviewApp', code: '1', value: 'searchnu', sort: 0, remark: 'Browser toolbar search engine', uby: 1, utime: '2022-08-10 17:52:07', i18n: 'en', state: 1, buildIn: 0, uuser: { id: 1, name: null, username: 'admin', salt: null, lang: null, theme: null, lastLoginIp: null, lastLoginTime: null, ctime: null, cby: null, email: null, mobile: null, status: null, source: null, buildIn: null, roleIds: null, usergroupIds: null, roles: null, apiKeyId: null } }, { id: 3584, name: '应用名', type: 'overviewApp', code: '1', value: 'standardmedia', sort: 0, remark: 'Kenyan news portal', uby: 1, utime: '2022-08-10 17:52:07', i18n: 'en', state: 1, buildIn: 0, uuser: { id: 1, name: null, username: 'admin', salt: null, lang: null, theme: null, lastLoginIp: null, lastLoginTime: null, ctime: null, cby: null, email: null, mobile: null, status: null, source: null, buildIn: null, roleIds: null, usergroupIds: null, roles: null, apiKeyId: null } }, { id: 3840, name: '应用名', type: 'overviewApp', code: '1', value: 'mocean', sort: 0, remark: 'MOcean is a advertising agency', uby: 1, utime: '2022-08-10 17:52:07', i18n: 'en', state: 1, buildIn: 0, uuser: { id: 1, name: null, username: 'admin', salt: null, lang: null, theme: null, lastLoginIp: null, lastLoginTime: null, ctime: null, cby: null, email: null, mobile: null, status: null, source: null, buildIn: null, roleIds: null, usergroupIds: null, roles: null, apiKeyId: null } }, { id: 4096, name: '应用名', type: 'overviewApp', code: '1', value: 'elnuevoherald', sort: 0, remark: 'Cuban news portal', uby: 1, utime: '2022-08-10 17:52:07', i18n: 'en', state: 1, buildIn: 0, uuser: { id: 1, name: null, username: 'admin', salt: null, lang: null, theme: null, lastLoginIp: null, lastLoginTime: null, ctime: null, cby: null, email: null, mobile: null, status: null, source: null, buildIn: null, roleIds: null, usergroupIds: null, roles: null, apiKeyId: null } }, { id: 4352, name: '应用名', type: 'overviewApp', code: '1', value: 'mill
}

const mockGet6 = {
  data: { code: 200, data: { total: 1, pageSize: 24, pages: 1, pageNo: 1, list: [{ id: 5579, name: '供应商', type: 'overviewProvide', code: '1', value: 'Sina', sort: 0, remark: 'Sina Corporation is a Chinese technology company. Sina operates four major business lines: Sina Weibo, Sina Mobile, Sina Online, and Sinanet. Sina has over 100 million registered users worldwide. ', uby: 1, utime: '2022-08-10 17:52:07', i18n: 'en', state: 1, buildIn: 0, uuser: { id: 1, name: null, username: 'admin', salt: null, lang: null, theme: null, lastLoginIp: null, lastLoginTime: null, ctime: null, cby: null, email: null, mobile: null, status: null, source: null, buildIn: null, roleIds: null, usergroupIds: null, roles: null, apiKeyId: null } }] }, time: '2023-02-07 07:46:05', message: 'success' }
}

const mockGet7 = {
  data: { code: 200, data: { total: 1, pageSize: 24, pages: 1, pageNo: 1, list: [{ id: 3072, name: '应用名', type: 'overviewApp', code: '1', value: 'iapp', sort: 0, remark: 'News site about mobile applications', uby: 1, utime: '2022-08-10 17:52:07', i18n: 'en', state: 1, buildIn: 0, uuser: { id: 1, name: null, username: 'admin', salt: null, lang: null, theme: null, lastLoginIp: null, lastLoginTime: null, ctime: null, cby: null, email: null, mobile: null, status: null, source: null, buildIn: null, roleIds: null, usergroupIds: null, roles: null, apiKeyId: null } }] }, time: '2023-02-07 09:37:55', message: 'success' }
}

const chart = { id: 5, name: 'network overview apps', i18n: '', panelId: 1, pid: 0, type: 103, x: 0, y: 6, w: 19, h: 8, params: { app: [{ user: 'default', list: [{ type: 'app', name: 'douyin' }, { type: 'app', name: 'kuaishou' }, { type: 'app', name: 'wechat' }, { type: 'app', name: 'qq' }, { type: 'provider', name: 'Bytedance' }, { type: 'provider', name: 'Tencent' }] }, { user: 5, list: [{ type: 'app', name: 'douyin' }, { type: 'app', name: 'kuaishou' }, { type: 'app', name: 'wechat' }, { type: 'app', name: 'qq' }, { type: 'provider', name: 'Bytedance' }, { type: 'provider', name: 'Tencent' }, { type: 'provider', name: 'Alibaba' }, { type: 'provider', name: 'Baidu' }] }, { user: 1, list: [{ type: 'app', name: 'douyin' }, { type: 'app', name: 'kuaishou' }, { type: 'app', name: 'wechat' }, { type: 'app', name: 'qq' }, { type: 'provider', name: 'Tencent' }, { type: 'provider', name: 'Jingdong' }, { type: 'provider', name: 'Akamai' }, { type: 'provider', name: 'Bytedance' }, { type: 'provider', name: 'Baidu' }, { type: 'provider', name: 'Huawei' }, { type: 'app', name: 'taobao', appShow: true }] }] }, cby: 1, ctime: '2022-07-06 17:22:22', uby: 1, utime: '2022-11-08 08:19:52', remark: '', state: 1, system: 0, buildIn: 0, uuser: { id: 1, name: null, username: 'admin', salt: null, lang: null, theme: null, lastLoginIp: null, lastLoginTime: null, ctime: null, cby: null, email: null, mobile: null, status: null, source: null, buildIn: null, roleIds: null, usergroupIds: null, roles: null, apiKeyId: null }, cuser: { id: 1, name: null, username: 'admin', salt: null, lang: null, theme: null, lastLoginIp: null, lastLoginTime: null, ctime: null, cby: null, email: null, mobile: null, status: null, source: null, buildIn: null, roleIds: null, usergroupIds: null, roles: null, apiKeyId: null }, children: [], parent: null, panel: { id: 1, name: 'Network Overview', i18n: null, type: null, params: null, cby: null, ctime: null, uby: null, utime: null, remark: null, state: null, buildIn: null, uuser: null, cuser: null }, i: 5, category: 'echarts', firstShow: false, moved: false }

const linkInfo = 5

const timeFilter = {
  dateRangeValue: -1,
  startTime: 1675180800,
  endTime: 1675353599
}

let wrapper = null
/**
 * 进行axios请求，并挂载vue实例
 * 模拟localStorage获取数据
 * ElementPlus
 * @param Metric
 */
function axiosPostAndMounted (Metric) {
  require('vue-router').useRoute.mockReturnValue({ query: {} })
  // 模拟localStorage获取数据
  // eslint-disable-next-line no-proto
  jest.spyOn(localStorage.__proto__, 'getItem').mockImplementation(key => linkInfo)
  // 模拟 axios 数据
  axios.get.mockResolvedValueOnce(mockGet)
  axios.get.mockResolvedValueOnce(mockGet1)

  axios.get.mockResolvedValueOnce(mockGet2)
  axios.get.mockResolvedValueOnce(mockGet3)

  axios.get.mockResolvedValueOnce(mockGet4)
  axios.get.mockResolvedValueOnce(mockGet5)

  axios.get.mockResolvedValueOnce(mockGet6)
  axios.get.mockResolvedValueOnce(mockGet7)

  wrapper = mount(NetworkOverviewApps, {
    propsData: {
      timeFilter,
      chart,
      metric: Metric
    },
    global: {
      plugins: [ElementPlus]
    }
  })
}

describe('views/charts2/charts/networkOverview/NetworkOverviewApps.vue测试', () => {
  test('Providers and Applications 列表信息 Metric:Bits/s', async () => {
    axiosPostAndMounted()
    await new Promise(resolve => setTimeout(async () => {
      const testName0 = wrapper.get('[test-id="name0"]')
      const testName1 = wrapper.get('[test-id="name1"]')
      const testName2 = wrapper.get('[test-id="name6"]')
      const testName3 = wrapper.get('[test-id="name7"]')

      expect(testName0.text()).toEqual('douyin')
      expect(testName1.text()).toEqual('kuaishou')
      expect(testName2.text()).toEqual('Alibaba')
      expect(testName3.text()).toEqual('Baidu')
      //
      const testIcon0 = wrapper.get('[test-id="icon0"]')
      const testIcon1 = wrapper.get('[test-id="icon1"]')
      const testIcon2 = wrapper.get('[test-id="icon6"]')
      const testIcon3 = wrapper.get('[test-id="icon7"]')

      expect(testIcon0.classes()).toContain('cn-icon-app2')
      expect(testIcon1.classes()).toContain('cn-icon-app2')
      expect(testIcon2.classes()).toContain('cn-icon-entity')
      expect(testIcon3.classes()).toContain('cn-icon-entity')
      //
      const testrate0 = wrapper.get('[test-id="rate0"]')
      const testrate1 = wrapper.get('[test-id="rate1"]')
      const testrate2 = wrapper.get('[test-id="rate6"]')
      const testrate3 = wrapper.get('[test-id="rate7"]')

      expect(testrate0.text()).toEqual('34.15 M')
      expect(testrate1.text()).toEqual('9.18 M')
      expect(testrate2.text()).toEqual('4.74 M')
      expect(testrate3.text()).toEqual('1.27 M')

      const testPercent0 = wrapper.get('[test-id="percent0"]')
      const testPercent1 = wrapper.get('[test-id="percent3"]')
      const testPercent2 = wrapper.get('[test-id="percent6"]')
      const testPercent3 = wrapper.get('[test-id="percent7"]')

      expect(testPercent0.text()).toEqual('>500.00%')
      expect(testPercent1.text()).toEqual('-9.82%')
      expect(testPercent2.text()).toEqual('+23.87%')
      expect(testPercent3.text()).toEqual('+16.63%')

      const testTotal0 = wrapper.get('[test-id="total0"]')
      const testTotal1 = wrapper.get('[test-id="total1"]')
      const testTotal2 = wrapper.get('[test-id="total6"]')
      const testTotal3 = wrapper.get('[test-id="total7"]')

      expect(testTotal0.text()).toEqual('686.94 GB')
      expect(testTotal1.text()).toEqual('184.70 GB')
      expect(testTotal2.text()).toEqual('95.26 GB')
      expect(testTotal3.text()).toEqual('25.53 GB')

      // 模拟点击 add 新增
      const testAdd0 = wrapper.find('[test-id="add"]')
      await testAdd0.trigger('click')
      expect(wrapper.vm.showAddApp).toBe(true)
      await wrapper.vm.$nextTick()

      // element drawer
      // add provide 列表 图标
      // const testProvideIcon0 = wrapper.get('[test-id="provide-icon0"]')
      // const testAPPIcon0 = wrapper.get('[test-id="app-icon0"]')

      const testProvide0 = wrapper.find('[test-id="provide0"]')
      await testProvide0.trigger('click')
      expect(testProvide0.classes()).toContain('provide-show')

      const testProvideTitle0 = wrapper.get('[test-id="provide-title0"]')
      expect(testProvideTitle0.text()).toEqual('Jingdong')

      const testProvideRemark0 = wrapper.get('[test-id="provide-remark0"]')
      expect(testProvideRemark0.text()).toEqual('JD.com, Inc., also known as Jingdong and formerly called 360buy, is a Chinese e-commerce company headquartered in Beijing. It is one of the two massive B2C online retailers in China by transaction volume and revenue, a member of the Fortune Global 500 and a major competitor to Alibaba-run Tmall.')

      const testAppTypeTab1 = wrapper.find('[id="tab-1"]')
      await testAppTypeTab1.trigger('click')
      expect(parseFloat(wrapper.vm.appTypeTab)).toBe(1)
      await wrapper.vm.$nextTick()

      const testApp0 = wrapper.find('[test-id="app0"]')
      await testApp0.trigger('click')
      expect(testApp0.classes()).toContain('app-show')

      const testAppTitle0 = wrapper.get('[test-id="app-title0"]')
      expect(testAppTitle0.text()).toEqual('avoidr')

      const testAppRemark0 = wrapper.get('[test-id="app-remark0"]')
      expect(testAppRemark0.text()).toEqual('Avoidr is a free web proxy')
      resolve()
    }, 200))
  })
  test('Providers and Applications 列表信息 Metric:Packets/s', async () => {
    axiosPostAndMounted('Packets/s')
    await new Promise(resolve => setTimeout(async () => {
      const testName0 = wrapper.get('[test-id="name0"]')
      const testName1 = wrapper.get('[test-id="name1"]')
      const testName2 = wrapper.get('[test-id="name6"]')
      const testName3 = wrapper.get('[test-id="name7"]')

      expect(testName0.text()).toEqual('douyin')
      expect(testName1.text()).toEqual('kuaishou')
      expect(testName2.text()).toEqual('Alibaba')
      expect(testName3.text()).toEqual('Baidu')
      //
      const testIcon0 = wrapper.get('[test-id="icon0"]')
      const testIcon1 = wrapper.get('[test-id="icon1"]')
      const testIcon2 = wrapper.get('[test-id="icon6"]')
      const testIcon3 = wrapper.get('[test-id="icon7"]')
      const testIcon4 = wrapper.get('[test-id="icon2"]')

      expect(testIcon0.classes()).toContain('cn-icon-app2')
      expect(testIcon1.classes()).toContain('cn-icon-app2')
      expect(testIcon4.classes()).toContain('cn-icon-app2')
      expect(testIcon2.classes()).toContain('cn-icon-entity')
      expect(testIcon3.classes()).toContain('cn-icon-entity')
      //
      const testrate0 = wrapper.get('[test-id="rate0"]')
      const testrate1 = wrapper.get('[test-id="rate1"]')
      const testrate2 = wrapper.get('[test-id="rate6"]')
      const testrate3 = wrapper.get('[test-id="rate7"]')
      const testrate4 = wrapper.get('[test-id="rate2"]')

      expect(testrate0.text()).toEqual('31.33 K')
      expect(testrate1.text()).toEqual('8.46 K')
      expect(testrate2.text()).toEqual('5.01 K')
      expect(testrate3.text()).toEqual('1.33 K')
      expect(testrate4.text()).toEqual('-')

      const testPercent0 = wrapper.get('[test-id="percent0"]')
      const testPercent1 = wrapper.get('[test-id="percent3"]')
      const testPercent2 = wrapper.get('[test-id="percent6"]')
      const testPercent3 = wrapper.get('[test-id="percent7"]')

      expect(testPercent0.text()).toEqual('+25.20%')
      expect(testPercent1.text()).toEqual('+12.12%')
      expect(testPercent2.text()).toEqual('+23.61%')
      expect(testPercent3.text()).toEqual('+17.90%')

      const testTotal0 = wrapper.get('[test-id="total0"]')
      const testTotal1 = wrapper.get('[test-id="total1"]')
      const testTotal2 = wrapper.get('[test-id="total6"]')
      const testTotal3 = wrapper.get('[test-id="total7"]')
      const testTotal4 = wrapper.get('[test-id="total2"]')

      expect(testTotal0.text()).toEqual('676.80 M')
      expect(testTotal1.text()).toEqual('182.71 M')
      expect(testTotal2.text()).toEqual('108.16 M')
      expect(testTotal3.text()).toEqual('28.83 M')
      expect(testTotal4.text()).toEqual('-')
      resolve()
    }, 200))
  })
  test('Providers and Applications 列表信息 Metric:Sessions/s', async () => {
    axiosPostAndMounted('Sessions/s')
    await new Promise(resolve => setTimeout(async () => {
      const testName0 = wrapper.get('[test-id="name0"]')
      const testName1 = wrapper.get('[test-id="name1"]')
      const testName2 = wrapper.get('[test-id="name6"]')
      const testName3 = wrapper.get('[test-id="name7"]')

      expect(testName0.text()).toEqual('douyin')
      expect(testName1.text()).toEqual('kuaishou')
      expect(testName2.text()).toEqual('Alibaba')
      expect(testName3.text()).toEqual('Baidu')
      //
      const testIcon0 = wrapper.get('[test-id="icon0"]')
      const testIcon1 = wrapper.get('[test-id="icon1"]')
      const testIcon2 = wrapper.get('[test-id="icon6"]')
      const testIcon3 = wrapper.get('[test-id="icon7"]')

      expect(testIcon0.classes()).toContain('cn-icon-app2')
      expect(testIcon1.classes()).toContain('cn-icon-app2')
      expect(testIcon2.classes()).toContain('cn-icon-entity')
      expect(testIcon3.classes()).toContain('cn-icon-entity')
      //
      const testrate0 = wrapper.get('[test-id="rate0"]')
      const testrate1 = wrapper.get('[test-id="rate1"]')
      const testrate2 = wrapper.get('[test-id="rate6"]')
      const testrate3 = wrapper.get('[test-id="rate7"]')

      expect(testrate0.text()).toEqual('30.96')
      expect(testrate1.text()).toEqual('6.24')
      expect(testrate2.text()).toEqual('-')
      expect(testrate3.text()).toEqual('9.20')

      const testPercent0 = wrapper.get('[test-id="percent0"]')
      const testPercent1 = wrapper.get('[test-id="percent3"]')
      const testPercent2 = wrapper.get('[test-id="percent6"]')
      const testPercent3 = wrapper.get('[test-id="percent7"]')

      expect(testPercent0.text()).toEqual('+23.64%')
      expect(testPercent1.text()).toEqual('+100.00%')
      expect(testPercent2.text()).toEqual('-100.00%')
      expect(testPercent3.text()).toEqual('+25.00%')

      const testTotal0 = wrapper.get('[test-id="total0"]')
      const testTotal1 = wrapper.get('[test-id="total1"]')
      const testTotal2 = wrapper.get('[test-id="total6"]')
      const testTotal3 = wrapper.get('[test-id="total7"]')

      expect(testTotal0.text()).toEqual('668.23 K')
      expect(testTotal1.text()).toEqual('134.46 K')
      expect(testTotal2.text()).toEqual('-')
      expect(testTotal3.text()).toEqual('198.26 K')
      resolve()
    }, 200))
  })
  test('搜索功能：模糊匹配', async () => {
    axiosPostAndMounted()
    await new Promise(resolve => setTimeout(async () => {
      // 模拟点击 add 新增
      const testAdd0 = wrapper.find('[test-id="add"]')
      await testAdd0.trigger('click')
      expect(wrapper.vm.showAddApp).toBe(true)
      await wrapper.vm.$nextTick()

      const testSearchInput = wrapper.get('[test-id="search-input"]')
      await wrapper.get('input[type="text"]').setValue('sina')
      await testSearchInput.trigger('input')
      await testAdd0.trigger('click')
      expect(wrapper.vm.searcherApp).toEqual('sina')

      const testAppTypeTab0 = wrapper.find('[id="tab-0"]')
      await testAppTypeTab0.trigger('click')
      expect(parseFloat(wrapper.vm.appTypeTab)).toBe(0)

      const testProvideTitle0 = wrapper.get('[test-id="provide-title0"]')
      expect(testProvideTitle0.text()).toEqual('Sina')

      const testProvideRemark0 = wrapper.get('[test-id="provide-remark0"]')
      expect(testProvideRemark0.text()).toEqual('Sina Corporation is a Chinese technology company. Sina operates four major business lines: Sina Weibo, Sina Mobile, Sina Online, and Sinanet. Sina has over 100 million registered users worldwide.')

      const testAppTypeTab1 = wrapper.find('[id="tab-1"]')
      await testAppTypeTab1.trigger('click')
      expect(parseFloat(wrapper.vm.appTypeTab)).toBe(1)

      const testAppTitle0 = wrapper.get('[test-id="app-title0"]')
      expect(testAppTitle0.text()).toEqual('iapp')

      const testAppRemark0 = wrapper.get('[test-id="app-remark0"]')
      expect(testAppRemark0.text()).toEqual('News site about mobile applications')
      resolve()
    }, 300))
  })
  test('鼠标移入、移出、点击事件', async () => {
    axiosPostAndMounted()
    await new Promise(resolve => setTimeout(async () => {
      // 模拟鼠标 移入 移出 显示隐藏更多 icon 图标
      const testAppDataCard = wrapper.find('[test-id="app-data-card"]')
      await testAppDataCard.trigger('mouseenter')
      expect(wrapper.vm.appData[0].showMore).toBe(true)
      await testAppDataCard.trigger('mouseleave')
      expect(wrapper.vm.appData[0].showMore).toBe(false)
      expect(wrapper.vm.appData[0].moreOptions).toBe(false)

      // 模拟鼠标移入 移出 显示隐藏下拉内容
      const testDark = wrapper.find('[test-id="mouseenter-dark"]')
      await testDark.trigger('mouseenter')
      expect(wrapper.vm.appData[0].moreOptions).toBe(true)

      const testMouseleaveMore = wrapper.find('[test-id="mouseleave-more"]')
      await testMouseleaveMore.trigger('mouseleave')
      expect(wrapper.vm.appData[0].moreOptions).toBe(false)

      // 模拟点击 add 新增
      const testAdd0 = wrapper.find('[test-id="add"]')
      await testAdd0.trigger('click')
      expect(wrapper.vm.showAddApp).toBe(true)
      await wrapper.vm.$nextTick()

      // 模拟 cancel 取消
      const testCancelAdd = wrapper.find('[test-id="cancel-app"]')
      await testCancelAdd.trigger('click')
      expect(wrapper.vm.showAddApp).toBe(false)
      resolve()
    }, 500))
  })
})