Popover: Add DOM events and E2E tests

Refs: #6987
public-ui · Dec 7, 2024 · 3effb05 · 3effb05
1 parent 4389d4c
commit 3effb05
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 1 deletion.
diff --git 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
@@ -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();
+		});
+	});
 });