test: migrate test suites with skipped unit tests to karma (#1753)

* test: remove unit tests related to global attribute restriction
restriction was removed via #1362
* test: update error message in scoped-ids.spec.ts
* test: update test to match <slot> element spec
* test: remove unit test that was testing non-existent functions
* test: migrate tests to integration-karma
* test: migrate scoped-ids.spec to karma suite
* test: migrate html-element.spec.ts to karma
* test: migrate traverse.spec.ts to karma suite

packages/integration-karma/helpers/test-utils.js

@@ -330,11 +330,19 @@ window.TestUtils = (function(lwc, jasmine, beforeAll) {
         register = {};
     }
 
+    // #986 - childNodes on the host element returns a fake shadow comment node on IE11 for debugging purposed. This method
+    // filters this node.
+    function getHostChildNodes(host) {
+        return Array.prototype.slice.call(host.childNodes).filter(function(n) {
+            return !(n.nodeType === Node.COMMENT_NODE && n.tagName.startsWith('#shadow-root'));
+        });
+    }
     return {
         registerForLoad: registerForLoad,
         clearRegister: clearRegister,
         load: load,
         extractDataIds: extractDataIds,
         extractShadowDataIds: extractShadowDataIds,
+        getHostChildNodes: getHostChildNodes,
     };
 })(LWC, jasmine, beforeAll);

packages/integration-karma/test/component/aom-setter/index.spec.js

@@ -2,6 +2,8 @@ import { createElement } from 'lwc';
 
 import Parent from 'x/parent';
 
+import RoleTester, { roleSetterCallCount } from 'x/roleTester';
+
 let parent;
 
 beforeAll(() => {
@@ -24,3 +26,12 @@ it('should reflect AOM attribute for native element', () => {
     const elm = parent.shadowRoot.querySelector('div');
     expect(elm.getAttribute('aria-label')).toBe('KIX to HKG');
 });
+
+describe('#role', () => {
+    it('should call setter when defined', () => {
+        const element = createElement('prop-getter-aria-role', { is: RoleTester });
+        document.body.appendChild(element);
+        element.role = 'tab';
+        expect(roleSetterCallCount).toBe(1);
+    });
+});

packages/integration-karma/test/component/aom-setter/x/roleTester/roleTester.html

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

packages/integration-karma/test/component/aom-setter/x/roleTester/roleTester.js

@@ -0,0 +1,12 @@
+import { LightningElement, api } from 'lwc';
+
+export let roleSetterCallCount = 0;
+export default class MyComponent extends LightningElement {
+    get role() {
+        return 'role';
+    }
+    @api
+    set role(value) {
+        roleSetterCallCount += 1;
+    }
+}

packages/integration-karma/test/component/decorators/api/index.spec.js

@@ -7,6 +7,7 @@ import ConstructorGetterAccess from 'x/constructorGetterAccess';
 import Reactivity from 'x/reactivity';
 import Methods from 'x/methods';
 import Inheritance from 'x/inheritance';
+import NullInitialValue from 'x/nullInitialValue';
 
 describe('properties', () => {
     it('should expose class properties with the api decorator', () => {
@@ -104,3 +105,9 @@ describe('inheritance', () => {
         expect(elm.overriddenMethod()).toBe('overridden - child');
     });
 });
+
+it('should not log an error when initializing api value to null', () => {
+    const elm = createElement('x-foo-init-api', { is: NullInitialValue });
+
+    expect(() => document.body.appendChild(elm)).not.toLogErrorDev();
+});

packages/integration-karma/test/component/decorators/api/x/nullInitialValue/nullInitialValue.html

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

packages/integration-karma/test/component/decorators/api/x/nullInitialValue/nullInitialValue.js

@@ -0,0 +1,5 @@
+import { LightningElement, api } from 'lwc';
+export default class MyComponent extends LightningElement {
+    @api
+    foo = null;
+}

packages/integration-karma/test/component/decorators/track/index.spec.js

@@ -2,6 +2,8 @@ import { createElement } from 'lwc';
 
 import Properties from 'x/properties';
 import SideEffect from 'x/sideEffect';
+import NonObservable from 'x/nonObservable';
+import SetTrackedValueToNull from 'x/setTrackedValueToNull';
 
 it('rerenders the component when a track property is updated - literal', () => {
     const elm = createElement('x-properties', { is: Properties });
@@ -91,6 +93,12 @@ describe('object mutations', () => {
             expect(elm.shadowRoot.querySelector('.obj').textContent).toBe('1');
         });
     });
+
+    it('should not log an error when setting tracked value to null', () => {
+        const elm = createElement('x-foo-tracked-null', { is: SetTrackedValueToNull });
+
+        expect(() => document.body.appendChild(elm)).not.toLogErrorDev();
+    });
 });
 
 describe('array mutations', () => {
@@ -124,3 +132,13 @@ describe('array mutations', () => {
         });
     });
 });
+
+describe('non-observable values', () => {
+    it('should not throw an error when accessing a non-observable property from a tracked property before rendering', () => {
+        const elm = createElement('x-foo', { is: NonObservable });
+        elm.foo = new Map();
+        expect(() => {
+            elm.foo;
+        }).not.toThrow();
+    });
+});

packages/integration-karma/test/component/decorators/track/x/nonObservable/nonObservable.html

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

packages/integration-karma/test/component/decorators/track/x/nonObservable/nonObservable.js

@@ -0,0 +1,14 @@
+import { LightningElement, track, api } from 'lwc';
+
+export default class MyComponent extends LightningElement {
+    @track
+    state = {};
+
+    @api
+    set foo(value) {
+        this.state.foo = value;
+    }
+    get foo() {
+        return this.state.foo;
+    }
+}

packages/integration-karma/test/component/decorators/track/x/setTrackedValueToNull/setTrackedValueToNull.html

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

packages/integration-karma/test/component/decorators/track/x/setTrackedValueToNull/setTrackedValueToNull.js

@@ -0,0 +1,10 @@
+import { LightningElement, track } from 'lwc';
+
+export default class MyComponent extends LightningElement {
+    @track
+    state = {};
+    connectedCallback() {
+        this.state.foo = null;
+        this.state.foo;
+    }
+}

packages/integration-karma/test/component/lockerIntegration/LockerIntegration.spec.js

@@ -0,0 +1,11 @@
+import { createElement } from 'lwc';
+
+import LockerIntegration from 'x/lockerIntegration';
+
+it('should support Locker integration which uses a wrapped LightningElement base class', () => {
+    const elm = createElement('x-secure-parent', { is: LockerIntegration });
+    document.body.appendChild(elm);
+    // Verifying that shadow tree was created to ensure the component class was successfully processed
+    const actual = elm.querySelector('div.secure');
+    expect(actual).toBeDefined();
+});

packages/integration-karma/test/component/lockerIntegration/x/lockerIntegration/lockerIntegration.html

@@ -0,0 +1,3 @@
+<template>
+    <div class="secure"></div>
+</template>

packages/integration-karma/test/component/lockerIntegration/x/lockerIntegration/lockerIntegration.js

@@ -0,0 +1,15 @@
+import { LightningElement } from 'lwc';
+import Template from './lockerIntegration.html';
+function SecureBase() {
+    if (this instanceof SecureBase) {
+        LightningElement.prototype.constructor.call(this);
+    } else {
+        return LightningElement;
+    }
+}
+SecureBase.__circular__ = true;
+export default class Foo extends SecureBase {
+    render() {
+        return Template;
+    }
+}

packages/integration-karma/test/shadow-dom/Element-properties/Element.assignedSlot.spec.js

@@ -0,0 +1,79 @@
+import { createElement } from 'lwc';
+import { getHostChildNodes } from 'test-utils';
+
+import SimpleParent from 'x/simpleParent';
+import SlottedParent from 'x/slotted';
+import SlottedCustomElement from 'x/slottedCustomElement';
+import SlotReceiver from 'x/slot';
+import CustomElementAsDefaultSlot from 'x/customElementAsDefaultSlot';
+import TextSlotted from 'x/textSlotted';
+
+describe('assignedSlot', () => {
+    it('should return null when custom element is not in slot', () => {
+        const elm = createElement('x-assigned-slot', { is: SimpleParent });
+        document.body.appendChild(elm);
+        const child = elm.shadowRoot.querySelector('x-no-slot');
+        expect(child.assignedSlot).toBe(null);
+    });
+
+    it('should return null when native element is not in slot', () => {
+        const elm = createElement('x-assigned-slot', { is: SimpleParent });
+        document.body.appendChild(elm);
+        const child = elm.shadowRoot.querySelector('div');
+        expect(child.assignedSlot).toBe(null);
+    });
+
+    it('should return the correct slot when native element is slotted', () => {
+        const elm = createElement('x-native-slotted-component', { is: SlottedParent });
+        document.body.appendChild(elm);
+        const slot = elm.shadowRoot.querySelector('x-slot').shadowRoot.querySelector('slot');
+        const child = elm.shadowRoot.querySelector('div');
+        expect(child.assignedSlot).toBe(slot);
+    });
+
+    it('should return the correct slot when custom element is slotted', () => {
+        const elm = createElement('x-custom-slotted-component', { is: SlottedCustomElement });
+        document.body.appendChild(elm);
+        const slot = elm.shadowRoot.querySelector('x-slot').shadowRoot.querySelector('slot');
+        const child = elm.shadowRoot.querySelector('x-child');
+        expect(child.assignedSlot).toBe(slot);
+    });
+
+    it('should return the correct named slot when native element is slotted', () => {
+        const elm = createElement('x-native-slotted-component', { is: SlottedParent });
+        document.body.appendChild(elm);
+        const slot = elm.shadowRoot.querySelector('x-named-slot').shadowRoot.querySelector('slot');
+        const child = elm.shadowRoot.querySelector('div.named');
+        expect(child.assignedSlot).toBe(slot);
+    });
+
+    it('should return the correct named slot when custom element is slotted', () => {
+        const elm = createElement('x-custom-slotted-component', { is: SlottedCustomElement });
+        document.body.appendChild(elm);
+        const slot = elm.shadowRoot.querySelector('x-named-slot').shadowRoot.querySelector('slot');
+        const child = elm.shadowRoot.querySelector('x-child.named');
+        expect(child.assignedSlot).toBe(slot);
+    });
+
+    it('should return null when native element default slot content', () => {
+        const elm = createElement('x-assigned-slot', { is: SlotReceiver });
+        document.body.appendChild(elm);
+        const child = elm.shadowRoot.querySelector('div');
+        expect(child.assignedSlot).toBe(null);
+    });
+
+    it('should return null when custom element default slot content', () => {
+        const elm = createElement('x-assigned-slot', { is: CustomElementAsDefaultSlot });
+        document.body.appendChild(elm);
+        const child = elm.shadowRoot.querySelector('x-child');
+        expect(child.assignedSlot).toBe(null);
+    });
+
+    it('should return the correct slot when text is slotted', () => {
+        const elm = createElement('x-native-slotted-component', { is: TextSlotted });
+        document.body.appendChild(elm);
+        const slot = elm.shadowRoot.querySelector('x-slot').shadowRoot.querySelector('slot');
+        const text = getHostChildNodes(elm.shadowRoot.querySelector('x-slot'))[0];
+        expect(text.assignedSlot).toBe(slot);
+    });
+});