From a5a193d9ca3c8a8ca157e09ff047714caa68b6b9 Mon Sep 17 00:00:00 2001 From: Kevin Groat Date: Mon, 10 Apr 2023 18:06:44 -0400 Subject: [PATCH] fix: make clicks on type('{enter}') composed (#26395) * fix: make clicks on type('{enter}') composed Co-authored-by: Mike Plummer * disable failing type_events driver tests from running in Webkit * make sure done is only called once * use test configuration to disable on webkit * fix changelog * Update cli/CHANGELOG.md Co-authored-by: Emily Rohrbough --------- Co-authored-by: Adam Stone-Lord Co-authored-by: Mike Plummer Co-authored-by: Emily Rohrbough Co-authored-by: Ben M --- cli/CHANGELOG.md | 1 + ...{type_events_spec.js => type_events.cy.js} | 22 ++++++++++++++++--- .../driver/src/cy/commands/actions/type.ts | 2 +- 3 files changed, 21 insertions(+), 4 deletions(-) rename packages/driver/cypress/e2e/commands/actions/{type_events_spec.js => type_events.cy.js} (96%) diff --git a/cli/CHANGELOG.md b/cli/CHANGELOG.md index 7f68b17c4c90..07f790379316 100644 --- a/cli/CHANGELOG.md +++ b/cli/CHANGELOG.md @@ -9,6 +9,7 @@ _Released 04/11/2023 (PENDING)_ - Fixed an issue in the onboarding wizard where project framework & bundler would not be auto-detected when opening directly into component testing mode using the `--component` CLI flag. Fixes [#22777](https://github.com/cypress-io/cypress/issues/22777). - Updated to use the `SEMAPHORE_GIT_WORKING_BRANCH` [Semphore](https://docs.semaphoreci.com) CI environment variable to correctly associate a Cloud run to the current branch. Previously this was incorrectly associating a run to the target branch. Fixes [#26309](https://github.com/cypress-io/cypress/issues/26309). - Fix an edge case in Component Testing where a custom `baseUrl` in `tsconfig.json` for Next.js 13.2.0+ is not respected. This was partially fixed in [#26005](https://github.com/cypress-io/cypress/pull/26005), but an edge case was missed. Fixes [#25951](https://github.com/cypress-io/cypress/issues/25951). + - Fixed an issue where `click` events fired on `.type('{enter}')` did not propagate through shadow roots. Fixes [#26392](https://github.com/cypress-io/cypress/issues/26392). **Misc:** diff --git a/packages/driver/cypress/e2e/commands/actions/type_events_spec.js b/packages/driver/cypress/e2e/commands/actions/type_events.cy.js similarity index 96% rename from packages/driver/cypress/e2e/commands/actions/type_events_spec.js rename to packages/driver/cypress/e2e/commands/actions/type_events.cy.js index efa72c7e3ce5..78e50c89d820 100644 --- a/packages/driver/cypress/e2e/commands/actions/type_events_spec.js +++ b/packages/driver/cypress/e2e/commands/actions/type_events.cy.js @@ -93,7 +93,8 @@ describe('src/cy/commands/actions/type - #type events', () => { cy.get(':text:first').type('a') }) - it('receives textInput event', (done) => { + // TODO fix this test in Webkit https://github.com/cypress-io/cypress/issues/26438 + it('receives textInput event', { browser: '!webkit' }, (done) => { const $txt = cy.$$(':text:first') $txt[0].addEventListener('textInput', (e) => { @@ -593,7 +594,8 @@ describe('src/cy/commands/actions/type - #type events', () => { ] targets.forEach((target) => { - it(target, () => { + // TODO fix this test in Webkit https://github.com/cypress-io/cypress/issues/26438 + it(target, { browser: '!webkit' }, () => { cy.get(`#target-${target}`).focus().type('{enter}') cy.get('li').should('have.length', 4) @@ -606,7 +608,8 @@ describe('src/cy/commands/actions/type - #type events', () => { describe('keydown triggered on another element', () => { targets.forEach((target) => { - it(target, () => { + // TODO fix this test in Webkit https://github.com/cypress-io/cypress/issues/26438 + it(target, { browser: '!webkit' }, () => { cy.get('#focus-options').select(target) cy.get('#input-text').focus().type('{enter}') @@ -649,6 +652,19 @@ describe('src/cy/commands/actions/type - #type events', () => { }) }) }) + + describe('shadow dom', () => { + // https://github.com/cypress-io/cypress/issues/26392 + it('propagates through shadow roots', () => { + cy.visit('fixtures/shadow-dom-button.html') + + cy.get('cy-test-element').invoke('on', 'click', cy.spy().as('clickSpy')) + + cy.get('cy-test-element').shadow().find('button').focus().type('{enter}') + + cy.get('@clickSpy').should('have.been.called') + }) + }) }) describe(`type(' ') fires click event on button-like elements`, () => { diff --git a/packages/driver/src/cy/commands/actions/type.ts b/packages/driver/src/cy/commands/actions/type.ts index a8fb90851c55..bdecb07e6bca 100644 --- a/packages/driver/src/cy/commands/actions/type.ts +++ b/packages/driver/src/cy/commands/actions/type.ts @@ -294,7 +294,7 @@ export default function (Commands, Cypress, cy, state, config) { const fireClickEvent = (el) => { const ctor = $dom.getDocumentFromElement(el).defaultView!.PointerEvent - const event = new ctor('click') + const event = new ctor('click', { composed: true }) el.dispatchEvent(event) }