test(ssr): add more tests for dynamic components (#4872)

Co-authored-by: James Tu <[email protected]>

packages/@lwc/engine-server/src/__tests__/fixtures/dynamic-components/invalid-ctor-function/error.txt

@@ -0,0 +1 @@
+Invalid constructor: "function fake() {}" is not a LightningElement constructor.

packages/@lwc/engine-server/src/__tests__/fixtures/dynamic-components/invalid-ctor-function/modules/x/dynamic-invalid-ctor/dynamic-invalid-ctor.js

@@ -0,0 +1,5 @@
+import { LightningElement } from 'lwc';
+
+export default class extends LightningElement {
+    customCtor = function fake () {};
+}

packages/@lwc/engine-server/src/__tests__/fixtures/dynamic-components/invalid-ctor/index.js

@@ -0,0 +1,3 @@
+export const tagName = 'x-dynamic-component-invalid-ctor';
+export { default } from 'x/dynamic-invalid-ctor';
+export * from 'x/dynamic-invalid-ctor';

packages/@lwc/engine-server/src/__tests__/fixtures/dynamic-components/no-ctor/modules/x/dynamic-no-ctor/dynamic-no-ctor.html

@@ -0,0 +1,3 @@
+<template>
+    <lwc:component lwc:is={customCtor}></lwc:component>
+</template>

packages/@lwc/engine-server/src/__tests__/fixtures/dynamic-components/slots/light-fallback/expected.html

@@ -0,0 +1,11 @@
+<x-dynamic-component>
+  <template shadowrootmode="open">
+    <x-test>
+      a
+      <!---->
+      fallback
+      <!---->
+      b
+    </x-test>
+  </template>
+</x-dynamic-component>

packages/@lwc/engine-server/src/__tests__/fixtures/dynamic-components/slots/light-fallback/index.js

@@ -0,0 +1,3 @@
+export const tagName = 'x-dynamic-component';
+export { default } from 'x/dynamic';
+export * from 'x/dynamic';

packages/@lwc/engine-server/src/__tests__/fixtures/dynamic-components/slots/light-fallback/modules/x/dynamic/dynamic.html

@@ -0,0 +1,3 @@
+<template>
+    <lwc:component lwc:is={customCtor}></lwc:component>
+</template>

packages/@lwc/engine-server/src/__tests__/fixtures/dynamic-components/slots/light-fallback/modules/x/dynamic/dynamic.js

@@ -0,0 +1,6 @@
+import { LightningElement, track } from 'lwc';
+import Test from 'x/test';
+
+export default class DynamicCtor extends LightningElement {
+    @track customCtor = Test;
+}

packages/@lwc/engine-server/src/__tests__/fixtures/dynamic-components/slots/light-fallback/modules/x/test/test.html

@@ -0,0 +1,5 @@
+<template lwc:render-mode="light">
+    a
+    <slot>fallback</slot>
+    b
+</template>

packages/@lwc/engine-server/src/__tests__/fixtures/dynamic-components/slots/light-fallback/modules/x/test/test.js

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

packages/@lwc/engine-server/src/__tests__/fixtures/dynamic-components/slots/light/expected.html

@@ -0,0 +1,13 @@
+<x-dynamic-component>
+  <template shadowrootmode="open">
+    <x-test>
+      a
+      <!---->
+      <div>
+        Slot me in!
+      </div>
+      <!---->
+      b
+    </x-test>
+  </template>
+</x-dynamic-component>

packages/@lwc/engine-server/src/__tests__/fixtures/dynamic-components/slots/light/index.js

@@ -0,0 +1,3 @@
+export const tagName = 'x-dynamic-component';
+export { default } from 'x/dynamic';
+export * from 'x/dynamic';

packages/@lwc/engine-server/src/__tests__/fixtures/dynamic-components/slots/light/modules/x/dynamic/dynamic.html

@@ -0,0 +1,5 @@
+<template>
+    <lwc:component lwc:is={customCtor}>
+        <div>Slot me in!</div>
+    </lwc:component>
+</template>

packages/@lwc/engine-server/src/__tests__/fixtures/dynamic-components/slots/light/modules/x/dynamic/dynamic.js

@@ -0,0 +1,6 @@
+import { LightningElement, track } from 'lwc';
+import Test from 'x/test';
+
+export default class DynamicCtor extends LightningElement {
+    @track customCtor = Test;
+}

packages/@lwc/engine-server/src/__tests__/fixtures/dynamic-components/slots/light/modules/x/test/test.html

@@ -0,0 +1,5 @@
+<template lwc:render-mode="light">
+    a
+    <slot>fallback</slot>
+    b
+</template>

packages/@lwc/engine-server/src/__tests__/fixtures/dynamic-components/slots/light/modules/x/test/test.js

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

packages/@lwc/engine-server/src/__tests__/fixtures/dynamic-components/slots/shadow/expected.html

@@ -0,0 +1,16 @@
+<x-dynamic-component>
+  <template shadowrootmode="open">
+    <x-test>
+      <template shadowrootmode="open">
+        a
+        <slot>
+          fallback
+        </slot>
+        b
+      </template>
+      <div>
+        Slot me in!
+      </div>
+    </x-test>
+  </template>
+</x-dynamic-component>

packages/@lwc/engine-server/src/__tests__/fixtures/dynamic-components/slots/shadow/index.js

@@ -0,0 +1,3 @@
+export const tagName = 'x-dynamic-component';
+export { default } from 'x/dynamic';
+export * from 'x/dynamic';

packages/@lwc/engine-server/src/__tests__/fixtures/dynamic-components/slots/shadow/modules/x/dynamic/dynamic.html

@@ -0,0 +1,5 @@
+<template>
+    <lwc:component lwc:is={customCtor}>
+        <div>Slot me in!</div>
+    </lwc:component>
+</template>

packages/@lwc/engine-server/src/__tests__/fixtures/dynamic-components/slots/shadow/modules/x/dynamic/dynamic.js

@@ -0,0 +1,6 @@
+import { LightningElement, track } from 'lwc';
+import Test from 'x/test';
+
+export default class DynamicCtor extends LightningElement {
+    @track customCtor = Test;
+}

packages/@lwc/engine-server/src/__tests__/fixtures/dynamic-components/slots/shadow/modules/x/test/test.html

@@ -0,0 +1,5 @@
+<template>
+    a
+    <slot>fallback</slot>
+    b
+</template>

packages/@lwc/engine-server/src/__tests__/fixtures/dynamic-components/slots/shadow/modules/x/test/test.js

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

packages/@lwc/ssr-compiler/src/__tests__/utils/expected-failures.ts

@@ -28,6 +28,8 @@ export const expectedFailures = new Set([
     'attribute-style/basic/index.js',
     'attribute-style/dynamic/index.js',
     'comments-text-preserve-off/index.js',
+    'dynamic-components/slots/shadow/index.js',
+    'dynamic-components/slots/light/index.js',
     'dynamic-slots/index.js',
     'empty-text-with-comments-non-static-optimized/index.js',
     'if-conditional-slot-content/index.js',