From 3af548604e44bde0536e9ad0c5bcb67d39ca8f35 Mon Sep 17 00:00:00 2001
From: sand4rt <info@mesander.com>
Date: Mon, 29 Aug 2022 18:11:51 +0200
Subject: [PATCH] feat(ct): svelte default slot (#16869)

---
 .../playwright-ct-svelte/registerSource.mjs   | 39 ++++++++++++++++++-
 .../src/components/DefaultSlot.svelte         |  9 +++++
 .../ct-svelte-vite/src/tests.spec.ts          | 10 +++++
 .../src/components/DefaultSlot.svelte         |  9 +++++
 tests/components/ct-svelte/src/tests.spec.ts  | 10 +++++
 5 files changed, 76 insertions(+), 1 deletion(-)
 create mode 100644 tests/components/ct-svelte-vite/src/components/DefaultSlot.svelte
 create mode 100644 tests/components/ct-svelte/src/components/DefaultSlot.svelte

diff --git a/packages/playwright-ct-svelte/registerSource.mjs b/packages/playwright-ct-svelte/registerSource.mjs
index 788fd2886b..8e7b2b1d8e 100644
--- a/packages/playwright-ct-svelte/registerSource.mjs
+++ b/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;
 
diff --git a/tests/components/ct-svelte-vite/src/components/DefaultSlot.svelte b/tests/components/ct-svelte-vite/src/components/DefaultSlot.svelte
new file mode 100644
index 0000000000..201dda6ce3
--- /dev/null
+++ b/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>
diff --git a/tests/components/ct-svelte-vite/src/tests.spec.ts b/tests/components/ct-svelte-vite/src/tests.spec.ts
index c41abb50a4..38fb8aec77 100644
--- a/tests/components/ct-svelte-vite/src/tests.spec.ts
+++ b/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()))
diff --git a/tests/components/ct-svelte/src/components/DefaultSlot.svelte b/tests/components/ct-svelte/src/components/DefaultSlot.svelte
new file mode 100644
index 0000000000..201dda6ce3
--- /dev/null
+++ b/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>
diff --git a/tests/components/ct-svelte/src/tests.spec.ts b/tests/components/ct-svelte/src/tests.spec.ts
index c41abb50a4..38fb8aec77 100644
--- a/tests/components/ct-svelte/src/tests.spec.ts
+++ b/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()))