dees-catalog/test/test.wysiwyg-dragdrop-simple.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 handler initialization', async () => {
  const element = document.createElement('dees-input-wysiwyg');
  document.body.appendChild(element);
  
  // Wait for element to be ready
  await element.updateComplete;
  
  // Check that drag handler is initialized
  expect(element.dragDropHandler).toBeTruthy();
  
  // Set initial content with multiple blocks
  element.blocks = [
    { id: 'block1', type: 'paragraph', content: 'First paragraph' },
    { id: 'block2', type: 'paragraph', content: 'Second paragraph' },
  ];
  element.renderBlocksProgrammatically();
  
  await element.updateComplete;
  
  // Check that editor content ref exists
  console.log('editorContentRef:', element.editorContentRef);
  expect(element.editorContentRef).toBeTruthy();
  
  // Check that blocks are rendered
  const blockWrappers = element.shadowRoot!.querySelectorAll('.block-wrapper');
  console.log('Number of block wrappers:', blockWrappers.length);
  expect(blockWrappers.length).toEqual(2);
  
  // Check drag handles
  const dragHandles = element.shadowRoot!.querySelectorAll('.drag-handle');
  console.log('Number of drag handles:', dragHandles.length);
  expect(dragHandles.length).toEqual(2);
  
  // Clean up
  document.body.removeChild(element);
});

tap.test('wysiwyg drag start behavior', 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;
  
  const dragHandle = element.shadowRoot!.querySelector('.drag-handle') as HTMLElement;
  expect(dragHandle).toBeTruthy();
  
  // Check that drag handle has draggable attribute
  console.log('Drag handle draggable:', dragHandle.draggable);
  expect(dragHandle.draggable).toBeTrue();
  
  // Test drag handler state before drag
  console.log('Initial drag state:', element.dragDropHandler.dragState);
  expect(element.dragDropHandler.dragState.draggedBlockId).toBeNull();
  
  // Try to manually call handleDragStart
  const mockDragEvent = {
    dataTransfer: {
      effectAllowed: '',
      setData: (type: string, data: string) => {
        console.log('setData called with:', type, data);
      },
      setDragImage: (img: any, x: number, y: number) => {
        console.log('setDragImage called');
      }
    },
    clientY: 100,
    preventDefault: () => {},
  } as any;
  
  element.dragDropHandler.handleDragStart(mockDragEvent, element.blocks[0]);
  
  // Check drag state after drag start
  console.log('Drag state after start:', element.dragDropHandler.dragState);
  expect(element.dragDropHandler.dragState.draggedBlockId).toEqual('block1');
  
  // Clean up
  element.dragDropHandler.handleDragEnd();
  document.body.removeChild(element);
});

tap.start();