93 lines
2.8 KiB
TypeScript
93 lines
2.8 KiB
TypeScript
import { expect, tap } from '@git.zone/tstest/tapbundle';
|
|
import { DeesContextmenu } from '../ts_web/elements/dees-contextmenu.js';
|
|
|
|
tap.test('should close all parent menus when clicking action in nested submenu', async () => {
|
|
let actionCalled = false;
|
|
|
|
// Create a test element
|
|
const testDiv = document.createElement('div');
|
|
testDiv.style.width = '300px';
|
|
testDiv.style.height = '300px';
|
|
testDiv.style.background = '#f0f0f0';
|
|
testDiv.innerHTML = 'Right-click for nested menu test';
|
|
document.body.appendChild(testDiv);
|
|
|
|
// Simulate right-click to open context menu
|
|
const contextMenuEvent = new MouseEvent('contextmenu', {
|
|
clientX: 150,
|
|
clientY: 150,
|
|
bubbles: true,
|
|
cancelable: true
|
|
});
|
|
|
|
// Open context menu with nested structure
|
|
DeesContextmenu.openContextMenuWithOptions(contextMenuEvent, [
|
|
{
|
|
name: 'Parent Item',
|
|
iconName: 'folder',
|
|
action: async () => {}, // Parent items with submenus need an action
|
|
submenu: [
|
|
{
|
|
name: 'Child Item',
|
|
iconName: 'file',
|
|
action: async () => {
|
|
actionCalled = true;
|
|
console.log('Child action called');
|
|
}
|
|
},
|
|
{
|
|
name: 'Another Child',
|
|
iconName: 'fileText',
|
|
action: async () => console.log('Another child')
|
|
}
|
|
]
|
|
},
|
|
{
|
|
name: 'Regular Item',
|
|
iconName: 'box',
|
|
action: async () => console.log('Regular item')
|
|
}
|
|
]);
|
|
|
|
// Wait for main menu to appear
|
|
await new Promise(resolve => setTimeout(resolve, 150));
|
|
|
|
// Check main menu exists
|
|
const mainMenu = document.querySelector('dees-contextmenu');
|
|
expect(mainMenu).toBeInstanceOf(DeesContextmenu);
|
|
|
|
// Hover over "Parent Item" to trigger submenu
|
|
const parentItem = mainMenu!.shadowRoot!.querySelector('.menuitem');
|
|
expect(parentItem).toBeTruthy();
|
|
parentItem!.dispatchEvent(new MouseEvent('mouseenter', { bubbles: true }));
|
|
|
|
// Wait for submenu to appear
|
|
await new Promise(resolve => setTimeout(resolve, 300));
|
|
|
|
// Check submenu exists
|
|
const allMenus = document.querySelectorAll('dees-contextmenu');
|
|
expect(allMenus.length).toEqual(2); // Main menu and submenu
|
|
|
|
const submenu = allMenus[1];
|
|
expect(submenu).toBeTruthy();
|
|
|
|
// Click on "Child Item" in submenu
|
|
const childItem = submenu.shadowRoot!.querySelector('.menuitem');
|
|
expect(childItem).toBeTruthy();
|
|
childItem!.click();
|
|
|
|
// Wait for menus to close
|
|
await new Promise(resolve => setTimeout(resolve, 200));
|
|
|
|
// Verify action was called
|
|
expect(actionCalled).toEqual(true);
|
|
|
|
// Verify all menus are closed
|
|
const remainingMenus = document.querySelectorAll('dees-contextmenu');
|
|
expect(remainingMenus.length).toEqual(0);
|
|
|
|
// Clean up
|
|
testDiv.remove();
|
|
});
|
|
|
|
export default tap.start(); |