68 lines
2.4 KiB
TypeScript
68 lines
2.4 KiB
TypeScript
import { expect, tap } from '@git.zone/tstest/tapbundle';
|
|
import { DeesInputWysiwyg } from '../ts_web/elements/wysiwyg/dees-input-wysiwyg.js';
|
|
import { DeesContextmenu } from '../ts_web/elements/dees-contextmenu.js';
|
|
|
|
tap.test('should show context menu on WYSIWYG blocks', async () => {
|
|
// Create WYSIWYG editor
|
|
const wysiwygEditor = new DeesInputWysiwyg();
|
|
wysiwygEditor.value = '<p>Test paragraph</p><h1>Test heading</h1>';
|
|
document.body.appendChild(wysiwygEditor);
|
|
|
|
// Wait for editor to be ready
|
|
await wysiwygEditor.updateComplete;
|
|
await new Promise(resolve => setTimeout(resolve, 100));
|
|
|
|
// Get the first block element
|
|
const firstBlockWrapper = wysiwygEditor.shadowRoot!.querySelector('.block-wrapper');
|
|
expect(firstBlockWrapper).toBeTruthy();
|
|
|
|
const blockComponent = firstBlockWrapper!.querySelector('dees-wysiwyg-block') as any;
|
|
expect(blockComponent).toBeTruthy();
|
|
|
|
// Wait for block to be ready
|
|
await blockComponent.updateComplete;
|
|
|
|
// Get the editable content inside the block's shadow DOM
|
|
const editableBlock = blockComponent.shadowRoot!.querySelector('.block');
|
|
expect(editableBlock).toBeTruthy();
|
|
|
|
// Simulate right-click on the editable block
|
|
const contextMenuEvent = new MouseEvent('contextmenu', {
|
|
clientX: 200,
|
|
clientY: 200,
|
|
bubbles: true,
|
|
cancelable: true,
|
|
composed: true // Important for shadow DOM
|
|
});
|
|
|
|
editableBlock!.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 WYSIWYG block are rendered
|
|
const menuItems = contextMenu!.shadowRoot!.querySelectorAll('.menuitem');
|
|
const menuTexts = Array.from(menuItems).map(item =>
|
|
item.querySelector('.menuitem-text')?.textContent?.trim()
|
|
);
|
|
|
|
// Should have "Change Type" and "Delete Block" items
|
|
expect(menuTexts).toContain('Change Type');
|
|
expect(menuTexts).toContain('Delete Block');
|
|
|
|
// Check if "Change Type" has submenu indicator
|
|
const changeTypeItem = Array.from(menuItems).find(item =>
|
|
item.querySelector('.menuitem-text')?.textContent?.trim() === 'Change Type'
|
|
);
|
|
expect(changeTypeItem?.classList.contains('has-submenu')).toEqual(true);
|
|
|
|
// Clean up
|
|
contextMenu!.remove();
|
|
wysiwygEditor.remove();
|
|
});
|
|
|
|
export default tap.start(); |