Skip to content
This repository was archived by the owner on Feb 7, 2024. It is now read-only.

Commit 1a9d0f1

Browse files
kaorun343kaorun343
committed
Update tests
1 parent 55250f3 commit 1a9d0f1

File tree

6 files changed

+276
-137
lines changed

6 files changed

+276
-137
lines changed

‎jest.config.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ module.exports = {
2424
// collectCoverageFrom: null,
2525

2626
// The directory where Jest should output its coverage files
27-
coverageDirectory: "coverage",
27+
coverageDirectory: 'coverage',
2828

2929
// An array of regexp pattern strings used to skip coverage collection
3030
// coveragePathIgnorePatterns: [
@@ -97,7 +97,7 @@ module.exports = {
9797
// reporters: undefined,
9898

9999
// Automatically reset mock state between every test
100-
// resetMocks: false,
100+
resetMocks: true,
101101

102102
// Reset the module registry before running each individual test
103103
// resetModules: false,
@@ -126,10 +126,10 @@ module.exports = {
126126
// setupFilesAfterEnv: [],
127127

128128
// A list of paths to snapshot serializer modules Jest should use for snapshot testing
129-
// snapshotSerializers: [],
129+
snapshotSerializers: ['jest-serializer-vue'],
130130

131131
// The test environment that will be used for testing
132-
testEnvironment: "node",
132+
testEnvironment: 'jsdom',
133133

134134
// Options that will be passed to the testEnvironment
135135
// testEnvironmentOptions: {},
@@ -165,7 +165,7 @@ module.exports = {
165165

166166
// A map from regular expressions to paths to transformers
167167
transform: {
168-
"^.+\\.(ts|tsx)$": "ts-jest"
168+
'^.+\\.(ts|tsx)$': 'ts-jest',
169169
},
170170

171171
// An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation
@@ -184,4 +184,4 @@ module.exports = {
184184

185185
// Whether to use watchman for file crawling
186186
// watchman: true,
187-
};
187+
}

‎src/decorators/Watch.ts‎

Lines changed: 4 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -4,25 +4,18 @@ import { createDecorator } from 'vue-class-component'
44
/**
55
* decorator of a watch function
66
* @param path the path or the expression to observe
7-
* @param WatchOption
8-
* @return MethodDecorator
7+
* @param watchOptions
98
*/
10-
export function Watch(path: string, options: WatchOptions = {}) {
11-
const { deep = false, immediate = false } = options
12-
9+
export function Watch(path: string, watchOptions: WatchOptions = {}) {
1310
return createDecorator((componentOptions, handler) => {
14-
if (typeof componentOptions.watch !== 'object') {
15-
componentOptions.watch = Object.create(null)
16-
}
17-
11+
componentOptions.watch ||= Object.create(null)
1812
const watch: any = componentOptions.watch
19-
2013
if (typeof watch[path] === 'object' && !Array.isArray(watch[path])) {
2114
watch[path] = [watch[path]]
2215
} else if (typeof watch[path] === 'undefined') {
2316
watch[path] = []
2417
}
2518

26-
watch[path].push({ handler, deep, immediate })
19+
watch[path].push({ handler, ...watchOptions })
2720
})
2821
}

‎tests/decorators/Emit.spec.ts‎

Lines changed: 78 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
1-
import Vue from 'vue'
1+
import { mount, Wrapper } from '@vue/test-utils'
2+
import Vue, { CreateElement } from 'vue'
23
import Component from 'vue-class-component'
34
import { Emit } from '../../src/decorators/Emit'
45

6+
const mockFn = jest.fn()
7+
58
describe(Emit, () => {
69
describe('when event name is given', () => {
710
@Component
@@ -11,90 +14,70 @@ describe(Emit, () => {
1114
@Emit('reset') resetCount() {
1215
this.count = 0
1316
}
14-
}
1517

16-
const child = new ChildComponent()
17-
const mockFn = jest.fn()
18-
child.$emit = mockFn
19-
20-
beforeAll(() => {
21-
child.resetCount()
22-
})
23-
24-
test('call $emit method', () => {
25-
expect(mockFn).toHaveBeenCalled()
26-
})
27-
28-
test('emit event with given name', () => {
29-
expect(mockFn.mock.calls[0][0]).toBe('reset')
30-
})
31-
})
18+
render(h: CreateElement) {
19+
return h('div')
20+
}
21+
}
3222

33-
describe('when argument is given', () => {
3423
@Component
35-
class ChildComponent extends Vue {
36-
count = 0
37-
38-
@Emit() increment(n: number) {
39-
this.count += n
24+
class ParentComponent extends Vue {
25+
$refs!: { child: ChildComponent }
26+
render(h: CreateElement) {
27+
return h(ChildComponent, { on: { reset: mockFn }, ref: 'child' })
4028
}
4129
}
4230

43-
const child = new ChildComponent()
44-
const mockFn = jest.fn()
45-
child.$emit = mockFn
46-
47-
const value = 30
31+
let wrapper: Wrapper<ParentComponent>
4832

49-
beforeAll(() => {
50-
child.increment(value)
33+
beforeEach(() => {
34+
wrapper = mount(ParentComponent)
35+
wrapper.vm.$refs.child.resetCount()
5136
})
5237

5338
test('call $emit method', () => {
5439
expect(mockFn).toHaveBeenCalled()
5540
})
5641

57-
test('emit event with method name', () => {
58-
expect(mockFn.mock.calls[0][0]).toBe('increment')
59-
})
60-
61-
test('emit event with argument', () => {
62-
expect(mockFn.mock.calls[0][1]).toBe(value)
42+
test('emit event with given name', () => {
43+
expect(mockFn).toHaveBeenCalledWith()
6344
})
6445
})
6546

66-
describe('when multiple arguments is given', () => {
47+
describe('when arguments are given', () => {
6748
@Component
6849
class ChildComponent extends Vue {
6950
count = 0
7051

7152
@Emit() increment(n1: number, n2: number) {
7253
this.count += n1 + n2
7354
}
74-
}
7555

76-
const child = new ChildComponent()
77-
const mockFn = jest.fn()
78-
child.$emit = mockFn
56+
render(h: CreateElement) {
57+
return h('div')
58+
}
59+
}
7960

80-
const value1 = 30
81-
const value2 = 40
61+
@Component
62+
class ParentComponent extends Vue {
63+
$refs!: { child: ChildComponent }
64+
render(h: CreateElement) {
65+
return h(ChildComponent, { on: { increment: mockFn }, ref: 'child' })
66+
}
67+
}
8268

83-
beforeAll(() => {
84-
child.increment(value1, value2)
85-
})
69+
let wrapper: Wrapper<ParentComponent>
8670

87-
test('call $emit method', () => {
88-
expect(mockFn).toHaveBeenCalled()
89-
})
71+
const NEW_VALUE1 = 30
72+
const NEW_VALUE2 = 40
9073

91-
test('emit event with method name', () => {
92-
expect(mockFn.mock.calls[0][0]).toBe('increment')
74+
beforeEach(() => {
75+
wrapper = mount(ParentComponent)
76+
wrapper.vm.$refs.child.increment(NEW_VALUE1, NEW_VALUE2)
9377
})
9478

9579
test('emit event with multiple arguments', () => {
96-
expect(mockFn.mock.calls[0][1]).toBe(value1)
97-
expect(mockFn.mock.calls[0][2]).toBe(value2)
80+
expect(mockFn).toHaveBeenCalledWith(NEW_VALUE1, NEW_VALUE2)
9881
})
9982
})
10083

@@ -106,62 +89,74 @@ describe(Emit, () => {
10689
@Emit() increment(n1: number, n2: number) {
10790
return n1 + n2
10891
}
109-
}
11092

111-
const child = new ChildComponent()
112-
const mockFn = jest.fn()
113-
child.$emit = mockFn
93+
render(h: CreateElement) {
94+
return h('div')
95+
}
96+
}
11497

115-
const value1 = 30
116-
const value2 = 40
98+
@Component
99+
class ParentComponent extends Vue {
100+
$refs!: { child: ChildComponent }
101+
render(h: CreateElement) {
102+
return h(ChildComponent, { on: { increment: mockFn }, ref: 'child' })
103+
}
104+
}
117105

118-
beforeAll(() => {
119-
child.increment(value1, value2)
120-
})
106+
let wrapper: Wrapper<ParentComponent>
121107

122-
test('call $emit method', () => {
123-
expect(mockFn).toHaveBeenCalled()
124-
})
108+
const NEW_VALUE1 = 30
109+
const NEW_VALUE2 = 40
125110

126-
test('emit event with method name', () => {
127-
expect(mockFn.mock.calls[0][0]).toBe('increment')
111+
beforeEach(() => {
112+
wrapper = mount(ParentComponent)
113+
wrapper.vm.$refs.child.increment(NEW_VALUE1, NEW_VALUE2)
128114
})
129115

130116
test('emit event with multiple arguments', () => {
131-
expect(mockFn.mock.calls[0][1]).toBe(value1 + value2)
132-
expect(mockFn.mock.calls[0][2]).toBe(value1)
133-
expect(mockFn.mock.calls[0][3]).toBe(value2)
117+
expect(mockFn).toHaveBeenCalledWith(
118+
NEW_VALUE1 + NEW_VALUE2,
119+
NEW_VALUE1,
120+
NEW_VALUE2,
121+
)
134122
})
135123
})
136124

137125
describe('when promise has been returned', () => {
138-
const value = 10
126+
const VALUE = 10
139127

140128
@Component
141129
class ChildComponent extends Vue {
142130
@Emit() promise() {
143-
return Promise.resolve(value)
131+
return Promise.resolve(VALUE)
132+
}
133+
134+
render(h: CreateElement) {
135+
return h('div')
144136
}
145137
}
146138

147-
const child = new ChildComponent()
148-
const mockFn = jest.fn()
149-
child.$emit = mockFn
139+
@Component
140+
class ParentComponent extends Vue {
141+
$refs!: { child: ChildComponent }
142+
render(h: CreateElement) {
143+
return h(ChildComponent, { on: { promise: mockFn }, ref: 'child' })
144+
}
145+
}
150146

151-
beforeAll(async () => {
152-
await child.promise()
147+
let wrapper: Wrapper<ParentComponent>
148+
149+
beforeEach(async () => {
150+
wrapper = mount(ParentComponent)
151+
await wrapper.vm.$refs.child.promise()
153152
})
154153

155154
test('call $emit method', () => {
156155
expect(mockFn).toHaveBeenCalled()
157156
})
158157

159-
test('emit event with method name', () => {
160-
expect(mockFn.mock.calls[0][0]).toBe('promise')
161-
})
162-
163158
test('emit even with resolved value', () => {
164-
expect(mockFn.mock.calls[0][1]).toBe(value)
159+
expect(mockFn).toHaveBeenCalledWith(VALUE)
165160
})
166161
})
167162
})

‎tests/decorators/ModelSync.spec.ts‎

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ import Vue from 'vue'
33
import Component from 'vue-class-component'
44
import { ModelSync } from '../../src/decorators/ModelSync'
55

6+
const mockFunction = jest.fn()
7+
68
describe(ModelSync, () => {
79
const eventName = 'change'
810
const propertyName = 'checked'
@@ -17,11 +19,14 @@ describe(ModelSync, () => {
1719
}
1820

1921
const initialValue = false
20-
const component = new TestComponent({
21-
propsData: { [propertyName]: initialValue },
22+
let component: TestComponent
23+
24+
beforeEach(() => {
25+
component = new TestComponent({
26+
propsData: { [propertyName]: initialValue },
27+
})
28+
component.$emit = mockFunction
2229
})
23-
const mockFunction = jest.fn()
24-
component.$emit = mockFunction
2530

2631
test('define model option correctly', () => {
2732
expect(component.$options.model).toEqual({
@@ -41,7 +46,10 @@ describe(ModelSync, () => {
4146

4247
describe('when props has been changed', () => {
4348
const newValue = true
44-
component.changeChecked(newValue)
49+
50+
beforeEach(() => {
51+
component.changeChecked(newValue)
52+
})
4553

4654
test('calls $emit method', () => {
4755
expect(mockFunction).toHaveBeenCalled()

‎tests/decorators/PropSync.spec.ts‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,13 @@ describe(PropSync, () => {
1717
}
1818

1919
const value = 'John'
20-
const component = new Test({ propsData: { [propertyName]: value } })
20+
let component: Test
2121
const mockFn = jest.fn()
22-
component.$emit = mockFn
22+
23+
beforeEach(() => {
24+
component = new Test({ propsData: { [propertyName]: value } })
25+
component.$emit = mockFn
26+
})
2327

2428
test('defines prop option', () => {
2529
const props = component.$options.props as any
@@ -32,7 +36,10 @@ describe(PropSync, () => {
3236

3337
describe('when prop has been changed', () => {
3438
const newValue = 'Ola'
35-
component.changeName(newValue)
39+
40+
beforeEach(() => {
41+
component.changeName(newValue)
42+
})
3643

3744
test('calls $emit method', () => {
3845
expect(mockFn).toHaveBeenCalled()

0 commit comments

Comments
 (0)