test(integration-karma): migrate misc tests from integration-test

packages/integration-karma/test/events/non-composed-events-on-custom-element/index.spec.js

@@ -0,0 +1,34 @@
+import { createElement } from 'test-utils';
+import Container from 'x/container';
+
+describe('Non-composed events', () => {
+    it('should dispatch Event on the custom element', function() {
+        const elm = createElement('x-container', { is: Container });
+        document.body.appendChild(elm);
+
+        const child = elm.shadowRoot.querySelector('x-child');
+        child.shadowRoot.querySelector('div').click();
+
+        return Promise.resolve().then(() => {
+            const elementWithResult = elm.shadowRoot.querySelector('.event-received-indicator');
+
+            expect(elementWithResult).not.toBeNull();
+        });
+    });
+
+    it('should dispatch CustomEvent on the custom element', function() {
+        const elm = createElement('x-container', { is: Container });
+        document.body.appendChild(elm);
+
+        const child = elm.shadowRoot.querySelector('x-child');
+        child.shadowRoot.querySelector('div').click();
+
+        return Promise.resolve().then(() => {
+            const elementWithResult = elm.shadowRoot.querySelector(
+                '.custom-event-received-indicator'
+            );
+
+            expect(elementWithResult).not.toBeNull();
+        });
+    });
+});

packages/integration-tests/src/components/events/test-non-composed-events-on-custom-element/integration/non-composed-events-on-custom-element/non-composed-events-on-custom-element.html → packages/integration-karma/test/events/non-composed-events-on-custom-element/x/container/container.html

@@ -1,8 +1,8 @@
 <template>
-    <integration-child
+    <x-child
         onevent={handleEvent}
         oncustomevent={handleCustomEvent}
-    ></integration-child>
+    ></x-child>
     <div if:true={eventReceived} class="event-received-indicator">Event received</div>
     <div if:true={customEventReceived} class="custom-event-received-indicator">CustomEvent received</div>
 </template>

packages/integration-tests/src/components/events/test-non-composed-events-on-custom-element/integration/non-composed-events-on-custom-element/non-composed-events-on-custom-element.js → packages/integration-karma/test/events/non-composed-events-on-custom-element/x/container/container.js

@@ -1,6 +1,6 @@
 import { LightningElement, track } from 'lwc';
 
-export default class ComposedEvents extends LightningElement {
+export default class Container extends LightningElement {
     @track eventReceived = false;
     @track customEventReceived = false;
 

packages/integration-karma/test/events/slotted-custom-element-event-target/index.spec.js → packages/integration-karma/test/events/slotted-event-target/index.spec.js

@@ -18,4 +18,22 @@ describe('Event target in slot elements', () => {
             expect(elementWithResult.innerText).toBe('Event target is correct');
         });
     });
+
+    it('should receive event with correct target for slotted native element', function() {
+        const elm = createElement('x-container', { is: Container });
+        elm.isNativeElement = true;
+        document.body.appendChild(elm);
+
+        const trigger = elm.shadowRoot.querySelector('p');
+        trigger.click();
+
+        return Promise.resolve().then(() => {
+            const elementWithResult = elm.shadowRoot
+                .querySelector('x-slotted-native-element')
+                .shadowRoot.querySelector('.correct-event-target');
+
+            expect(elementWithResult).not.toBeNull();
+            expect(elementWithResult.innerText).toBe('Event target is correct');
+        });
+    });
 });

packages/integration-karma/test/events/slotted-event-target/x/container/container.html

@@ -0,0 +1,12 @@
+<template>
+    <template if:false={isNativeElement}>
+        <x-parent>
+            <x-child></x-child>
+        </x-parent>
+    </template>
+    <template if:true={isNativeElement}>
+        <x-slotted-native-element>
+            <p>Click Me</p>
+        </x-slotted-native-element>
+    </template>
+</template>

packages/integration-karma/test/events/slotted-event-target/x/container/container.js

@@ -0,0 +1,5 @@
+import { LightningElement, api } from 'lwc';
+
+export default class Container extends LightningElement {
+    @api isNativeElement = false;
+}

packages/integration-tests/src/components/events/test-slotted-native-element-event-target/integration/child/child.js → packages/integration-karma/test/events/slotted-event-target/x/slottedNativeElement/slottedNativeElement.js

@@ -1,6 +1,6 @@
 import { LightningElement, track } from 'lwc';
 
-export default class Child extends LightningElement {
+export default class SlottedNativeElement extends LightningElement {
     @track eventTargetIsPTag = false;
     handleClick(evt) {
         this.eventTargetIsPTag = evt.target.tagName === 'P';

packages/integration-karma/test/events/window-event-listener/index.spec.js

@@ -0,0 +1,24 @@
+import { createElement } from 'test-utils';
+import Container from 'x/container';
+
+describe('Event Target on window event listener', () => {
+    // The composed-event-click-polyfill doesn't work when native Shadow DOM is enabled on Safari 12.0.0 (it has been fixed
+    // with Safari 12.0.1). The polyfill only patches the event javascript wrapper and doesn't have any effect on how Webkit
+    // make the event bubbles.
+    // TODO: Enable this test again once Sauce Labs supports Safari version >= 12.0.1
+    // TODO: Also delete the corresponding integration-test
+    xit('should return correct target', function() {
+        const elm = createElement('x-container', { is: Container });
+        document.body.appendChild(elm);
+
+        const trigger = elm.shadowRoot.querySelector('button');
+        trigger.click();
+
+        return Promise.resolve().then(() => {
+            const elementWithResult = elm.shadowRoot.querySelector('.window-event-target-tagname');
+
+            expect(elementWithResult).not.toBeNull();
+            expect(elementWithResult.innerText).toBe('x-container');
+        });
+    });
+});

packages/integration-karma/test/events/window-event-listener/x/container/container.html

@@ -0,0 +1,4 @@
+<template>
+    <button onclick={handleClick}>Click Me</button>
+    <div class="window-event-target-tagname">{windowEventTargetTagName}</div>
+</template>

packages/integration-karma/test/events/window-event-listener/x/container/container.js

@@ -0,0 +1,13 @@
+import { LightningElement, track } from 'lwc';
+
+export default class Container extends LightningElement {
+    @track windowEventTargetTagName = '';
+    connectedCallback() {
+        window.addEventListener('click', evt => {
+            this.windowEventTargetTagName = evt.target.tagName.toLowerCase();
+        });
+    }
+    handleClick() {
+        // empty handler
+    }
+}

packages/integration-karma/test/rendering/duplicate-text-rendering/index.spec.js

@@ -0,0 +1,22 @@
+import { createElement } from 'test-utils';
+import Container from 'x/container';
+
+describe('Dynamic text nodes rendering duplicate text', () => {
+    it('should not render duplicate text', function() {
+        const elm = createElement('x-container', { is: Container });
+        document.body.appendChild(elm);
+
+        elm.click();
+
+        return Promise.resolve().then(() => {
+            const textInFirstCheck = elm.shadowRoot.textContent;
+            // This first check is to verify that there is no extra text an any moment.
+            expect(textInFirstCheck).not.toBe('ab');
+
+            return Promise.resolve().then(() => {
+                const textInFirstCheck = elm.shadowRoot.textContent;
+                expect(textInFirstCheck).toBe('b');
+            });
+        });
+    });
+});

packages/integration-tests/src/components/rendering/test-duplicate-text-rendering/integration/duplicate-text-rendering/duplicate-text-rendering.js → packages/integration-karma/test/rendering/duplicate-text-rendering/x/container/container.js

@@ -1,6 +1,6 @@
 import { LightningElement, track } from 'lwc';
 
-export default class App extends LightningElement {
+export default class Container extends LightningElement {
     @track text = [
         {
             text: 'a',

packages/integration-karma/test/rendering/form-tag/index.spec.js

@@ -0,0 +1,16 @@
+import { createElement } from 'test-utils';
+import Container from 'x/container';
+
+describe('Form tag rendering', () => {
+    it('should have the right value', function() {
+        const elm = createElement('x-container', { is: Container });
+        document.body.appendChild(elm);
+
+        return Promise.resolve().then(() => {
+            const nodeWithTextInsideForm = elm.shadowRoot.querySelector('.form-text');
+
+            expect(nodeWithTextInsideForm).not.toBeNull();
+            expect(nodeWithTextInsideForm.textContent).toBe('Form did render');
+        });
+    });
+});

packages/integration-karma/test/rendering/nested-state/index.spec.js

@@ -0,0 +1,16 @@
+import { createElement } from 'test-utils';
+import Container from 'x/container';
+
+describe('Nested state', () => {
+    it('Object keys should have the right value', function() {
+        const elm = createElement('x-container', { is: Container });
+        document.body.appendChild(elm);
+
+        return Promise.resolve().then(() => {
+            const nodeWithRenderedNestedState = elm.shadowRoot.querySelector('.key');
+
+            expect(nodeWithRenderedNestedState).not.toBeNull();
+            expect(nodeWithRenderedNestedState.textContent).toBe('yes');
+        });
+    });
+});

packages/integration-tests/src/components/rendering/test-nested-state/integration/nested-state/nested-state.js → packages/integration-karma/test/rendering/nested-state/x/container/container.js

@@ -12,7 +12,7 @@ function getType(recordId, recordUi) {
     return masterRecordTypeId;
 }
 
-export default class ObjectKeys extends LightningElement {
+export default class Container extends LightningElement {
     state = {
         test: 1,
         type: 'default',

packages/integration-karma/test/rendering/null-logging/index.spec.js

@@ -0,0 +1,20 @@
+import { createElement } from 'test-utils';
+import Container from 'x/container';
+
+/**
+ * https://github.com/salesforce/lwc/issues/720
+ */
+describe('Issue 720: Wrap all string literal variables with toString method', () => {
+    it('should not have have an error accessing state.foo', function() {
+        const elm = createElement('x-container', { is: Container });
+        document.body.appendChild(elm);
+
+        return Promise.resolve().then(() => {
+            const hasError = elm.shadowRoot.querySelector('.has-error');
+            const noError = elm.shadowRoot.querySelector('.no-error');
+
+            expect(hasError).toBeNull();
+            expect(noError).not.toBeNull();
+        });
+    });
+});

packages/integration-karma/test/rendering/null-logging/x/container/container.html

@@ -0,0 +1,4 @@
+<template>
+    <div class="has-error" if:true={errorMessage}>There was an error</div>
+    <div class="no-error" if:false={errorMessage}>There was no error</div>
+</template>

packages/integration-tests/src/components/rendering/test-null-logging/integration/null-logging/null-logging.js → packages/integration-karma/test/rendering/null-logging/x/container/container.js

@@ -1,6 +1,6 @@
 import { LightningElement, track } from 'lwc';
 
-export default class ReactiveObjectLog extends LightningElement {
+export default class Container extends LightningElement {
     @track foo = null;
     @track errorMessage;
     connectedCallback() {

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

@@ -13,6 +13,11 @@ describe('Event Target on window event listener', () => {
         browser.url(URL);
     });
 
+    // The composed-event-click-polyfill doesn't work when native Shadow DOM is enabled on Safari 12.0.0 (it has been fixed
+    // with Safari 12.0.1). The polyfill only patches the event javascript wrapper and doesn't have any effect on how Webkit
+    // make the event bubbles.
+    // TODO: Remove this test once Sauce Labs supports Safari version >= 12.0.1
+    // TODO: Enable the corresponding integration-karma test
     it('should return correct target', function() {
         browser.execute(function() {
             document