test: add tests for disconnectedCallback (#1094)

* test: add tests for disconnectedCallback

* fix: prettier errors

* fix: pr review feedback

packages/integration-karma/test/component/LightningElement.disconnectedCallback/index.spec.js

@@ -0,0 +1,87 @@
+import { createElement } from 'test-utils';
+
+import Slotted from 'x/slotted';
+import Test from 'x/test';
+
+function testDisconnectSlot(name, fn) {
+    it(`should invoke the disconnectedCallback when root element is removed from the DOM via ${name}`, done => {
+        const elm = createElement('x-test', { is: Test });
+        elm.disconnect = function(context) {
+            expect(context instanceof Test).toBe(true);
+            done();
+        };
+
+        fn(elm);
+    });
+}
+
+testDisconnectSlot('Node.removeChild', elm => {
+    document.body.appendChild(elm);
+    document.body.removeChild(elm);
+});
+
+testDisconnectSlot('Node.replaceChild', elm => {
+    const newChild = document.createElement('div');
+    document.body.appendChild(elm);
+    document.body.replaceChild(newChild, elm);
+});
+
+describe('disconnectedCallback for host with slots', () => {
+    let parentDisconnectSpy;
+    let slotIgnoringChildSpy;
+    let slotAcceptingChildSpy;
+    let parent;
+
+    beforeAll(() => {
+        // Ignore the engine logging about passing slot content to a component that does not accept slot
+        spyOn(console, 'group');
+        spyOn(console, 'log');
+        spyOn(console, 'groupEnd');
+    });
+
+    beforeEach(() => {
+        parentDisconnectSpy = jasmine.createSpy();
+        slotIgnoringChildSpy = jasmine.createSpy();
+        slotAcceptingChildSpy = jasmine.createSpy();
+        parent = createElement('x-slotted', { is: Slotted });
+        document.body.appendChild(parent);
+        parent.disconnect = parentDisconnectSpy;
+        parent.shadowRoot.querySelector('x-accepting-slots').disconnect = slotAcceptingChildSpy;
+        parent.shadowRoot.querySelector('x-ignoring-slots').disconnect = slotIgnoringChildSpy;
+    });
+
+    it('should invoke disconnectedCallback on host and all children components', () => {
+        document.body.removeChild(parent);
+        expect(parentDisconnectSpy).toHaveBeenCalledTimes(1);
+        expect(slotAcceptingChildSpy).toHaveBeenCalledTimes(1);
+        expect(slotIgnoringChildSpy).toHaveBeenCalledTimes(1);
+    });
+
+    /**
+     * Automation for issue #1090
+     * In this scenario the slot content from the parent's template is unrendered.
+     * disconnecting the slot receiver was causing errors
+     **/
+    it('should invoke disconnectedCallback on child that has unrendered slot content', () => {
+        parent.hideChildIgnoresSlots = true;
+
+        return Promise.resolve(() => {
+            expect(parentDisconnectSpy).not.toHaveBeenCalled();
+            expect(slotIgnoringChildSpy).toHaveBeenCalledTimes(1);
+            expect(slotAcceptingChildSpy).not.toHaveBeenCalled();
+        });
+    });
+
+    it('should invoke disconnectedCallback on child that has rendered slot content', () => {
+        const slotContent = parent.shadowRoot.querySelector('x-test.slotted');
+        const slotContentDisconnectSpy = jasmine.createSpy();
+        slotContent.disconnect = slotContentDisconnectSpy;
+        parent.hideChildAcceptsSlots = true;
+        return Promise.resolve(() => {
+            expect(parentDisconnectSpy).not.toHaveBeenCalled();
+            expect(slotAcceptingChildSpy).toHaveBeenCalledTimes(1);
+            expect(slotContentDisconnectSpy).toHaveBeenCalledTimes(1);
+            expect(slotIgnoringChildSpy).not.toHaveBeenCalled();
+        });
+    });
+});

packages/integration-karma/test/component/LightningElement.disconnectedCallback/x/acceptingSlots/acceptingSlots.html

@@ -0,0 +1,5 @@
+<template>
+    <slot>
+        <div class="default"></div>
+    </slot>
+</template>

packages/integration-karma/test/component/LightningElement.disconnectedCallback/x/acceptingSlots/acceptingSlots.js

@@ -0,0 +1,9 @@
+import { LightningElement, api } from 'lwc';
+
+export default class AcceptingSlots extends LightningElement {
+    @api disconnect;
+
+    disconnectedCallback() {
+        this.disconnect();
+    }
+}

packages/integration-karma/test/component/LightningElement.disconnectedCallback/x/ignoringSlots/ignoringSlots.html

@@ -0,0 +1,3 @@
+<template>
+    ignore slot content from parent
+</template>

packages/integration-karma/test/component/LightningElement.disconnectedCallback/x/ignoringSlots/ignoringSlots.js

@@ -0,0 +1,9 @@
+import { LightningElement, api } from 'lwc';
+
+export default class IgnoringSlots extends LightningElement {
+    @api disconnect;
+
+    disconnectedCallback() {
+        this.disconnect();
+    }
+}

packages/integration-karma/test/component/LightningElement.disconnectedCallback/x/slotted/slotted.html

@@ -0,0 +1,16 @@
+<template>
+    <div>
+        <template if:false={hideChildAcceptsSlots}>
+            <x-accepting-slots>
+                <div class="slotted"></div>
+                <x-test class="slotted"></x-test>
+            </x-accepting-slots>            
+        </template>
+        <template if:false={hideChildIgnoresSlots}>
+            <x-ignoring-slots>
+                <div class="ignored-slot"></div>
+                <x-test class="ignored-slot"></x-test>
+            </x-ignoring-slots>            
+        </template>
+    </div>
+</template>

packages/integration-karma/test/component/LightningElement.disconnectedCallback/x/slotted/slotted.js

@@ -0,0 +1,11 @@
+import { LightningElement, api } from 'lwc';
+
+export default class Slotted extends LightningElement {
+    @api disconnect;
+    @api hideChildIgnoresSlots = false;
+    @api hideChildAcceptsSlots = false;
+
+    disconnectedCallback() {
+        this.disconnect();
+    }
+}

packages/integration-karma/test/component/LightningElement.disconnectedCallback/x/test/test.html

@@ -0,0 +1,2 @@
+<template>
+</template>

packages/integration-karma/test/component/LightningElement.disconnectedCallback/x/test/test.js

@@ -0,0 +1,11 @@
+import { LightningElement, api } from 'lwc';
+
+export default class Test extends LightningElement {
+    @api disconnect;
+
+    disconnectedCallback() {
+        if (this.disconnect) {
+            this.disconnect(this);
+        }
+    }
+}