bump jquery to 3.1.1

[jennifer-shehane]

• close Upgade jQuery dependency to 3.x #1215

[jennifer-shehane]

Definitely going to need to reference the upgrade guide for this: https://jquery.com/upgrade-guide/3.0/

[jennifer-shehane]

First issue: jQuery .selector has been removed in 3.0, which is used extensively to identify a node's selector.

Example where .selector is used:

• https://github.com/cypress-io/cypress/blob/issue-1215-jquery-3/packages/driver/src/cy/chai.coffee

via jQuery

The property .selector was never a reliable indicator of the selector that could be used to obtain the set of elements currently contained in the jQuery set where it was a property, since subsequent traversal methods may have changed the set.

Plugins that need to use a selector string within their plugin can require it as a parameter of the method. For example, a "foo" plugin could be written as $.fn.foo = function( selector, options ) { /* plugin code goes here */ };, and the person using the plugin would write $( "div.bar" ).foo( "div.bar", {dog: "bark"} ); with the "div.bar" selector repeated as the first argument of .foo().

[Saibamen]

Please update your branch to latest develop branch from upstream.

I've tested all examples with JQuery 3.0.0 and only one test didn't pass:
assertions.spec.js: matches unknown text between two elements: Timed out retrying: Expected to find element: 'undefined', but never found it.

[Saibamen]

.selectors in cypress\packages\driver:

• src\cy\assertions.coffee: line 363 (here)
• src\cy\chai.coffee: lines 181 (here), 232 and 252 (this is JQuery??)
• src\cy\commands\querying.coffee: line 62 (here)
• src\cy\commands\traversals.coffee: line 50 (here)
• test\cypress\integration\commands\traversals_spec.coffee: line 155 (here) and 157
• test\cypress\integration\commands\assertions_spec.coffee: test "uses $el.selector in expectation" (here)

[bahmutov]

some tests are failing with undefined

   1) s1a "before each" hook for "t2a":
-     CypressError: Timed out retrying: Expected to find element: '.does-not-exist', but never found it.
+     CypressError: Timed out retrying: Expected to find element: 'undefined', but never found it.

[cypress]

---

Test summary

3357 • 0 • 47 • 0

---

Run details

Project	cypress
Status	Passed
Commit	81d15f7
Started	Sep 25, 2019 3:53 PM
Ended	Sep 25, 2019 3:58 PM
Duration	04:42 💡
OS	Linux Debian - 9.8
Browser	Multiple

View run in Cypress Dashboard ➡️

---

This comment has been generated by cypress-bot as a result of this project's GitHub integration settings. You can manage this integration in this project's settings in the Cypress Dashboard

[bahmutov]

You can recreate failing tests locally using for example

~/git/cypress/packages/driver on issue-1215-jquery-3
$ node ../../scripts/cypress run --project ./test \
	--spec test/cypress/integration/commands/querying_spec.coffee

[bahmutov]

with jQuery 2 if an element is not found we have selector property which we use to form error message

with jQuery 3 change we do not have this property (and we don't have context property)

Tested the returned result using jquery v3 and v2 fiddle

So we need to either change the jQuery behavior or "remember" the context and selector ourselves and just add them immediately after calling jQuery

Looking at jQuery v3 migration guide https://jquery.com/upgrade-guide/3.0/:

• these attributes were deprecated and were removed https://jquery.com/upgrade-guide/3.0/#breaking-change-deprecated-context-and-selector-properties-removed

[bahmutov]

Next missing test: cy.wrap([1, 2]).first() fails while creating a snapshot, because it tries to set attribute data-cypress-el on jQuery element 1

TypeError: Cannot create property 'data-cypress-el' on number '1'
    at Function.prop (jquery.js:7472)
    at attr (jquery.js:7332)
    at access (jquery.js:3908)
    at jQuery.fn.init.attr (jquery.js:7310)
    at Object.createSnapshot (snapshots.coffee:120)

Seems v3 always runs in strict mode https://jquery.com/upgrade-guide/3.0/#breaking-change-jquery-3-0-runs-in-strict-mode, which throws when trying to set attribute on the primitive type

// elem = 1
// name = 'data-cypress-el'
return ( elem[ name ] = value )

'use strict'
1['foo'] = 2
console.log('ended')
// silently runs just fine without "use strict"

But with "use strict" fails

$ node .
/Users/gleb/git/test-cypress-fiddle/index.js:2
1['foo'] = 2
         ^

TypeError: Cannot create property 'foo' on number '1'

[bahmutov]

Snapshots CSS test failing because $.load was removed https://jquery.com/upgrade-guide/3.0/#breaking-change-load-unload-and-error-removed

1) driver/src/cy/snapshots_css .getStyleIds "before each" hook for "returns IDs for cached CSS contents":
     TypeError: url.indexOf is not a function

Because this error occurred during a 'before each' hook we are skipping the remaining tests in the current suite: 'driver/src/cy/snapshots_css'

Changing to the recommended solution on('load', fn)

[bahmutov]

Since snapshot test remains - the screenshot height is different from the snapshot value. See https://circleci.com/gh/cypress-io/cypress/150034

[chrisbreiding]

jQuery 3 changes how it does width and height calculations (it now uses getBoundingClientRect), which takes into account the scaling. We want the absolute value without scaling, so we're better off directly using the DOM properties.

[jennifer-shehane]

@chrisbreiding I'm in favor of bumping it back down to 3.0.0 and pushing that out.

[chrisbreiding]

Was able to get 3.1.1 passing.

[jennifer-shehane]

Good team effort. Almost 2 years coming.

@chrisbreiding I guess open a new PR for jQuery latest. Merging this one in.

[wKovacs64]

Yes! 🙌 Is a release imminent?