108 lines
3.3 KiB
TypeScript
108 lines
3.3 KiB
TypeScript
import { expect, tap } from '@git.zone/tstest/tapbundle';
|
|
import { DeesInputWysiwyg } from '../ts_web/elements/wysiwyg/dees-input-wysiwyg.js';
|
|
|
|
// Initialize the element
|
|
DeesInputWysiwyg;
|
|
|
|
tap.test('wysiwyg drop indicator creation', async () => {
|
|
const element = document.createElement('dees-input-wysiwyg');
|
|
document.body.appendChild(element);
|
|
|
|
await element.updateComplete;
|
|
|
|
// Set initial content
|
|
element.blocks = [
|
|
{ id: 'block1', type: 'paragraph', content: 'Test block' },
|
|
];
|
|
element.renderBlocksProgrammatically();
|
|
|
|
await element.updateComplete;
|
|
|
|
// Check editorContentRef
|
|
console.log('editorContentRef exists:', !!element.editorContentRef);
|
|
console.log('editorContentRef tagName:', element.editorContentRef?.tagName);
|
|
expect(element.editorContentRef).toBeTruthy();
|
|
|
|
// Check initial state - no drop indicator
|
|
let dropIndicator = element.shadowRoot!.querySelector('.drop-indicator');
|
|
console.log('Drop indicator before drag:', dropIndicator);
|
|
expect(dropIndicator).toBeFalsy();
|
|
|
|
// Manually call createDropIndicator
|
|
try {
|
|
console.log('Calling createDropIndicator...');
|
|
element.dragDropHandler['createDropIndicator']();
|
|
console.log('createDropIndicator succeeded');
|
|
} catch (error) {
|
|
console.error('Error creating drop indicator:', error);
|
|
throw error;
|
|
}
|
|
|
|
// Check drop indicator was created
|
|
dropIndicator = element.shadowRoot!.querySelector('.drop-indicator');
|
|
console.log('Drop indicator after creation:', dropIndicator);
|
|
console.log('Drop indicator parent:', dropIndicator?.parentElement?.className);
|
|
expect(dropIndicator).toBeTruthy();
|
|
expect(dropIndicator!.style.display).toEqual('none');
|
|
|
|
// Clean up
|
|
document.body.removeChild(element);
|
|
});
|
|
|
|
tap.test('wysiwyg drag initialization with drop indicator', async () => {
|
|
const element = document.createElement('dees-input-wysiwyg');
|
|
document.body.appendChild(element);
|
|
|
|
await element.updateComplete;
|
|
|
|
// Set initial content
|
|
element.blocks = [
|
|
{ id: 'block1', type: 'paragraph', content: 'Test block' },
|
|
];
|
|
element.renderBlocksProgrammatically();
|
|
|
|
await element.updateComplete;
|
|
|
|
// Mock drag event
|
|
const mockDragEvent = {
|
|
dataTransfer: {
|
|
effectAllowed: '',
|
|
setData: (type: string, data: string) => {
|
|
console.log('setData:', type, data);
|
|
},
|
|
setDragImage: (img: any, x: number, y: number) => {
|
|
console.log('setDragImage');
|
|
}
|
|
},
|
|
clientY: 100,
|
|
preventDefault: () => {},
|
|
} as any;
|
|
|
|
console.log('Starting drag...');
|
|
|
|
try {
|
|
element.dragDropHandler.handleDragStart(mockDragEvent, element.blocks[0]);
|
|
console.log('Drag start succeeded');
|
|
} catch (error) {
|
|
console.error('Error during drag start:', error);
|
|
throw error;
|
|
}
|
|
|
|
// Wait for async operations
|
|
await new Promise(resolve => setTimeout(resolve, 20));
|
|
|
|
// Check drop indicator exists
|
|
const dropIndicator = element.shadowRoot!.querySelector('.drop-indicator');
|
|
console.log('Drop indicator after drag start:', dropIndicator);
|
|
expect(dropIndicator).toBeTruthy();
|
|
|
|
// Check drag state
|
|
console.log('Drag state:', element.dragDropHandler.dragState);
|
|
expect(element.dragDropHandler.dragState.draggedBlockId).toEqual('block1');
|
|
|
|
// Clean up
|
|
element.dragDropHandler.handleDragEnd();
|
|
document.body.removeChild(element);
|
|
});
|
|
|
|
tap.start(); |