fix: make clicks on type('{enter}') composed (cypress-io#26395)

* fix: make clicks on type('{enter}') composed Co-authored-by: Mike Plummer <[email protected]> * 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 <[email protected]> --------- Co-authored-by: Adam Stone-Lord <[email protected]> Co-authored-by: Mike Plummer <[email protected]> Co-authored-by: Emily Rohrbough <[email protected]> Co-authored-by: Ben M <[email protected]>
kgroat · Apr 19, 2023 · a5a193d · a5a193d
1 parent 2d57517
commit a5a193d
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 4 deletions.
diff --git 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/.../e2e/commands/actions/type_events_spec.js → ...ss/e2e/commands/actions/type_events.cy.js b/.../e2e/commands/actions/type_events_spec.js → ...ss/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
@@ -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)
       }