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

import { expect, tap, webhelpers } from '@git.zone/tstest/tapbundle';
import { DeesInputWysiwyg } from '../ts_web/elements/wysiwyg/dees-input-wysiwyg.js';
import { DeesWysiwygBlock } from '../ts_web/elements/wysiwyg/dees-wysiwyg-block.js';

tap.test('Phase 3: Quote block should render and work correctly', async () => {
  const editor: DeesInputWysiwyg = await webhelpers.fixture(
    webhelpers.html`<dees-input-wysiwyg></dees-input-wysiwyg>`
  );
  
  // Import a quote block
  editor.importBlocks([
    { id: 'quote-1', type: 'quote', content: 'This is a famous quote' }
  ]);
  
  await editor.updateComplete;
  await new Promise(resolve => setTimeout(resolve, 100));
  
  // Check if quote block was rendered
  const quoteBlockWrapper = editor.shadowRoot?.querySelector('[data-block-id="quote-1"]');
  const quoteBlockComponent = quoteBlockWrapper?.querySelector('dees-wysiwyg-block') as DeesWysiwygBlock;
  expect(quoteBlockComponent).toBeTruthy();
  
  const quoteContainer = quoteBlockComponent?.shadowRoot?.querySelector('.wysiwyg-block-container') as HTMLElement;
  const quoteElement = quoteContainer?.querySelector('.block.quote') as HTMLElement;
  expect(quoteElement).toBeTruthy();
  expect(quoteElement?.textContent).toEqual('This is a famous quote');
  
  // Check if styles are applied (border-left for quote)
  const computedStyle = window.getComputedStyle(quoteElement);
  expect(computedStyle.borderLeftStyle).toEqual('solid');
  expect(computedStyle.fontStyle).toEqual('italic');
});

tap.test('Phase 3: Code block should render and handle tab correctly', async () => {
  const editor: DeesInputWysiwyg = await webhelpers.fixture(
    webhelpers.html`<dees-input-wysiwyg></dees-input-wysiwyg>`
  );
  
  // Import a code block
  editor.importBlocks([
    { id: 'code-1', type: 'code', content: 'const x = 42;', metadata: { language: 'javascript' } }
  ]);
  
  await editor.updateComplete;
  await new Promise(resolve => setTimeout(resolve, 100));
  
  // Check if code block was rendered
  const codeBlockWrapper = editor.shadowRoot?.querySelector('[data-block-id="code-1"]');
  const codeBlockComponent = codeBlockWrapper?.querySelector('dees-wysiwyg-block') as DeesWysiwygBlock;
  const codeContainer = codeBlockComponent?.shadowRoot?.querySelector('.wysiwyg-block-container') as HTMLElement;
  const codeElement = codeContainer?.querySelector('.block.code') as HTMLElement;
  
  expect(codeElement).toBeTruthy();
  expect(codeElement?.textContent).toEqual('const x = 42;');
  
  // Check if language label is shown
  const languageLabel = codeContainer?.querySelector('.code-language');
  expect(languageLabel?.textContent).toEqual('javascript');
  
  // Check if monospace font is applied
  const computedStyle = window.getComputedStyle(codeElement);
  expect(computedStyle.fontFamily).toContain('monospace');
});

tap.test('Phase 3: List block should render correctly', async () => {
  const editor: DeesInputWysiwyg = await webhelpers.fixture(
    webhelpers.html`<dees-input-wysiwyg></dees-input-wysiwyg>`
  );
  
  // Import a list block
  editor.importBlocks([
    { id: 'list-1', type: 'list', content: 'First item\nSecond item\nThird item' }
  ]);
  
  await editor.updateComplete;
  await new Promise(resolve => setTimeout(resolve, 100));
  
  // Check if list block was rendered
  const listBlockWrapper = editor.shadowRoot?.querySelector('[data-block-id="list-1"]');
  const listBlockComponent = listBlockWrapper?.querySelector('dees-wysiwyg-block') as DeesWysiwygBlock;
  const listContainer = listBlockComponent?.shadowRoot?.querySelector('.wysiwyg-block-container') as HTMLElement;
  const listElement = listContainer?.querySelector('.block.list') as HTMLElement;
  
  expect(listElement).toBeTruthy();
  
  // Check if list items were created
  const listItems = listElement?.querySelectorAll('li');
  expect(listItems?.length).toEqual(3);
  expect(listItems?.[0].textContent).toEqual('First item');
  expect(listItems?.[1].textContent).toEqual('Second item');
  expect(listItems?.[2].textContent).toEqual('Third item');
  
  // Check if it's an unordered list by default
  const ulElement = listElement?.querySelector('ul');
  expect(ulElement).toBeTruthy();
});

tap.test('Phase 3: Quote block split should work', async () => {
  const editor: DeesInputWysiwyg = await webhelpers.fixture(
    webhelpers.html`<dees-input-wysiwyg></dees-input-wysiwyg>`
  );
  
  // Import a quote block
  editor.importBlocks([
    { id: 'quote-split', type: 'quote', content: 'To be or not to be' }
  ]);
  
  await editor.updateComplete;
  await new Promise(resolve => setTimeout(resolve, 100));
  
  // Get the quote block
  const quoteBlockWrapper = editor.shadowRoot?.querySelector('[data-block-id="quote-split"]');
  const quoteBlockComponent = quoteBlockWrapper?.querySelector('dees-wysiwyg-block') as DeesWysiwygBlock;
  const quoteContainer = quoteBlockComponent?.shadowRoot?.querySelector('.wysiwyg-block-container') as HTMLElement;
  const quoteElement = quoteContainer?.querySelector('.block.quote') as HTMLElement;
  
  // Focus and set cursor after "To be"
  quoteElement.focus();
  const textNode = quoteElement.firstChild;
  if (textNode && textNode.nodeType === Node.TEXT_NODE) {
    const range = document.createRange();
    const selection = window.getSelection();
    range.setStart(textNode, 5); // After "To be"
    range.setEnd(textNode, 5);
    selection?.removeAllRanges();
    selection?.addRange(range);
    
    await new Promise(resolve => setTimeout(resolve, 100));
    
    // Press Enter to split
    const enterEvent = new KeyboardEvent('keydown', {
      key: 'Enter',
      code: 'Enter',
      bubbles: true,
      cancelable: true,
      composed: true
    });
    
    quoteElement.dispatchEvent(enterEvent);
    await new Promise(resolve => setTimeout(resolve, 200));
    
    // Check if split happened correctly
    expect(editor.blocks.length).toEqual(2);
    expect(editor.blocks[0].content).toEqual('To be');
    expect(editor.blocks[1].content).toEqual(' or not to be');
    expect(editor.blocks[1].type).toEqual('paragraph'); // New block should be paragraph
  }
});

export default tap.start();