Skip to content

test(framework): add composed-root-event regression fixture #238

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mohamedmansour merged 1 commit into from
Apr 15, 2026
Merged

test(framework): add composed-root-event regression fixture #238

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 46 additions & 0 deletions packages/webui-framework/tests/fixtures/composed-root-event/composed-root-event.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.

import { expect, test } from '@playwright/test';

test.describe('composed root event — custom event pierces shadow DOM', () => {
test.beforeEach(async ({ page }) => {
await page.goto('/composed-root-event/fixture.html');
await page.waitForSelector('test-grandparent');
await page.waitForFunction(() => {
const el = document.querySelector('test-grandparent');
return el && (el as any).$ready === true;
});
});

test('grandparent receives composed custom event from grandchild', async ({ page }) => {
// Click the "alpha" button inside test-child (nested 2 shadow DOMs deep)
await page.locator('test-grandparent test-child[item-id="alpha"] .select-btn').click();

// The grandparent's @item-selected root handler should fire
await expect(page.locator('test-grandparent .result')).toHaveText('alpha');
});

test('grandparent receives event from second grandchild', async ({ page }) => {
await page.locator('test-grandparent test-child[item-id="beta"] .select-btn').click();
await expect(page.locator('test-grandparent .result')).toHaveText('beta');
});

test('multiple clicks update correctly', async ({ page }) => {
await page.locator('test-grandparent test-child[item-id="alpha"] .select-btn').click();
await expect(page.locator('test-grandparent .result')).toHaveText('alpha');

await page.locator('test-grandparent test-child[item-id="beta"] .select-btn').click();
await expect(page.locator('test-grandparent .result')).toHaveText('beta');
});

test('event detail contains correct id', async ({ page }) => {
await page.locator('test-grandparent test-child[item-id="alpha"] .select-btn').click();

const detail = await page.evaluate(() => {
const el = document.querySelector('test-grandparent') as any;
return el?.selectedItem;
});
expect(detail).toBe('alpha');
});
});
28 changes: 28 additions & 0 deletions packages/webui-framework/tests/fixtures/composed-root-event/element.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.

import { WebUIElement, observable, attr } from '../../../src/index.js';

// Grandchild — emits a composed custom event.
export class TestChild extends WebUIElement {
@attr itemId = '';

onSelect(): void {
this.$emit('item-selected', { id: this.itemId });
}
}
TestChild.define('test-child');

// Intermediary — just wraps children, no event handling.
export class TestParent extends WebUIElement {}
TestParent.define('test-parent');

// Grandparent — listens for composed event via @item-selected on <template>.
export class TestGrandparent extends WebUIElement {
@observable selectedItem = 'none';

onItemSelected(e: CustomEvent<{ id: string }>): void {
this.selectedItem = e.detail.id;
}
}
TestGrandparent.define('test-grandparent');
10 changes: 10 additions & 0 deletions packages/webui-framework/tests/fixtures/composed-root-event/src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Composed Root Event Fixture</title>
</head>
<body>
<test-grandparent></test-grandparent>
</body>
</html>
1 change: 1 addition & 0 deletions packages/webui-framework/tests/fixtures/composed-root-event/src/test-child/test-child.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
<button class="select-btn" @click="{onSelect()}">{{itemId}}</button>
4 changes: 4 additions & 0 deletions ...i-framework/tests/fixtures/composed-root-event/src/test-grandparent/test-grandparent.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
<template shadowrootmode="open" @item-selected="{onItemSelected(e)}">
<span class="result">{{selectedItem}}</span>
<test-parent></test-parent>
</template>
4 changes: 4 additions & 0 deletions packages/webui-framework/tests/fixtures/composed-root-event/src/test-parent/test-parent.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
<div class="list">
<test-child item-id="alpha"></test-child>
<test-child item-id="beta"></test-child>
</div>
3 changes: 3 additions & 0 deletions packages/webui-framework/tests/fixtures/composed-root-event/state.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"selectedItem": "none"
}
Loading