feat: named slots

Author: sand4rt

Diff for: ct-web-lit/src/tests.spec.ts

@@ -54,7 +54,7 @@ test.fixme('update slots without remounting', async ({ mount }) => {
   await expect(component).toContainText('Default Slot');
 
   await component.update({
-    slots: { main: 'Test Slot' },
+    slots: { main: '<div>Test Slot<div>' },
   });
   await expect(component).not.toContainText('Default Slot');
   await expect(component).toContainText('Test Slot');
@@ -107,12 +107,12 @@ test('render a component with multiple slots', async ({ mount }) => {
   await expect(component.getByTestId('two')).toContainText('Two');
 });
 
-test.fixme('render a component with a named slot', async ({ mount }) => {
+test('render a component with a named slot', async ({ mount }) => {
   const component = await mount(NamedSlots, {
     slots: {
-      header: 'Header',
-      main: 'Main Content',
-      footer: 'Footer',
+      header: '<div slot="header">Header<div>', // slot="" is optional
+      main: '<div>Main Content<div>',
+      footer: '<div>Footer</div>',
     },
   });
   await expect(component).toContainText('Header');

Diff for: ct-web/src/tests.spec.ts

@@ -54,7 +54,7 @@ test.fixme('update slots without remounting', async ({ mount }) => {
   await expect(component).toContainText('Default Slot');
 
   await component.update({
-    slots: { main: 'Test Slot' },
+    slots: { main: '<div>Test Slot</div>' },
   });
   await expect(component).not.toContainText('Default Slot');
   await expect(component).toContainText('Test Slot');
@@ -107,12 +107,12 @@ test('render a component with multiple slots', async ({ mount }) => {
   await expect(component.getByTestId('two')).toContainText('Two');
 });
 
-test.fixme('render a component with a named slot', async ({ mount }) => {
+test('render a component with a named slot', async ({ mount }) => {
   const component = await mount(NamedSlots, {
     slots: {
-      header: 'Header',
-      main: 'Main Content',
-      footer: 'Footer',
+      header: '<div slot="header">Header<div>', // slot="" is optional
+      main: '<div>Main Content<div>',
+      footer: '<div>Footer</div>',
     },
   });
   await expect(component).toContainText('Header');

Diff for: playwright-ct-web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sand4rt/experimental-ct-web",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "description": "Playwright Component Testing for Web Components",
   "homepage": "https://playwright.dev",
   "engines": {

Diff for: playwright-ct-web/registerSource.mjs

@@ -15,6 +15,25 @@ export function register(components) {
     registry.set(name, value);
 }
 
+/**
+ * @param {ChildNode} webComponent 
+ */
+function updateProps(webComponent, props = {}) {
+  for (const [key, value] of Object.entries(props))
+    webComponent[key] = value;
+}
+
+/**
+ * @param {ChildNode} webComponent 
+ */
+function updateEvents(webComponent, events = {}) {
+  for (const [key, listener] of Object.entries(events)) {
+    webComponent.addEventListener(key, event =>
+      listener(/** @type {CustomEvent} */ (event).detail)
+    );
+  }
+}
+
 /**
  * @param {string} html
  * @return {DocumentFragment}
@@ -24,16 +43,38 @@ function stringToHtml(html) {
 }
 
 /**
- * @param {string | string[]} slot
+ * @param {ChildNode} webComponent 
  */
-function createSlots(slot) {
-  if (typeof slot === 'string')
-    return [stringToHtml(slot)];
-
-  if (Array.isArray(slot))
-    return slot.map(stringToHtml);
+function updateSlots(webComponent, slots = {}) {
+  for (const [key, value] of Object.entries(slots)) {
+    let slotElements;
+    if (typeof value === 'string')
+      slotElements = [stringToHtml(value)];
+  
+    if (Array.isArray(value))
+      slotElements = value.map(stringToHtml);
+  
+    if (!slotElements)
+      throw new Error(`Invalid slot with the name: \`${key}\` supplied to \`mount()\``);
+
+    slotElements.forEach((fragment) => {
+      const slotElement = fragment.firstChild;
+      if (!slotElement)
+        throw new Error(`Invalid slot with the name: \`${key}\` supplied to \`mount()\``);
+
+      if (key === 'default')
+        return webComponent.appendChild(slotElement);
+
+      if (slotElement?.nodeName === '#text') {
+        throw new Error(
+          `Invalid slot with the name: \`${key}\` supplied to \`mount()\`, expected an HTMLElement but received a text node.`
+        );
+      }
 
-  throw Error(`Invalid slot received.`);
+      slotElement['slot'] = key;
+      webComponent.appendChild(fragment.firstChild);
+    });
+  }
 }
 
 /**
@@ -62,53 +103,37 @@ function createComponent(component) {
     throw new Error('JSX mount notation is not supported');
 
   const webComponent = new Component();
-
-  for (const [key, value] of Object.entries(component.options?.props || {}))
-    webComponent[key] = value;
-
-  for (const [key, listener] of Object.entries(component.options?.on || {}))
-    webComponent.addEventListener(key, event => listener(/** @type {CustomEvent} */ (event).detail));
-
-  for (const [key, value] of Object.entries(component.options?.slots || {})) {
-    if (key !== 'default')
-      throw new Error('named slots are not yet supported');
-    
-    createSlots(value).forEach(slot => {
-      webComponent.appendChild(slot);
-    })
-  }
-
+  updateProps(webComponent, component.options?.props);
+  updateSlots(webComponent, component.options?.slots);
+  updateEvents(webComponent, component.options?.on);
   return webComponent;
 }
 
 window.playwrightUpdate = async (rootElement, component) => {
   if (component.kind === 'jsx')
     throw new Error('JSX mount notation is not supported');
 
-  if (component.options?.slots)
-    throw new Error('slots in component.update() is not yet supported');
+  const webComponent = rootElement.firstChild;
+  if (!webComponent) throw new Error('Component was not mounted');
 
-  const wrapper = rootElement.firstChild;
-  if (!wrapper)
-    throw new Error('Component was not mounted');
-
-  for (const [key, value] of Object.entries(component.options?.props || {}))
-    wrapper[key] = value;
+  if (component.options?.slots)
+    throw new Error('Slots in component.update() is not yet supported');
 
-  for (const [key, listener] of Object.entries(component.options?.on || {}))
-    wrapper.addEventListener(key, event => listener(/** @type {CustomEvent} */ (event).detail));
+  updateProps(webComponent, component.options?.props);
+  updateSlots(webComponent, component.options?.slots);
+  updateEvents(webComponent, component.options?.on);
 };
 
 window.playwrightUnmount = async (rootElement) => {
   rootElement.replaceChildren();
 };
 
 window.playwrightMount = async (component, rootElement, hooksConfig) => {
-  for (const hook of /** @type {any} */ (window).__pw_hooks_before_mount || [])
+  for (const hook of window['__pw_hooks_before_mount'] || [])
     await hook({ hooksConfig });
 
   rootElement.appendChild(createComponent(component));
 
-  for (const hook of /** @type {any} */ (window).__pw_hooks_after_mount || [])
+  for (const hook of window['__pw_hooks_after_mount'] || [])
     await hook({ hooksConfig });
 };