Skip to content

Commit 7c7b949

Browse files
JessicaSachsJessicaSachs
authored
Merge pull request #1248 from winniehell/winniehell-wrapper-selector
feat: Store selector in Wrapper.find() / .findAll()
2 parents a05b499 + ff4e0fc commit 7c7b949

File tree

10 files changed

+212
-47
lines changed

10 files changed

+212
-47
lines changed

‎docs/api/wrapper/README.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,10 @@ A `Wrapper` is an object that contains a mounted component or vnode and methods
2020

2121
`Boolean` (read-only): True if component is attached to document when rendered.
2222

23+
### `selector`
24+
25+
`Selector`: the selector that was used by [`find()`](./find.md) or [`findAll()`](./findAll.md) to create this wrapper
26+
2327
## Methods
2428

2529
!!!include(docs/api/wrapper/attributes.md)!!!

‎flow/wrapper.flow.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ declare interface BaseWrapper {
2828
name(): string | void;
2929
props(key?: string): { [name: string]: any } | any | void;
3030
text(): string | void;
31+
selector: Selector | void;
3132
setData(data: Object): void;
3233
setMethods(methods: Object): void;
3334
setValue(value: any): void;

‎packages/test-utils/src/error-wrapper.js‎

Lines changed: 109 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,73 @@
11
// @flow
22

33
import { throwError } from 'shared/util'
4+
import { REF_SELECTOR } from 'shared/consts'
5+
import { getSelectorType } from './get-selector'
6+
7+
const buildSelectorString = (selector: Selector) => {
8+
if (getSelectorType(selector) === REF_SELECTOR) {
9+
return `ref="${selector.value.ref}"`
10+
}
11+
12+
if (typeof selector === 'string') {
13+
return selector
14+
}
15+
16+
return 'Component'
17+
}
418

519
export default class ErrorWrapper implements BaseWrapper {
6-
selector: string
20+
selector: Selector
721

8-
constructor(selector: string) {
22+
constructor(selector: Selector) {
923
this.selector = selector
1024
}
1125

1226
at(): void {
1327
throwError(
14-
`find did not return ${this.selector}, cannot call at() on empty Wrapper`
28+
`find did not return ${buildSelectorString(
29+
this.selector
30+
)}, cannot call at() on empty Wrapper`
1531
)
1632
}
1733

1834
attributes(): void {
1935
throwError(
20-
`find did not return ${this.selector}, cannot call attributes() on empty Wrapper`
36+
`find did not return ${buildSelectorString(
37+
this.selector
38+
)}, cannot call attributes() on empty Wrapper`
2139
)
2240
}
2341

2442
classes(): void {
2543
throwError(
26-
`find did not return ${this.selector}, cannot call classes() on empty Wrapper`
44+
`find did not return ${buildSelectorString(
45+
this.selector
46+
)}, cannot call classes() on empty Wrapper`
2747
)
2848
}
2949

3050
contains(): void {
3151
throwError(
32-
`find did not return ${this.selector}, cannot call contains() on empty Wrapper`
52+
`find did not return ${buildSelectorString(
53+
this.selector
54+
)}, cannot call contains() on empty Wrapper`
3355
)
3456
}
3557

3658
emitted(): void {
3759
throwError(
38-
`find did not return ${this.selector}, cannot call emitted() on empty Wrapper`
60+
`find did not return ${buildSelectorString(
61+
this.selector
62+
)}, cannot call emitted() on empty Wrapper`
3963
)
4064
}
4165

4266
emittedByOrder(): void {
4367
throwError(
44-
`find did not return ${this.selector}, cannot call emittedByOrder() on empty Wrapper`
68+
`find did not return ${buildSelectorString(
69+
this.selector
70+
)}, cannot call emittedByOrder() on empty Wrapper`
4571
)
4672
}
4773

@@ -51,151 +77,201 @@ export default class ErrorWrapper implements BaseWrapper {
5177

5278
filter(): void {
5379
throwError(
54-
`find did not return ${this.selector}, cannot call filter() on empty Wrapper`
80+
`find did not return ${buildSelectorString(
81+
this.selector
82+
)}, cannot call filter() on empty Wrapper`
5583
)
5684
}
5785

5886
visible(): void {
5987
throwError(
60-
`find did not return ${this.selector}, cannot call visible() on empty Wrapper`
88+
`find did not return ${buildSelectorString(
89+
this.selector
90+
)}, cannot call visible() on empty Wrapper`
6191
)
6292
}
6393

6494
hasAttribute(): void {
6595
throwError(
66-
`find did not return ${this.selector}, cannot call hasAttribute() on empty Wrapper`
96+
`find did not return ${buildSelectorString(
97+
this.selector
98+
)}, cannot call hasAttribute() on empty Wrapper`
6799
)
68100
}
69101

70102
hasClass(): void {
71103
throwError(
72-
`find did not return ${this.selector}, cannot call hasClass() on empty Wrapper`
104+
`find did not return ${buildSelectorString(
105+
this.selector
106+
)}, cannot call hasClass() on empty Wrapper`
73107
)
74108
}
75109

76110
hasProp(): void {
77111
throwError(
78-
`find did not return ${this.selector}, cannot call hasProp() on empty Wrapper`
112+
`find did not return ${buildSelectorString(
113+
this.selector
114+
)}, cannot call hasProp() on empty Wrapper`
79115
)
80116
}
81117

82118
hasStyle(): void {
83119
throwError(
84-
`find did not return ${this.selector}, cannot call hasStyle() on empty Wrapper`
120+
`find did not return ${buildSelectorString(
121+
this.selector
122+
)}, cannot call hasStyle() on empty Wrapper`
85123
)
86124
}
87125

88126
findAll(): void {
89127
throwError(
90-
`find did not return ${this.selector}, cannot call findAll() on empty Wrapper`
128+
`find did not return ${buildSelectorString(
129+
this.selector
130+
)}, cannot call findAll() on empty Wrapper`
91131
)
92132
}
93133

94134
find(): void {
95135
throwError(
96-
`find did not return ${this.selector}, cannot call find() on empty Wrapper`
136+
`find did not return ${buildSelectorString(
137+
this.selector
138+
)}, cannot call find() on empty Wrapper`
97139
)
98140
}
99141

100142
html(): void {
101143
throwError(
102-
`find did not return ${this.selector}, cannot call html() on empty Wrapper`
144+
`find did not return ${buildSelectorString(
145+
this.selector
146+
)}, cannot call html() on empty Wrapper`
103147
)
104148
}
105149

106150
is(): void {
107151
throwError(
108-
`find did not return ${this.selector}, cannot call is() on empty Wrapper`
152+
`find did not return ${buildSelectorString(
153+
this.selector
154+
)}, cannot call is() on empty Wrapper`
109155
)
110156
}
111157

112158
isEmpty(): void {
113159
throwError(
114-
`find did not return ${this.selector}, cannot call isEmpty() on empty Wrapper`
160+
`find did not return ${buildSelectorString(
161+
this.selector
162+
)}, cannot call isEmpty() on empty Wrapper`
115163
)
116164
}
117165

118166
isVisible(): void {
119167
throwError(
120-
`find did not return ${this.selector}, cannot call isVisible() on empty Wrapper`
168+
`find did not return ${buildSelectorString(
169+
this.selector
170+
)}, cannot call isVisible() on empty Wrapper`
121171
)
122172
}
123173

124174
isVueInstance(): void {
125175
throwError(
126-
`find did not return ${this.selector}, cannot call isVueInstance() on empty Wrapper`
176+
`find did not return ${buildSelectorString(
177+
this.selector
178+
)}, cannot call isVueInstance() on empty Wrapper`
127179
)
128180
}
129181

130182
name(): void {
131183
throwError(
132-
`find did not return ${this.selector}, cannot call name() on empty Wrapper`
184+
`find did not return ${buildSelectorString(
185+
this.selector
186+
)}, cannot call name() on empty Wrapper`
133187
)
134188
}
135189

136190
props(): void {
137191
throwError(
138-
`find did not return ${this.selector}, cannot call props() on empty Wrapper`
192+
`find did not return ${buildSelectorString(
193+
this.selector
194+
)}, cannot call props() on empty Wrapper`
139195
)
140196
}
141197

142198
text(): void {
143199
throwError(
144-
`find did not return ${this.selector}, cannot call text() on empty Wrapper`
200+
`find did not return ${buildSelectorString(
201+
this.selector
202+
)}, cannot call text() on empty Wrapper`
145203
)
146204
}
147205

148206
setComputed(): void {
149207
throwError(
150-
`find did not return ${this.selector}, cannot call setComputed() on empty Wrapper`
208+
`find did not return ${buildSelectorString(
209+
this.selector
210+
)}, cannot call setComputed() on empty Wrapper`
151211
)
152212
}
153213

154214
setData(): void {
155215
throwError(
156-
`find did not return ${this.selector}, cannot call setData() on empty Wrapper`
216+
`find did not return ${buildSelectorString(
217+
this.selector
218+
)}, cannot call setData() on empty Wrapper`
157219
)
158220
}
159221

160222
setMethods(): void {
161223
throwError(
162-
`find did not return ${this.selector}, cannot call setMethods() on empty Wrapper`
224+
`find did not return ${buildSelectorString(
225+
this.selector
226+
)}, cannot call setMethods() on empty Wrapper`
163227
)
164228
}
165229

166230
setProps(): void {
167231
throwError(
168-
`find did not return ${this.selector}, cannot call setProps() on empty Wrapper`
232+
`find did not return ${buildSelectorString(
233+
this.selector
234+
)}, cannot call setProps() on empty Wrapper`
169235
)
170236
}
171237

172238
setValue(): void {
173239
throwError(
174-
`find did not return ${this.selector}, cannot call setValue() on empty Wrapper`
240+
`find did not return ${buildSelectorString(
241+
this.selector
242+
)}, cannot call setValue() on empty Wrapper`
175243
)
176244
}
177245

178246
setChecked(): void {
179247
throwError(
180-
`find did not return ${this.selector}, cannot call setChecked() on empty Wrapper`
248+
`find did not return ${buildSelectorString(
249+
this.selector
250+
)}, cannot call setChecked() on empty Wrapper`
181251
)
182252
}
183253

184254
setSelected(): void {
185255
throwError(
186-
`find did not return ${this.selector}, cannot call setSelected() on empty Wrapper`
256+
`find did not return ${buildSelectorString(
257+
this.selector
258+
)}, cannot call setSelected() on empty Wrapper`
187259
)
188260
}
189261

190262
trigger(): void {
191263
throwError(
192-
`find did not return ${this.selector}, cannot call trigger() on empty Wrapper`
264+
`find did not return ${buildSelectorString(
265+
this.selector
266+
)}, cannot call trigger() on empty Wrapper`
193267
)
194268
}
195269

196270
destroy(): void {
197271
throwError(
198-
`find did not return ${this.selector}, cannot call destroy() on empty Wrapper`
272+
`find did not return ${buildSelectorString(
273+
this.selector
274+
)}, cannot call destroy() on empty Wrapper`
199275
)
200276
}
201277
}

‎packages/test-utils/src/get-selector.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import {
1515
INVALID_SELECTOR
1616
} from 'shared/consts'
1717

18-
function getSelectorType(selector: Selector): string {
18+
export function getSelectorType(selector: Selector): string {
1919
if (isDomSelector(selector)) return DOM_SELECTOR
2020
if (isVueComponent(selector)) return COMPONENT_SELECTOR
2121
if (isNameSelector(selector)) return NAME_SELECTOR

‎packages/test-utils/src/wrapper-array.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { throwError } from 'shared/util'
77
export default class WrapperArray implements BaseWrapper {
88
+wrappers: Array<Wrapper | VueWrapper>
99
+length: number
10+
selector: Selector | void
1011

1112
constructor(wrappers: Array<Wrapper | VueWrapper>) {
1213
const length = wrappers.length

‎packages/test-utils/src/wrapper.js‎

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ export default class Wrapper implements BaseWrapper {
2424
+options: WrapperOptions
2525
isFunctionalComponent: boolean
2626
rootNode: VNode | Element
27+
selector: Selector | void
2728

2829
constructor(
2930
node: VNode | Element,
@@ -193,15 +194,12 @@ export default class Wrapper implements BaseWrapper {
193194
const node = find(this.rootNode, this.vm, selector)[0]
194195

195196
if (!node) {
196-
if (selector.type === REF_SELECTOR) {
197-
return new ErrorWrapper(`ref="${selector.value.ref}"`)
198-
}
199-
return new ErrorWrapper(
200-
typeof selector.value === 'string' ? selector.value : 'Component'
201-
)
197+
return new ErrorWrapper(rawSelector)
202198
}
203199

204-
return createWrapper(node, this.options)
200+
const wrapper = createWrapper(node, this.options)
201+
wrapper.selector = rawSelector
202+
return wrapper
205203
}
206204

207205
/**
@@ -214,9 +212,14 @@ export default class Wrapper implements BaseWrapper {
214212
const wrappers = nodes.map(node => {
215213
// Using CSS Selector, returns a VueWrapper instance if the root element
216214
// binds a Vue instance.
217-
return createWrapper(node, this.options)
215+
const wrapper = createWrapper(node, this.options)
216+
wrapper.selector = rawSelector
217+
return wrapper
218218
})
219-
return new WrapperArray(wrappers)
219+
220+
const wrapperArray = new WrapperArray(wrappers)
221+
wrapperArray.selector = rawSelector
222+
return wrapperArray
220223
}
221224

222225
/**

‎packages/test-utils/types/index.d.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,7 @@ interface BaseWrapper {
6969

7070
trigger (eventName: string, options?: object): void
7171
destroy (): void
72+
selector: Selector | void
7273
}
7374

7475
export interface Wrapper<V extends Vue | null> extends BaseWrapper {

0 commit comments

Comments
 (0)