71 lines
2.3 KiB
TypeScript
71 lines
2.3 KiB
TypeScript
import { expect, tap } from '@git.zone/tstest/tapbundle';
|
|
import { DeesContextmenu } from '../ts_web/elements/dees-contextmenu.js';
|
|
import { DeesElement, customElement, html } from '@design.estate/dees-element';
|
|
|
|
// Create a test element with shadow DOM
|
|
@customElement('test-shadow-element')
|
|
class TestShadowElement extends DeesElement {
|
|
public getContextMenuItems() {
|
|
return [
|
|
{ name: 'Shadow Item 1', iconName: 'box', action: async () => console.log('Shadow 1') },
|
|
{ name: 'Shadow Item 2', iconName: 'package', action: async () => console.log('Shadow 2') }
|
|
];
|
|
}
|
|
|
|
render() {
|
|
return html`
|
|
<div style="padding: 40px; background: #eee; border-radius: 8px;">
|
|
<h3>Shadow DOM Content</h3>
|
|
<p>Right-click anywhere inside this shadow DOM</p>
|
|
</div>
|
|
`;
|
|
}
|
|
}
|
|
|
|
tap.test('should show context menu when right-clicking inside shadow DOM', async () => {
|
|
// Create the shadow DOM element
|
|
const shadowElement = document.createElement('test-shadow-element');
|
|
document.body.appendChild(shadowElement);
|
|
|
|
// Wait for element to be ready
|
|
await shadowElement.updateComplete;
|
|
|
|
// Get the content inside shadow DOM
|
|
const shadowContent = shadowElement.shadowRoot!.querySelector('div');
|
|
expect(shadowContent).toBeTruthy();
|
|
|
|
// Simulate right-click on content inside shadow DOM
|
|
const contextMenuEvent = new MouseEvent('contextmenu', {
|
|
clientX: 100,
|
|
clientY: 100,
|
|
bubbles: true,
|
|
cancelable: true,
|
|
composed: true // Important for shadow DOM
|
|
});
|
|
|
|
shadowContent!.dispatchEvent(contextMenuEvent);
|
|
|
|
// Wait for context menu to appear
|
|
await new Promise(resolve => setTimeout(resolve, 100));
|
|
|
|
// Check if context menu is created
|
|
const contextMenu = document.querySelector('dees-contextmenu');
|
|
expect(contextMenu).toBeInstanceOf(DeesContextmenu);
|
|
|
|
// Check if menu items from shadow element are rendered
|
|
const menuItems = contextMenu!.shadowRoot!.querySelectorAll('.menuitem');
|
|
expect(menuItems.length).toBeGreaterThanOrEqual(2);
|
|
|
|
// Check menu item text
|
|
const menuTexts = Array.from(menuItems).map(item =>
|
|
item.querySelector('.menuitem-text')?.textContent
|
|
);
|
|
expect(menuTexts).toContain('Shadow Item 1');
|
|
expect(menuTexts).toContain('Shadow Item 2');
|
|
|
|
// Clean up
|
|
contextMenu!.remove();
|
|
shadowElement.remove();
|
|
});
|
|
|
|
export default tap.start(); |