Skip to content

Commit

Permalink
fix(TS): Cypress commands return jQuery objects (#56)
Browse files Browse the repository at this point in the history
Without this fix, the types are wrong using methods like `invoke` or using callbacks on commands.
  • Loading branch information
aaronmcadam authored and Kent C. Dodds committed Jun 24, 2019
1 parent c40e7ae commit a375930
Show file tree
Hide file tree
Showing 3 changed files with 84 additions and 85 deletions.
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,7 @@
"@testing-library/dom": "^5.0.1"
},
"devDependencies": {
"@types/jquery": "*",
"cypress": "3.3.1",
"dtslint": "^0.7.1",
"kcd-scripts": "^1.2.2",
Expand Down
84 changes: 40 additions & 44 deletions tests/typescript-types/test.spec.ts
Original file line number Diff line number Diff line change
@@ -1,46 +1,42 @@
describe('Foo', () => {
it('has proper types', () => {
cy.visit('#/foo')

cy.getAllByPlaceholderText('foo').should(elements => {
// argument should be an array of HTML elements
expect(elements.length).to.eq(0)
expect(elements[0].tagName).to.eq(0)
})

// with regex
cy.queryByPlaceholderText<'a'>(/foo/).should(element => {
// node can be null
if (element) {
// argument should be an anchor
expect(element.href).to.eq('')
}
})

// with matcher function
const matcherFn = (content: string, element: HTMLElement) => true

cy.queryByPlaceholderText<HTMLAudioElement>(matcherFn).should(element => {
// node can be null
if (element) {
// argument should be an Audio element
expect(element.play).to.exist
}
})

// with matcher options
cy.queryAllByPlaceholderText<HTMLAudioElement>('foo', {
collapseWhitespace: true,
exact: true,
timeout: 500,
trim: true,
}).should(elements => {
const el = elements[0]
// node can be null
if (el) {
// argument should be an array of Audio elements
expect(el.play).to.exist
}
})
test('includes proper TypeScript types', () => {
cy.visit('#/foo')

cy.getAllByPlaceholderText('foo').should($elements => {
expect($elements.length).to.eq(0)
expect($elements[0].tagName).to.eq(0)
})

// With regex
cy.queryByPlaceholderText<'a'>(/foo/).should($element => {
const element = $element.get(0)

if (element) {
expect(element.href).to.eq('')
}
})

// With matcher function
const matcherFn = (content: string, $element: HTMLElement) => true

cy.queryByPlaceholderText<HTMLAudioElement>(matcherFn).should($element => {
const element = $element.get(0)

if (element) {
expect(element.play).to.exist
}
})

// With matcher options
cy.queryAllByPlaceholderText<HTMLAudioElement>('foo', {
collapseWhitespace: true,
exact: true,
timeout: 500,
trim: true,
}).should($elements => {
const element = $elements[0]

if (element) {
expect(element.play).to.exist
}
})
})
84 changes: 43 additions & 41 deletions typings/index.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,9 @@ export interface CTLMatcherOptions {
}

export type MatcherOptions = DTLMatcherOptions | CTLMatcherOptions
export type SelectorMatcherOptions = DTLSelectorMatcherOptions | CTLMatcherOptions
export type SelectorMatcherOptions =
| DTLSelectorMatcherOptions
| CTLMatcherOptions

declare global {
namespace Cypress {
Expand All @@ -31,11 +33,11 @@ declare global {
queryByPlaceholderText<E extends Node = HTMLElement>(
id: Matcher,
options?: MatcherOptions,
): Chainable<E | null>
): Chainable<JQuery<E>>
queryByPlaceholderText<K extends keyof HTMLElementTagNameMap>(
id: Matcher,
options?: MatcherOptions,
): Chainable<HTMLElementTagNameMap[K] | null>
): Chainable<JQuery<HTMLElementTagNameMap[K]>>

/**
* dom-testing-library helpers for Cypress
Expand All @@ -51,11 +53,11 @@ declare global {
queryAllByPlaceholderText<E extends Node = HTMLElement>(
id: Matcher,
options?: MatcherOptions,
): Chainable<(E | null)[]>
): Chainable<JQuery<E>>
queryAllByPlaceholderText<K extends keyof HTMLElementTagNameMap>(
id: Matcher,
options?: MatcherOptions,
): Chainable<(HTMLElementTagNameMap[K] | null)[]>
): Chainable<JQuery<HTMLElementTagNameMap[K]>>

/**
* dom-testing-library helpers for Cypress
Expand All @@ -71,11 +73,11 @@ declare global {
getByPlaceholderText<E extends Node = HTMLElement>(
id: Matcher,
options?: MatcherOptions,
): Chainable<E>
): Chainable<JQuery<E>>
getByPlaceholderText<K extends keyof HTMLElementTagNameMap>(
id: Matcher,
options?: MatcherOptions,
): Chainable<HTMLElementTagNameMap[K]>
): Chainable<JQuery<HTMLElementTagNameMap[K]>>

/**
* dom-testing-library helpers for Cypress
Expand All @@ -91,11 +93,11 @@ declare global {
getAllByPlaceholderText<E extends Node = HTMLElement>(
id: Matcher,
options?: MatcherOptions,
): Chainable<E[]>
): Chainable<JQuery<E>>
getAllByPlaceholderText<K extends keyof HTMLElementTagNameMap>(
id: Matcher,
options?: MatcherOptions,
): Chainable<HTMLElementTagNameMap[K][]>
): Chainable<JQuery<HTMLElementTagNameMap[K]>>

/**
* dom-testing-library helpers for Cypress
Expand All @@ -111,11 +113,11 @@ declare global {
queryBySelectText<E extends Node = HTMLElement>(
id: Matcher,
options?: MatcherOptions,
): Chainable<E | null>
): Chainable<JQuery<E>>
queryBySelectText<K extends keyof HTMLElementTagNameMap>(
id: Matcher,
options?: MatcherOptions,
): Chainable<HTMLElementTagNameMap[K] | null>
): Chainable<JQuery<HTMLElementTagNameMap[K]>>

/**
* dom-testing-library helpers for Cypress
Expand All @@ -131,11 +133,11 @@ declare global {
queryAllBySelectText<E extends Node = HTMLElement>(
id: Matcher,
options?: MatcherOptions,
): Chainable<(E | null)[]>
): Chainable<JQuery<E>>
queryAllBySelectText<K extends keyof HTMLElementTagNameMap>(
id: Matcher,
options?: MatcherOptions,
): Chainable<(HTMLElementTagNameMap[K] | null)[]>
): Chainable<JQuery<HTMLElementTagNameMap[K]>>

/**
* dom-testing-library helpers for Cypress
Expand Down Expand Up @@ -191,11 +193,11 @@ declare global {
queryByText<E extends Node = HTMLElement>(
id: Matcher,
options?: SelectorMatcherOptions,
): Chainable<E | null>
): Chainable<JQuery<E>>
queryByText<K extends keyof HTMLElementTagNameMap>(
id: Matcher,
options?: SelectorMatcherOptions,
): Chainable<HTMLElementTagNameMap[K] | null>
): Chainable<JQuery<HTMLElementTagNameMap[K]>>

/**
* dom-testing-library helpers for Cypress
Expand All @@ -211,11 +213,11 @@ declare global {
queryAllByText<E extends Node = HTMLElement>(
id: Matcher,
options?: SelectorMatcherOptions,
): Chainable<(E | null)[]>
): Chainable<JQuery<E>>
queryAllByText<K extends keyof HTMLElementTagNameMap>(
id: Matcher,
options?: SelectorMatcherOptions,
): Chainable<(HTMLElementTagNameMap[K] | null)[]>
): Chainable<JQuery<HTMLElementTagNameMap[K]>>

/**
* dom-testing-library helpers for Cypress
Expand Down Expand Up @@ -271,11 +273,11 @@ declare global {
queryByLabelText<E extends Node = HTMLElement>(
id: Matcher,
options?: SelectorMatcherOptions,
): Chainable<E | null>
): Chainable<JQuery<E>>
queryByLabelText<K extends keyof HTMLElementTagNameMap>(
id: Matcher,
options?: SelectorMatcherOptions,
): Chainable<HTMLElementTagNameMap[K] | null>
): Chainable<JQuery<HTMLElementTagNameMap[K]>>

/**
* dom-testing-library helpers for Cypress
Expand All @@ -291,11 +293,11 @@ declare global {
queryAllByLabelText<E extends Node = HTMLElement>(
id: Matcher,
options?: SelectorMatcherOptions,
): Chainable<(E | null)[]>
): Chainable<JQuery<E>>
queryAllByLabelText<K extends keyof HTMLElementTagNameMap>(
id: Matcher,
options?: SelectorMatcherOptions,
): Chainable<(HTMLElementTagNameMap[K] | null)[]>
): Chainable<JQuery<HTMLElementTagNameMap[K]>>

/**
* dom-testing-library helpers for Cypress
Expand Down Expand Up @@ -351,11 +353,11 @@ declare global {
queryByAltText<E extends Node = HTMLElement>(
id: Matcher,
options?: MatcherOptions,
): Chainable<E | null>
): Chainable<JQuery<E>>
queryByAltText<K extends keyof HTMLElementTagNameMap>(
id: Matcher,
options?: MatcherOptions,
): Chainable<HTMLElementTagNameMap[K] | null>
): Chainable<JQuery<HTMLElementTagNameMap[K]>>

/**
* dom-testing-library helpers for Cypress
Expand All @@ -371,11 +373,11 @@ declare global {
queryAllByAltText<E extends Node = HTMLElement>(
id: Matcher,
options?: MatcherOptions,
): Chainable<(E | null)[]>
): Chainable<JQuery<E>>
queryAllByAltText<K extends keyof HTMLElementTagNameMap>(
id: Matcher,
options?: MatcherOptions,
): Chainable<(HTMLElementTagNameMap[K] | null)[]>
): Chainable<JQuery<HTMLElementTagNameMap[K]>>

/**
* dom-testing-library helpers for Cypress
Expand Down Expand Up @@ -431,11 +433,11 @@ declare global {
queryByTestId<E extends Node = HTMLElement>(
id: Matcher,
options?: MatcherOptions,
): Chainable<E | null>
): Chainable<JQuery<E>>
queryByTestId<K extends keyof HTMLElementTagNameMap>(
id: Matcher,
options?: MatcherOptions,
): Chainable<HTMLElementTagNameMap[K] | null>
): Chainable<JQuery<HTMLElementTagNameMap[K]>>

/**
* dom-testing-library helpers for Cypress
Expand All @@ -451,11 +453,11 @@ declare global {
queryAllByTestId<E extends Node = HTMLElement>(
id: Matcher,
options?: MatcherOptions,
): Chainable<(E | null)[]>
): Chainable<JQuery<E>>
queryAllByTestId<K extends keyof HTMLElementTagNameMap>(
id: Matcher,
options?: MatcherOptions,
): Chainable<(HTMLElementTagNameMap[K] | null)[]>
): Chainable<JQuery<HTMLElementTagNameMap[K]>>

/**
* dom-testing-library helpers for Cypress
Expand Down Expand Up @@ -511,11 +513,11 @@ declare global {
queryByTitle<E extends Node = HTMLElement>(
id: Matcher,
options?: MatcherOptions,
): Chainable<E | null>
): Chainable<JQuery<E>>
queryByTitle<K extends keyof HTMLElementTagNameMap>(
id: Matcher,
options?: MatcherOptions,
): Chainable<HTMLElementTagNameMap[K] | null>
): Chainable<JQuery<HTMLElementTagNameMap[K]>>

/**
* dom-testing-library helpers for Cypress
Expand All @@ -531,11 +533,11 @@ declare global {
queryAllByTitle<E extends Node = HTMLElement>(
id: Matcher,
options?: MatcherOptions,
): Chainable<(E | null)[]>
): Chainable<JQuery<E>>
queryAllByTitle<K extends keyof HTMLElementTagNameMap>(
id: Matcher,
options?: MatcherOptions,
): Chainable<(HTMLElementTagNameMap[K] | null)[]>
): Chainable<JQuery<HTMLElementTagNameMap[K]>>

/**
* dom-testing-library helpers for Cypress
Expand Down Expand Up @@ -591,11 +593,11 @@ declare global {
queryByDisplayValue<E extends Node = HTMLElement>(
id: Matcher,
options?: MatcherOptions,
): Chainable<E | null>
): Chainable<JQuery<E>>
queryByDisplayValue<K extends keyof HTMLElementTagNameMap>(
id: Matcher,
options?: MatcherOptions,
): Chainable<HTMLElementTagNameMap[K] | null>
): Chainable<JQuery<HTMLElementTagNameMap[K]>>

/**
* dom-testing-library helpers for Cypress
Expand All @@ -611,11 +613,11 @@ declare global {
queryAllByDisplayValue<E extends Node = HTMLElement>(
id: Matcher,
options?: MatcherOptions,
): Chainable<(E | null)[]>
): Chainable<JQuery<E>>
queryAllByDisplayValue<K extends keyof HTMLElementTagNameMap>(
id: Matcher,
options?: MatcherOptions,
): Chainable<(HTMLElementTagNameMap[K] | null)[]>
): Chainable<JQuery<HTMLElementTagNameMap[K]>>

/**
* dom-testing-library helpers for Cypress
Expand Down Expand Up @@ -671,11 +673,11 @@ declare global {
queryByRole<E extends Node = HTMLElement>(
id: Matcher,
options?: MatcherOptions,
): Chainable<E | null>
): Chainable<JQuery<E>>
queryByRole<K extends keyof HTMLElementTagNameMap>(
id: Matcher,
options?: MatcherOptions,
): Chainable<HTMLElementTagNameMap[K] | null>
): Chainable<JQuery<HTMLElementTagNameMap[K]>>

/**
* dom-testing-library helpers for Cypress
Expand All @@ -691,11 +693,11 @@ declare global {
queryAllByRole<E extends Node = HTMLElement>(
id: Matcher,
options?: MatcherOptions,
): Chainable<(E | null)[]>
): Chainable<JQuery<E>>
queryAllByRole<K extends keyof HTMLElementTagNameMap>(
id: Matcher,
options?: MatcherOptions,
): Chainable<(HTMLElementTagNameMap[K] | null)[]>
): Chainable<JQuery<HTMLElementTagNameMap[K]>>

/**
* dom-testing-library helpers for Cypress
Expand Down

0 comments on commit a375930

Please sign in to comment.