feat: component update

Author: sand4rt

Diff for: ct-web-lit/src/components/Counter.ts

@@ -1,30 +1,31 @@
 import { LitElement, html } from 'lit';
-import { customElement } from 'lit/decorators.js';
+import { customElement, eventOptions, property } from 'lit/decorators.js';
+
+let remountCount = 0 
 
 @customElement('pw-counter')
 export class Counter extends LitElement {
+  @property({ type: Number })
+  count!: number;
+
+  constructor() {
+    super();
+    remountCount++;
+  }
+
+  @eventOptions({ passive: true })
+  onClick() {
+    this.dispatchEvent(new CustomEvent('submit', { detail: 'hello' }));
+  }
+  
   render() {
-    return html``;
+    return html`
+      <div  @click=${this.onClick}>
+        <div id="props">${this.count}</div>
+        <div id="remount-count">${remountCount}</div>
+        <slot name="main" />
+        <slot />
+      </div>
+    `;
   }
 }
-
-// Example vue implementation:
-
-// <template>
-//   <div @click="$emit('submit', 'hello')">
-//     <div id="props">{{ count }}</div>
-//     <div id="remount-count">{{ remountCount }}</div>
-//     <slot name="main" />
-//     <slot />
-//   </div>
-// </template>
-
-// <script lang="ts">
-// let remountCount = 0
-// </script>
-
-// <script lang="ts" setup>
-// defineProps<{ count?: number }>()
-
-// remountCount++
-// </script>

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

@@ -17,7 +17,7 @@ test('render props', async ({ mount }) => {
   await expect(component).toContainText('Submit');
 });
 
-test.fixme('update props without remounting', async ({ mount }) => {
+test('update props without remounting', async ({ mount }) => {
   const component = await mount(Counter, {
     props: { count: 9001 },
   });
@@ -32,7 +32,7 @@ test.fixme('update props without remounting', async ({ mount }) => {
   await expect(component.locator('#remount-count')).toContainText('1');
 });
 
-test.fixme('update event listeners without remounting', async ({ mount }) => {
+test('update event listeners without remounting', async ({ mount }) => {
   const component = await mount(Counter);
 
   const messages: string[] = [];

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

@@ -1,6 +1,34 @@
+let remountCount = 0 
+
 export class Counter extends HTMLElement {
+  set count(count: string) {
+    this.innerHTML = `
+      <div>
+        <div id="props">${count}</div>
+        <div id="remount-count">${remountCount}</div>
+        <slot name="main" />
+        <slot />
+      </div>
+    `;
+  }
+
   constructor() {
     super();
+    remountCount++;
+    this.innerHTML = `
+      <div>
+        <div id="props">${this.count}</div>
+        <div id="remount-count">${remountCount}</div>
+        <slot name="main" />
+        <slot />
+      </div>
+    `
+  }
+
+  connectedCallback() {
+    this.addEventListener('click', () => {
+      this.dispatchEvent(new CustomEvent('submit', { detail: 'hello' }));
+    });
   }
 }
 

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

@@ -17,7 +17,7 @@ test('render props', async ({ mount }) => {
   await expect(component).toContainText('Submit');
 });
 
-test.fixme('update props without remounting', async ({ mount }) => {
+test('update props without remounting', async ({ mount }) => {
   const component = await mount(Counter, {
     props: { count: 9001 },
   });
@@ -32,7 +32,7 @@ test.fixme('update props without remounting', async ({ mount }) => {
   await expect(component.locator('#remount-count')).toContainText('1');
 });
 
-test.fixme('update event listeners without remounting', async ({ mount }) => {
+test('update event listeners without remounting', async ({ mount }) => {
   const component = await mount(Counter);
 
   const messages: string[] = [];

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

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

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

@@ -63,6 +63,9 @@ function createComponent(component) {
 
   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));
 
@@ -75,14 +78,25 @@ function createComponent(component) {
     })
   }
 
-  for (const [key, value] of Object.entries(component.options?.props || {}))
-    webComponent[key] = value;
-
   return webComponent;
 }
 
 window.playwrightUpdate = async (rootElement, component) => {
-  throw new Error('component.update() is not yet supported');
+  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 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;
+
+  for (const [key, listener] of Object.entries(component.options?.on || {}))
+    wrapper.addEventListener(key, event => listener(/** @type {CustomEvent} */ (event).detail));
 };
 
 window.playwrightUnmount = async (rootElement) => {