From 3effb0545c335ddecd25d31d0e1d6cdb8c2aee8b Mon Sep 17 00:00:00 2001
From: Stefan Dietz <mail@stefan-dietz.eu>
Date: Sat, 7 Dec 2024 13:51:00 +0100
Subject: [PATCH] Popover: Add DOM events and E2E tests

Refs: #6987
---
 .../src/components/popover/component.tsx      |  4 ++
 .../src/components/popover/popover.e2e.ts     | 40 ++++++++++++++++++-
 2 files changed, 43 insertions(+), 1 deletion(-)

diff --git a/packages/components/src/components/popover/component.tsx b/packages/components/src/components/popover/component.tsx
index f2f4de2d77..def7c03468 100644
--- a/packages/components/src/components/popover/component.tsx
+++ b/packages/components/src/components/popover/component.tsx
@@ -5,6 +5,7 @@ import { Component, h, Host, Prop, State, Watch } from '@stencil/core';
 import { alignFloatingElements } from '../../utils/align-floating-elements';
 
 import type { JSX } from '@stencil/core';
+import { dispatchDomEvent } from '../../utils/events';
 
 /**
  * @internal
@@ -43,6 +44,9 @@ export class KolPopover implements PopoverAPI {
 		this.removeListenersToBody();
 
 		this.state._on?.onClose?.(event);
+		if (this.host) {
+			dispatchDomEvent(this.host, 'close');
+		}
 	}
 
 	private hidePopoverByEscape = (event: KeyboardEvent): void => {
diff --git a/packages/components/src/components/popover/popover.e2e.ts b/packages/components/src/components/popover/popover.e2e.ts
index b4cbd1a836..1d75c3979a 100644
--- a/packages/components/src/components/popover/popover.e2e.ts
+++ b/packages/components/src/components/popover/popover.e2e.ts
@@ -3,7 +3,7 @@ import { test } from '@stencil/playwright';
 
 test.describe('kol-popover', () => {
 	test('should display popover when _show is true and hide when _show is false', async ({ page }) => {
-		await page.setContent(`<kol-popover-wc _align="top">Dropdown-Inhalt</kol-popover-wc>`);
+		await page.setContent(`<kol-popover-wc _align="top">Popover content</kol-popover-wc>`);
 		const popoverComponent = page.locator('kol-popover-wc');
 		const popoverElement = popoverComponent.locator('.popover');
 
@@ -23,4 +23,42 @@ test.describe('kol-popover', () => {
 		});
 		await expect(popoverElement).not.toBeVisible();
 	});
+
+	test.describe('Callbacks', () => {
+		test(`it calls the onClose callback when popover is closed`, async ({ page }) => {
+			await page.setContent(`<kol-popover-wc _show>Popover content</kol-popover-wc>`);
+
+			const callbackPromise = page.locator('kol-popover-wc').evaluate((element: HTMLKolPopoverWcElement) => {
+				return new Promise<void>((resolve) => {
+					element._on = {
+						onClose: () => {
+							resolve();
+						},
+					};
+				});
+			});
+			await page.waitForChanges();
+			await page.keyboard.press('Escape');
+
+			await expect(callbackPromise).resolves.toBeUndefined();
+		});
+	});
+
+	test.describe('DOM events', () => {
+		test(`it emits close when popover is closed`, async ({ page }) => {
+			await page.setContent(`<kol-popover-wc _show>Popover content</kol-popover-wc>`);
+
+			const callbackPromise = page.locator('kol-popover-wc').evaluate((element: HTMLKolPopoverWcElement) => {
+				return new Promise<void>((resolve) => {
+					element.addEventListener('close', () => {
+						resolve();
+					});
+				});
+			});
+			await page.waitForChanges();
+			await page.keyboard.press('Escape');
+
+			await expect(callbackPromise).resolves.toBeUndefined();
+		});
+	});
 });