dependency: Update jQuery to latest (#30345)

* remove jquery patch

BREAKING: remove the patch that was preventing width/height calculation changes

* changelog entry

* fix issue link

* Update halfScrollPixels to width/height that jQuery returns

* Update scroll tests to properly check for half with no scrollbar

* remove passing variable that doesn't exist in jquery scrollto

* bump to jQuery 3.5.0 + fix invalid DOM in tests

* bump down jquery - got too excited

* Fix the tests to be accurate

* bump jquery

* switch to client, see what breaks

* Repatch jquery and update tests back to old logic

* add dep changelog entry

* remove test that's reliant on deprecated jQuery focus

* update test to follow cypress conventions for chaining

* Update regex to include jQuery stack traces as well as sizzle since jQuery is moving away from sizzle

* update changelog

* update focus link to fix it

* added patch for :focus selector

* Move changelog entry to 4.0

---------

Co-authored-by: Matthew Schile <[email protected]>

cli/CHANGELOG.md

@@ -27,6 +27,7 @@ _Released 12/3/2024 (PENDING)_
 
 - Upgraded `electron` from `27.3.10` to `32.2.0`. Addresses [#29547](https://github.com/cypress-io/cypress/issues/29547).
 - Upgraded bundled Chromium version from `118.0.5993.159` to `128.0.6613.178`. Addresses [#29547](https://github.com/cypress-io/cypress/issues/29547).
+- Updated `jQuery` from `3.4.1` to `3.7.1`. Addressed in [#30345](https://github.com/cypress-io/cypress/pull/30345).
 
 
 ## 13.15.2
@@ -37,6 +38,7 @@ _Released 11/5/2024 (PENDING)_
 
 - Updated `@cypress/request` from `3.0.4` to `3.0.6`. Addressed in [#30488](https://github.com/cypress-io/cypress/pull/30488).
 
+
 ## 13.15.1
 
 _Released 10/24/2024_

package.json

@@ -265,7 +265,7 @@
     "**/@types/enzyme": "3.10.5",
     "**/@types/react": "16.9.50",
     "**/@wdio/logger": "9.0.0",
-    "**/jquery": "3.4.1",
+    "**/jquery": "3.7.1",
     "**/pretty-format": "26.4.0",
     "**/sharp": "0.29.3",
     "**/socket.io-parser": "4.0.5",

packages/app/cypress/e2e/cypress-in-cypress-component.cy.ts

@@ -37,7 +37,8 @@ describe('Cypress In Cypress CT', { viewportWidth: 1500, defaultCommandTimeout:
       cy.get('body').click()
 
       cy.findByTestId('playground-activator').click()
-      cy.findByTestId('playground-selector').clear().type('[data-cy-root]')
+      cy.findByTestId('playground-selector').clear()
+      cy.findByTestId('playground-selector').type('[data-cy-root]')
 
       // TODO: restore when Percy CSS is fixed. See https://github.com/cypress-io/cypress/issues/23435
       // snapshotAUTPanel('cy.get selector')

packages/app/src/runner/aut-iframe.ts

@@ -14,6 +14,7 @@ import Highlight from './selector-playground/Highlight.ce.vue'
 type $CypressJQuery = any
 
 const sizzleRe = /sizzle/i
+const jQueryRe = /jquery/i
 
 export class AutIframe {
   debouncedToggleSelectorPlayground: DebouncedFunc<(isEnabled: any) => void>
@@ -540,8 +541,8 @@ export class AutIframe {
         $el = $root.find(selector)
       }
     } catch (err) {
-      // if not a sizzle error, ignore it and let $el be null
-      if (!sizzleRe.test(err.stack)) throw err
+      // if not a sizzle or jQuery error, ignore it and let $el be null
+      if (!(sizzleRe.test(err.stack) || jQueryRe.test(err.stack))) throw err
     }
 
     return $el

packages/driver/cypress/e2e/commands/actions/scroll.cy.js

@@ -28,9 +28,15 @@ describe('src/cy/commands/actions/scroll', () => {
       this.scrollBoth.scrollTop = 0
       this.scrollBoth.scrollLeft = 0
 
-      // width/height of scrollable container - width of parent viewport (minux scrollbars) / 2 to get the center
+      // width or height of DOM in pixels
+      this.scrollableContainerWidthHeight = 500
+      this.elementWidthHeight = 100
+      this.scrollBarWidthHeight = 15
+
+      // divide by 2 to get the center
       // browsers round up the pixel value so we need to round it
-      this.halfScrollPixels = Math.round((500 - 100) / 2)
+      this.halfScroll = Math.round((this.scrollableContainerWidthHeight - this.elementWidthHeight) / 2)
+      this.fullScroll = Math.round(this.scrollableContainerWidthHeight - this.elementWidthHeight)
     })
 
     describe('subject', () => {
@@ -48,7 +54,9 @@ describe('src/cy/commands/actions/scroll', () => {
 
       it('can use window', () => {
         cy.window().scrollTo('10px').then((win) => {
-          expect(win.scrollX).to.eq(10)
+          // Firefox doesn't round this number like other browsers
+          // So we round in the test to get consistent results here
+          expect(Math.round(win.scrollX)).to.eq(10)
         })
       })
 
@@ -86,11 +94,10 @@ describe('src/cy/commands/actions/scroll', () => {
         expect(this.scrollHoriz.get(0).scrollLeft).to.eq(0)
 
         cy.get('#scroll-to-horizontal').scrollTo('50%').then(function () {
-          // they don't calculate the height of the container
-          // in the percentage of the scroll (since going the height
-          // of the container wouldn't scroll at all...)
           expect(this.scrollHoriz.get(0).scrollTop).to.eq(0)
-          expect(this.scrollHoriz.get(0).scrollLeft).to.eq(this.halfScrollPixels)
+          // since there is no veritical scrollbar to take into account
+          // this is just half of the basic width
+          expect(this.scrollHoriz.get(0).scrollLeft).to.eq(this.halfScroll)
         })
       })
     })
@@ -112,7 +119,7 @@ describe('src/cy/commands/actions/scroll', () => {
 
         cy.get('#scroll-to-both').scrollTo('top').then(function () {
           expect(this.scrollBoth.get(0).scrollTop).to.eq(0)
-          expect(this.scrollBoth.get(0).scrollLeft).to.eq(this.halfScrollPixels)
+          expect(this.scrollBoth.get(0).scrollLeft).to.eq(this.halfScroll)
         })
       })
 
@@ -122,7 +129,7 @@ describe('src/cy/commands/actions/scroll', () => {
 
         cy.get('#scroll-to-both').scrollTo('topRight').then(function () {
           expect(this.scrollBoth.get(0).scrollTop).to.eq(0)
-          expect(this.scrollBoth.get(0).scrollLeft).to.eq((500 - 100))
+          expect(this.scrollBoth.get(0).scrollLeft).to.eq(this.fullScroll)
         })
       })
 
@@ -131,7 +138,7 @@ describe('src/cy/commands/actions/scroll', () => {
         expect(this.scrollBoth.get(0).scrollLeft).to.eq(0)
 
         cy.get('#scroll-to-both').scrollTo('left').then(function () {
-          expect(this.scrollBoth.get(0).scrollTop).to.eq(this.halfScrollPixels)
+          expect(this.scrollBoth.get(0).scrollTop).to.eq(this.halfScroll)
           expect(this.scrollBoth.get(0).scrollLeft).to.eq(0)
         })
       })
@@ -141,8 +148,8 @@ describe('src/cy/commands/actions/scroll', () => {
         expect(this.scrollBoth.get(0).scrollLeft).to.eq(0)
 
         cy.get('#scroll-to-both').scrollTo('center').then(function () {
-          expect(this.scrollBoth.get(0).scrollTop).to.eq(this.halfScrollPixels)
-          expect(this.scrollBoth.get(0).scrollLeft).to.eq(this.halfScrollPixels)
+          expect(this.scrollBoth.get(0).scrollTop).to.eq(this.halfScroll)
+          expect(this.scrollBoth.get(0).scrollLeft).to.eq(this.halfScroll)
         })
       })
 
@@ -151,8 +158,8 @@ describe('src/cy/commands/actions/scroll', () => {
         expect(this.scrollBoth.get(0).scrollLeft).to.eq(0)
 
         cy.get('#scroll-to-both').scrollTo('right').then(function () {
-          expect(this.scrollBoth.get(0).scrollTop).to.eq(this.halfScrollPixels)
-          expect(this.scrollBoth.get(0).scrollLeft).to.eq((500 - 100))
+          expect(this.scrollBoth.get(0).scrollTop).to.eq(this.halfScroll)
+          expect(this.scrollBoth.get(0).scrollLeft).to.eq((this.fullScroll))
         })
       })
 
@@ -161,7 +168,7 @@ describe('src/cy/commands/actions/scroll', () => {
         expect(this.scrollBoth.get(0).scrollLeft).to.eq(0)
 
         cy.get('#scroll-to-both').scrollTo('bottomLeft').then(function () {
-          expect(this.scrollBoth.get(0).scrollTop).to.eq((500 - 100))
+          expect(this.scrollBoth.get(0).scrollTop).to.eq((this.fullScroll))
           expect(this.scrollBoth.get(0).scrollLeft).to.eq(0)
         })
       })
@@ -171,8 +178,8 @@ describe('src/cy/commands/actions/scroll', () => {
         expect(this.scrollBoth.get(0).scrollLeft).to.eq(0)
 
         cy.get('#scroll-to-both').scrollTo('bottom').then(function () {
-          expect(this.scrollBoth.get(0).scrollTop).to.eq((500 - 100))
-          expect(this.scrollBoth.get(0).scrollLeft).to.eq(this.halfScrollPixels)
+          expect(this.scrollBoth.get(0).scrollTop).to.eq((this.fullScroll))
+          expect(this.scrollBoth.get(0).scrollLeft).to.eq(this.halfScroll)
         })
       })
 
@@ -181,8 +188,8 @@ describe('src/cy/commands/actions/scroll', () => {
         expect(this.scrollBoth.get(0).scrollLeft).to.eq(0)
 
         cy.get('#scroll-to-both').scrollTo('bottomRight').then(function () {
-          expect(this.scrollBoth.get(0).scrollTop).to.eq((500 - 100))
-          expect(this.scrollBoth.get(0).scrollLeft).to.eq((500 - 100))
+          expect(this.scrollBoth.get(0).scrollTop).to.eq((this.fullScroll))
+          expect(this.scrollBoth.get(0).scrollLeft).to.eq((this.fullScroll))
         })
       })
     })
@@ -233,8 +240,8 @@ describe('src/cy/commands/actions/scroll', () => {
         expect(this.scrollBoth.get(0).scrollLeft).to.eq(0)
 
         cy.get('#scroll-to-both').scrollTo('50%', '50%').then(function () {
-          expect(this.scrollBoth.get(0).scrollTop).to.eq(this.halfScrollPixels)
-          expect(this.scrollBoth.get(0).scrollLeft).to.eq(this.halfScrollPixels)
+          expect(this.scrollBoth.get(0).scrollTop).to.eq(this.halfScroll)
+          expect(this.scrollBoth.get(0).scrollLeft).to.eq(this.halfScroll)
         })
       })
 
@@ -243,7 +250,7 @@ describe('src/cy/commands/actions/scroll', () => {
         expect(this.scrollBoth.get(0).scrollLeft).to.eq(0)
 
         cy.get('#scroll-to-both').scrollTo('0%', '50%').then(function () {
-          expect(this.scrollBoth.get(0).scrollTop).to.eq(this.halfScrollPixels)
+          expect(this.scrollBoth.get(0).scrollTop).to.eq(this.halfScroll)
           expect(this.scrollBoth.get(0).scrollLeft).to.eq(0)
         })
       })
@@ -254,7 +261,7 @@ describe('src/cy/commands/actions/scroll', () => {
 
         cy.get('#scroll-to-both').scrollTo('50%', '0%').then(function () {
           expect(this.scrollBoth.get(0).scrollTop).to.eq(0)
-          expect(this.scrollBoth.get(0).scrollLeft).to.eq(this.halfScrollPixels)
+          expect(this.scrollBoth.get(0).scrollLeft).to.eq(this.halfScroll)
         })
       })
     })
@@ -353,12 +360,8 @@ describe('src/cy/commands/actions/scroll', () => {
 
       // https://github.com/cypress-io/cypress/issues/1924
       it('skips scrollability check', () => {
-        const scrollTo = cy.spy($.fn, 'scrollTo')
-
         cy.get('button:first').scrollTo('bottom', { ensureScrollable: false }).then(() => {
           cy.stub(Cypress.ensure, 'isScrollable')
-
-          expect(scrollTo).to.be.calledWithMatch({}, { ensureScrollable: false })
           expect(Cypress.ensure.isScrollable).not.to.be.called
         })
       })

packages/driver/cypress/e2e/commands/assertions.cy.js

@@ -2650,18 +2650,6 @@ describe('src/cy/commands/assertions', () => {
 
         expect({}).to.have.focus
       })
-
-      it('calls into custom focus pseudos', () => {
-        cy.$$('button:first').focus()
-        const stub = cy.spy($.expr.pseudos, 'focus').as('focus')
-
-        expect(cy.$$('button:first')).to.have.focus
-
-        cy.get('button:first').should('have.focus')
-        .then(() => {
-          expect(stub).to.be.calledTwice
-        })
-      })
     })
 
     context('match', () => {

packages/driver/cypress/e2e/dom/visibility.cy.ts

@@ -168,7 +168,7 @@ describe('src/cypress/dom/visibility', () => {
       }
 
       // ensure all tests run against a scrollable window
-      const scrollThisIntoView = add('<div style=`height: 1000px;` /><div>Should be in view</div>')
+      const scrollThisIntoView = add('<div style=`height: 1000px;`></div><div>Should be in view</div>')
 
       this.$visHidden = add('<ul style="visibility: hidden;"></ul>')
       this.$parentVisHidden = add('<div class="invis" style="visibility: hidden;"><button>parent visibility: hidden</button></div>')

packages/driver/cypress/e2e/dom/visibility_shadow_dom.cy.ts

@@ -27,7 +27,7 @@ describe('src/cypress/dom/visibility - shadow dom', () => {
       }
 
       // ensure all tests run against a scrollable window
-      const scrollThisIntoView = $(`<div style='height: 1000px; width: 10px;' /><div>Should be in view</div>`).appendTo(cy.$$('body'))
+      const scrollThisIntoView = $(`<div style='height: 1000px; width: 10px;'></div><div>Should be in view</div>`).appendTo(cy.$$('body'))
 
       // scroll the 2nd element into view so that
       // there is always a scrollTop so we ensure

packages/driver/package.json

@@ -55,7 +55,7 @@
     "is-valid-domain": "0.0.20",
     "is-valid-hostname": "1.0.1",
     "jimp": "0.22.12",
-    "jquery": "3.4.1",
+    "jquery": "3.7.1",
     "js-cookie": "3.0.5",
     "json-stable-stringify": "1.0.1",
     "lodash": "^4.17.21",