Form: Add DOM events and E2E tests

Refs: #6987

packages/components/src/components/form/form.e2e.ts

@@ -0,0 +1,49 @@
+import { expect } from '@playwright/test';
+import { test } from '@stencil/playwright';
+
+test.describe('kol-form', () => {
+	test.describe('Callbacks', () => {
+		const EVENTS: [string, string, unknown?][] = [
+			['submit', 'onSubmit'],
+			['reset', 'onReset'],
+		];
+		EVENTS.forEach(([eventName, callbackName]) => {
+			test(`should call ${callbackName} when internal form emits`, async ({ page }) => {
+				await page.setContent('<kol-form />');
+				const kolForm = page.locator('kol-form');
+
+				const eventPromise = kolForm.evaluate((element: HTMLKolFormElement, callbackName) => {
+					return new Promise<void>((resolve) => {
+						element._on = {
+							[callbackName]: () => {
+								resolve();
+							},
+						};
+					});
+				}, callbackName);
+				await page.waitForChanges();
+
+				await page.locator('form').dispatchEvent(eventName);
+				await expect(eventPromise).resolves.toBeUndefined();
+			});
+		});
+	});
+
+	test.describe('DOM events', () => {
+		['reset', 'submit'].forEach((eventName) => {
+			test(`should emit ${eventName} when internal form emits ${eventName}`, async ({ page }) => {
+				await page.setContent('<kol-form />');
+				const eventPromise = page.locator('kol-form').evaluate(async (element: HTMLKolFormElement, eventName) => {
+					return new Promise<void>((resolve) => {
+						element.addEventListener(eventName, () => {
+							resolve();
+						});
+					});
+				}, eventName);
+				await page.waitForChanges();
+				await page.locator('form').dispatchEvent(eventName);
+				await expect(eventPromise).resolves.toBeUndefined();
+			});
+		});
+	});
+});

packages/components/src/components/form/shadow.tsx

@@ -1,12 +1,13 @@
 import type { JSX } from '@stencil/core';
 import { validateErrorList, watchBoolean, watchString } from '../../schema';
-import { Component, h, Host, Prop, State, Watch, Method } from '@stencil/core';
+import { Component, Element, h, Host, Prop, State, Watch, Method } from '@stencil/core';
 
 import { translate } from '../../i18n';
 
 import type { ErrorListPropType, FormAPI, FormStates, KoliBriFormCallbacks, Stringified } from '../../schema';
 import { KolLinkWcTag } from '../../core/component-names';
 import KolAlertFc from '../../functional-components/Alert';
+import { dispatchDomEvent } from '../../utils/events';
 
 /**
  * @slot - Inhalt der Form.
@@ -19,6 +20,7 @@ import KolAlertFc from '../../functional-components/Alert';
 	shadow: true,
 })
 export class KolForm implements FormAPI {
+	@Element() private readonly host?: HTMLKolTextareaElement;
 	errorListElement?: HTMLElement;
 
 	/* Hint: This method may not be used at all while events are handled in form/controller#propagateSubmitEventToForm */
@@ -28,6 +30,9 @@ export class KolForm implements FormAPI {
 		if (typeof this.state._on?.onSubmit === 'function') {
 			this.state._on?.onSubmit(event as SubmitEvent);
 		}
+		if (this.host) {
+			dispatchDomEvent(this.host, 'submit');
+		}
 	};
 
 	private readonly onReset = (event: Event) => {
@@ -36,6 +41,9 @@ export class KolForm implements FormAPI {
 		if (typeof this.state._on?.onReset === 'function') {
 			this.state._on?.onReset(event);
 		}
+		if (this.host) {
+			dispatchDomEvent(this.host, 'reset');
+		}
 	};
 
 	private readonly handleLinkClick = (event: Event) => {

packages/components/src/utils/events.ts

@@ -1,5 +1,5 @@
 // TODO: Should be synchronized with enums/events.ts
-export type KoliBriEventType = 'blur' | 'close' | 'change' | 'click' | 'focus' | 'input' | 'toggle' | 'selection-change' | 'mousedown';
+export type KoliBriEventType = 'blur' | 'change' | 'click' | 'close' | 'focus' | 'input' | 'mousedown' | 'reset' | 'selection-change' | 'submit' | 'toggle';
 
 export function stopPropagation(event: Event): void {
 	event.stopImmediatePropagation();