misc: update a few cypress types + convert internal driver tests to T…

…ypeScript (cypress-io#31055) * misc: update a few cypress types + convert internal driver tests to TypeScript * Update packages/driver/cypress/e2e/commands/actions/scroll.cy.ts * add changelog entry * bump circle cache? * More type fixes * fix some more * Make the values numbers * Update cli/CHANGELOG.md Co-authored-by: Bill Glesias <[email protected]> --------- Co-authored-by: Bill Glesias <[email protected]>
l3dlp-sandbox · Feb 17, 2025 · 5bf4273 · 5bf4273
1 parent a224a79
commit 5bf4273
Show file tree

Hide file tree

Showing 29 changed files with 869 additions and 452 deletions.
diff --git a/cli/CHANGELOG.md b/cli/CHANGELOG.md
@@ -16,6 +16,10 @@ _Released 2/11/2025_
 - Upgraded `@cypress/request` from `3.0.6` to `3.0.7`. Addressed in [#31063](https://github.com/cypress-io/cypress/pull/31063).
 - Upgraded `compression` from `1.7.4` to `1.7.5`. Addressed in [#31004](https://github.com/cypress-io/cypress/pull/31004).
 
+**Misc:**
+
+- Updated types around `.readFile()` and `.scrollTo()` arguments and `Cypress.dom` methods. Addressed in [#31055](https://github.com/cypress-io/cypress/pull/31055).
+
 ## 14.0.2
 
 _Released 2/05/2025_

diff --git a/cli/types/cypress.d.ts b/cli/types/cypress.d.ts
@@ -756,8 +756,10 @@ declare namespace Cypress {
       getCoordsByPosition(left: number, top: number, xPosition?: string, yPosition?: string): number
       getElementPositioning(element: JQuery | HTMLElement): ElementPositioning
       getElementAtPointFromViewport(doc: Document, x: number, y: number): Element | null
-      getElementCoordinatesByPosition(element: JQuery | HTMLElement, position: string): ElementCoordinates
+      getElementCoordinatesByPosition(element: JQuery | HTMLElement, position?: string): ElementCoordinates
       getElementCoordinatesByPositionRelativeToXY(element: JQuery | HTMLElement, x: number, y: number): ElementPositioning
+      getHostContenteditable(element: HTMLElement): HTMLElement
+      getSelectionBounds(element: HTMLElement): { start: number, end: number }
     }
 
     /**
@@ -874,7 +876,7 @@ declare namespace Cypress {
      *    // Check first radio element
      *    cy.get('[type="radio"]').first().check()
      */
-    check(options?: Partial<CheckOptions>): Chainable<Subject>
+    check(options?: Partial<CheckClearOptions>): Chainable<Subject>
     /**
      * Check checkbox(es) or radio(s). This element must be an `<input>` with type `checkbox` or `radio`.
      *
@@ -885,7 +887,7 @@ declare namespace Cypress {
      *    // Check the checkboxes with the values 'ga' and 'ca'
      *    cy.get('[type="checkbox"]').check(['ga', 'ca'])
      */
-    check(value: string | string[], options?: Partial<CheckOptions>): Chainable<Subject>
+    check(value: string | string[], options?: Partial<CheckClearOptions>): Chainable<Subject>
 
     /**
      * Get the children of each DOM element within a set of DOM elements.
@@ -902,7 +904,7 @@ declare namespace Cypress {
      *
      * @see https://on.cypress.io/clear
      */
-    clear(options?: Partial<ClearOptions>): Chainable<Subject>
+    clear(options?: Partial<CheckClearOptions>): Chainable<Subject>
 
     /**
      * Clear a specific browser cookie for a domain.
@@ -1806,7 +1808,7 @@ declare namespace Cypress {
      *
      * @see https://on.cypress.io/readfile
      */
-    readFile<Contents = any>(filePath: string, options?: Partial<Loggable & Timeoutable>): Chainable<Contents>
+    readFile<Contents = any>(filePath: string, options?: Partial<ReadFileOptions & Loggable & Timeoutable>): Chainable<Contents>
     /**
      * Read a file with given encoding and yield its contents.
      *
@@ -1930,7 +1932,7 @@ declare namespace Cypress {
      *
      * @see https://on.cypress.io/scrollto
      */
-    scrollTo(position: PositionType, options?: Partial<ScrollToOptions>): Chainable<Subject>
+    scrollTo(positionOrX: PositionType | number | string, options?: Partial<ScrollToOptions>): Chainable<Subject>
     /**
      * Scroll to a specific X,Y position.
      *
@@ -2326,7 +2328,7 @@ declare namespace Cypress {
      *    // Uncheck the checkbox with the value of 'ga'
      *    cy.get('input[type="checkbox"]').uncheck(['ga'])
      */
-    uncheck(options?: Partial<CheckOptions>): Chainable<Subject>
+    uncheck(options?: Partial<CheckClearOptions>): Chainable<Subject>
     /**
      * Uncheck specific checkbox.
      *
@@ -2335,7 +2337,7 @@ declare namespace Cypress {
      *    // Uncheck the checkbox with the value of 'ga'
      *    cy.get('input[type="checkbox"]').uncheck('ga')
      */
-    uncheck(value: string, options?: Partial<CheckOptions>): Chainable<Subject>
+    uncheck(value: string, options?: Partial<CheckClearOptions>): Chainable<Subject>
     /**
      * Uncheck specific checkboxes.
      *
@@ -2344,7 +2346,7 @@ declare namespace Cypress {
      *    // Uncheck the checkbox with the value of 'ga', 'ma'
      *    cy.get('input[type="checkbox"]').uncheck(['ga', 'ma'])
      */
-    uncheck(values: string[], options?: Partial<CheckOptions>): Chainable<Subject>
+    uncheck(values: string[], options?: Partial<CheckClearOptions>): Chainable<Subject>
 
     /**
      * Get the current URL of the page that is currently active.
@@ -2556,6 +2558,8 @@ declare namespace Cypress {
      *    expect(s).to.have.been.calledOnce
      */
     withArgs(...args: any[]): Omit<A, 'withArgs'> & Agent<A>
+
+    callsFake(func: (...args: any[]) => any): Omit<A, 'withArgs'> & Agent<A>
   }
 
   type Agent<T extends sinon.SinonSpy> = SinonSpyAgent<T> & T
@@ -2726,13 +2730,7 @@ declare namespace Cypress {
 
   interface BlurOptions extends Loggable, Timeoutable, Forceable { }
 
-  interface CheckOptions extends Loggable, Timeoutable, ActionableOptions {
-    interval: number
-  }
-
-  interface ClearOptions extends Loggable, Timeoutable, ActionableOptions {
-    interval: number
-  }
+  interface CheckClearOptions extends Loggable, Timeoutable, ActionableOptions { }
 
   /**
    * Object to change the default behavior of .click().
@@ -3695,7 +3693,7 @@ declare namespace Cypress {
      *
      * @default 0
      */
-    duration: number
+    duration: number | string
     /**
      * Will scroll with the easing animation
      *
@@ -3986,6 +3984,11 @@ declare namespace Cypress {
     decode: boolean
   }
 
+  /** Options to change the default behavior of .readFile */
+  interface ReadFileOptions extends Loggable {
+    encoding: Encodings
+  }
+
   /** Options to change the default behavior of .writeFile */
   interface WriteFileOptions extends Loggable {
     flag: string

diff --git a/...iver/cypress/e2e/a11y/click-targets.cy.js → ...iver/cypress/e2e/a11y/click-targets.cy.ts b/...iver/cypress/e2e/a11y/click-targets.cy.js → ...iver/cypress/e2e/a11y/click-targets.cy.ts
diff --git a/...ages/driver/cypress/e2e/a11y/inputs.cy.js → ...ages/driver/cypress/e2e/a11y/inputs.cy.ts b/...ages/driver/cypress/e2e/a11y/inputs.cy.js → ...ages/driver/cypress/e2e/a11y/inputs.cy.ts
diff --git a/...ages/driver/cypress/e2e/a11y/slider.cy.js → ...ages/driver/cypress/e2e/a11y/slider.cy.ts b/...ages/driver/cypress/e2e/a11y/slider.cy.js → ...ages/driver/cypress/e2e/a11y/slider.cy.ts
diff --git a/.../cypress/e2e/commands/actions/check.cy.js → .../cypress/e2e/commands/actions/check.cy.ts b/.../cypress/e2e/commands/actions/check.cy.js → .../cypress/e2e/commands/actions/check.cy.ts
@@ -1,4 +1,5 @@
-const { assertLogLength } = require('../../../support/utils')
+import { assertLogLength } from '../../../support/utils'
+
 const { _, Promise, $ } = Cypress
 
 describe('src/cy/commands/actions/check', () => {
@@ -167,7 +168,14 @@ describe('src/cy/commands/actions/check', () => {
     it('can forcibly click even when being covered by another element', () => {
       const checkbox = $('<input type=\'checkbox\' />').attr('id', 'checkbox-covered-in-span').prependTo($('body'))
 
-      $('<span>span on checkbox</span>').css({ position: 'absolute', left: checkbox.offset().left, top: checkbox.offset().top, padding: 5, display: 'inline-block', backgroundColor: 'yellow' }).prependTo($('body'))
+      $('<span>span on checkbox</span>')
+      .css('position', 'absolute')
+      .css('left', `${checkbox.offset()?.left }px`)
+      .css('top', `${checkbox.offset()?.top }px`)
+      .css('padding', '5px')
+      .css('display', 'inline-block')
+      .css('background-color', 'yellow')
+      .prependTo($('body'))
 
       let clicked = false
 
@@ -186,14 +194,12 @@ describe('src/cy/commands/actions/check', () => {
       .prependTo($('body'))
 
       $('<span>span on checkbox</span>')
-      .css({
-        position: 'absolute',
-        left: checkbox.offset().left,
-        top: checkbox.offset().top,
-        padding: 5,
-        display: 'inline-block',
-        backgroundColor: 'yellow',
-      })
+      .css('position', 'absolute')
+      .css('left', `${checkbox.offset()?.left }px`)
+      .css('top', `${checkbox.offset()?.top }px`)
+      .css('padding', '5px')
+      .css('display', 'inline-block')
+      .css('background-color', 'yellow')
       .prependTo($('body'))
 
       cy.on('command:retry', _.once((options) => {
@@ -203,6 +209,7 @@ describe('src/cy/commands/actions/check', () => {
         done()
       }))
 
+      // @ts-expect-error: TODO: Internal types for check should accept interval
       cy.get('#checkbox-covered-in-span').check({ timeout: 1000, interval: 60 })
     })
 
@@ -558,7 +565,14 @@ describe('src/cy/commands/actions/check', () => {
       it('throws when input cannot be clicked', function (done) {
         const checkbox = $('<input type=\'checkbox\' />').attr('id', 'checkbox-covered-in-span').prependTo($('body'))
 
-        $('<span>span on button</span>').css({ position: 'absolute', left: checkbox.offset().left, top: checkbox.offset().top, padding: 5, display: 'inline-block', backgroundColor: 'yellow' }).prependTo($('body'))
+        $('<span>span on button</span>')
+        .css('position', 'absolute')
+        .css('left', `${checkbox.offset()?.left }px`)
+        .css('top', `${checkbox.offset()?.top }px`)
+        .css('padding', '5px')
+        .css('display', 'inline-block')
+        .css('background-color', 'yellow')
+        .prependTo($('body'))
 
         cy.on('fail', (err) => {
           assertLogLength(this.logs, 2)
@@ -691,8 +705,8 @@ describe('src/cy/commands/actions/check', () => {
       })
 
       it('logs only 1 check event on click of 1 checkbox', () => {
-        const logs = []
-        const checks = []
+        const logs: any[] = []
+        const checks: any[] = []
 
         cy.on('log:added', (attrs, log) => {
           logs.push(log)
@@ -708,8 +722,8 @@ describe('src/cy/commands/actions/check', () => {
       })
 
       it('logs only 1 check event on click of 1 radio', () => {
-        const logs = []
-        const radios = []
+        const logs: any[] = []
+        const radios: any[] = []
 
         cy.on('log:added', (attrs, log) => {
           logs.push(log)
@@ -725,8 +739,8 @@ describe('src/cy/commands/actions/check', () => {
       })
 
       it('logs only 1 check event on checkbox with 1 matching value arg', () => {
-        const logs = []
-        const checks = []
+        const logs: any[] = []
+        const checks: any[] = []
 
         cy.on('log:added', (attrs, log) => {
           logs.push(log)
@@ -742,8 +756,8 @@ describe('src/cy/commands/actions/check', () => {
       })
 
       it('logs only 1 check event on radio with 1 matching value arg', () => {
-        const logs = []
-        const radios = []
+        const logs: any[] = []
+        const radios: any[] = []
 
         cy.on('log:added', (attrs, log) => {
           logs.push(log)
@@ -988,7 +1002,14 @@ describe('src/cy/commands/actions/check', () => {
       let clicked = false
       const checkbox = $('<input type=\'checkbox\' />').attr('id', 'checkbox-covered-in-span').prop('checked', true).prependTo($('body'))
 
-      $('<span>span on checkbox</span>').css({ position: 'absolute', left: checkbox.offset().left, top: checkbox.offset().top, padding: 5, display: 'inline-block', backgroundColor: 'yellow' }).prependTo($('body'))
+      $('<span>span on checkbox</span>')
+      .css('position', 'absolute')
+      .css('left', `${checkbox.offset()?.left }px`)
+      .css('top', `${checkbox.offset()?.top }px`)
+      .css('padding', '5px')
+      .css('display', 'inline-block')
+      .css('background-color', 'yellow')
+      .prependTo($('body'))
 
       checkbox.on('click', () => {
         clicked = true
@@ -1002,7 +1023,14 @@ describe('src/cy/commands/actions/check', () => {
     it('passes timeout and interval down to click', (done) => {
       const checkbox = $('<input type=\'checkbox\' />').attr('id', 'checkbox-covered-in-span').prop('checked', true).prependTo($('body'))
 
-      $('<span>span on checkbox</span>').css({ position: 'absolute', left: checkbox.offset().left, top: checkbox.offset().top, padding: 5, display: 'inline-block', backgroundColor: 'yellow' }).prependTo($('body'))
+      $('<span>span on checkbox</span>')
+      .css('position', 'absolute')
+      .css('left', `${checkbox.offset()?.left }px`)
+      .css('top', `${checkbox.offset()?.top }px`)
+      .css('padding', '5px')
+      .css('display', 'inline-block')
+      .css('background-color', 'yellow')
+      .prependTo($('body'))
 
       cy.on('command:retry', (options) => {
         expect(options.timeout).to.eq(1000)
@@ -1011,6 +1039,7 @@ describe('src/cy/commands/actions/check', () => {
         done()
       })
 
+      // @ts-expect-error: TODO: Internal types for uncheck should accept interval
       cy.get('#checkbox-covered-in-span').uncheck({ timeout: 1000, interval: 60 })
     })
 
@@ -1171,7 +1200,14 @@ describe('src/cy/commands/actions/check', () => {
       it('throws when input cannot be clicked', function (done) {
         const checkbox = $('<input type=\'checkbox\' />').attr('id', 'checkbox-covered-in-span').prop('checked', true).prependTo($('body'))
 
-        $('<span>span on button</span>').css({ position: 'absolute', left: checkbox.offset().left, top: checkbox.offset().top, padding: 5, display: 'inline-block', backgroundColor: 'yellow' }).prependTo($('body'))
+        $('<span>span on button</span>')
+        .css('position', 'absolute')
+        .css('left', `${checkbox.offset()?.left }px`)
+        .css('top', `${checkbox.offset()?.top }px`)
+        .css('padding', '5px')
+        .css('display', 'inline-block')
+        .css('background-color', 'yellow')
+        .prependTo($('body'))
 
         cy.on('fail', (err) => {
           assertLogLength(this.logs, 2)
@@ -1330,8 +1366,8 @@ describe('src/cy/commands/actions/check', () => {
       })
 
       it('logs only 1 uncheck event', () => {
-        const logs = []
-        const unchecks = []
+        const logs: any[] = []
+        const unchecks: any[] = []
 
         cy.on('log:added', (attrs, log) => {
           logs.push(log)
@@ -1347,8 +1383,8 @@ describe('src/cy/commands/actions/check', () => {
       })
 
       it('logs only 1 uncheck event on uncheck with 1 matching value arg', () => {
-        const logs = []
-        const unchecks = []
+        const logs: any[] = []
+        const unchecks: any[] = []
 
         cy.on('log:added', (attrs, log) => {
           logs.push(log)