diff --git a/src/Test.vue b/src/Test.vue index c59f176b..933ff70b 100644 --- a/src/Test.vue +++ b/src/Test.vue @@ -1,6 +1,7 @@ @@ -13,16 +14,24 @@ export default { data () { return { count: 0, - getData: { id: 1, title: 'title' } + obj: { id: 1, title: 'title' } } }, methods: { click () { this.count++ }, - async getPosts () { - axios.get('/api/posts').then(response => { - this.getData = response.data + async getObj () { + axios.get('/api/getObjId').then(response => { + this.obj.id = response.data + }) + axios.get('/api/getObjTitle').then(response => { + this.obj.title = response.data + }) + }, + async getCount () { + axios.get('/api/getCount').then(response => { + this.count = response.data }) } }, diff --git a/test/Test.test.js b/test/Test.test.js index dec2c721..caf60daa 100644 --- a/test/Test.test.js +++ b/test/Test.test.js @@ -9,7 +9,9 @@ import { getNameByEventType } from '@/utils/tools' import axios from 'axios' // 模拟的axios返回数据 -const mockPostList = { data: { id: 2, title: 'title2' } } +const mockId = { data: 2 } +const mockTitle = { data: 'title2' } +const mockCount = { data: 999 } describe('单元测试demo', () => { test('Vue组件--点击按钮后count的值+1', async () => { @@ -19,11 +21,11 @@ describe('单元测试demo', () => { const textNode = await wrapper.get('[test-id="count"]') const button = await wrapper.get('[test-id="button"]') // 断言文本dom的内容是否是'0' - expect(textNode.text()).toContain('0') + expect(textNode.text()).toBe('0') // 模拟按钮dom点击,执行click()方法 await button.trigger('click') // 断言点击按钮后文本dom的内容是否是'1' - expect(textNode.text()).toContain('1') + expect(textNode.text()).toBe('1') // 再次点击 await button.trigger('click') // 断言点击按钮后文本dom的内容是否是'2' @@ -31,22 +33,43 @@ describe('单元测试demo', () => { /* 更多断言类型:https://jestjs.io/docs/expect */ }) - test('Vue组件--直接获取vue实例中的data和method', async () => { // 模拟axios返回数据 - axios.get.mockResolvedValue(mockPostList) + // 测试内容只有一个axios请求的时候 + axios.get.mockResolvedValue(mockCount) // 加载vue组件,获得实例 const wrapper = mount(Test) - const textNode2 = await wrapper.get('[test-id="title"]') + const textNode = await wrapper.get('[test-id="count"]') // 通过wrapper.vm.xxx直接执行click方法、获取data的数据 - expect(wrapper.vm.count).toEqual(0) + expect(wrapper.vm.count).toBe(0) await wrapper.vm.click() expect(wrapper.vm.count).toBe(1) - - expect(textNode2.text()).toEqual('title') - await wrapper.vm.getPosts() + await wrapper.vm.getCount() await wrapper.vm.$nextTick(() => { + expect(textNode.text()).toBe('999') + }) + }) + test('Vue组件--多个axios请求', async () => { + // 模拟axios返回数据 + // 测试内容有多个url不同的axios请求的话,需分开写 + axios.get.mockImplementation(url => { + switch (url) { + case '/api/getObjId': + return Promise.resolve(mockId) + case '/api/getObjTitle': + return Promise.resolve(mockTitle) + } + }) + // 加载vue组件,获得实例 + const wrapper = mount(Test) + const textNode = await wrapper.get('[test-id="id"]') + const textNode2 = await wrapper.get('[test-id="title"]') + expect(textNode2.text()).toBe('title') + await wrapper.vm.getObj() + await wrapper.vm.$nextTick(() => { + expect(textNode.text()).toBe('2') expect(textNode2.text()).toBe('title2') + expect(wrapper.vm.obj).toEqual({ id: 2, title: 'title2' }) }) }) diff --git a/test/views/charts2/charts/networkOverview/NetworkOverviewLine.test.js b/test/views/charts2/charts/networkOverview/NetworkOverviewLine.test.js index 0aa64a7b..9a84f21b 100644 --- a/test/views/charts2/charts/networkOverview/NetworkOverviewLine.test.js +++ b/test/views/charts2/charts/networkOverview/NetworkOverviewLine.test.js @@ -24,13 +24,13 @@ describe('NetworkOverviewLine.vue测试', () => { const textNode0 = await wrapper.get('[test-id="tabContent0"]') const textNode1 = await wrapper.get('[test-id="tabContent1"]') const textNode2 = await wrapper.get('[test-id="tabContent2"]') - // 延迟1秒等待渲染。使用wrapper.vm.$nextTick有时不管用 + // 延迟等待渲染。使用wrapper.vm.$nextTick有时不管用(例如组件中使用了setTimeout的时候) await new Promise(resolve => setTimeout(() => { expect(textNode0.text()).toEqual('112.04Mbps') expect(textNode1.text()).toEqual('18.59Mbps') expect(textNode2.text()).toEqual('87.56Mbps') resolve() - }, 1000)) + }, 200)) }) test('Metric=Packets/s', async () => { // 模拟axios返回数据 @@ -55,6 +55,6 @@ describe('NetworkOverviewLine.vue测试', () => { expect(textNode1.text()).toEqual('4.24Kpackets/s') expect(textNode2.text()).toEqual('9.17Kpackets/s') resolve() - }, 1000)) + }, 200)) }) })