Skip to content

Commit a526ee3

Browse files
csxiaoyaojianxiancsxiaoyaojianxian
committed
jest
1 parent 1fc6527 commit a526ee3

File tree

10 files changed

+254
-72
lines changed

10 files changed

+254
-72
lines changed

‎13-自动化测试&mock数据/03-jest-vue-header&todoList/src/containers/TodoList/__tests__/unit/Header.test.js‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import { shallowMount } from '@vue/test-utils'
22
import Header from '@/containers/TodoList/components/Header'
3+
// 封装的方法
4+
import { findTestWrapper } from '@/utils/testUtils'
35

46
it('Header 样式发生改变，提示', () => {
57
const wrapper = shallowMount(Header)
@@ -8,7 +10,7 @@ it('Header 样式发生改变，提示', () => {
810

911
it('Header 包含 input 框', () => {
1012
const wrapper = shallowMount(Header)
11-
const input = wrapper.find('[data-test="input"]')
13+
const input = findTestWrapper(wrapper, 'input')
1214
expect(input.exists()).toBe(true)
1315
})
1416

@@ -20,15 +22,15 @@ it('Header 中 input 框初始内容为空', () => {
2022

2123
it('Header 中 input 框值发生变化，数据跟随变化', () => {
2224
const wrapper = shallowMount(Header)
23-
const input = wrapper.find('[data-test="input"]')
25+
const input = findTestWrapper(wrapper, 'input')
2426
input.setValue('csxiaoyao')
2527
const inputValue = wrapper.vm.$data.inputValue
2628
expect(inputValue).toBe('csxiaoyao')
2729
})
2830

2931
it('Header 中 input 框输入回车，无内容时无反应', () => {
3032
const wrapper = shallowMount(Header)
31-
const input = wrapper.find('[data-test="input"]')
33+
const input = findTestWrapper(wrapper, 'input')
3234
input.setValue('')
3335
input.trigger('keyup.enter')
3436
// 为空时不应该触发 add 事件
@@ -37,7 +39,7 @@ it('Header 中 input 框输入回车，无内容时无反应', () => {
3739

3840
it('Header 中 input 框输入回车，有内容时触发事件', () => {
3941
const wrapper = shallowMount(Header)
40-
const input = wrapper.find('[data-test="input"]')
42+
const input = findTestWrapper(wrapper, 'input')
4143
input.setValue('csxiaoyao')
4244
input.trigger('keyup.enter')
4345
// 不为空时应该触发 add 事件
@@ -46,7 +48,7 @@ it('Header 中 input 框输入回车，有内容时触发事件', () => {
4648

4749
it('Header 中 input 框输入回车，有内容时触发事件，同时清空 inputValue', () => {
4850
const wrapper = shallowMount(Header)
49-
const input = wrapper.find('[data-test="input"]')
51+
const input = findTestWrapper(wrapper, 'input')
5052
input.setValue('csxiaoyao')
5153
input.trigger('keyup.enter')
5254
expect(wrapper.emitted().add).toBeTruthy()

‎13-自动化测试&mock数据/03-jest-vue-header&todoList/src/utils/testUtils.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export const findTestWrapper = (wrapper, tag) => {
2+
return wrapper.find(`[data-test="${tag}"]`)
3+
}

‎13-自动化测试&mock数据/jest-vue/src/App.vue‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,4 +19,7 @@ export default {
1919
margin: 0;
2020
padding: 0
2121
}
22+
body {
23+
background: #cdcdcd;
24+
}
2225
</style>

‎13-自动化测试&mock数据/jest-vue/src/containers/TodoList/TodoList.vue‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
11
<template>
22
<div>
33
<Header @add="addUndoItem" />
4-
<ul>
5-
<li v-for="item in undoList" :key="item">{{item}}</li>
6-
</ul>
4+
<UndoList :list="undoList" @delete="handleItemDelete"/>
75
</div>
86
</template>
97

108
<script>
119
import Header from './components/Header'
10+
import UndoList from './components/UndoList'
1211
export default {
1312
name: 'TodoList',
1413
components: {
15-
Header
14+
Header,
15+
UndoList
1616
},
1717
data () {
1818
return {
@@ -22,6 +22,9 @@ export default {
2222
methods: {
2323
addUndoItem (inputValue) {
2424
this.undoList.push(inputValue)
25+
},
26+
handleItemDelete (index) {
27+
this.undoList.splice(index, 1)
2528
}
2629
}
2730
}

‎13-自动化测试&mock数据/jest-vue/src/containers/TodoList/__tests__/unit/Header.test.js‎

Lines changed: 47 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,54 +1,57 @@
11
import { shallowMount } from '@vue/test-utils'
22
import Header from '@/containers/TodoList/components/Header'
3+
import { findTestWrapper } from '@/utils/testUtils'
34

4-
it('Header 样式发生改变，提示', () => {
5-
const wrapper = shallowMount(Header)
6-
expect(wrapper).toMatchSnapshot()
7-
})
5+
describe('Header 组件', () => {
6+
it('Header 样式发生改变，提示', () => {
7+
const wrapper = shallowMount(Header)
8+
expect(wrapper).toMatchSnapshot()
9+
})
810

9-
it('Header 包含 input 框', () => {
10-
const wrapper = shallowMount(Header)
11-
const input = wrapper.find('[data-test="input"]')
12-
expect(input.exists()).toBe(true)
13-
})
11+
it('Header 包含 input 框', () => {
12+
const wrapper = shallowMount(Header)
13+
const input = findTestWrapper(wrapper, 'input')
14+
expect(input.exists()).toBe(true)
15+
})
1416

15-
it('Header 中 input 框初始内容为空', () => {
16-
const wrapper = shallowMount(Header)
17-
const inputValue = wrapper.vm.$data.inputValue
18-
expect(inputValue).toBe('')
19-
})
17+
it('Header 中 input 框初始内容为空', () => {
18+
const wrapper = shallowMount(Header)
19+
const inputValue = wrapper.vm.$data.inputValue
20+
expect(inputValue).toBe('')
21+
})
2022

21-
it('Header 中 input 框值发生变化，数据跟随变化', () => {
22-
const wrapper = shallowMount(Header)
23-
const input = wrapper.find('[data-test="input"]')
24-
input.setValue('csxiaoyao')
25-
const inputValue = wrapper.vm.$data.inputValue
26-
expect(inputValue).toBe('csxiaoyao')
27-
})
23+
it('Header 中 input 框值发生变化，数据跟随变化', () => {
24+
const wrapper = shallowMount(Header)
25+
const input = findTestWrapper(wrapper, 'input')
26+
input.setValue('csxiaoyao')
27+
const inputValue = wrapper.vm.$data.inputValue
28+
expect(inputValue).toBe('csxiaoyao')
29+
})
2830

29-
it('Header 中 input 框输入回车，无内容时无反应', () => {
30-
const wrapper = shallowMount(Header)
31-
const input = wrapper.find('[data-test="input"]')
32-
input.setValue('')
33-
input.trigger('keyup.enter')
34-
// 为空时不应该触发 add 事件
35-
expect(wrapper.emitted().add).toBeFalsy()
36-
})
31+
it('Header 中 input 框输入回车，无内容时无反应', () => {
32+
const wrapper = shallowMount(Header)
33+
const input = findTestWrapper(wrapper, 'input')
34+
input.setValue('')
35+
input.trigger('keyup.enter')
36+
// 为空时不应该触发 add 事件
37+
expect(wrapper.emitted().add).toBeFalsy()
38+
})
3739

38-
it('Header 中 input 框输入回车，有内容时触发事件', () => {
39-
const wrapper = shallowMount(Header)
40-
const input = wrapper.find('[data-test="input"]')
41-
input.setValue('csxiaoyao')
42-
input.trigger('keyup.enter')
43-
// 不为空时应该触发 add 事件
44-
expect(wrapper.emitted().add).toBeTruthy()
45-
})
40+
it('Header 中 input 框输入回车，有内容时触发事件', () => {
41+
const wrapper = shallowMount(Header)
42+
const input = findTestWrapper(wrapper, 'input')
43+
input.setValue('csxiaoyao')
44+
input.trigger('keyup.enter')
45+
// 不为空时应该触发 add 事件
46+
expect(wrapper.emitted().add).toBeTruthy()
47+
})
4648

47-
it('Header 中 input 框输入回车，有内容时触发事件，同时清空 inputValue', () => {
48-
const wrapper = shallowMount(Header)
49-
const input = wrapper.find('[data-test="input"]')
50-
input.setValue('csxiaoyao')
51-
input.trigger('keyup.enter')
52-
expect(wrapper.emitted().add).toBeTruthy()
53-
expect(wrapper.vm.$data.inputValue).toBe('')
49+
it('Header 中 input 框输入回车，有内容时触发事件，同时清空 inputValue', () => {
50+
const wrapper = shallowMount(Header)
51+
const input = findTestWrapper(wrapper, 'input')
52+
input.setValue('csxiaoyao')
53+
input.trigger('keyup.enter')
54+
expect(wrapper.emitted().add).toBeTruthy()
55+
expect(wrapper.vm.$data.inputValue).toBe('')
56+
})
5457
})

‎13-自动化测试&mock数据/jest-vue/src/containers/TodoList/__tests__/unit/TodoList.test.js‎

Lines changed: 44 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,50 @@
11
import { shallowMount } from '@vue/test-utils'
22
import TodoList from '@/containers/TodoList/TodoList'
3-
import Header from '@/containers/TodoList/components/Header'
3+
import UndoList from '@/containers/TodoList/components/UndoList'
44

5-
it('TodoItem 初始化时，undoList 应该为空', () => {
6-
const wrapper = shallowMount(TodoList)
7-
const undoList = wrapper.vm.$data.undoList
8-
expect(undoList).toEqual([])
9-
})
5+
describe('TodoList 组件', () => {
6+
it('TodoItem 初始化时，undoList 应该为空', () => {
7+
const wrapper = shallowMount(TodoList)
8+
const undoList = wrapper.vm.$data.undoList
9+
expect(undoList).toEqual([])
10+
})
1011

11-
it('TodoItem 执行 addItem 时会增加一个内容', () => {
12-
const wrapper = shallowMount(TodoList)
13-
wrapper.vm.addUndoItem('csxiaoyao')
14-
const undoList = wrapper.vm.$data.undoList
15-
expect(undoList).toEqual(['csxiaoyao'])
16-
})
12+
it('TodoItem 执行 addItem 时会增加一个内容', () => {
13+
const wrapper = shallowMount(TodoList)
14+
wrapper.vm.addUndoItem('csxiaoyao')
15+
const undoList = wrapper.vm.$data.undoList
16+
expect(undoList).toEqual(['csxiaoyao'])
17+
})
18+
19+
it('TodoList 中 addUndoItem 被执行后，内容会增加一项', () => {
20+
// const content = 'csxiaoyao'
21+
// const wrapper = shallowMount(TodoList)
22+
// const header = wrapper.find(Header)
23+
// header.vm.$emit('add', content)
24+
// const undoList = wrapper.vm.$data.undoList
25+
// expect(undoList).toEqual([content])
26+
27+
const wrapper = shallowMount(TodoList)
28+
wrapper.setData({
29+
undoList: [1, 2, 3]
30+
})
31+
wrapper.vm.addUndoItem(4)
32+
expect(wrapper.vm.$data.undoList).toEqual([1, 2, 3, 4])
33+
})
34+
35+
it('UndoList 调用 UndoList，应该传递 list 参数', () => {
36+
const wrapper = shallowMount(TodoList)
37+
const undoList = wrapper.find(UndoList)
38+
const list = undoList.props('list')
39+
expect(list).toBeTruthy()
40+
})
1741

18-
it('TodoList 监听到 Header 的 add 事件时会增加一个内容', () => {
19-
const content = 'csxiaoyao'
20-
const wrapper = shallowMount(TodoList)
21-
const header = wrapper.find(Header)
22-
header.vm.$emit('add', content)
23-
const undoList = wrapper.vm.$data.undoList
24-
expect(undoList).toEqual([content])
42+
it('UndoList 中 hanleDeleteItem 方法被调用时，UndoList 列表内容会减少', () => {
43+
const wrapper = shallowMount(TodoList)
44+
wrapper.setData({
45+
undoList: [1, 2, 3]
46+
})
47+
wrapper.vm.handleItemDelete(1)
48+
expect(wrapper.vm.$data.undoList).toEqual([1, 3])
49+
})
2550
})

‎13-自动化测试&mock数据/jest-vue/src/containers/TodoList/__tests__/unit/UndoList.test.js‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import { shallowMount } from '@vue/test-utils'
2+
import UndoList from '@/containers/TodoList/components/UndoList'
3+
import { findTestWrapper } from '@/utils/testUtils'
4+
5+
describe('UodoList 组件', () => {
6+
it('list 参数为 []，count 值应该为 0， 且列表无内容', () => {
7+
const wrapper = shallowMount(UndoList, {
8+
propsData: { list: [] }
9+
})
10+
const countElem = findTestWrapper(wrapper, 'count')
11+
const listItems = findTestWrapper(wrapper, 'item')
12+
expect(countElem.at(0).text()).toEqual('0')
13+
expect(listItems.length).toEqual(0)
14+
})
15+
16+
it('list 参数为 [1, 2, 3]，count 值应该为 3， 且列表有内容', () => {
17+
const wrapper = shallowMount(UndoList, {
18+
propsData: { list: [1, 2, 3] }
19+
})
20+
const countElem = findTestWrapper(wrapper, 'count')
21+
const listItems = findTestWrapper(wrapper, 'item')
22+
expect(countElem.at(0).text()).toEqual('3')
23+
expect(listItems.length).toEqual(3)
24+
})
25+
26+
it('UndoList 参数为 [1, 2, 3]，count 值应该为 3， 且列表有内容，且存在删除按钮', () => {
27+
const wrapper = shallowMount(UndoList, {
28+
propsData: { list: [1, 2, 3] }
29+
})
30+
const countElem = findTestWrapper(wrapper, 'count')
31+
const listItems = findTestWrapper(wrapper, 'item')
32+
const deleteButtons = findTestWrapper(wrapper, 'delete-button')
33+
expect(countElem.at(0).text()).toEqual('3')
34+
expect(listItems.length).toEqual(3)
35+
expect(deleteButtons.length).toEqual(3)
36+
})
37+
38+
it('删除按钮被点击时向外触发点击事件', () => {
39+
const wrapper = shallowMount(UndoList, {
40+
propsData: { list: [1, 2, 3] }
41+
})
42+
const deleteButtons = findTestWrapper(wrapper, 'delete-button').at(1)
43+
deleteButtons.trigger('click')
44+
expect(wrapper.emitted().delete).toBeTruthy()
45+
expect(wrapper.emitted().delete[0][0]).toBe(1)
46+
})
47+
})

‎13-自动化测试&mock数据/jest-vue/src/containers/TodoList/__tests__/unit/__snapshots__/Header.test.js.snap‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,3 +7,11 @@ exports[`Header 样式发生改变，提示 1`] = `
77
<input data-test="input" placeholder="TodoItem" class="header-input"></div>
88
</div>
99
`;
10+
11+
exports[`Header 组件 Header 样式发生改变，提示 1`] = `
12+
<div class="header">
13+
<div class="header-content">
14+
TodoList
15+
<input data-test="input" placeholder="TodoItem" class="header-input"></div>
16+
</div>
17+
`;

0 commit comments

Comments
 (0)