Typings for Command.add are missing types for the subject

[SimeonC]

Current behavior

A simple custom command that relies on prevSubject is not correctly typed.

Desired behavior

The "previous subject" argument should be correctly added to the command type and error if not passed.

Test code to reproduce

declare global {
  namespace Cypress {
    interface Chainable {
      confirmClick(): void;
    }
  }
}

Cypress.Commands.add('confirmClick', { prevSubject: true }, (confirmButton) => {
  confirmButton.click();
  cy.wrap(confirmButton)
    .should('have.attr', 'data-state', 'confirming')
    .click({ force: true });
});

Cypress Version

9.0.0

Other

No response

[omersomuncu]

For me "confirmClick" is not. Neither add nor overwrite is working at the moment.

[SimeonC]

I have done some attempts at fixing this for add (though I think the fix only works in TS 4.4) but overwrite is significantly more difficult as we don't have Options to switch on.

[SimeonC]

My current workaround for this locally is to use a wrapper function as below and change

- Cypress.Commands.add('confirmClick', { prevSubject: true }, (confirmButton) => {
+ addCypressCommand('confirmClick', { prevSubject: true }, (confirmButton) => {

type AddSubjectArgument<
  TPrevSubject extends Cypress.CommandOptions['prevSubject'],
  TFunction extends (...args: any) => any
> = (
  ...args: [
    TPrevSubject extends true
      ? JQuery | HTMLElement
      : undefined | JQuery | HTMLElement,
    ...Parameters<TFunction>
  ]
) => ReturnType<TFunction>;

function addCypressCommand<
  T extends keyof Cypress.Chainable,
  TOptions extends Cypress.CommandOptions
>(
  name: T,
  options: TOptions,
  fn: Cypress.Chainable[T] extends (...args: any) => any
    ? TOptions['prevSubject'] extends false
      ? Cypress.Chainable[T]
      : AddSubjectArgument<TOptions['prevSubject'], Cypress.Chainable[T]>
    : never
): void {
  Cypress.Commands.add<T>(name, options, fn as Cypress.Chainable[T]);
}

[kubijo]

My current workaround for this locally is to use a wrapper function as below and change

- Cypress.Commands.add('confirmClick', { prevSubject: true }, (confirmButton) => {
+ addCypressCommand('confirmClick', { prevSubject: true }, (confirmButton) => {

…

EDIT: I was proposing a solution, but I spoke too soon and later found out that it actually doesn't work, so I'm removing it to prevent confusion

[SimeonC]

My workaround does handle all values of prevSubject, just in 2 places rather than one.

  fn: Cypress.Chainable[T] extends (...args: any) => any
    ? TOptions['prevSubject'] extends false
      ? Cypress.Chainable[T]
      : AddSubjectArgument<TOptions['prevSubject'], Cypress.Chainable[T]>
    : never

At this place we check if prevSubject is false, which means that the subject should not be added - hence returning Cypress.Chainable[T] otherwise we pass to the AddSubjectArgument type.

Key is this part of the type at this point, our type of TPrevSubject is true | string | string[] (OK, not quite string cause it's 'internal', 'window' etc). So the ternary correctly handles between being true and the value cannot be undefined, or the other values where it can be undefined.

...args: [
    TPrevSubject extends true
      ? JQuery | HTMLElement
      : undefined | JQuery | HTMLElement,
    ...Parameters<TFunction>

This is the solution I used in the attached PR which passes all the TS 4 tests, the only problem I have is that this only seems to work in TS 4 so the TS 3 tests fail.

[maciaszczykm]

We have the same problem, typings are not available for child commands since #17496 was introduced.