feat: multiple slots

Author: sand4rt

Diff for: 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 for: 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 for: 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 for: 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 || {}))