CODEWITHSUNDEEP
typescriptcypress
tnrich
tnrich

Reputation: 8610

Cypress overwrite type command and extend .d.ts file with additional options

I've decided to try to overwrite the cypress .type command like so:

Cypress.Commands.overwrite(
  "type",
  (originalFn, subject, text, options = {}) => {
    if (text === "{selectall}{del}") { //pass thru .clear() calls
      return originalFn(subject, text, options); 
    } else {
      cy.wrap(subject, { log: false })
        .invoke("val")
        .then((prevValue) => {
          if (
            options.parseSpecialCharSequences === false ||
            text.includes("{") //if special chars are getting used just pass them thru
          ) {
            // eslint-disable-next-line cypress/no-unnecessary-waiting
            cy.wait(0, { log: false }).then(
              { timeout: options.timeout || 40000 },
              () => originalFn(subject, text, options)
            );
          } else {
            // eslint-disable-next-line cypress/no-unnecessary-waiting
            cy.wait(0, { log: false }).then(
              { timeout: options.timeout || 40000 },
              () => originalFn(subject, text, options)
            );
            // Adds guarding that asserts that the value is typed.
            cy.wrap(subject, { log: false }).should(
              "have.value",
              `${options.noPrevValue ? "" : prevValue}${text}`
            );
          }
        });
    }
  }
);

Now that I've done that, I'd like to extend the index.d.ts file so that the type command now includes the new option I've added noPrevValue=boolean

I've added types to the index.d.ts for newly added commands, but never when overwriting a command before and am not quite sure how to do it. Any help would be appreciated. Thanks!

In response to the comment below, here's what the index.d.ts file looks like:

/// <reference types="cypress" />

declare namespace Cypress {
  interface Chainable<Subject = any> {   
    /**
     * triggerFileCmd
     * Triggers a cmd using the Help menu search
     * @example
     * cy.triggerFileCmd("Select All")
     * cy.triggerFileCmd("Digest")
     * cy.triggerFileCmd("Digest", {noEnter: true})
     */
    triggerFileCmd(text: string, options: { noEnter: boolean }): void;
    // a bunch more of this type of added command
  }
}

Upvotes: 1

Views: 1487

Answers (1)

tgreen
tgreen

Reputation: 1936

you can retype the original command:

/**
 * Type into a DOM element.
 *
 * @see https://on.cypress.io/type
 * @example
 *    cy.get('input').type('Hello, World')
 *    // type "hello" + press Enter
 *    cy.get('input').type('hello{enter}')
 */
type(
  text: string,
  options?: Partial<CustomTypeOptions>
): Chainable<Subject>;

and add a custom interface which extends the normal type options:

interface CustomTypeOptions extends Cypress.TypeOptions {
  passThru: boolean;
  assertVal: boolean;
  noPrevValue: boolean;
}

Upvotes: 4

Related Questions