test(integration-karma): migrate nested-template-event-target (#1207)

* test(integration-karma): migrate nested-template-event-target

* test(integration-karma): migrate root-listener-event-target

* test(integration-karma): migrate slotted-custome-element-event-target

* test(integration-karma): migrate nested-render-conditional

* test: increase timeout for two tests that flap in ie11

packages/integration-karma/test/events/nested-template-event-target/index.spec.js

@@ -0,0 +1,19 @@
+import { createElement } from 'test-utils';
+import Container from 'x/container';
+
+describe('Event target in slot elements', () => {
+    it('should receive event with correct target', function() {
+        const elm = createElement('x-container', { is: Container });
+        document.body.appendChild(elm);
+
+        const child = elm.shadowRoot.querySelector('x-child');
+
+        child.dispatchFoo();
+
+        return Promise.resolve().then(() => {
+            const elementWithResult = elm.shadowRoot.querySelector('.evt-target-is-x-child');
+            expect(elementWithResult).not.toBeNull();
+            expect(elementWithResult.innerText).toBe('Event Target Is x-child');
+        });
+    });
+});

packages/integration-tests/src/components/events/test-nested-template-event-target/integration/nested-template-event-target/nested-template-event-target.html → packages/integration-karma/test/events/nested-template-event-target/x/container/container.html

@@ -1,4 +1,4 @@
 <template>
-    <integration-child onfoo={handleFoo}></integration-child>
+    <x-child onfoo={handleFoo}></x-child>
     <div class="evt-target-is-x-child" if:true={evtTargetIsXChild}>Event Target Is x-child</div>
 </template>

packages/integration-tests/src/components/events/test-nested-template-event-target/integration/nested-template-event-target/nested-template-event-target.js → packages/integration-karma/test/events/nested-template-event-target/x/container/container.js

@@ -1,10 +1,10 @@
 import { LightningElement, track } from 'lwc';
 
-export default class NestedTemplateEventTarget extends LightningElement {
+export default class Container extends LightningElement {
     @track
     evtTargetIsXChild = false;
 
     handleFoo(evt) {
-        this.evtTargetIsXChild = evt.target.tagName.toLowerCase() === 'integration-child';
+        this.evtTargetIsXChild = evt.target.tagName.toLowerCase() === 'x-child';
     }
 }

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

@@ -0,0 +1,18 @@
+import { createElement } from 'test-utils';
+import Container from 'x/container';
+
+describe('Event target in slot elements', () => {
+    it('should receive event with correct event.target in a shadowRoot listener', function() {
+        const elm = createElement('x-container', { is: Container });
+        document.body.appendChild(elm);
+
+        const child = elm.shadowRoot.querySelector('x-child');
+        child.click();
+
+        return Promise.resolve().then(() => {
+            const elementWithResult = elm.shadowRoot.querySelector('.event-target-correct');
+            expect(elementWithResult).not.toBeNull();
+            expect(elementWithResult.innerText).toBe('Event Target is correct element');
+        });
+    });
+});

packages/integration-tests/src/components/events/test-root-listener-event-target/integration/child/child.html → packages/integration-karma/test/events/root-listener-event-target/x/container/container.html

@@ -1,4 +1,4 @@
 <template>
-    <integration-grand-child></integration-grand-child>
+    <x-child></x-child>
     <div class="event-target-correct" if:true={eventTargetIsCorrect}>Event Target is correct element</div>
 </template>

packages/integration-tests/src/components/events/test-root-listener-event-target/integration/child/child.js → packages/integration-karma/test/events/root-listener-event-target/x/container/container.js

@@ -1,11 +1,11 @@
 import { LightningElement, track } from 'lwc';
 
-export default class Child extends LightningElement {
+export default class Container extends LightningElement {
     @track eventTargetIsCorrect = false;
 
     connectedCallback() {
         this.template.addEventListener('click', evt => {
-            this.eventTargetIsCorrect = evt.target.tagName === 'INTEGRATION-GRAND-CHILD';
+            this.eventTargetIsCorrect = evt.target.tagName === 'X-CHILD';
         });
     }
 }

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

@@ -0,0 +1,21 @@
+import { createElement } from 'test-utils';
+import Container from 'x/container';
+
+describe('Event target in slot elements', () => {
+    it('should receive event with correct target in slotted custom element', function() {
+        const elm = createElement('x-container', { is: Container });
+        document.body.appendChild(elm);
+
+        const child = elm.shadowRoot.querySelector('x-child');
+        child.click();
+
+        return Promise.resolve().then(() => {
+            const elementWithResult = elm.shadowRoot
+                .querySelector('x-parent')
+                .shadowRoot.querySelector('.correct-event-target');
+
+            expect(elementWithResult).not.toBeNull();
+            expect(elementWithResult.innerText).toBe('Event target is correct');
+        });
+    });
+});

packages/integration-karma/test/events/slotted-custom-element-event-target/x/child/child.js

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

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

@@ -0,0 +1,5 @@
+<template>
+    <x-parent>
+        <x-child></x-child>
+    </x-parent>
+</template>

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

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

packages/integration-tests/src/components/events/test-slotted-custom-element-event-target/integration/parent/parent.js → packages/integration-karma/test/events/slotted-custom-element-event-target/x/parent/parent.js

@@ -3,6 +3,6 @@ import { LightningElement, track } from 'lwc';
 export default class XParent extends LightningElement {
     @track eventTargetIsCorrectTag = false;
     handleClick(evt) {
-        this.eventTargetIsCorrectTag = evt.target.tagName === 'INTEGRATION-CHILD';
+        this.eventTargetIsCorrectTag = evt.target.tagName === 'X-CHILD';
     }
 }

packages/integration-karma/test/template/directive-if/index.spec.js

@@ -1,6 +1,7 @@
 import { createElement } from 'test-utils';
 import XTest from 'x/test';
 import XSlotted from 'x/slotted';
+import NestedRenderConditional from 'x/nestedRenderConditional';
 
 describe('if:true directive', () => {
     it('should render if the value is truthy', () => {
@@ -19,6 +20,21 @@ describe('if:true directive', () => {
         expect(elm.shadowRoot.querySelector('.true')).toBeNull();
     });
 
+    it('should remove element within a nested conditional', () => {
+        const elm = createElement('x-nested-render-conditional', { is: NestedRenderConditional });
+        document.body.appendChild(elm);
+
+        const elementToggler = elm.shadowRoot.querySelector('.click-me');
+
+        elementToggler.click();
+
+        return Promise.resolve().then(() => {
+            const elementInsideNestedCondition = elm.shadowRoot.querySelector('.toggle');
+
+            expect(elementInsideNestedCondition).toBeNull();
+        });
+    });
+
     it('should update if the value change', () => {
         const elm = createElement('x-test', { is: XTest });
         elm.isVisible = true;

packages/integration-tests/src/components/wired/test-wired-method-suite/wired-method-suite.spec.js

@@ -40,7 +40,7 @@ describe('Component with a wired method', () => {
                 });
                 return todoText.value === 'Title:task 1 Completed:false';
             },
-            500,
+            1000,
             'Should update todo id'
         );
     });

packages/integration-tests/src/components/wired/test-wired-prop-suite/wired-prop-suite.spec.js

@@ -38,7 +38,7 @@ describe('Component with a wired property', () => {
                 });
                 return todoText.value === 'Title:task 1 Completed:false';
             },
-            500,
+            1000,
             'expect todo item to be updated'
         );
     });