feat: default slot

Author: sand4rt

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

@@ -76,7 +76,7 @@ test('emit an submit event when the button is clicked', async ({ mount }) => {
   expect(messages).toEqual(['hello']);
 });
 
-test.fixme('render a default slot', async ({ mount }) => {
+test('render a default slot', async ({ mount }) => {
   const component = await mount(DefaultSlot, {
     slots: {
       default: '<strong>Main Content</strong>',

Diff for: ct-web/src/components/DefaultSlot.ts

@@ -1,6 +1,13 @@
 export class DefaultSlot extends HTMLElement {
   constructor() {
     super();
+    this.innerHTML = `
+      <div>
+        <h1>Welcome!</h1>
+        <main><slot /></main>
+        <footer>Thanks for visiting.</footer>
+      </div>
+    `;
   }
 }
 

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

@@ -76,7 +76,7 @@ test('emit an submit event when the button is clicked', async ({ mount }) => {
   expect(messages).toEqual(['hello']);
 });
 
-test.fixme('render a default slot', async ({ mount }) => {
+test('render a default slot', async ({ mount }) => {
   const component = await mount(DefaultSlot, {
     slots: {
       default: '<strong>Main Content</strong>',

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

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

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

@@ -45,8 +45,14 @@ function createComponent(component) {
   for (const [key, listener] of Object.entries(component.options?.on || {}))
     webComponent.addEventListener(key, event => listener(/** @type {CustomEvent} */ (event).detail));
 
-  if (component.options?.slots)
-    throw new Error('slots are not yet supported');
+  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);
+  }
 
   for (const [key, value] of Object.entries(component.options?.props || {}))
     webComponent[key] = value;