dees-catalog/test/test.wysiwyg-dragdrop-visual.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 visual feedback - block movement', 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: 'Block 1' },
    { id: 'block2', type: 'paragraph', content: 'Block 2' },
    { id: 'block3', type: 'paragraph', content: 'Block 3' },
  ];
  element.renderBlocksProgrammatically();
  
  await element.updateComplete;
  
  const editorContent = element.shadowRoot!.querySelector('.editor-content') as HTMLDivElement;
  const block1 = editorContent.querySelector('[data-block-id="block1"]') as HTMLElement;
  
  // Manually start drag
  const mockDragEvent = {
    dataTransfer: {
      effectAllowed: '',
      setData: (type: string, data: string) => {},
      setDragImage: (img: any, x: number, y: number) => {}
    },
    clientY: 50,
    preventDefault: () => {},
  } as any;
  
  element.dragDropHandler.handleDragStart(mockDragEvent, element.blocks[0]);
  
  // Wait for dragging class
  await new Promise(resolve => setTimeout(resolve, 20));
  
  // Check dragging state
  console.log('Block 1 classes:', block1.className);
  console.log('Editor content classes:', editorContent.className);
  expect(block1.classList.contains('dragging')).toBeTrue();
  expect(editorContent.classList.contains('dragging')).toBeTrue();
  
  // Check drop indicator exists
  const dropIndicator = editorContent.querySelector('.drop-indicator') as HTMLElement;
  console.log('Drop indicator:', dropIndicator);
  expect(dropIndicator).toBeTruthy();
  
  // Test block movement calculation
  console.log('Testing updateBlockPositions...');
  
  // Access private method for testing
  const updateBlockPositions = element.dragDropHandler['updateBlockPositions'].bind(element.dragDropHandler);
  
  // Simulate dragging to different position
  updateBlockPositions(150); // Move down
  
  // Check if blocks have move classes
  const blocks = Array.from(editorContent.querySelectorAll('.block-wrapper'));
  console.log('Block classes after move:');
  blocks.forEach((block, i) => {
    console.log(`Block ${i}:`, block.className, 'transform:', (block as HTMLElement).style.getPropertyValue('--drag-offset'));
  });
  
  // Clean up
  element.dragDropHandler.handleDragEnd();
  document.body.removeChild(element);
});

tap.test('wysiwyg drop indicator positioning', 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: 'Paragraph 1' },
    { id: 'block2', type: 'heading-2', content: 'Heading 2' },
  ];
  element.renderBlocksProgrammatically();
  
  await element.updateComplete;
  
  const editorContent = element.shadowRoot!.querySelector('.editor-content') as HTMLDivElement;
  
  // Start dragging first block
  const mockDragEvent = {
    dataTransfer: {
      effectAllowed: '',
      setData: (type: string, data: string) => {},
      setDragImage: (img: any, x: number, y: number) => {}
    },
    clientY: 50,
    preventDefault: () => {},
  } as any;
  
  element.dragDropHandler.handleDragStart(mockDragEvent, element.blocks[0]);
  
  // Wait for initialization
  await new Promise(resolve => setTimeout(resolve, 20));
  
  // Get drop indicator
  const dropIndicator = editorContent.querySelector('.drop-indicator') as HTMLElement;
  expect(dropIndicator).toBeTruthy();
  
  // Check initial display state
  console.log('Drop indicator initial display:', dropIndicator.style.display);
  
  // Trigger updateBlockPositions to see drop indicator
  const updateBlockPositions = element.dragDropHandler['updateBlockPositions'].bind(element.dragDropHandler);
  updateBlockPositions(100);
  
  // Check drop indicator position
  console.log('Drop indicator after update:');
  console.log('- display:', dropIndicator.style.display);
  console.log('- top:', dropIndicator.style.top);
  console.log('- height:', dropIndicator.style.height);
  
  expect(dropIndicator.style.display).toEqual('block');
  expect(dropIndicator.style.top).toBeTruthy();
  expect(dropIndicator.style.height).toBeTruthy();
  
  // Clean up
  element.dragDropHandler.handleDragEnd();
  document.body.removeChild(element);
});

tap.start();