From c1f0aa336bbf275dc5959eb5cbdba82bcfebecd8 Mon Sep 17 00:00:00 2001
From: sand4rt <info@mesander.com>
Date: Sun, 1 Jan 2023 17:48:24 +0100
Subject: [PATCH] feat: multiple slots

---
 ct-web-lit/src/tests.spec.ts         |  2 +-
 ct-web/src/tests.spec.ts             |  2 +-
 playwright-ct-web/package.json       |  2 +-
 playwright-ct-web/registerSource.mjs | 27 ++++++++++++++++++++++++---
 4 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/ct-web-lit/src/tests.spec.ts b/ct-web-lit/src/tests.spec.ts
index b2ee7d9..4e07089 100644
--- a/ct-web-lit/src/tests.spec.ts
+++ b/ct-web-lit/src/tests.spec.ts
@@ -94,7 +94,7 @@ test.fixme('render a component as slot', async ({ mount }) => {
   await expect(component).toContainText('Submit');
 });
 
-test.fixme('render a component with multiple slots', async ({ mount }) => {
+test('render a component with multiple slots', async ({ mount }) => {
   const component = await mount(DefaultSlot, {
     slots: {
       default: [
diff --git a/ct-web/src/tests.spec.ts b/ct-web/src/tests.spec.ts
index b2ee7d9..4e07089 100644
--- a/ct-web/src/tests.spec.ts
+++ b/ct-web/src/tests.spec.ts
@@ -94,7 +94,7 @@ test.fixme('render a component as slot', async ({ mount }) => {
   await expect(component).toContainText('Submit');
 });
 
-test.fixme('render a component with multiple slots', async ({ mount }) => {
+test('render a component with multiple slots', async ({ mount }) => {
   const component = await mount(DefaultSlot, {
     slots: {
       default: [
diff --git a/playwright-ct-web/package.json b/playwright-ct-web/package.json
index a91f61c..7925d86 100644
--- a/playwright-ct-web/package.json
+++ b/playwright-ct-web/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@sand4rt/experimental-ct-web",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "description": "Playwright Component Testing for Web Components",
   "homepage": "https://playwright.dev",
   "engines": {
diff --git a/playwright-ct-web/registerSource.mjs b/playwright-ct-web/registerSource.mjs
index 078d3f0..4c0c7c1 100644
--- a/playwright-ct-web/registerSource.mjs
+++ b/playwright-ct-web/registerSource.mjs
@@ -15,6 +15,27 @@ export function register(components) {
     registry.set(name, value);
 }
 
+/**
+ * @param {string} html
+ * @return {DocumentFragment}
+ */
+function stringToHtml(html) {
+  return document.createRange().createContextualFragment(html);
+}
+
+/**
+ * @param {string | string[]} slot
+ */
+function createSlots(slot) {
+  if (typeof slot === 'string')
+    return [stringToHtml(slot)];
+
+  if (Array.isArray(slot))
+    return slot.map(stringToHtml);
+
+  throw Error(`Invalid slot received.`);
+}
+
 /**
  * @param {Component} component
  */
@@ -46,12 +67,12 @@ function createComponent(component) {
     webComponent.addEventListener(key, event => listener(/** @type {CustomEvent} */ (event).detail));
 
   for (const [key, value] of Object.entries(component.options?.slots || {})) {
-    const slot = document.createRange().createContextualFragment(value);
-
     if (key !== 'default')
       throw new Error('named slots are not yet supported');
     
-    webComponent.appendChild(slot);
+    createSlots(value).forEach(slot => {
+      webComponent.appendChild(slot);
+    })
   }
 
   for (const [key, value] of Object.entries(component.options?.props || {}))