dees-catalog/test/test.wysiwyg-dragissue.browser.ts

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();