fix: Fire appropriate event when cy.type().

[sainthkh]

• Closes Cannot read property 'indexOf' of undefined when using .type() #6125
• fix Inconsistant and invalid Events Typing using cypress #5650

User facing changelog

cy.type() now fires KeyboardEvent, not Event.

It didn't because it had to support Chrome < 63. But Chrome 63 isn't in the lastest list of chrominum. I guess we don't have to support it any more.

Additional details

Why was this change necessary?

• cy.type() fires Event class and it doesn't match the behavior of the Browsers.
• When Event class is overridden and you cannot fix the code of the site, cy.type() fails.

What is affected by this change?

N/A

Any implementation details to explain?

I tried to simply revive the commented-out code, but there were some problems in Firefox.

• Firefox doesn't support TextInput event. So, we had to check if it's a valid Event constructor and fallback to KeyboardEvent.
• When KeyboardEvent with Enter key is sent to an input field in a form in Firefox, submit event is automatically triggered. I had to fix problems related with it.

How has the user experience changed?

N/A

PR Tasks

• Have tests been added/updated?
• Has the original issue been tagged with a release in ZenHub?
• [N/A] Has a PR for user-facing changes been opened in cypress-documentation?
• [N/A] Have API changes been updated in the type definitions?
• [N/A] Have new configuration options been added to the cypress.schema.json?

[cypress-bot]

Thanks for taking the time to open a PR!

• Create a Draft Pull Request if your PR is not ready for review. Mark the PR as Ready for Review when you're ready for a Cypress team member to review the PR.
• Become familiar with the Code Review Checklist for guidelines on coding standards and what needs to be done before a PR can be merged.

[kuceb]

@sainthkh we should always be able to workaround cases where the AUT overwrites some native class that we need, we backup the getter/setter or prototype as soon as the page is loaded before the AUT has time to overwrite it, see https://github.com/cypress-io/cypress/blob/composite-error/packages/driver/src/dom/elements.ts#L264

Is there any other reason we need to use KeyboardEvent? As far as I know the only real impact should be if AUT code is using instanceOf logic e.g. if (e instanceOf KeyboardEvent) {...}

Edit: looking at the tests and the related issues, it makes sense to move to KeyboardEvent, thanks for the PR!

[kuceb]

@sainthkh this should fix #5650 no?

[kuceb]

I would suggest something like (to keep test smaller, faster):

Suggested change

	it('should trigger KeyboardEvent, not Event, for event listeners', () => {
	cy.visit('fixtures/issue-5650.html')
	cy.get('#test-input').type('A')
	cy.get('#result').contains('isKeyboardEvent: true')
	})
	it('should trigger KeyboardEvent, not Event, for event listeners', () => {
	cy.$$('input:first').on('keydown', (e) => {
	if (e instanceOf e.currentTarget.ownerDocument.defaultView.KeyboardEvent) return
	throw new Error('event was not instanceOf KeyboardEvent')
	})
	cy.get('input:first').type('A')
	})

[sainthkh]

I tried to reuse the test created in #5650. But I prefer your way.

But the code above has 2 problems:

1. e is not a native event. To access it, we need to use e.originalEvent.

It's also important to note that the event object contains a property called originalEvent, which is the event object that the browser itself created. jQuery wraps this native event object with some useful methods and properties, but in some instances, you'll need to access the original event via event.originalEvent for instance. This is especially useful for touch events on mobile devices and tablets.

2. done function should be used. Otherwise, the test would pass without checking keydown event. Or fail later when Cypress is running other tests.

I fixed these 2 problems and updated the test.

[kuceb]

nice comments 👍

[sainthkh]

As I wrote in the comment, there are 3 problems in #5650:

• KeyboardEvent
• documentation about iframe in the Test Runner AUT.
• cy.trigger()

KeyboardEvent is solved here. Doc issue is solved at cypress-io/cypress-documentation#3073. And I'm currently coping with cy.trigger() issue and #5650 will be closed with it.

[sainthkh]

kitchensink tests failed because of the change in #7782.

[jennifer-shehane]

@sainthkh sigh, yah, these should pass but I think they fail for outside contributors because the run doesn't have access to env var NEXT_DEV_VERSION. Let me try to rerun.

[sainthkh]

Flaky failure.