Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: add missing Cypress.Commands.addAll() types #20894

Merged
merged 6 commits into from Apr 11, 2022
Merged

fix: add missing Cypress.Commands.addAll() types #20894

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
79d7afa
feat: Cypress.Commands.addAll types
sainthkh Apr 4, 2022
d78e899
Rename args to fns. Remove generics.
sainthkh Apr 5, 2022
fff475e
Merge branch 'develop' into issue-18886
emilyrohrbough Apr 7, 2022
cc73dce
Merge branch 'develop' into issue-18886
emilyrohrbough Apr 8, 2022
df111ff
Merge branch 'develop' into issue-18886
emilyrohrbough Apr 11, 2022
2d5fa83
Merge branch 'develop' into issue-18886
emilyrohrbough Apr 11, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
14 changes: 14 additions & 0 deletions cli/types/cypress.d.ts
View file
Open in desktop
Expand Up @@ -24,9 +24,15 @@ declare namespace Cypress {
interface CommandFn<T extends keyof ChainableMethods> {
(this: Mocha.Context, ...args: Parameters<ChainableMethods[T]>): ReturnType<ChainableMethods[T]> | void
}
interface CommandFnArgs<T extends keyof ChainableMethods> {
[name: string]: (this: Mocha.Context, ...args: any) => (ReturnType<ChainableMethods[T]> | void)
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why ...args: any instead of ...args: Parameters<ChainableMethods[T]>? Could we re-using the existing CommandFn interface?

interface CommandFnArgs<T extends keyof ChainableMethods> {
   [name: string]: CommandFn<T>
}

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

At first, I wrote it this way, because ...args: Parameters<ChainableMethods[T]> doesn't work. TypeScript tries to interpret args as the union type of all possible cy method arg types (i.e. [type of cy.get parameters] | [type of cy.visit parameters] | etc... ).

This happened because <T extends keyof ChainableMethods> part defined after the interface means that this CommandFnArgs interface should use the parameters of one of ChainableMethods (i.e. one of the name of cy methods) for all of its functions. It's not the right behavior.

So, I thought about using generics inside [key] brackets. I realized that the purpose of addAll is to add a new command. We're not reusing any cy command. They should be any, because we don't know what they are. They're defined by users.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Gottchya. That makes sense! Thank you for the explanation!

}
interface CommandFnWithSubject<T extends keyof ChainableMethods, S> {
(this: Mocha.Context, prevSubject: S, ...args: Parameters<ChainableMethods[T]>): ReturnType<ChainableMethods[T]> | void
}
interface CommandFnArgsWithSubject<T extends keyof ChainableMethods, S> {
[name: string]: (this: Mocha.Context, prevSubject: S, ...args: any) => (ReturnType<ChainableMethods[T]> | void)
}
interface CommandOriginalFn<T extends keyof ChainableMethods> extends CallableFunction {
(...args: Parameters<ChainableMethods[T]>): ReturnType<ChainableMethods[T]>
}
Expand Down Expand Up @@ -467,6 +473,14 @@ declare namespace Cypress {
add<T extends keyof Chainable, S extends PrevSubject>(
name: T, options: CommandOptions & { prevSubject: S[] }, fn: CommandFnWithSubject<T, PrevSubjectMap<void>[S]>,
): void
addAll<T extends keyof Chainable>(args: CommandFnArgs<T>): void
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
addAll<T extends keyof Chainable>(args: CommandFnArgs<T>): void
addAll<T extends keyof Chainable>(fn: CommandFnArgs<T>): void

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I named it args because it's an object with functions. Or should we name it fns?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

After leaving the comment above, I felt that fns better describes the purpose of the argument than args. I changed it that way.

addAll<T extends keyof Chainable>(options: CommandOptions & {prevSubject: false}, fn: CommandFnArgs<T>): void
addAll<T extends keyof Chainable, S extends PrevSubject>(
options: CommandOptions & { prevSubject: true | S | ['optional'] }, fn: CommandFnArgsWithSubject<T, PrevSubjectMap[S]>,
): void
addAll<T extends keyof Chainable, S extends PrevSubject>(
options: CommandOptions & { prevSubject: S[] }, fn: CommandFnArgsWithSubject<T, PrevSubjectMap<void>[S]>,
): void
overwrite<T extends keyof Chainable>(name: T, fn: CommandFnWithOriginalFn<T>): void
overwrite<T extends keyof Chainable, S extends PrevSubject>(name: T, fn: CommandFnWithOriginalFnAndSubject<T, PrevSubjectMap[S]>): void
}
Expand Down
112 changes: 112 additions & 0 deletions cli/types/tests/cypress-tests.ts
View file
Open in desktop
Expand Up @@ -147,6 +147,118 @@ namespace CypressCommandsTests {
arg
return cy.wrap(new Promise<number>((resolve) => { resolve(5) }))
})

Cypress.Commands.addAll({
newCommand(arg) {
// $ExpectType any
arg
this // $ExpectType Context
return
},
newCommand2(arg, arg2) {
// $ExpectType any
arg
// $ExpectType any
arg2
},
newCommand3: (arg) => {
// $ExpectType any
arg
return
},
newCommand4: (arg) => {
// $ExpectType any
arg
},
})
Cypress.Commands.addAll({ prevSubject: true }, {
newCommand: (subject, arg) => {
subject // $ExpectType unknown
arg // $ExpectType any
return
},
})
Cypress.Commands.addAll({ prevSubject: false }, {
newCommand: (arg) => {
arg // $ExpectType any
return
},
})
Cypress.Commands.addAll({ prevSubject: 'optional' }, {
newCommand: (subject, arg) => {
subject // $ExpectType unknown
arg // $ExpectType any
return
},
newCommand2: (subject, arg) => {
subject // $ExpectType unknown
arg // $ExpectType any
},
})
Cypress.Commands.addAll({ prevSubject: ['optional'] }, {
newCommand: (subject, arg) => {
subject // $ExpectType unknown
arg // $ExpectType any
},
})
Cypress.Commands.addAll({ prevSubject: 'document' }, {
newCommand: (subject, arg) => {
subject // $ExpectType Document
arg // $ExpectType any
},
})
Cypress.Commands.addAll({ prevSubject: 'window' }, {
newCommand: (subject, arg) => {
subject // $ExpectType Window
arg // $ExpectType any
},
})
Cypress.Commands.addAll({ prevSubject: 'element' }, {
newCommand: (subject, arg) => {
subject // $ExpectType JQuery<HTMLElement>
arg // $ExpectType any
}
})
Cypress.Commands.addAll({ prevSubject: ['element'] }, {
newCommand: (subject, arg) => {
subject // $ExpectType JQuery<HTMLElement>
arg // $ExpectType any
}
})
Cypress.Commands.addAll({ prevSubject: ['element', 'document', 'window'] }, {
newCommand: (subject, arg) => {
if (subject instanceof Window) {
subject // $ExpectType Window
} else if (subject instanceof Document) {
subject // $ExpectType Document
} else {
subject // $ExpectType JQuery<HTMLElement>
}
arg // $ExpectType any
}
})
Cypress.Commands.addAll({ prevSubject: ['window', 'document', 'optional', 'element'] }, {
newCommand: (subject, arg) => {
if (subject instanceof Window) {
subject // $ExpectType Window
} else if (subject instanceof Document) {
subject // $ExpectType Document
} else if (subject) {
subject // $ExpectType JQuery<HTMLElement>
} else {
subject // $ExpectType void
}
arg // $ExpectType any
}
})
Cypress.Commands.addAll({
newCommand: (arg) => {
// $ExpectType any
arg
return cy.wrap(new Promise<number>((resolve) => { resolve(5) }))
}
})

Cypress.Commands.overwrite('newCommand', (originalFn, arg) => {
arg // $ExpectType string
originalFn // $ExpectedType Chainable['newCommand']
Expand Down