test: add more tests for light DOM inheritance (#2462)

packages/integration-karma/test/light-dom/inheritance/index.spec.js

@@ -1,16 +1,34 @@
 import { createElement, setFeatureFlagForTest } from 'lwc';
 
-import Test from 'x/test';
+import ShadowExtendsLight from 'x/shadowExtendsLight';
+import DefaultExtendsLight from 'x/defaultExtendsLight';
+import LightExtendsShadow from 'x/lightExtendsShadow';
+import DefaultExtendsShadow from 'x/defaultExtendsShadow';
 
-describe('with base class light and subclass shadow', () => {
+describe('light/shadow inheritance from base classes', () => {
     beforeEach(() => {
         setFeatureFlagForTest('ENABLE_LIGHT_DOM_COMPONENTS', true);
     });
     afterEach(() => {
         setFeatureFlagForTest('ENABLE_LIGHT_DOM_COMPONENTS', false);
     });
-    it('should render properly', () => {
-        const elm = createElement('x-test', { is: Test });
-        expect(elm.shadowRoot).not.toBeNull();
-    });
+
+    const testCases = [
+        { tag: 'x-shadow-extends-light', is: ShadowExtendsLight, shadow: true },
+        { tag: 'x-default-extends-light', is: DefaultExtendsLight, shadow: false },
+        { tag: 'x-light-extends-shadow', is: LightExtendsShadow, shadow: false },
+        { tag: 'x-default-extends-shadow', is: DefaultExtendsShadow, shadow: true },
+    ];
+
+    for (const { tag, is, shadow } of testCases) {
+        it(`renders ${is.name}`, () => {
+            const elm = createElement(tag, { is });
+            document.body.appendChild(elm);
+            if (shadow) {
+                expect(elm.shadowRoot).not.toBeNull();
+            } else {
+                expect(elm.shadowRoot).toBeNull();
+            }
+        });
+    }
 });

packages/integration-karma/test/light-dom/inheritance/x/baseLight/baseLight.html

@@ -0,0 +1 @@
+<template lwc:render-mode="light"></template>

packages/integration-karma/test/light-dom/inheritance/x/base/base.js → packages/integration-karma/test/light-dom/inheritance/x/baseLight/baseLight.js

@@ -1,5 +1,5 @@
 import { LightningElement } from 'lwc';
 
-export default class Base extends LightningElement {
+export default class BaseLight extends LightningElement {
     static renderMode = 'light';
 }

packages/integration-karma/test/light-dom/inheritance/x/baseShadow/baseShadow.html

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

packages/integration-karma/test/light-dom/inheritance/x/baseShadow/baseShadow.js

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

packages/integration-karma/test/light-dom/inheritance/x/defaultExtendsLight/defaultExtendsLight.html

@@ -0,0 +1 @@
+<template lwc:render-mode="light"></template>

packages/integration-karma/test/light-dom/inheritance/x/defaultExtendsLight/defaultExtendsLight.js

@@ -0,0 +1,3 @@
+import BaseLight from 'x/baseLight';
+
+export default class DefaultExtendsLight extends BaseLight {}

packages/integration-karma/test/light-dom/inheritance/x/defaultExtendsShadow/defaultExtendsShadow.html

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

packages/integration-karma/test/light-dom/inheritance/x/defaultExtendsShadow/defaultExtendsShadow.js

@@ -0,0 +1,3 @@
+import BaseShadow from 'x/baseShadow';
+
+export default class DefaultExtendsShadow extends BaseShadow {}

packages/integration-karma/test/light-dom/inheritance/x/base/base.html → packages/integration-karma/test/light-dom/inheritance/x/lightExtendsShadow/lightExtendsShadow.html

@@ -1,3 +1,3 @@
 <template lwc:render-mode="light">
-    <x-test data-id="x-test"></x-test>
+    <p></p>
 </template>

packages/integration-karma/test/light-dom/inheritance/x/lightExtendsShadow/lightExtendsShadow.js

@@ -0,0 +1,5 @@
+import BaseShadow from 'x/baseShadow';
+
+export default class LightExtendsShadow extends BaseShadow {
+    static renderMode = 'light';
+}

packages/integration-karma/test/light-dom/inheritance/x/shadowExtendsLight/shadowExtendsLight.html

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

packages/integration-karma/test/light-dom/inheritance/x/shadowExtendsLight/shadowExtendsLight.js

@@ -0,0 +1,5 @@
+import BaseLight from 'x/baseLight';
+
+export default class ShadowExtendsLight extends BaseLight {
+    static renderMode = 'shadow';
+}