fix: fix event tests to be shadow aware (#1182)

* fix: fix event tests to be shadow aware

* test: more stuff

* test: address pr comments

packages/integration-karma/test/shadow-dom/Event-properties/Event.defaultPrevented.spec.js

@@ -0,0 +1,12 @@
+import { createElement } from 'lwc';
+import XDefaultPreventingParent from 'x/defaultPreventingParent';
+
+it('defaultPrevented should be true after preventDefault() is invoked', function() {
+    const elm = createElement('x-default-prevented-parent', { is: XDefaultPreventingParent });
+    document.body.appendChild(elm);
+    const child = elm.shadowRoot.querySelector('x-default-prevented-child');
+    child.dispatchCancelableEvent();
+
+    expect(elm.defaultPrevented).toBe(true);
+    expect(child.defaultPrevented).toBe(true);
+});

packages/integration-karma/test/shadow-dom/Event-properties/Event.target.spec.js

@@ -1,6 +1,7 @@
 import { createElement } from 'lwc';
 import XAsyncEventTarget from 'x/asyncEventTarget';
 import XEventHandlingParent from 'x/eventHandlingParent';
+import XDocumentEventListener from 'x/documentEventListener';
 
 it('Async event target should be root node', function() {
     const elm = createElement('x-async-event-target', { is: XAsyncEventTarget });
@@ -23,3 +24,22 @@ it('parent should receive composed event with correct target', function() {
         expect(elm.shadowRoot.querySelector('.evt-target-is-x-child')).not.toBe(null);
     });
 });
+
+describe('event.target on document event listener', () => {
+    let actual;
+    const listener = evt => {
+        actual = evt.target.tagName.toLowerCase();
+    };
+    beforeAll(() => {
+        document.addEventListener('click', listener);
+    });
+    afterAll(() => {
+        document.removeEventListener(listener);
+    });
+    it('should return correct target', function() {
+        const elm = createElement('x-document-event-listener', { is: XDocumentEventListener });
+        document.body.appendChild(elm);
+        elm.shadowRoot.querySelector('button').click();
+        expect(actual).toBe('x-document-event-listener');
+    });
+});

packages/integration-tests/src/components/events/test-default-prevented/integration/child/child.html → packages/integration-karma/test/shadow-dom/Event-properties/x/defaultPreventedChild/defaultPreventedChild.html

@@ -1,4 +1,3 @@
 <template>
-    <span onclick={handleClick}>Child</span>
     <div if:true={defaultPrevented} class="default-prevented-indicator">Default Prevented</div>
 </template>

packages/integration-karma/test/shadow-dom/Event-properties/x/defaultPreventedChild/defaultPreventedChild.js

@@ -0,0 +1,18 @@
+import { LightningElement, api } from 'lwc';
+
+export default class Child extends LightningElement {
+    _defaultPrevented = false;
+    @api
+    get defaultPrevented() {
+        return this._defaultPrevented;
+    }
+
+    @api
+    dispatchCancelableEvent() {
+        const event = new CustomEvent('foo', {
+            cancelable: true,
+        });
+        this.dispatchEvent(event);
+        this._defaultPrevented = event.defaultPrevented;
+    }
+}

packages/integration-karma/test/shadow-dom/Event-properties/x/defaultPreventingParent/defaultPreventingParent.html

@@ -0,0 +1,3 @@
+<template>
+    <x-default-prevented-child onfoo={handleFoo}></x-default-prevented-child>
+</template>

packages/integration-karma/test/shadow-dom/Event-properties/x/defaultPreventingParent/defaultPreventingParent.js

@@ -0,0 +1,9 @@
+import { LightningElement, api } from 'lwc';
+
+export default class DefaultPreventingParent extends LightningElement {
+    @api defaultPrevented = false;
+    handleFoo(evt) {
+        evt.preventDefault();
+        this.defaultPrevented = evt.defaultPrevented;
+    }
+}

packages/integration-karma/test/shadow-dom/Event-properties/x/documentEventListener/documentEventListener.html

@@ -0,0 +1,3 @@
+<template>
+    <button>Click Me</button>
+</template>

packages/integration-karma/test/shadow-dom/Event-properties/x/documentEventListener/documentEventListener.js

@@ -0,0 +1,3 @@
+import { LightningElement } from 'lwc';
+
+export default class DocumentEventListener extends LightningElement {}

packages/integration-tests/src/components/events/test-change-event-composed/change-event-composed.spec.js

@@ -23,6 +23,11 @@ describe('Composed change event', () => {
         });
         browser.keys('foo');
         browser.click('body');
-        assert.deepEqual(browser.getText('.verify-not-composed'), 'Not Composed');
+        const div = browser.execute(function() {
+            return document
+                .querySelector('integration-change-event-composed')
+                .shadowRoot.querySelector('.verify-not-composed');
+        });
+        assert.deepEqual(div.getText(), 'Not Composed');
     });
 });

packages/integration-tests/src/components/events/test-event-flow/event-flow.spec.js

@@ -50,12 +50,21 @@ function assertValidGuid(guid) {
 
 function clickSlottedButton() {
     browser.execute(function() {
-        document.querySelector('button.slotted').click();
+        document
+            .querySelector('integration-event-flow')
+            .shadowRoot.querySelector('integration-parent')
+            .shadowRoot.querySelector('button.slotted')
+            .click();
     });
 }
 function clickChildButton() {
     browser.execute(function() {
-        document.querySelector('button.child').click();
+        document
+            .querySelector('integration-event-flow')
+            .shadowRoot.querySelector('integration-parent')
+            .shadowRoot.querySelector('integration-child')
+            .shadowRoot.querySelector('button.child')
+            .click();
     });
 }
 
@@ -78,7 +87,12 @@ describe('event flow:', () => {
     });
 
     beforeEach(() => {
-        browser.click('button.clear');
+        browser.execute(function() {
+            document
+                .querySelector('integration-event-flow')
+                .shadowRoot.querySelector('button.clear')
+                .click();
+        });
         // Reset log cache
         LOGGED_GUIDS = null;
     });

packages/integration-tests/src/components/events/test-focusin-composed-true/focusin-composed-true.spec.js

@@ -13,16 +13,33 @@ describe('Composed focusin event', () => {
         browser.url(URL);
     });
 
-    it('should be composed', function() {
-        browser.click('input');
+    it('standard event should be composed', function() {
+        const input = browser.execute(function() {
+            return document
+                .querySelector('integration-focusin-composed-true')
+                .shadowRoot.querySelector('input');
+        });
+        input.click();
         browser.click('body');
-        browser.pause(50);
-        assert.deepEqual(browser.getText('.focus-in-composed'), 'Focus In Composed');
-
-        browser.click('button');
-        assert.deepEqual(
-            browser.getText('.custom-focus-in-not-composed'),
-            'Custom Focus In Not Composed'
-        );
+        const focusInComposed = browser.execute(function() {
+            return document
+                .querySelector('integration-focusin-composed-true')
+                .shadowRoot.querySelector('.focus-in-composed');
+        });
+        assert.deepEqual(focusInComposed.getText(), 'Focus In Composed');
+    });
+    it('custom event should not be composed', () => {
+        const button = browser.execute(function() {
+            return document
+                .querySelector('integration-focusin-composed-true')
+                .shadowRoot.querySelector('button');
+        });
+        button.click();
+        const customFocusInNotComposed = browser.execute(function() {
+            return document
+                .querySelector('integration-focusin-composed-true')
+                .shadowRoot.querySelector('.custom-focus-in-not-composed');
+        });
+        assert.deepEqual(customFocusInNotComposed.getText(), 'Custom Focus In Not Composed');
     });
 });

packages/integration-tests/src/components/events/test-focusout-composed-true/focusout-composed-true.spec.js

@@ -4,34 +4,42 @@
  * SPDX-License-Identifier: MIT
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
  */
+const assert = require('assert');
+
 describe('Composed focusout event', () => {
     const URL = 'http://localhost:4567/focusout-composed-true';
 
     before(() => {
         browser.url(URL);
     });
 
-    it('should be composed', function() {
-        browser.click('input');
+    it('standard event should be composed', function() {
+        const input = browser.execute(function() {
+            return document
+                .querySelector('integration-focusout-composed-true')
+                .shadowRoot.querySelector('input');
+        });
+        input.click();
         browser.click('body');
-        browser.waitUntil(
-            () => {
-                return browser.getText('.focus-out-composed') === 'Focus Out Composed';
-            },
-            500,
-            'Expect native focusout to be composed'
-        );
-
-        browser.click('button');
-        browser.waitUntil(
-            () => {
-                return (
-                    browser.getText('.custom-focus-out-not-composed') ===
-                    'Custom Focus Out Not Composed'
-                );
-            },
-            500,
-            'Expect focus out to be composed'
-        );
+        const focusInComposed = browser.execute(function() {
+            return document
+                .querySelector('integration-focusout-composed-true')
+                .shadowRoot.querySelector('.focus-out-composed');
+        });
+        assert.deepEqual(focusInComposed.getText(), 'Focus Out Composed');
+    });
+    it('custom event shoud not be composed', () => {
+        const button = browser.execute(function() {
+            return document
+                .querySelector('integration-focusout-composed-true')
+                .shadowRoot.querySelector('button');
+        });
+        button.click();
+        const customFocusInNotComposed = browser.execute(function() {
+            return document
+                .querySelector('integration-focusout-composed-true')
+                .shadowRoot.querySelector('.custom-focus-out-not-composed');
+        });
+        assert.deepEqual(customFocusInNotComposed.getText(), 'Custom Focus Out Not Composed');
     });
 });

packages/integration-tests/src/components/events/test-nested-template-event-target/nested-template-event-target.spec.js

@@ -4,7 +4,6 @@
  * SPDX-License-Identifier: MIT
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
  */
-const assert = require('assert');
 
 describe('Event target in slot elements', () => {
     const URL = 'http://localhost:4567/nested-template-event-target/';
@@ -15,12 +14,23 @@ describe('Event target in slot elements', () => {
 
     it('should receive event with correct target', function() {
         browser.execute(function() {
-            var child = document.querySelector('integration-child');
+            var child = document
+                .querySelector('integration-nested-template-event-target')
+                .shadowRoot.querySelector('integration-child');
             child.dispatchFoo();
         });
 
-        browser.waitForVisible('.evt-target-is-x-child');
-        const element = browser.element('.evt-target-is-x-child');
-        assert.strictEqual(element.getText(), 'Event Target Is x-child');
+        browser.waitUntil(
+            () => {
+                var child = browser.execute(function() {
+                    return document
+                        .querySelector('integration-nested-template-event-target')
+                        .shadowRoot.querySelector('.evt-target-is-x-child');
+                });
+                return child !== null && child.getText() === 'Event Target Is x-child';
+            },
+            500,
+            'Event never bubbled to parent'
+        );
     });
 });