From 3cd119162baef2a8ec751f987cc578e52a9b1a36 Mon Sep 17 00:00:00 2001 From: Ravi Jayaramappa Date: Fri, 19 Apr 2019 10:42:48 -0700 Subject: [PATCH] fix: fix event tests to be shadow aware (#1182) * fix: fix event tests to be shadow aware * test: more stuff * test: address pr comments --- .../Event.defaultPrevented.spec.js | 12 +++++ .../Event-properties/Event.target.spec.js | 20 ++++++++ .../defaultPreventedChild.html} | 1 - .../defaultPreventedChild.js | 18 +++++++ .../defaultPreventingParent.html | 3 ++ .../defaultPreventingParent.js | 9 ++++ .../documentEventListener.html | 3 ++ .../documentEventListener.js | 3 ++ .../change-event-composed.spec.js | 7 ++- .../default-prevented.spec.js | 23 --------- .../integration/child/child.js | 13 ----- .../default-prevented/default-prevented.html | 3 -- .../default-prevented/default-prevented.js | 7 --- .../document-event-listener.spec.js | 23 --------- .../document-event-listener.html | 4 -- .../document-event-listener.js | 13 ----- .../events/test-event-flow/event-flow.spec.js | 20 ++++++-- .../focusin-composed-true.spec.js | 37 ++++++++++---- .../focusout-composed-true.spec.js | 50 +++++++++++-------- .../nested-template-event-target.spec.js | 20 ++++++-- ...-composed-events-on-custom-element.spec.js | 28 +++++++++-- .../retarget-body-related-target.spec.js | 7 ++- .../retarget-null-related-target.spec.js | 8 ++- .../retarget-related-target.spec.js | 13 ++++- ...tted-custom-element-related-target.spec.js | 14 +++++- .../retarget-slotted-related-target.spec.js | 13 ++++- .../root-listener-event-target.spec.js | 16 ++++-- ...lotted-custom-element-event-target.spec.js | 22 ++++++-- .../slotted-event-target.spec.js | 12 ++++- ...lotted-native-element-event-target.spec.js | 23 +++++++-- .../window-event-listener.spec.js | 17 +++++-- .../test-locator-check/locator-check.spec.js | 29 ++++++++--- .../rendering/test-form-tag/form-tag.spec.js | 6 ++- 33 files changed, 331 insertions(+), 166 deletions(-) create mode 100644 packages/integration-karma/test/shadow-dom/Event-properties/Event.defaultPrevented.spec.js rename packages/{integration-tests/src/components/events/test-default-prevented/integration/child/child.html => integration-karma/test/shadow-dom/Event-properties/x/defaultPreventedChild/defaultPreventedChild.html} (72%) create mode 100644 packages/integration-karma/test/shadow-dom/Event-properties/x/defaultPreventedChild/defaultPreventedChild.js create mode 100644 packages/integration-karma/test/shadow-dom/Event-properties/x/defaultPreventingParent/defaultPreventingParent.html create mode 100644 packages/integration-karma/test/shadow-dom/Event-properties/x/defaultPreventingParent/defaultPreventingParent.js create mode 100644 packages/integration-karma/test/shadow-dom/Event-properties/x/documentEventListener/documentEventListener.html create mode 100644 packages/integration-karma/test/shadow-dom/Event-properties/x/documentEventListener/documentEventListener.js delete mode 100644 packages/integration-tests/src/components/events/test-default-prevented/default-prevented.spec.js delete mode 100644 packages/integration-tests/src/components/events/test-default-prevented/integration/child/child.js delete mode 100644 packages/integration-tests/src/components/events/test-default-prevented/integration/default-prevented/default-prevented.html delete mode 100644 packages/integration-tests/src/components/events/test-default-prevented/integration/default-prevented/default-prevented.js delete mode 100644 packages/integration-tests/src/components/events/test-document-event-listener/document-event-listener.spec.js delete mode 100644 packages/integration-tests/src/components/events/test-document-event-listener/integration/document-event-listener/document-event-listener.html delete mode 100644 packages/integration-tests/src/components/events/test-document-event-listener/integration/document-event-listener/document-event-listener.js diff --git a/packages/integration-karma/test/shadow-dom/Event-properties/Event.defaultPrevented.spec.js b/packages/integration-karma/test/shadow-dom/Event-properties/Event.defaultPrevented.spec.js new file mode 100644 index 0000000000..69301f1aae --- /dev/null +++ b/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); +}); diff --git a/packages/integration-karma/test/shadow-dom/Event-properties/Event.target.spec.js b/packages/integration-karma/test/shadow-dom/Event-properties/Event.target.spec.js index cc95df96f9..69aed9f7e3 100644 --- a/packages/integration-karma/test/shadow-dom/Event-properties/Event.target.spec.js +++ b/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'); + }); +}); diff --git a/packages/integration-tests/src/components/events/test-default-prevented/integration/child/child.html b/packages/integration-karma/test/shadow-dom/Event-properties/x/defaultPreventedChild/defaultPreventedChild.html similarity index 72% rename from packages/integration-tests/src/components/events/test-default-prevented/integration/child/child.html rename to packages/integration-karma/test/shadow-dom/Event-properties/x/defaultPreventedChild/defaultPreventedChild.html index 690e432eb6..1667fe23fc 100644 --- a/packages/integration-tests/src/components/events/test-default-prevented/integration/child/child.html +++ b/packages/integration-karma/test/shadow-dom/Event-properties/x/defaultPreventedChild/defaultPreventedChild.html @@ -1,4 +1,3 @@ diff --git a/packages/integration-karma/test/shadow-dom/Event-properties/x/defaultPreventedChild/defaultPreventedChild.js b/packages/integration-karma/test/shadow-dom/Event-properties/x/defaultPreventedChild/defaultPreventedChild.js new file mode 100644 index 0000000000..4f0ba88035 --- /dev/null +++ b/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; + } +} diff --git a/packages/integration-karma/test/shadow-dom/Event-properties/x/defaultPreventingParent/defaultPreventingParent.html b/packages/integration-karma/test/shadow-dom/Event-properties/x/defaultPreventingParent/defaultPreventingParent.html new file mode 100644 index 0000000000..4363eaf3bd --- /dev/null +++ b/packages/integration-karma/test/shadow-dom/Event-properties/x/defaultPreventingParent/defaultPreventingParent.html @@ -0,0 +1,3 @@ + diff --git a/packages/integration-karma/test/shadow-dom/Event-properties/x/defaultPreventingParent/defaultPreventingParent.js b/packages/integration-karma/test/shadow-dom/Event-properties/x/defaultPreventingParent/defaultPreventingParent.js new file mode 100644 index 0000000000..84c714f213 --- /dev/null +++ b/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; + } +} diff --git a/packages/integration-karma/test/shadow-dom/Event-properties/x/documentEventListener/documentEventListener.html b/packages/integration-karma/test/shadow-dom/Event-properties/x/documentEventListener/documentEventListener.html new file mode 100644 index 0000000000..929693f7c2 --- /dev/null +++ b/packages/integration-karma/test/shadow-dom/Event-properties/x/documentEventListener/documentEventListener.html @@ -0,0 +1,3 @@ + diff --git a/packages/integration-karma/test/shadow-dom/Event-properties/x/documentEventListener/documentEventListener.js b/packages/integration-karma/test/shadow-dom/Event-properties/x/documentEventListener/documentEventListener.js new file mode 100644 index 0000000000..2444973b2e --- /dev/null +++ b/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 {} diff --git a/packages/integration-tests/src/components/events/test-change-event-composed/change-event-composed.spec.js b/packages/integration-tests/src/components/events/test-change-event-composed/change-event-composed.spec.js index c8c744585e..8b557c1ddd 100644 --- a/packages/integration-tests/src/components/events/test-change-event-composed/change-event-composed.spec.js +++ b/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'); }); }); diff --git a/packages/integration-tests/src/components/events/test-default-prevented/default-prevented.spec.js b/packages/integration-tests/src/components/events/test-default-prevented/default-prevented.spec.js deleted file mode 100644 index 80110f3180..0000000000 --- a/packages/integration-tests/src/components/events/test-default-prevented/default-prevented.spec.js +++ /dev/null @@ -1,23 +0,0 @@ -/* - * Copyright (c) 2018, salesforce.com, inc. - * All rights reserved. - * 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'); - -// This test is now disable waiting for a proper fix to event.preventDefault() -describe.skip('Composed events', () => { - const URL = 'http://localhost:4567/default-prevented'; - - before(() => { - browser.url(URL); - }); - - it('should have the right value', function() { - const element = browser.element('integration-child'); - element.click(); - const defaultPreventedIndicator = browser.element('.default-prevented-indicator'); - assert.deepEqual(defaultPreventedIndicator.getText(), 'Default Prevented'); - }); -}); diff --git a/packages/integration-tests/src/components/events/test-default-prevented/integration/child/child.js b/packages/integration-tests/src/components/events/test-default-prevented/integration/child/child.js deleted file mode 100644 index 5e174427ec..0000000000 --- a/packages/integration-tests/src/components/events/test-default-prevented/integration/child/child.js +++ /dev/null @@ -1,13 +0,0 @@ -import { LightningElement, track } from 'lwc'; - -export default class Child extends LightningElement { - @track defaultPrevented = false; - - handleClick() { - const event = new CustomEvent('foo', { - cancelable: true, - }); - this.dispatchEvent(event); - this.defaultPrevented = event.defaultPrevented; - } -} diff --git a/packages/integration-tests/src/components/events/test-default-prevented/integration/default-prevented/default-prevented.html b/packages/integration-tests/src/components/events/test-default-prevented/integration/default-prevented/default-prevented.html deleted file mode 100644 index af31edef68..0000000000 --- a/packages/integration-tests/src/components/events/test-default-prevented/integration/default-prevented/default-prevented.html +++ /dev/null @@ -1,3 +0,0 @@ - diff --git a/packages/integration-tests/src/components/events/test-default-prevented/integration/default-prevented/default-prevented.js b/packages/integration-tests/src/components/events/test-default-prevented/integration/default-prevented/default-prevented.js deleted file mode 100644 index 85fb5443a0..0000000000 --- a/packages/integration-tests/src/components/events/test-default-prevented/integration/default-prevented/default-prevented.js +++ /dev/null @@ -1,7 +0,0 @@ -import { LightningElement } from 'lwc'; - -export default class DefaultPrevented extends LightningElement { - handleFoo(evt) { - evt.preventDefault(); - } -} diff --git a/packages/integration-tests/src/components/events/test-document-event-listener/document-event-listener.spec.js b/packages/integration-tests/src/components/events/test-document-event-listener/document-event-listener.spec.js deleted file mode 100644 index 554c6ea013..0000000000 --- a/packages/integration-tests/src/components/events/test-document-event-listener/document-event-listener.spec.js +++ /dev/null @@ -1,23 +0,0 @@ -/* - * Copyright (c) 2018, salesforce.com, inc. - * All rights reserved. - * 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 on window event listener', () => { - const URL = 'http://localhost:4567/document-event-listener/'; - - before(() => { - browser.url(URL); - }); - - it('should return correct target', function() { - browser.click('button'); - assert.deepEqual( - browser.getText('.document-event-target-tagname'), - 'integration-document-event-listener' - ); - }); -}); diff --git a/packages/integration-tests/src/components/events/test-document-event-listener/integration/document-event-listener/document-event-listener.html b/packages/integration-tests/src/components/events/test-document-event-listener/integration/document-event-listener/document-event-listener.html deleted file mode 100644 index 2d7094a48a..0000000000 --- a/packages/integration-tests/src/components/events/test-document-event-listener/integration/document-event-listener/document-event-listener.html +++ /dev/null @@ -1,4 +0,0 @@ - diff --git a/packages/integration-tests/src/components/events/test-document-event-listener/integration/document-event-listener/document-event-listener.js b/packages/integration-tests/src/components/events/test-document-event-listener/integration/document-event-listener/document-event-listener.js deleted file mode 100644 index 95994fda58..0000000000 --- a/packages/integration-tests/src/components/events/test-document-event-listener/integration/document-event-listener/document-event-listener.js +++ /dev/null @@ -1,13 +0,0 @@ -import { LightningElement, track } from 'lwc'; - -export default class WindowEventListener extends LightningElement { - @track documentEventTargetTagName = ''; - connectedCallback() { - document.addEventListener('click', evt => { - this.documentEventTargetTagName = evt.target.tagName.toLowerCase(); - }); - } - handleClick() { - // empty handler - } -} diff --git a/packages/integration-tests/src/components/events/test-event-flow/event-flow.spec.js b/packages/integration-tests/src/components/events/test-event-flow/event-flow.spec.js index 04f7e38b23..a7c930825b 100644 --- a/packages/integration-tests/src/components/events/test-event-flow/event-flow.spec.js +++ b/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; }); diff --git a/packages/integration-tests/src/components/events/test-focusin-composed-true/focusin-composed-true.spec.js b/packages/integration-tests/src/components/events/test-focusin-composed-true/focusin-composed-true.spec.js index 95861bba13..7ee30b2dc5 100644 --- a/packages/integration-tests/src/components/events/test-focusin-composed-true/focusin-composed-true.spec.js +++ b/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'); }); }); diff --git a/packages/integration-tests/src/components/events/test-focusout-composed-true/focusout-composed-true.spec.js b/packages/integration-tests/src/components/events/test-focusout-composed-true/focusout-composed-true.spec.js index 67c2ff1624..8537e52f6c 100644 --- a/packages/integration-tests/src/components/events/test-focusout-composed-true/focusout-composed-true.spec.js +++ b/packages/integration-tests/src/components/events/test-focusout-composed-true/focusout-composed-true.spec.js @@ -4,6 +4,8 @@ * 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'; @@ -11,27 +13,33 @@ describe('Composed focusout 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-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'); }); }); diff --git a/packages/integration-tests/src/components/events/test-nested-template-event-target/nested-template-event-target.spec.js b/packages/integration-tests/src/components/events/test-nested-template-event-target/nested-template-event-target.spec.js index ea770ab42d..ef1558e0a4 100644 --- a/packages/integration-tests/src/components/events/test-nested-template-event-target/nested-template-event-target.spec.js +++ b/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' + ); }); }); diff --git a/packages/integration-tests/src/components/events/test-non-composed-events-on-custom-element/non-composed-events-on-custom-element.spec.js b/packages/integration-tests/src/components/events/test-non-composed-events-on-custom-element/non-composed-events-on-custom-element.spec.js index 8c58959029..95f10670f3 100644 --- a/packages/integration-tests/src/components/events/test-non-composed-events-on-custom-element/non-composed-events-on-custom-element.spec.js +++ b/packages/integration-tests/src/components/events/test-non-composed-events-on-custom-element/non-composed-events-on-custom-element.spec.js @@ -14,12 +14,32 @@ describe('Non-composed events', () => { }); it('should dispatch Event on the custom element', function() { - browser.element('integration-child').click(); - assert.ok(browser.element('.event-received-indicator')); + browser.execute(function() { + document + .querySelector('integration-non-composed-events-on-custom-element') + .shadowRoot.querySelector('integration-child') + .click(); + }); + const indicator = browser.execute(function() { + return document + .querySelector('integration-non-composed-events-on-custom-element') + .shadowRoot.querySelector('.event-received-indicator'); + }); + assert.ok(indicator); }); it('should dispatch CustomEvent on the custom element', function() { - browser.element('integration-child').click(); - assert.ok(browser.element('.custom-event-received-indicator')); + browser.execute(function() { + document + .querySelector('integration-non-composed-events-on-custom-element') + .shadowRoot.querySelector('integration-child') + .click(); + }); + const indicator = browser.execute(function() { + return document + .querySelector('integration-non-composed-events-on-custom-element') + .shadowRoot.querySelector('.custom-event-received-indicator'); + }); + assert.ok(indicator); }); }); diff --git a/packages/integration-tests/src/components/events/test-retarget-body-related-target/retarget-body-related-target.spec.js b/packages/integration-tests/src/components/events/test-retarget-body-related-target/retarget-body-related-target.spec.js index 8c81049412..538e453b83 100644 --- a/packages/integration-tests/src/components/events/test-retarget-body-related-target/retarget-body-related-target.spec.js +++ b/packages/integration-tests/src/components/events/test-retarget-body-related-target/retarget-body-related-target.spec.js @@ -20,6 +20,11 @@ describe('Retarget relatedTarget', () => { browser.keys(['Tab']); browser.keys(['Tab']); browser.keys(['Tab']); - assert.equal(browser.getText('.related-target-tagname'), 'body'); + const indicator = browser.execute(function() { + return document + .querySelector('integration-retarget-body-related-target') + .shadowRoot.querySelector('.related-target-tagname'); + }); + assert.equal(indicator.getText(), 'body'); }); }); diff --git a/packages/integration-tests/src/components/events/test-retarget-null-related-target/retarget-null-related-target.spec.js b/packages/integration-tests/src/components/events/test-retarget-null-related-target/retarget-null-related-target.spec.js index f0bef900ef..3b047f4ce2 100644 --- a/packages/integration-tests/src/components/events/test-retarget-null-related-target/retarget-null-related-target.spec.js +++ b/packages/integration-tests/src/components/events/test-retarget-null-related-target/retarget-null-related-target.spec.js @@ -8,7 +8,7 @@ const assert = require('assert'); // Really hard to get the focus handler to execute, need to figure out a // reliable way to do it. -describe.skip('Retarget relatedTarget', () => { +describe('Retarget relatedTarget', () => { const URL = 'http://localhost:4567/retarget-null-related-target'; before(() => { @@ -23,7 +23,11 @@ describe.skip('Retarget relatedTarget', () => { .shadowRoot.querySelector('.focus-input') .focus(); }); - const elm = browser.element('.related-target-tabname'); + const elm = browser.execute(function() { + return document + .querySelector('integration-retarget-null-related-target') + .shadowRoot.querySelector('.related-target-tabname'); + }); elm.waitForExist(); assert.strictEqual(elm.getText(), 'Related target is null'); }); diff --git a/packages/integration-tests/src/components/events/test-retarget-related-target/retarget-related-target.spec.js b/packages/integration-tests/src/components/events/test-retarget-related-target/retarget-related-target.spec.js index e882fdaba0..2a321a3fe5 100644 --- a/packages/integration-tests/src/components/events/test-retarget-related-target/retarget-related-target.spec.js +++ b/packages/integration-tests/src/components/events/test-retarget-related-target/retarget-related-target.spec.js @@ -15,9 +15,18 @@ describe('Retarget relatedTarget', () => { it('should retarget relatedTarget from a foreign shadow', () => { browser.execute(function() { - document.querySelector('integration-child input').focus(); + document + .querySelector('integration-retarget-related-target') + .shadowRoot.querySelector('integration-child') + .shadowRoot.querySelector('input') + .focus(); }); browser.keys(['Shift', 'Tab', 'Shift']); - assert.equal(browser.getText('.related-target-tabname'), 'integration-child'); + const indicator = browser.execute(function() { + return document + .querySelector('integration-retarget-related-target') + .shadowRoot.querySelector('.related-target-tabname'); + }); + assert.equal(indicator.getText(), 'integration-child'); }); }); diff --git a/packages/integration-tests/src/components/events/test-retarget-slotted-custom-element-related-target/retarget-slotted-custom-element-related-target.spec.js b/packages/integration-tests/src/components/events/test-retarget-slotted-custom-element-related-target/retarget-slotted-custom-element-related-target.spec.js index 159c420a90..de0c44f275 100644 --- a/packages/integration-tests/src/components/events/test-retarget-slotted-custom-element-related-target/retarget-slotted-custom-element-related-target.spec.js +++ b/packages/integration-tests/src/components/events/test-retarget-slotted-custom-element-related-target/retarget-slotted-custom-element-related-target.spec.js @@ -15,9 +15,19 @@ describe('Retarget relatedTarget', () => { it('should retarget relatedTarget from slotted custom element', () => { browser.execute(function() { - document.querySelector('.child-input').focus(); + document + .querySelector('integration-retarget-slotted-custom-element-related-target') + .shadowRoot.querySelector('integration-child') + .shadowRoot.querySelector('.child-input') + .focus(); }); browser.keys(['Shift', 'Tab', 'Shift']); - assert.equal(browser.getText('.related-target-tagname'), 'integration-child'); + const indicator = browser.execute(function() { + return document + .querySelector('integration-retarget-slotted-custom-element-related-target') + .shadowRoot.querySelector('integration-parent') + .shadowRoot.querySelector('.related-target-tagname'); + }); + assert.equal(indicator.getText(), 'integration-child'); }); }); diff --git a/packages/integration-tests/src/components/events/test-retarget-slotted-input-related-target/retarget-slotted-related-target.spec.js b/packages/integration-tests/src/components/events/test-retarget-slotted-input-related-target/retarget-slotted-related-target.spec.js index 938c855025..c4619cef8d 100644 --- a/packages/integration-tests/src/components/events/test-retarget-slotted-input-related-target/retarget-slotted-related-target.spec.js +++ b/packages/integration-tests/src/components/events/test-retarget-slotted-input-related-target/retarget-slotted-related-target.spec.js @@ -15,9 +15,18 @@ describe('Retarget relatedTarget', () => { it('should have correct relatedTarget from slotted input', () => { browser.execute(function() { - document.querySelector('.slotted-input').focus(); + document + .querySelector('integration-retarget-slotted-input-related-target') + .shadowRoot.querySelector('.slotted-input') + .focus(); }); browser.keys(['Shift', 'Tab', 'Shift']); - assert.equal(browser.getText('.related-target-tagname'), 'input'); + const indicator = browser.execute(function() { + return document + .querySelector('integration-retarget-slotted-input-related-target') + .shadowRoot.querySelector('integration-parent') + .shadowRoot.querySelector('.related-target-tagname'); + }); + assert.equal(indicator.getText(), 'input'); }); }); diff --git a/packages/integration-tests/src/components/events/test-root-listener-event-target/root-listener-event-target.spec.js b/packages/integration-tests/src/components/events/test-root-listener-event-target/root-listener-event-target.spec.js index dae7a8f774..01a9715a2c 100644 --- a/packages/integration-tests/src/components/events/test-root-listener-event-target/root-listener-event-target.spec.js +++ b/packages/integration-tests/src/components/events/test-root-listener-event-target/root-listener-event-target.spec.js @@ -14,10 +14,20 @@ describe('Event target in slot elements', () => { }); it('should receive event with correct target', function() { - const element = browser.element('integration-grand-child'); - element.click(); + browser.execute(function() { + document + .querySelector('integration-root-listener-event-target') + .shadowRoot.querySelector('integration-child') + .shadowRoot.querySelector('integration-grand-child') + .click(); + }); - const verifyElement = browser.element('.event-target-correct'); + const verifyElement = browser.execute(function() { + return document + .querySelector('integration-root-listener-event-target') + .shadowRoot.querySelector('integration-child') + .shadowRoot.querySelector('.event-target-correct'); + }); assert.strictEqual(verifyElement.getText(), 'Event Target is correct element'); }); }); diff --git a/packages/integration-tests/src/components/events/test-slotted-custom-element-event-target/slotted-custom-element-event-target.spec.js b/packages/integration-tests/src/components/events/test-slotted-custom-element-event-target/slotted-custom-element-event-target.spec.js index fe061aaa92..339774fd72 100644 --- a/packages/integration-tests/src/components/events/test-slotted-custom-element-event-target/slotted-custom-element-event-target.spec.js +++ b/packages/integration-tests/src/components/events/test-slotted-custom-element-event-target/slotted-custom-element-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/slotted-custom-element-event-target/'; @@ -15,10 +14,23 @@ describe('Event target in slot elements', () => { it('should receive event with correct target', function() { browser.execute(function() { - document.querySelector('integration-child').click(); + document + .querySelector('integration-slotted-custom-element-event-target') + .shadowRoot.querySelector('integration-child') + .click(); }); - const elm = browser.element('.correct-event-target'); - elm.waitForExist(); - assert.strictEqual(elm.getText(), 'Event target is correct'); + browser.waitUntil( + () => { + var child = browser.execute(function() { + return document + .querySelector('integration-slotted-custom-element-event-target') + .shadowRoot.querySelector('integration-parent') + .shadowRoot.querySelector('.correct-event-target'); + }); + return child !== null && child.getText() === 'Event target is correct'; + }, + 500, + 'did not receive expected event target in parent' + ); }); }); diff --git a/packages/integration-tests/src/components/events/test-slotted-event-target/slotted-event-target.spec.js b/packages/integration-tests/src/components/events/test-slotted-event-target/slotted-event-target.spec.js index 94d008a6ca..c02965be48 100644 --- a/packages/integration-tests/src/components/events/test-slotted-event-target/slotted-event-target.spec.js +++ b/packages/integration-tests/src/components/events/test-slotted-event-target/slotted-event-target.spec.js @@ -14,10 +14,18 @@ describe('Event target in slot elements', () => { }); it('should receive event with correct target', function() { - const select = browser.element('select'); + const select = browser.execute(function() { + return document + .querySelector('integration-slotted-event-target') + .shadowRoot.querySelector('select'); + }); select.selectByVisibleText('Second'); - const element = browser.element('.target-is-select'); + const element = browser.execute(function() { + return document + .querySelector('integration-slotted-event-target') + .shadowRoot.querySelector('.target-is-select'); + }); assert.strictEqual(element.getText(), 'Event Target is select element'); }); }); diff --git a/packages/integration-tests/src/components/events/test-slotted-native-element-event-target/slotted-native-element-event-target.spec.js b/packages/integration-tests/src/components/events/test-slotted-native-element-event-target/slotted-native-element-event-target.spec.js index c346d568e9..77a2e70aa4 100644 --- a/packages/integration-tests/src/components/events/test-slotted-native-element-event-target/slotted-native-element-event-target.spec.js +++ b/packages/integration-tests/src/components/events/test-slotted-native-element-event-target/slotted-native-element-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/slotted-native-element-event-target/'; @@ -14,8 +13,24 @@ describe('Event target in slot elements', () => { }); it('should receive event with correct target', function() { - browser.click('p'); - browser.waitForVisible('.correct-event-target'); - assert.strictEqual(browser.getText('.correct-event-target'), 'Event target is correct'); + browser.execute(function() { + document + .querySelector('integration-slotted-native-element-event-target') + .shadowRoot.querySelector('p') + .click(); + }); + browser.waitUntil( + () => { + var child = browser.execute(function() { + return document + .querySelector('integration-slotted-native-element-event-target') + .shadowRoot.querySelector('integration-child') + .shadowRoot.querySelector('.correct-event-target'); + }); + return child !== null && child.getText() === 'Event target is correct'; + }, + 500, + "did not receive expected event target in slot element's parent handler" + ); }); }); diff --git a/packages/integration-tests/src/components/events/test-window-event-listener/window-event-listener.spec.js b/packages/integration-tests/src/components/events/test-window-event-listener/window-event-listener.spec.js index e2d33020c5..18446aae80 100644 --- a/packages/integration-tests/src/components/events/test-window-event-listener/window-event-listener.spec.js +++ b/packages/integration-tests/src/components/events/test-window-event-listener/window-event-listener.spec.js @@ -14,10 +14,17 @@ describe('Event Target on window event listener', () => { }); it('should return correct target', function() { - browser.click('button'); - assert.deepEqual( - browser.getText('.window-event-target-tagname'), - 'integration-window-event-listener' - ); + browser.execute(function() { + document + .querySelector('integration-window-event-listener') + .shadowRoot.querySelector('button') + .click(); + }); + const indicator = browser.execute(function() { + return document + .querySelector('integration-window-event-listener') + .shadowRoot.querySelector('.window-event-target-tagname'); + }); + assert.deepEqual(indicator.getText(), 'integration-window-event-listener'); }); }); diff --git a/packages/integration-tests/src/components/locators/test-locator-check/locator-check.spec.js b/packages/integration-tests/src/components/locators/test-locator-check/locator-check.spec.js index 70a14955a2..d6bd5f772c 100644 --- a/packages/integration-tests/src/components/locators/test-locator-check/locator-check.spec.js +++ b/packages/integration-tests/src/components/locators/test-locator-check/locator-check.spec.js @@ -21,8 +21,14 @@ describe('Locator Check', () => { }); it('locator logged on simple button click', () => { - const button = browser.element('.simple-locator'); - button.click(); + browser.execute(function() { + document + .querySelector('integration-locator-check') + .shadowRoot.querySelector('integration-container') + .shadowRoot.querySelector('integration-root') + .shadowRoot.querySelector('.simple-locator') + .click(); + }); const clicked = browser.execute(function() { return window.clicked; }).value; @@ -43,8 +49,13 @@ describe('Locator Check', () => { }); it('locator logged on button click inside slot', () => { - const button = browser.element('.button-in-slot'); - button.click(); + browser.execute(function() { + document + .querySelector('integration-locator-check') + .shadowRoot.querySelector('integration-container') + .shadowRoot.querySelector('.button-in-slot') + .click(); + }); const clicked = browser.execute(function() { return window.clicked; }).value; @@ -64,8 +75,14 @@ describe('Locator Check', () => { }); it('locator logged clicking on iteration item', () => { - const button = browser.element('.todo-item'); - button.click(); + browser.execute(function() { + document + .querySelector('integration-locator-check') + .shadowRoot.querySelector('integration-container') + .shadowRoot.querySelector('integration-root') + .shadowRoot.querySelector('.todo-item') + .click(); + }); const clicked = browser.execute(function() { return window.clicked; }).value; diff --git a/packages/integration-tests/src/components/rendering/test-form-tag/form-tag.spec.js b/packages/integration-tests/src/components/rendering/test-form-tag/form-tag.spec.js index 993d2b668a..15ebda6773 100644 --- a/packages/integration-tests/src/components/rendering/test-form-tag/form-tag.spec.js +++ b/packages/integration-tests/src/components/rendering/test-form-tag/form-tag.spec.js @@ -14,7 +14,11 @@ describe('Object keys', () => { }); it('should have the right value', function() { - const element = browser.element('.form-text'); + const element = browser.execute(function() { + return document + .querySelector('integration-form-tag') + .shadowRoot.querySelector('.form-text'); + }); assert.ok(element); assert.deepEqual(element.getText(), 'Form did render'); });