Skip to content

Commit a375930

Browse files
aaronmcadamKent C. Dodds
aaronmcadam
authored and
Kent C. Dodds
committed
fix(TS): Cypress commands return jQuery objects (#56)
Without this fix, the types are wrong using methods like `invoke` or using callbacks on commands.
1 parent c40e7ae commit a375930

File tree

3 files changed

+84
-85
lines changed

3 files changed

+84
-85
lines changed

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,7 @@
5252
"@testing-library/dom": "^5.0.1"
5353
},
5454
"devDependencies": {
55+
"@types/jquery": "*",
5556
"cypress": "3.3.1",
5657
"dtslint": "^0.7.1",
5758
"kcd-scripts": "^1.2.2",

‎tests/typescript-types/test.spec.ts‎

Lines changed: 40 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,42 @@
1-
describe('Foo', () => {
2-
it('has proper types', () => {
3-
cy.visit('#/foo')
4-
5-
cy.getAllByPlaceholderText('foo').should(elements => {
6-
// argument should be an array of HTML elements
7-
expect(elements.length).to.eq(0)
8-
expect(elements[0].tagName).to.eq(0)
9-
})
10-
11-
// with regex
12-
cy.queryByPlaceholderText<'a'>(/foo/).should(element => {
13-
// node can be null
14-
if (element) {
15-
// argument should be an anchor
16-
expect(element.href).to.eq('')
17-
}
18-
})
19-
20-
// with matcher function
21-
const matcherFn = (content: string, element: HTMLElement) => true
22-
23-
cy.queryByPlaceholderText<HTMLAudioElement>(matcherFn).should(element => {
24-
// node can be null
25-
if (element) {
26-
// argument should be an Audio element
27-
expect(element.play).to.exist
28-
}
29-
})
30-
31-
// with matcher options
32-
cy.queryAllByPlaceholderText<HTMLAudioElement>('foo', {
33-
collapseWhitespace: true,
34-
exact: true,
35-
timeout: 500,
36-
trim: true,
37-
}).should(elements => {
38-
const el = elements[0]
39-
// node can be null
40-
if (el) {
41-
// argument should be an array of Audio elements
42-
expect(el.play).to.exist
43-
}
44-
})
1+
test('includes proper TypeScript types', () => {
2+
cy.visit('#/foo')
3+
4+
cy.getAllByPlaceholderText('foo').should($elements => {
5+
expect($elements.length).to.eq(0)
6+
expect($elements[0].tagName).to.eq(0)
7+
})
8+
9+
// With regex
10+
cy.queryByPlaceholderText<'a'>(/foo/).should($element => {
11+
const element = $element.get(0)
12+
13+
if (element) {
14+
expect(element.href).to.eq('')
15+
}
16+
})
17+
18+
// With matcher function
19+
const matcherFn = (content: string, $element: HTMLElement) => true
20+
21+
cy.queryByPlaceholderText<HTMLAudioElement>(matcherFn).should($element => {
22+
const element = $element.get(0)
23+
24+
if (element) {
25+
expect(element.play).to.exist
26+
}
27+
})
28+
29+
// With matcher options
30+
cy.queryAllByPlaceholderText<HTMLAudioElement>('foo', {
31+
collapseWhitespace: true,
32+
exact: true,
33+
timeout: 500,
34+
trim: true,
35+
}).should($elements => {
36+
const element = $elements[0]
37+
38+
if (element) {
39+
expect(element.play).to.exist
40+
}
4541
})
4642
})

‎typings/index.d.ts‎

Lines changed: 43 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,9 @@ export interface CTLMatcherOptions {
1212
}
1313

1414
export type MatcherOptions = DTLMatcherOptions | CTLMatcherOptions
15-
export type SelectorMatcherOptions = DTLSelectorMatcherOptions | CTLMatcherOptions
15+
export type SelectorMatcherOptions =
16+
| DTLSelectorMatcherOptions
17+
| CTLMatcherOptions
1618

1719
declare global {
1820
namespace Cypress {
@@ -31,11 +33,11 @@ declare global {
3133
queryByPlaceholderText<E extends Node = HTMLElement>(
3234
id: Matcher,
3335
options?: MatcherOptions,
34-
): Chainable<E | null>
36+
): Chainable<JQuery<E>>
3537
queryByPlaceholderText<K extends keyof HTMLElementTagNameMap>(
3638
id: Matcher,
3739
options?: MatcherOptions,
38-
): Chainable<HTMLElementTagNameMap[K] | null>
40+
): Chainable<JQuery<HTMLElementTagNameMap[K]>>
3941

4042
/**
4143
* dom-testing-library helpers for Cypress
@@ -51,11 +53,11 @@ declare global {
5153
queryAllByPlaceholderText<E extends Node = HTMLElement>(
5254
id: Matcher,
5355
options?: MatcherOptions,
54-
): Chainable<(E | null)[]>
56+
): Chainable<JQuery<E>>
5557
queryAllByPlaceholderText<K extends keyof HTMLElementTagNameMap>(
5658
id: Matcher,
5759
options?: MatcherOptions,
58-
): Chainable<(HTMLElementTagNameMap[K] | null)[]>
60+
): Chainable<JQuery<HTMLElementTagNameMap[K]>>
5961

6062
/**
6163
* dom-testing-library helpers for Cypress
@@ -71,11 +73,11 @@ declare global {
7173
getByPlaceholderText<E extends Node = HTMLElement>(
7274
id: Matcher,
7375
options?: MatcherOptions,
74-
): Chainable<E>
76+
): Chainable<JQuery<E>>
7577
getByPlaceholderText<K extends keyof HTMLElementTagNameMap>(
7678
id: Matcher,
7779
options?: MatcherOptions,
78-
): Chainable<HTMLElementTagNameMap[K]>
80+
): Chainable<JQuery<HTMLElementTagNameMap[K]>>
7981

8082
/**
8183
* dom-testing-library helpers for Cypress
@@ -91,11 +93,11 @@ declare global {
9193
getAllByPlaceholderText<E extends Node = HTMLElement>(
9294
id: Matcher,
9395
options?: MatcherOptions,
94-
): Chainable<E[]>
96+
): Chainable<JQuery<E>>
9597
getAllByPlaceholderText<K extends keyof HTMLElementTagNameMap>(
9698
id: Matcher,
9799
options?: MatcherOptions,
98-
): Chainable<HTMLElementTagNameMap[K][]>
100+
): Chainable<JQuery<HTMLElementTagNameMap[K]>>
99101

100102
/**
101103
* dom-testing-library helpers for Cypress
@@ -111,11 +113,11 @@ declare global {
111113
queryBySelectText<E extends Node = HTMLElement>(
112114
id: Matcher,
113115
options?: MatcherOptions,
114-
): Chainable<E | null>
116+
): Chainable<JQuery<E>>
115117
queryBySelectText<K extends keyof HTMLElementTagNameMap>(
116118
id: Matcher,
117119
options?: MatcherOptions,
118-
): Chainable<HTMLElementTagNameMap[K] | null>
120+
): Chainable<JQuery<HTMLElementTagNameMap[K]>>
119121

120122
/**
121123
* dom-testing-library helpers for Cypress
@@ -131,11 +133,11 @@ declare global {
131133
queryAllBySelectText<E extends Node = HTMLElement>(
132134
id: Matcher,
133135
options?: MatcherOptions,
134-
): Chainable<(E | null)[]>
136+
): Chainable<JQuery<E>>
135137
queryAllBySelectText<K extends keyof HTMLElementTagNameMap>(
136138
id: Matcher,
137139
options?: MatcherOptions,
138-
): Chainable<(HTMLElementTagNameMap[K] | null)[]>
140+
): Chainable<JQuery<HTMLElementTagNameMap[K]>>
139141

140142
/**
141143
* dom-testing-library helpers for Cypress
@@ -191,11 +193,11 @@ declare global {
191193
queryByText<E extends Node = HTMLElement>(
192194
id: Matcher,
193195
options?: SelectorMatcherOptions,
194-
): Chainable<E | null>
196+
): Chainable<JQuery<E>>
195197
queryByText<K extends keyof HTMLElementTagNameMap>(
196198
id: Matcher,
197199
options?: SelectorMatcherOptions,
198-
): Chainable<HTMLElementTagNameMap[K] | null>
200+
): Chainable<JQuery<HTMLElementTagNameMap[K]>>
199201

200202
/**
201203
* dom-testing-library helpers for Cypress
@@ -211,11 +213,11 @@ declare global {
211213
queryAllByText<E extends Node = HTMLElement>(
212214
id: Matcher,
213215
options?: SelectorMatcherOptions,
214-
): Chainable<(E | null)[]>
216+
): Chainable<JQuery<E>>
215217
queryAllByText<K extends keyof HTMLElementTagNameMap>(
216218
id: Matcher,
217219
options?: SelectorMatcherOptions,
218-
): Chainable<(HTMLElementTagNameMap[K] | null)[]>
220+
): Chainable<JQuery<HTMLElementTagNameMap[K]>>
219221

220222
/**
221223
* dom-testing-library helpers for Cypress
@@ -271,11 +273,11 @@ declare global {
271273
queryByLabelText<E extends Node = HTMLElement>(
272274
id: Matcher,
273275
options?: SelectorMatcherOptions,
274-
): Chainable<E | null>
276+
): Chainable<JQuery<E>>
275277
queryByLabelText<K extends keyof HTMLElementTagNameMap>(
276278
id: Matcher,
277279
options?: SelectorMatcherOptions,
278-
): Chainable<HTMLElementTagNameMap[K] | null>
280+
): Chainable<JQuery<HTMLElementTagNameMap[K]>>
279281

280282
/**
281283
* dom-testing-library helpers for Cypress
@@ -291,11 +293,11 @@ declare global {
291293
queryAllByLabelText<E extends Node = HTMLElement>(
292294
id: Matcher,
293295
options?: SelectorMatcherOptions,
294-
): Chainable<(E | null)[]>
296+
): Chainable<JQuery<E>>
295297
queryAllByLabelText<K extends keyof HTMLElementTagNameMap>(
296298
id: Matcher,
297299
options?: SelectorMatcherOptions,
298-
): Chainable<(HTMLElementTagNameMap[K] | null)[]>
300+
): Chainable<JQuery<HTMLElementTagNameMap[K]>>
299301

300302
/**
301303
* dom-testing-library helpers for Cypress
@@ -351,11 +353,11 @@ declare global {
351353
queryByAltText<E extends Node = HTMLElement>(
352354
id: Matcher,
353355
options?: MatcherOptions,
354-
): Chainable<E | null>
356+
): Chainable<JQuery<E>>
355357
queryByAltText<K extends keyof HTMLElementTagNameMap>(
356358
id: Matcher,
357359
options?: MatcherOptions,
358-
): Chainable<HTMLElementTagNameMap[K] | null>
360+
): Chainable<JQuery<HTMLElementTagNameMap[K]>>
359361

360362
/**
361363
* dom-testing-library helpers for Cypress
@@ -371,11 +373,11 @@ declare global {
371373
queryAllByAltText<E extends Node = HTMLElement>(
372374
id: Matcher,
373375
options?: MatcherOptions,
374-
): Chainable<(E | null)[]>
376+
): Chainable<JQuery<E>>
375377
queryAllByAltText<K extends keyof HTMLElementTagNameMap>(
376378
id: Matcher,
377379
options?: MatcherOptions,
378-
): Chainable<(HTMLElementTagNameMap[K] | null)[]>
380+
): Chainable<JQuery<HTMLElementTagNameMap[K]>>
379381

380382
/**
381383
* dom-testing-library helpers for Cypress
@@ -431,11 +433,11 @@ declare global {
431433
queryByTestId<E extends Node = HTMLElement>(
432434
id: Matcher,
433435
options?: MatcherOptions,
434-
): Chainable<E | null>
436+
): Chainable<JQuery<E>>
435437
queryByTestId<K extends keyof HTMLElementTagNameMap>(
436438
id: Matcher,
437439
options?: MatcherOptions,
438-
): Chainable<HTMLElementTagNameMap[K] | null>
440+
): Chainable<JQuery<HTMLElementTagNameMap[K]>>
439441

440442
/**
441443
* dom-testing-library helpers for Cypress
@@ -451,11 +453,11 @@ declare global {
451453
queryAllByTestId<E extends Node = HTMLElement>(
452454
id: Matcher,
453455
options?: MatcherOptions,
454-
): Chainable<(E | null)[]>
456+
): Chainable<JQuery<E>>
455457
queryAllByTestId<K extends keyof HTMLElementTagNameMap>(
456458
id: Matcher,
457459
options?: MatcherOptions,
458-
): Chainable<(HTMLElementTagNameMap[K] | null)[]>
460+
): Chainable<JQuery<HTMLElementTagNameMap[K]>>
459461

460462
/**
461463
* dom-testing-library helpers for Cypress
@@ -511,11 +513,11 @@ declare global {
511513
queryByTitle<E extends Node = HTMLElement>(
512514
id: Matcher,
513515
options?: MatcherOptions,
514-
): Chainable<E | null>
516+
): Chainable<JQuery<E>>
515517
queryByTitle<K extends keyof HTMLElementTagNameMap>(
516518
id: Matcher,
517519
options?: MatcherOptions,
518-
): Chainable<HTMLElementTagNameMap[K] | null>
520+
): Chainable<JQuery<HTMLElementTagNameMap[K]>>
519521

520522
/**
521523
* dom-testing-library helpers for Cypress
@@ -531,11 +533,11 @@ declare global {
531533
queryAllByTitle<E extends Node = HTMLElement>(
532534
id: Matcher,
533535
options?: MatcherOptions,
534-
): Chainable<(E | null)[]>
536+
): Chainable<JQuery<E>>
535537
queryAllByTitle<K extends keyof HTMLElementTagNameMap>(
536538
id: Matcher,
537539
options?: MatcherOptions,
538-
): Chainable<(HTMLElementTagNameMap[K] | null)[]>
540+
): Chainable<JQuery<HTMLElementTagNameMap[K]>>
539541

540542
/**
541543
* dom-testing-library helpers for Cypress
@@ -591,11 +593,11 @@ declare global {
591593
queryByDisplayValue<E extends Node = HTMLElement>(
592594
id: Matcher,
593595
options?: MatcherOptions,
594-
): Chainable<E | null>
596+
): Chainable<JQuery<E>>
595597
queryByDisplayValue<K extends keyof HTMLElementTagNameMap>(
596598
id: Matcher,
597599
options?: MatcherOptions,
598-
): Chainable<HTMLElementTagNameMap[K] | null>
600+
): Chainable<JQuery<HTMLElementTagNameMap[K]>>
599601

600602
/**
601603
* dom-testing-library helpers for Cypress
@@ -611,11 +613,11 @@ declare global {
611613
queryAllByDisplayValue<E extends Node = HTMLElement>(
612614
id: Matcher,
613615
options?: MatcherOptions,
614-
): Chainable<(E | null)[]>
616+
): Chainable<JQuery<E>>
615617
queryAllByDisplayValue<K extends keyof HTMLElementTagNameMap>(
616618
id: Matcher,
617619
options?: MatcherOptions,
618-
): Chainable<(HTMLElementTagNameMap[K] | null)[]>
620+
): Chainable<JQuery<HTMLElementTagNameMap[K]>>
619621

620622
/**
621623
* dom-testing-library helpers for Cypress
@@ -671,11 +673,11 @@ declare global {
671673
queryByRole<E extends Node = HTMLElement>(
672674
id: Matcher,
673675
options?: MatcherOptions,
674-
): Chainable<E | null>
676+
): Chainable<JQuery<E>>
675677
queryByRole<K extends keyof HTMLElementTagNameMap>(
676678
id: Matcher,
677679
options?: MatcherOptions,
678-
): Chainable<HTMLElementTagNameMap[K] | null>
680+
): Chainable<JQuery<HTMLElementTagNameMap[K]>>
679681

680682
/**
681683
* dom-testing-library helpers for Cypress
@@ -691,11 +693,11 @@ declare global {
691693
queryAllByRole<E extends Node = HTMLElement>(
692694
id: Matcher,
693695
options?: MatcherOptions,
694-
): Chainable<(E | null)[]>
696+
): Chainable<JQuery<E>>
695697
queryAllByRole<K extends keyof HTMLElementTagNameMap>(
696698
id: Matcher,
697699
options?: MatcherOptions,
698-
): Chainable<(HTMLElementTagNameMap[K] | null)[]>
700+
): Chainable<JQuery<HTMLElementTagNameMap[K]>>
699701

700702
/**
701703
* dom-testing-library helpers for Cypress

0 commit comments

Comments
 (0)