test(ssr): add tests for nested elements in slots (#5048)

nolanlawson · web-flow · commit c4218fcaf7ff · 2024-12-16T12:55:42.000-08:00
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/slot-not-at-top-level/nested-elements/ifTrue/light/error.txt b/packages/@lwc/engine-server/src/__tests__/fixtures/slot-not-at-top-level/nested-elements/ifTrue/light/error.txt
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/slot-not-at-top-level/nested-elements/ifTrue/light/expected.html b/packages/@lwc/engine-server/src/__tests__/fixtures/slot-not-at-top-level/nested-elements/ifTrue/light/expected.html
@@ -0,0 +1,7 @@
+<x-outer>
+  <x-inner>
+    <!---->
+    fallback for foo
+    <!---->
+  </x-inner>
+</x-outer>
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/slot-not-at-top-level/nested-elements/ifTrue/light/index.js b/packages/@lwc/engine-server/src/__tests__/fixtures/slot-not-at-top-level/nested-elements/ifTrue/light/index.js
@@ -0,0 +1,3 @@
+export const tagName = 'x-outer';
+export { default } from 'x/outer';
+export * from 'x/outer';
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/slot-not-at-top-level/nested-elements/ifTrue/light/modules/x/inner/inner.html b/packages/@lwc/engine-server/src/__tests__/fixtures/slot-not-at-top-level/nested-elements/ifTrue/light/modules/x/inner/inner.html
@@ -0,0 +1,3 @@
+<template lwc:render-mode="light">
+    <slot name=foo>fallback for foo</slot>
+</template>
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/slot-not-at-top-level/nested-elements/ifTrue/light/modules/x/inner/inner.js b/packages/@lwc/engine-server/src/__tests__/fixtures/slot-not-at-top-level/nested-elements/ifTrue/light/modules/x/inner/inner.js
@@ -0,0 +1,5 @@
+import { LightningElement } from 'lwc';
+
+export default class extends LightningElement {
+    static renderMode = 'light';
+}
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/slot-not-at-top-level/nested-elements/ifTrue/light/modules/x/outer/outer.html b/packages/@lwc/engine-server/src/__tests__/fixtures/slot-not-at-top-level/nested-elements/ifTrue/light/modules/x/outer/outer.html
@@ -0,0 +1,17 @@
+<template lwc:render-mode="light">
+    <x-inner>
+        z
+        <div>
+            1
+            <div slot="foo">2</div>
+            3
+            <template if:true={isTrue}>
+                4
+                <div slot="foo">5</div>
+                6
+            </template>
+            7
+        </div>
+        8
+    </x-inner>
+</template>
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/slot-not-at-top-level/nested-elements/ifTrue/light/modules/x/outer/outer.js b/packages/@lwc/engine-server/src/__tests__/fixtures/slot-not-at-top-level/nested-elements/ifTrue/light/modules/x/outer/outer.js
@@ -0,0 +1,7 @@
+import { LightningElement } from 'lwc';
+
+export default class extends LightningElement {
+    static renderMode = 'light';
+    isTrue = true;
+    isFalse = false;
+}
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/slot-not-at-top-level/nested-elements/ifTrue/shadow/error.txt b/packages/@lwc/engine-server/src/__tests__/fixtures/slot-not-at-top-level/nested-elements/ifTrue/shadow/error.txt
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/slot-not-at-top-level/nested-elements/ifTrue/shadow/expected.html b/packages/@lwc/engine-server/src/__tests__/fixtures/slot-not-at-top-level/nested-elements/ifTrue/shadow/expected.html
@@ -0,0 +1,24 @@
+<x-outer>
+  <template shadowrootmode="open">
+    <x-inner>
+      <template shadowrootmode="open">
+        <slot name="foo">
+          fallback for foo
+        </slot>
+      </template>
+      z
+      <div>
+        1
+        <div slot="foo">
+          2
+        </div>
+        34
+        <div slot="foo">
+          5
+        </div>
+        67
+      </div>
+      8
+    </x-inner>
+  </template>
+</x-outer>
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/slot-not-at-top-level/nested-elements/ifTrue/shadow/index.js b/packages/@lwc/engine-server/src/__tests__/fixtures/slot-not-at-top-level/nested-elements/ifTrue/shadow/index.js
@@ -0,0 +1,3 @@
+export const tagName = 'x-outer';
+export { default } from 'x/outer';
+export * from 'x/outer';
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/slot-not-at-top-level/nested-elements/ifTrue/shadow/modules/x/inner/inner.html b/packages/@lwc/engine-server/src/__tests__/fixtures/slot-not-at-top-level/nested-elements/ifTrue/shadow/modules/x/inner/inner.html
@@ -0,0 +1,3 @@
+<template lwc:render-mode="shadow">
+    <slot name=foo>fallback for foo</slot>
+</template>
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/slot-not-at-top-level/nested-elements/ifTrue/shadow/modules/x/inner/inner.js b/packages/@lwc/engine-server/src/__tests__/fixtures/slot-not-at-top-level/nested-elements/ifTrue/shadow/modules/x/inner/inner.js
@@ -0,0 +1,5 @@
+import { LightningElement } from 'lwc';
+
+export default class extends LightningElement {
+    static renderMode = 'shadow';
+}
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/slot-not-at-top-level/nested-elements/ifTrue/shadow/modules/x/outer/outer.html b/packages/@lwc/engine-server/src/__tests__/fixtures/slot-not-at-top-level/nested-elements/ifTrue/shadow/modules/x/outer/outer.html
@@ -0,0 +1,17 @@
+<template lwc:render-mode="shadow">
+    <x-inner>
+        z
+        <div>
+            1
+            <div slot="foo">2</div>
+            3
+            <template if:true={isTrue}>
+                4
+                <div slot="foo">5</div>
+                6
+            </template>
+            7
+        </div>
+        8
+    </x-inner>
+</template>
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/slot-not-at-top-level/nested-elements/ifTrue/shadow/modules/x/outer/outer.js b/packages/@lwc/engine-server/src/__tests__/fixtures/slot-not-at-top-level/nested-elements/ifTrue/shadow/modules/x/outer/outer.js
@@ -0,0 +1,7 @@
+import { LightningElement } from 'lwc';
+
+export default class extends LightningElement {
+    static renderMode = 'shadow';
+    isTrue = true;
+    isFalse = false;
+}
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/slot-not-at-top-level/nested-elements/lwcIf/light/error.txt b/packages/@lwc/engine-server/src/__tests__/fixtures/slot-not-at-top-level/nested-elements/lwcIf/light/error.txt
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/slot-not-at-top-level/nested-elements/lwcIf/light/expected.html b/packages/@lwc/engine-server/src/__tests__/fixtures/slot-not-at-top-level/nested-elements/lwcIf/light/expected.html
@@ -0,0 +1,7 @@
+<x-outer>
+  <x-inner>
+    <!---->
+    fallback for foo
+    <!---->
+  </x-inner>
+</x-outer>
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/slot-not-at-top-level/nested-elements/lwcIf/light/index.js b/packages/@lwc/engine-server/src/__tests__/fixtures/slot-not-at-top-level/nested-elements/lwcIf/light/index.js
@@ -0,0 +1,3 @@
+export const tagName = 'x-outer';
+export { default } from 'x/outer';
+export * from 'x/outer';
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/slot-not-at-top-level/nested-elements/lwcIf/light/modules/x/inner/inner.html b/packages/@lwc/engine-server/src/__tests__/fixtures/slot-not-at-top-level/nested-elements/lwcIf/light/modules/x/inner/inner.html
@@ -0,0 +1,3 @@
+<template lwc:render-mode="light">
+    <slot name=foo>fallback for foo</slot>
+</template>
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/slot-not-at-top-level/nested-elements/lwcIf/light/modules/x/inner/inner.js b/packages/@lwc/engine-server/src/__tests__/fixtures/slot-not-at-top-level/nested-elements/lwcIf/light/modules/x/inner/inner.js
@@ -0,0 +1,5 @@
+import { LightningElement } from 'lwc';
+
+export default class extends LightningElement {
+    static renderMode = 'light';
+}
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/slot-not-at-top-level/nested-elements/lwcIf/light/modules/x/outer/outer.html b/packages/@lwc/engine-server/src/__tests__/fixtures/slot-not-at-top-level/nested-elements/lwcIf/light/modules/x/outer/outer.html
@@ -0,0 +1,17 @@
+<template lwc:render-mode="light">
+    <x-inner>
+        z
+        <div>
+            1
+            <div slot="foo">2</div>
+            3
+            <template lwc:if={isTrue}>
+                4
+                <div slot="foo">5</div>
+                6
+            </template>
+            7
+        </div>
+        8
+    </x-inner>
+</template>
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/slot-not-at-top-level/nested-elements/lwcIf/light/modules/x/outer/outer.js b/packages/@lwc/engine-server/src/__tests__/fixtures/slot-not-at-top-level/nested-elements/lwcIf/light/modules/x/outer/outer.js
@@ -0,0 +1,7 @@
+import { LightningElement } from 'lwc';
+
+export default class extends LightningElement {
+    static renderMode = 'light';
+    isTrue = true;
+    isFalse = false;
+}
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/slot-not-at-top-level/nested-elements/lwcIf/shadow/error.txt b/packages/@lwc/engine-server/src/__tests__/fixtures/slot-not-at-top-level/nested-elements/lwcIf/shadow/error.txt
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/slot-not-at-top-level/nested-elements/lwcIf/shadow/expected.html b/packages/@lwc/engine-server/src/__tests__/fixtures/slot-not-at-top-level/nested-elements/lwcIf/shadow/expected.html
@@ -0,0 +1,28 @@
+<x-outer>
+  <template shadowrootmode="open">
+    <x-inner>
+      <template shadowrootmode="open">
+        <slot name="foo">
+          fallback for foo
+        </slot>
+      </template>
+      z
+      <div>
+        1
+        <div slot="foo">
+          2
+        </div>
+        3
+        <!---->
+        4
+        <div slot="foo">
+          5
+        </div>
+        6
+        <!---->
+        7
+      </div>
+      8
+    </x-inner>
+  </template>
+</x-outer>
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/slot-not-at-top-level/nested-elements/lwcIf/shadow/index.js b/packages/@lwc/engine-server/src/__tests__/fixtures/slot-not-at-top-level/nested-elements/lwcIf/shadow/index.js
@@ -0,0 +1,3 @@
+export const tagName = 'x-outer';
+export { default } from 'x/outer';
+export * from 'x/outer';
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/slot-not-at-top-level/nested-elements/lwcIf/shadow/modules/x/inner/inner.html b/packages/@lwc/engine-server/src/__tests__/fixtures/slot-not-at-top-level/nested-elements/lwcIf/shadow/modules/x/inner/inner.html
@@ -0,0 +1,3 @@
+<template lwc:render-mode="shadow">
+    <slot name=foo>fallback for foo</slot>
+</template>
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/slot-not-at-top-level/nested-elements/lwcIf/shadow/modules/x/inner/inner.js b/packages/@lwc/engine-server/src/__tests__/fixtures/slot-not-at-top-level/nested-elements/lwcIf/shadow/modules/x/inner/inner.js
@@ -0,0 +1,5 @@
+import { LightningElement } from 'lwc';
+
+export default class extends LightningElement {
+    static renderMode = 'shadow';
+}
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/slot-not-at-top-level/nested-elements/lwcIf/shadow/modules/x/outer/outer.html b/packages/@lwc/engine-server/src/__tests__/fixtures/slot-not-at-top-level/nested-elements/lwcIf/shadow/modules/x/outer/outer.html
@@ -0,0 +1,17 @@
+<template lwc:render-mode="shadow">
+    <x-inner>
+        z
+        <div>
+            1
+            <div slot="foo">2</div>
+            3
+            <template lwc:if={isTrue}>
+                4
+                <div slot="foo">5</div>
+                6
+            </template>
+            7
+        </div>
+        8
+    </x-inner>
+</template>
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/slot-not-at-top-level/nested-elements/lwcIf/shadow/modules/x/outer/outer.js b/packages/@lwc/engine-server/src/__tests__/fixtures/slot-not-at-top-level/nested-elements/lwcIf/shadow/modules/x/outer/outer.js
@@ -0,0 +1,7 @@
+import { LightningElement } from 'lwc';
+
+export default class extends LightningElement {
+    static renderMode = 'shadow';
+    isTrue = true;
+    isFalse = false;
+}
diff --git a/packages/@lwc/ssr-compiler/src/__tests__/utils/expected-failures.ts b/packages/@lwc/ssr-compiler/src/__tests__/utils/expected-failures.ts
@@ -28,6 +28,7 @@ export const expectedFailures = new Set([
     'slot-not-at-top-level/advanced/lwcIf/light/index.js',
     'slot-not-at-top-level/advanced/lwcIf/shadow/index.js',
     'slot-not-at-top-level/lwcIf-with-adjacent-text-nodes/light/index.js',
+    'slot-not-at-top-level/nested-elements/lwcIf/shadow/index.js',
     'superclass/render-in-superclass/no-template-in-subclass/index.js',
     'superclass/render-in-superclass/unused-default-in-subclass/index.js',
     'superclass/render-in-superclass/unused-default-in-superclass/index.js',

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+export const tagName = 'x-outer';`
	`2`	`+export { default } from 'x/outer';`
	`3`	`+export * from 'x/outer';`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+<template lwc:render-mode="light">`
	`2`	`+ <slot name=foo>fallback for foo</slot>`
	`3`	`+</template>`