feat: events

Author: sand4rt

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

@@ -1,12 +1,17 @@
 import { LitElement, html } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { customElement, eventOptions, property } from 'lit/decorators.js';
 
 @customElement('pw-button')
 export class Button extends LitElement {
   @property({ type: String })
   title = '';
 
+  @eventOptions({ passive: true })
+  onClick() { 
+    this.dispatchEvent(new CustomEvent('submit', { detail: 'hello' }));
+  }
+
   render() {
-    return html`<button>${this.title}</button>`;
+    return html`<button @click=${this.onClick}>${this.title}</button>`;
   }
 }

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

@@ -62,7 +62,7 @@ test.fixme('update slots without remounting', async ({ mount }) => {
   await expect(component.locator('#remount-count')).toContainText('1');
 });
 
-test.fixme('emit an submit event when the button is clicked', async ({ mount }) => {
+test('emit an submit event when the button is clicked', async ({ mount }) => {
   const messages: string[] = [];
   const component = await mount(Button, {
     props: {

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

@@ -1,12 +1,17 @@
 export class Button extends HTMLElement {
+  constructor() {
+    super();
+    this.innerHTML = `<button>${this.title}</button>`;
+  }
+
   set title(title: string) {
     this.innerHTML = `<button>${title}</button>`
   }
 
-  constructor() {
-    super();
-
-    this.innerHTML = `<button>${this.title}</button>`;
+  connectedCallback() {
+    this.addEventListener("click", () => {
+      this.dispatchEvent(new CustomEvent('submit', { detail: 'hello' }));
+    });
   }
 }
 

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

@@ -62,7 +62,7 @@ test.fixme('update slots without remounting', async ({ mount }) => {
   await expect(component.locator('#remount-count')).toContainText('1');
 });
 
-test.fixme('emit an submit event when the button is clicked', async ({ mount }) => {
+test('emit an submit event when the button is clicked', async ({ mount }) => {
   const messages: string[] = [];
   const component = await mount(Button, {
     props: {

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

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

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

@@ -42,8 +42,8 @@ function createComponent(component) {
 
   const webComponent = new Component();
 
-  if (component.options?.on)
-    throw new Error('events are not yet supported');
+  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');