feat(ct): svelte default slot (#16869)

packages/playwright-ct-svelte/registerSource.mjs

@@ -18,6 +18,8 @@
 
 // This file is injected into the registry as text, no dependencies are allowed.
 
+import { detach, insert, noop } from 'svelte/internal';
+
 /** @typedef {import('../playwright-test/types/component').Component} Component */
 /** @typedef {any} FrameworkComponent */
 /** @typedef {import('svelte').SvelteComponent} SvelteComponent */
@@ -33,6 +35,37 @@ export function register(components) {
     registry.set(name, value);
 }
 
+/**
+ * TODO: remove this function when the following issue is fixed:
+ * https://github.com/sveltejs/svelte/issues/2588
+ */
+function createSlots(slots) {
+  const svelteSlots = {};
+
+  for (const slotName in slots) {
+    const template = document
+        .createRange()
+        .createContextualFragment(slots[slotName]);
+    svelteSlots[slotName] = [createSlotFn(template)];
+  }
+
+  function createSlotFn(element) {
+    return function() {
+      return {
+        c: noop,
+        m: function mount(target, anchor) {
+          insert(target, element, anchor);
+        },
+        d: function destroy(detaching) {
+          if (detaching) detach(element);
+        },
+        l: noop,
+      };
+    };
+  }
+  return svelteSlots;
+}
+
 window.playwrightMount = async (component, rootElement, hooksConfig) => {
   let componentCtor = registry.get(component.type);
   if (!componentCtor) {
@@ -57,7 +90,11 @@ window.playwrightMount = async (component, rootElement, hooksConfig) => {
 
   const svelteComponent = /** @type {SvelteComponent} */ (new componentCtor({
     target: rootElement,
-    props: component.options?.props,
+    props: {
+      ...component.options?.props,
+      $$slots: createSlots(component.options?.slots),
+      $$scope: {},
+    }
   }));
   rootElement[svelteComponentKey] = svelteComponent;
 

tests/components/ct-svelte-vite/src/components/DefaultSlot.svelte

@@ -0,0 +1,9 @@
+<div>
+  <h1>Welcome!</h1>
+  <main>
+    <slot />
+  </main>
+  <footer>
+    Thanks for visiting.
+  </footer>
+</div>

tests/components/ct-svelte-vite/src/tests.spec.ts

@@ -16,6 +16,7 @@
 
 import { test, expect } from '@playwright/experimental-ct-svelte';
 import Button from './components/Button.svelte';
+import DefaultSlot from './components/DefaultSlot.svelte';
 import MultiRoot from './components/MultiRoot.svelte';
 
 test.use({ viewport: { width: 500, height: 500 } });
@@ -43,6 +44,15 @@ test('event should work', async ({ mount }) => {
   expect(messages).toEqual(['hello'])
 })
 
+test('default slot should work', async ({ mount }) => {
+  const component = await mount(DefaultSlot, {
+    slots: {
+      default: 'Main Content'
+    }
+  })
+  await expect(component).toContainText('Main Content')
+})
+
 test('should run hooks', async ({ page, mount }) => {
   const messages = []
   page.on('console', m => messages.push(m.text()))

tests/components/ct-svelte/src/components/DefaultSlot.svelte

@@ -0,0 +1,9 @@
+<div>
+  <h1>Welcome!</h1>
+  <main>
+    <slot />
+  </main>
+  <footer>
+    Thanks for visiting.
+  </footer>
+</div>

tests/components/ct-svelte/src/tests.spec.ts

@@ -16,6 +16,7 @@
 
 import { test, expect } from '@playwright/experimental-ct-svelte';
 import Button from './components/Button.svelte';
+import DefaultSlot from './components/DefaultSlot.svelte';
 import MultiRoot from './components/MultiRoot.svelte';
 
 test.use({ viewport: { width: 500, height: 500 } });
@@ -43,6 +44,15 @@ test('event should work', async ({ mount }) => {
   expect(messages).toEqual(['hello'])
 })
 
+test('default slot should work', async ({ mount }) => {
+  const component = await mount(DefaultSlot, {
+    slots: {
+      default: 'Main Content'
+    }
+  })
+  await expect(component).toContainText('Main Content')
+})
+
 test('should run hooks', async ({ page, mount }) => {
   const messages = []
   page.on('console', m => messages.push(m.text()))