fix: 完善单测demo(indexedDB相关)

src/Test.vue

@@ -11,12 +11,14 @@
 import { useRoute, useRouter } from 'vue-router'
 import axios from 'axios'
 import { ref } from 'vue'
+import indexedDBUtils from '@/indexedDB'
 export default {
   name: 'Test',
   data () {
     return {
       count: 0,
-      obj: { id: 1, title: 'title' }
+      obj: { id: 1, title: 'title' },
+      indexedDBValue: null
     }
   },
   methods: {
@@ -35,6 +37,12 @@ export default {
       axios.get('/api/getCount').then(response => {
         this.count = response.data
       })
+    },
+    async setIndexedDBValue () {
+      await indexedDBUtils.selectTable('test').put({ id: 1, name: 'test' })
+    },
+    async getIndexedDBValue () {
+      this.indexedDBValue = await indexedDBUtils.selectTable('test').get(1)
     }
   },
   setup () {

src/indexedDB/index.js

@@ -1,8 +1,19 @@
 import { dbName, dbGeoDataTableName, dbDrilldownTableConfig } from '@/utils/constants'
 import Dexie from 'dexie'
+/* https://dexie.org/ */
 
-export const db = new Dexie(dbName)
-db.version(2).stores({
+const db = new Dexie(dbName)
+db.version(3).stores({
   [dbGeoDataTableName]: '++name, geo',
-  [dbDrilldownTableConfig]: '++id, config'
+  [dbDrilldownTableConfig]: '++id, config',
+  test: '++id, name'
 })
+function selectTable (tableName) {
+  return db[tableName]
+}
+
+const indexedDBUtils = {
+  db,
+  selectTable
+}
+export default indexedDBUtils

src/store/modules/user.js

@@ -5,7 +5,7 @@ import { ElMessage } from 'element-plus' // dependent on utc plugin
 import { storageKey, dbDrilldownTableConfig } from '@/utils/constants'
 import { getConfigVersion } from '@/utils/tools'
 import { api } from '@/utils/api'
-import { db } from '@/indexedDB'
+import indexedDBUtils from '@/indexedDB'
 
 const user = {
   state () {
@@ -92,7 +92,7 @@ const user = {
         if (res.code === 200 && res.page.list && res.page.list.length > 0) {
           // 从接口返回整体配置，再读取用户缓存，将对应条目覆盖，作为使用的配置
           const defaultConfigs = JSON.parse(res.page.list[0].cvalue)
-          await db[dbDrilldownTableConfig].put({
+          await indexedDBUtils.selectTable(dbDrilldownTableConfig).put({
             id: 'default',
             version: defaultConfigs.version,
             config: defaultConfigs.config
@@ -100,7 +100,7 @@ const user = {
           const userId = localStorage.getItem(storageKey.userId)
           const oldVersion = await getConfigVersion(userId)
           if (oldVersion !== defaultConfigs.version) {
-            db[dbDrilldownTableConfig].delete(userId)
+            indexedDBUtils.selectTable(dbDrilldownTableConfig).delete(userId)
           }
         }
       })

src/utils/constants.js

@@ -1,6 +1,8 @@
 export const defaultPageSize = 20
 
+// indexedDB库名
 export const dbName = 'cn-db'
+// indexedDB表名
 export const dbGeoDataTableName = 'geodata'
 export const dbDrilldownTableConfig = 'cn-drilldown-table-config'
 export const storageKey = {

src/utils/tools.js

@@ -5,8 +5,7 @@ import { storageKey, iso36112, topDomain, echartsFontSize, dbGeoDataTableName, n
 import { getIso36112JsonData, getDictList } from '@/utils/api'
 import { format } from 'echarts'
 import router from '@/router'
-import { db } from '@/indexedDB'
-import { useRoute } from 'vue-router'
+import indexedDBUtils from '@/indexedDB'
 
 export const tableSort = {
   // 是否需要排序
@@ -488,11 +487,11 @@ export function loadGeoData () {
   keys.push(storageKey.iso36112Capital)
   keys.push(storageKey.iso36112WorldLow)
   keys.forEach(async k => {
-    const queryData = await db[dbGeoDataTableName].get({ name: k })
+    const queryData = await indexedDBUtils.selectTable(dbGeoDataTableName).get({ name: k })
     if (!queryData) {
       const data = await getIso36112JsonData(iso36112[k])
       if (data) {
-        db[dbGeoDataTableName].add({
+        indexedDBUtils.selectTable(dbGeoDataTableName).add({
           name: k,
           geo: data
         })
@@ -505,14 +504,14 @@ export function loadGeoData () {
 *  使用indexedDB缓存地图数据
 *  */
 export async function getGeoData (key) {
-  const data = await db[dbGeoDataTableName].get({ name: key })
+  const data = await indexedDBUtils.selectTable(dbGeoDataTableName).get({ name: key })
   if (data) {
     return data.geo
   } else {
     if (iso36112[key]) {
       const d = await getIso36112JsonData(iso36112[key])
       if (d) {
-        db[dbGeoDataTableName].add({
+        indexedDBUtils.selectTable(dbGeoDataTableName).add({
           name: key,
           geo: d
         })
@@ -937,7 +936,7 @@ export async function getDefaultCurTab (tableType, metric, columnName) {
 export async function readDrilldownTableConfigByUser () {
   // 获取用户定制的自定义配置
   const userId = localStorage.getItem(storageKey.userId)
-  const userLocalConfig = await db[dbDrilldownTableConfig].get({ id: userId })
+  const userLocalConfig = await indexedDBUtils.selectTable(dbDrilldownTableConfig).get({ id: userId })
   let defaultDrillDownTableConfigs = []
   if (userLocalConfig) {
     defaultDrillDownTableConfigs = userLocalConfig.config
@@ -946,15 +945,15 @@ export async function readDrilldownTableConfigByUser () {
 }
 
 export async function getConfigVersion (id) {
-  let defaultConfigInDb = await db[dbDrilldownTableConfig].get({ id: id })
+  let defaultConfigInDb = await indexedDBUtils.selectTable(dbDrilldownTableConfig).get({ id: id })
   if (!defaultConfigInDb) {
-    defaultConfigInDb = await db[dbDrilldownTableConfig].get({ id: 'default' })
+    defaultConfigInDb = await indexedDBUtils.selectTable(dbDrilldownTableConfig).get({ id: 'default' })
   }
   return defaultConfigInDb.version || ''
 }
 
 export async function combineDrilldownTableWithUserConfig () {
-  const defaultConfigInDb = await db[dbDrilldownTableConfig].get({ id: 'default' })
+  const defaultConfigInDb = await indexedDBUtils.selectTable(dbDrilldownTableConfig).get({ id: 'default' })
   const defaultConfigGroup = defaultConfigInDb ? defaultConfigInDb.config : []
   const currentUserConfigGroup = await readDrilldownTableConfigByUser()
   if (defaultConfigGroup && currentUserConfigGroup && currentUserConfigGroup.length > 0) {

src/views/charts2/charts/networkOverview/NetworkOverviewTabs.vue

@@ -215,8 +215,8 @@ import unitConvert from '@/utils/unit-convert'
 import { getChainRatio, computeScore, urlParamsHandler, overwriteUrl, readDrilldownTableConfigByUser, combineDrilldownTableWithUserConfig, getDnsMapData, handleSpecialValue, getConfigVersion } from '@/utils/tools'
 import { getSecond } from '@/utils/date-util'
 import chartMixin from '@/views/charts2/chart-mixin'
-import { db } from '@/indexedDB'
 import _ from 'lodash'
+import indexedDBUtils from '@/indexedDB'
 
 export default {
   name: 'NetworkOverviewTabs',
@@ -1729,7 +1729,7 @@ export default {
         version = await getConfigVersion('default')
       }
       // 更新缓存中的配置
-      await db[dbDrilldownTableConfig].put({
+      await indexedDBUtils.selectTable(dbDrilldownTableConfig).put({
         id: this.userId,
         version: version,
         config: this.$_.cloneDeep(curUserConfigGroup)

test/Test.test.js

@@ -7,6 +7,7 @@ import Test from '../src/Test'
 import { mount } from '@vue/test-utils'
 import { getNameByEventType } from '@/utils/tools'
 import axios from 'axios'
+import indexedDBUtils from '@/indexedDB'
 
 // 模拟的axios返回数据
 const mockId = { data: 2 }
@@ -33,7 +34,6 @@ describe('单元测试demo', () => {
     await button.trigger('click')
     // 断言点击按钮后文本dom的内容是否是'2'
     expect(textNode.text()).toBe('2')
-
     /* 更多断言类型：https://jestjs.io/docs/expect */
   })
   test('Vue组件--获取路由中的参数', async () => {
@@ -49,7 +49,7 @@ describe('单元测试demo', () => {
   test('Vue组件--模拟获取localstorage/sessionStorage的内容', async () => {
     require('vue-router').useRoute.mockReturnValue({ query: {} })
     require('vue-router').useRouter.mockReturnValue({ currentRoute: { value: { path: '/' } } })
-    // 模拟getItem
+    // 模拟localStorage的getItem
     jest.spyOn(localStorage.__proto__, 'getItem').mockImplementation(key => key)
     // 加载vue组件，获得实例
     const wrapper = mount(Test)
@@ -105,6 +105,20 @@ describe('单元测试demo', () => {
       expect(wrapper.vm.obj).toEqual({ id: 2, title: 'title2' })
     })
   })
+  test('Vue组件--模拟indexedDB操作', async () => {
+    require('vue-router').useRoute.mockReturnValue({ query: {} })
+    require('vue-router').useRouter.mockReturnValue({ currentRoute: { value: { path: '/' } } })
+    // 加载vue组件，获得实例
+    const wrapper = mount(Test)
+    // 模拟indexedDB的内容
+    indexedDBUtils.selectTable.mockReturnValue({
+      put: jest.fn(),
+      get: jest.fn().mockResolvedValue({ a: 1 })
+    })
+    await wrapper.vm.setIndexedDBValue()
+    await wrapper.vm.getIndexedDBValue()
+    expect(wrapper.vm.indexedDBValue).toEqual({ a: 1 })
+  })
   test('js方法--getNameByEventType', async () => {
     expect(getNameByEventType('http error')).toBe('http error ratio')
   })

test/init.js

@@ -27,6 +27,8 @@ jest.mock('vue-router', () => {
 })
 /* 模拟axios */
 jest.mock('axios')
+/* 模拟indexedDB工具 */
+jest.mock('@/indexedDB')
 /* 模拟$t */
 config.global.mocks.$t = key => key
 /* 模拟$route，具体用例中需要不同值时重写覆盖即可 */

test/views/charts2/charts/networkOverview/NetworkOverviewLine.test.js

@@ -5,21 +5,23 @@ import axios from 'axios'
 const mockGet = {
   data: {"status":200,"code":200,"success":true,"message":null,"formatType":"json","data":{"resultType":"object","result":[{"type":"bytes","totalBitsRate":{"values":[[1673247564,"96801019.52"]],"analysis":{"avg":"112042808.24","max":"301842105.76","min":"52096324","p95":"168089003.35199997"}},"inboundBitsRate":{"values":[[1673247564,"11814508.48"]],"analysis":{"avg":"18587597.36","max":"137528138.88","min":"3181142.88","p95":"49561521.447999954"}},"outboundBitsRate":{"values":[[1673247564,"84282965.52"]],"analysis":{"avg":"87557861.44","max":"290402258","min":"45337684.48","p95":"121041718.81199999"}},"internalBitsRate":{"values":[[1673247564,"9125.12"]],"analysis":{"avg":"278114.32","max":"2215460.48","min":"0","p95":"923494.5719999998"}},"throughBitsRate":{"values":[[1673247564,"694420.48"]],"analysis":{"avg":"5619235.12","max":"42455480.24","min":"262607.76","p95":"13559588.195999999"}},"other":{"values":[[1673247564,"0.00"]],"analysis":{"avg":"0.01","max":"0.08","min":"0.00","p95":"0.08"}}},{"type":"packets","totalPacketsRate":{"values":[[1673247564,"12077.53"]],"analysis":{"avg":"14062.37","max":"32840.42","min":"6564.17","p95":"20923.167999999987"}},"inboundPacketsRate":{"values":[[1673247564,"3865.58"]],"analysis":{"avg":"4241.61","max":"15460.03","min":"1918.22","p95":"8549.799999999997"}},"outboundPacketsRate":{"values":[[1673247564,"8118.89"]],"analysis":{"avg":"9170.98","max":"27134.58","min":"4510.25","p95":"13690.540999999996"}},"internalPacketsRate":{"values":[[1673247564,"15.89"]],"analysis":{"avg":"35.95","max":"276.47","min":"0.00","p95":"122.49749999999999"}},"throughPacketsRate":{"values":[[1673247564,"77.17"]],"analysis":{"avg":"613.82","max":"3768.56","min":"42.92","p95":"1279.757499999999"}},"other":{"values":[[1673247564,"0.00"]],"analysis":{"avg":"0","max":"0.01","min":"0.00","p95":"0.01"}}},{"type":"sessions","totalSessionsRate":{"values":[[1673247564,"29.92"]],"analysis":{"avg":"29.89","max":"29.92","min":"29.67","p95":"29.92"}}}]},"msg":"OK"}
 }
+const timeFilter = {
+  dateRangeValue: -1,
+  startTime: 1673244000000,
+  endTime: 1673247600000
+}
+const chart = {"id":1,"name":"network overview line","i18n":"","panelId":1,"pid":0,"type":102,"x":0,"y":0,"w":19,"h":6,"params":{},"cby":1,"ctime":"2022-07-06 16:59:22","uby":1,"utime":"2022-07-06 16:59:22","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":1,"category":"echarts","firstShow":false,"moved":false}
 
-describe('NetworkOverviewLine.vue测试', () => {
-  test('Metric=Bits/s', async () => {
+describe('views/charts2/charts/networkOverview/NetworkOverviewLine.vue测试', () => {
+  test('Metric=Bits/s，点击第三个tab', async () => {
     require('vue-router').useRoute.mockReturnValue({ query: {} })
     // 模拟axios返回数据
     axios.get.mockResolvedValue(mockGet)
     // 加载vue组件，获得实例
     const wrapper = mount(NetworkOverviewLine, {
       propsData: {
-        timeFilter: {
-          dateRangeValue: -1,
-          startTime: 1673244000000,
-          endTime: 1673247600000
-        },
-        chart: {"id":1,"name":"network overview line","i18n":"","panelId":1,"pid":0,"type":102,"x":0,"y":0,"w":19,"h":6,"params":{},"cby":1,"ctime":"2022-07-06 16:59:22","uby":1,"utime":"2022-07-06 16:59:22","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":1,"category":"echarts","firstShow":false,"moved":false}
+        timeFilter,
+        chart
       }
     })
     const textNode0 = await wrapper.get('[test-id="tabContent0"]')
@@ -45,13 +47,9 @@ describe('NetworkOverviewLine.vue测试', () => {
     // 加载vue组件，获得实例
     const wrapper = mount(NetworkOverviewLine, {
       propsData: {
-        timeFilter: {
-          dateRangeValue: -1,
-          startTime: 1673244000000,
-          endTime: 1673247600000
-        },
-        metric: 'Packets/s',
-        chart: {"id":1,"name":"network overview line","i18n":"","panelId":1,"pid":0,"type":102,"x":0,"y":0,"w":19,"h":6,"params":{},"cby":1,"ctime":"2022-07-06 16:59:22","uby":1,"utime":"2022-07-06 16:59:22","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":1,"category":"echarts","firstShow":false,"moved":false}
+        timeFilter,
+        chart,
+        metric: 'Packets/s'
       }
     })
     const textNode0 = await wrapper.get('[test-id="tabContent0"]')
@@ -64,4 +62,22 @@ describe('NetworkOverviewLine.vue测试', () => {
       resolve()
     }, 200))
   })
+  test('Metric=Sessions/s', async () => {
+    require('vue-router').useRoute.mockReturnValue({ query: {} })
+    // 模拟axios返回数据
+    axios.get.mockResolvedValue(mockGet)
+    // 加载vue组件，获得实例
+    const wrapper = mount(NetworkOverviewLine, {
+      propsData: {
+        timeFilter,
+        chart,
+        metric: 'Sessions/s'
+      }
+    })
+    const textNode0 = await wrapper.get('[test-id="tabContent0"]')
+    await new Promise(resolve => setTimeout(() => {
+      expect(textNode0.text()).toEqual('29.89sessions/s')
+      resolve()
+    }, 200))
+  })
 })