77 lines
2.5 KiB
TypeScript
77 lines
2.5 KiB
TypeScript
import { expect, tap } from '@git.zone/tstest/tapbundle';
|
|
import { DeesContextmenu } from '../ts_web/elements/dees-contextmenu.js';
|
|
|
|
tap.test('should show context menu with nested submenu', async () => {
|
|
// Create a test element with context menu items
|
|
const testDiv = document.createElement('div');
|
|
testDiv.style.width = '200px';
|
|
testDiv.style.height = '200px';
|
|
testDiv.style.background = '#eee';
|
|
testDiv.innerHTML = 'Right-click me';
|
|
|
|
// Add getContextMenuItems method
|
|
(testDiv as any).getContextMenuItems = () => {
|
|
return [
|
|
{
|
|
name: 'Change Type',
|
|
iconName: 'type',
|
|
submenu: [
|
|
{ name: 'Paragraph', iconName: 'text', action: () => console.log('Paragraph') },
|
|
{ name: 'Heading 1', iconName: 'heading1', action: () => console.log('Heading 1') },
|
|
{ name: 'Heading 2', iconName: 'heading2', action: () => console.log('Heading 2') },
|
|
{ divider: true },
|
|
{ name: 'Code Block', iconName: 'fileCode', action: () => console.log('Code') },
|
|
{ name: 'Quote', iconName: 'quote', action: () => console.log('Quote') }
|
|
]
|
|
},
|
|
{ divider: true },
|
|
{
|
|
name: 'Delete',
|
|
iconName: 'trash2',
|
|
action: () => console.log('Delete')
|
|
}
|
|
];
|
|
};
|
|
|
|
document.body.appendChild(testDiv);
|
|
|
|
// Simulate right-click
|
|
const contextMenuEvent = new MouseEvent('contextmenu', {
|
|
clientX: 100,
|
|
clientY: 100,
|
|
bubbles: true,
|
|
cancelable: true
|
|
});
|
|
|
|
testDiv.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 are rendered
|
|
const menuItems = contextMenu!.shadowRoot!.querySelectorAll('.menuitem');
|
|
expect(menuItems.length).toEqual(2); // "Change Type" and "Delete"
|
|
|
|
// Hover over "Change Type" to trigger submenu
|
|
const changeTypeItem = menuItems[0] as HTMLElement;
|
|
changeTypeItem.dispatchEvent(new MouseEvent('mouseenter', { bubbles: true }));
|
|
|
|
// Wait for submenu to appear
|
|
await new Promise(resolve => setTimeout(resolve, 300));
|
|
|
|
// Check if submenu is created
|
|
const submenus = document.querySelectorAll('dees-contextmenu');
|
|
expect(submenus.length).toEqual(2); // Main menu and submenu
|
|
|
|
// Clean up
|
|
contextMenu!.remove();
|
|
const submenu = submenus[1];
|
|
if (submenu) submenu.remove();
|
|
testDiv.remove();
|
|
});
|
|
|
|
export default tap.start(); |