124 lines
3.6 KiB
TypeScript
124 lines
3.6 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 drag full flow without await', 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...');
|
|
element.dragDropHandler.handleDragStart(mockDragEvent, element.blocks[0]);
|
|
console.log('Drag started');
|
|
|
|
// Check immediate state
|
|
expect(element.dragDropHandler.dragState.draggedBlockId).toEqual('block1');
|
|
|
|
// Instead of await with setTimeout, use a done callback
|
|
return new Promise<void>((resolve) => {
|
|
console.log('Setting up delayed check...');
|
|
|
|
// Use regular setTimeout
|
|
setTimeout(() => {
|
|
console.log('In setTimeout callback');
|
|
|
|
try {
|
|
const block1 = element.shadowRoot!.querySelector('[data-block-id="block1"]') as HTMLElement;
|
|
const editorContent = element.shadowRoot!.querySelector('.editor-content') as HTMLDivElement;
|
|
|
|
console.log('Block has dragging class:', block1?.classList.contains('dragging'));
|
|
console.log('Editor has dragging class:', editorContent?.classList.contains('dragging'));
|
|
|
|
// Clean up
|
|
element.dragDropHandler.handleDragEnd();
|
|
document.body.removeChild(element);
|
|
|
|
resolve();
|
|
} catch (error) {
|
|
console.error('Error in setTimeout:', error);
|
|
throw error;
|
|
}
|
|
}, 50);
|
|
});
|
|
});
|
|
|
|
tap.test('identify the crash point', async () => {
|
|
console.log('Test started');
|
|
|
|
const element = document.createElement('dees-input-wysiwyg');
|
|
document.body.appendChild(element);
|
|
|
|
console.log('Element created');
|
|
await element.updateComplete;
|
|
|
|
console.log('Setting blocks');
|
|
element.blocks = [{ id: 'block1', type: 'paragraph', content: 'Test' }];
|
|
element.renderBlocksProgrammatically();
|
|
|
|
console.log('Waiting for update');
|
|
await element.updateComplete;
|
|
|
|
console.log('Creating mock event');
|
|
const mockDragEvent = {
|
|
dataTransfer: {
|
|
effectAllowed: '',
|
|
setData: () => {},
|
|
setDragImage: () => {}
|
|
},
|
|
clientY: 100,
|
|
preventDefault: () => {},
|
|
} as any;
|
|
|
|
console.log('Calling handleDragStart');
|
|
element.dragDropHandler.handleDragStart(mockDragEvent, element.blocks[0]);
|
|
|
|
console.log('handleDragStart completed');
|
|
|
|
// Try different wait methods
|
|
console.log('About to wait...');
|
|
|
|
// Method 1: Direct promise
|
|
await Promise.resolve();
|
|
console.log('Promise.resolve completed');
|
|
|
|
// Method 2: setTimeout 0
|
|
await new Promise(resolve => setTimeout(resolve, 0));
|
|
console.log('setTimeout 0 completed');
|
|
|
|
// Method 3: requestAnimationFrame
|
|
await new Promise(resolve => requestAnimationFrame(() => resolve(undefined)));
|
|
console.log('requestAnimationFrame completed');
|
|
|
|
// Clean up
|
|
element.dragDropHandler.handleDragEnd();
|
|
document.body.removeChild(element);
|
|
console.log('Cleanup completed');
|
|
});
|
|
|
|
tap.start(); |