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

import { tap, expect, webhelpers } from '@push.rocks/tapbundle';

import * as deesCatalog from '../ts_web/index.js';
import { BlockRegistry } from '../ts_web/elements/wysiwyg/blocks/block.registry.js';
import { DeesWysiwygBlock } from '../ts_web/elements/wysiwyg/dees-wysiwyg-block.js';

// Import block registration to ensure handlers are registered
import '../ts_web/elements/wysiwyg/wysiwyg.blockregistration.js';

tap.test('BlockRegistry should have registered handlers', async () => {
  // Test divider handler
  const dividerHandler = BlockRegistry.getHandler('divider');
  expect(dividerHandler).toBeDefined();
  expect(dividerHandler?.type).toEqual('divider');

  // Test paragraph handler
  const paragraphHandler = BlockRegistry.getHandler('paragraph');
  expect(paragraphHandler).toBeDefined();
  expect(paragraphHandler?.type).toEqual('paragraph');

  // Test heading handlers
  const heading1Handler = BlockRegistry.getHandler('heading-1');
  expect(heading1Handler).toBeDefined();
  expect(heading1Handler?.type).toEqual('heading-1');

  const heading2Handler = BlockRegistry.getHandler('heading-2');
  expect(heading2Handler).toBeDefined();
  expect(heading2Handler?.type).toEqual('heading-2');

  const heading3Handler = BlockRegistry.getHandler('heading-3');
  expect(heading3Handler).toBeDefined();
  expect(heading3Handler?.type).toEqual('heading-3');

  // Test that getAllTypes returns all registered types
  const allTypes = BlockRegistry.getAllTypes();
  expect(allTypes).toContain('divider');
  expect(allTypes).toContain('paragraph');
  expect(allTypes).toContain('heading-1');
  expect(allTypes).toContain('heading-2');
  expect(allTypes).toContain('heading-3');
});

tap.test('should render divider block using handler', async () => {
  const dividerBlock: DeesWysiwygBlock = await webhelpers.fixture(
    webhelpers.html`<dees-wysiwyg-block></dees-wysiwyg-block>`
  );
  
  // Set required handlers
  dividerBlock.handlers = {
    onInput: () => {},
    onKeyDown: () => {},
    onFocus: () => {},
    onBlur: () => {},
    onCompositionStart: () => {},
    onCompositionEnd: () => {}
  };
  
  // Set a divider block
  dividerBlock.block = {
    id: 'test-divider',
    type: 'divider',
    content: ' '
  };
  
  await dividerBlock.updateComplete;
  
  // Check that the divider is rendered
  const dividerElement = dividerBlock.shadowRoot?.querySelector('.block.divider');
  expect(dividerElement).toBeDefined();
  expect(dividerElement?.getAttribute('tabindex')).toEqual('0');
  
  // Check for the divider icon
  const icon = dividerBlock.shadowRoot?.querySelector('.divider-icon');
  expect(icon).toBeDefined();
});

tap.test('should render paragraph block using handler', async () => {
  const paragraphBlock: DeesWysiwygBlock = await webhelpers.fixture(
    webhelpers.html`<dees-wysiwyg-block></dees-wysiwyg-block>`
  );
  
  // Set required handlers
  paragraphBlock.handlers = {
    onInput: () => {},
    onKeyDown: () => {},
    onFocus: () => {},
    onBlur: () => {},
    onCompositionStart: () => {},
    onCompositionEnd: () => {},
    onMouseUp: () => {}
  };
  
  // Set a paragraph block
  paragraphBlock.block = {
    id: 'test-paragraph',
    type: 'paragraph',
    content: 'Test paragraph content'
  };
  
  await paragraphBlock.updateComplete;
  
  // Check that the paragraph is rendered
  const paragraphElement = paragraphBlock.shadowRoot?.querySelector('.block.paragraph');
  expect(paragraphElement).toBeDefined();
  expect(paragraphElement?.getAttribute('contenteditable')).toEqual('true');
  expect(paragraphElement?.textContent).toEqual('Test paragraph content');
});

tap.test('should render heading blocks using handler', async () => {
  // Test heading-1
  const heading1Block: DeesWysiwygBlock = await webhelpers.fixture(
    webhelpers.html`<dees-wysiwyg-block></dees-wysiwyg-block>`
  );
  
  // Set required handlers
  heading1Block.handlers = {
    onInput: () => {},
    onKeyDown: () => {},
    onFocus: () => {},
    onBlur: () => {},
    onCompositionStart: () => {},
    onCompositionEnd: () => {},
    onMouseUp: () => {}
  };
  
  heading1Block.block = {
    id: 'test-h1',
    type: 'heading-1',
    content: 'Heading 1 Test'
  };
  
  await heading1Block.updateComplete;
  
  const h1Element = heading1Block.shadowRoot?.querySelector('.block.heading-1');
  expect(h1Element).toBeDefined();
  expect(h1Element?.textContent).toEqual('Heading 1 Test');
  
  // Test heading-2
  const heading2Block: DeesWysiwygBlock = await webhelpers.fixture(
    webhelpers.html`<dees-wysiwyg-block></dees-wysiwyg-block>`
  );
  
  // Set required handlers
  heading2Block.handlers = {
    onInput: () => {},
    onKeyDown: () => {},
    onFocus: () => {},
    onBlur: () => {},
    onCompositionStart: () => {},
    onCompositionEnd: () => {},
    onMouseUp: () => {}
  };
  
  heading2Block.block = {
    id: 'test-h2',
    type: 'heading-2',
    content: 'Heading 2 Test'
  };
  
  await heading2Block.updateComplete;
  
  const h2Element = heading2Block.shadowRoot?.querySelector('.block.heading-2');
  expect(h2Element).toBeDefined();
  expect(h2Element?.textContent).toEqual('Heading 2 Test');
});

tap.test('paragraph block handler methods should work', async () => {
  const paragraphBlock: DeesWysiwygBlock = await webhelpers.fixture(
    webhelpers.html`<dees-wysiwyg-block></dees-wysiwyg-block>`
  );
  
  // Set required handlers
  paragraphBlock.handlers = {
    onInput: () => {},
    onKeyDown: () => {},
    onFocus: () => {},
    onBlur: () => {},
    onCompositionStart: () => {},
    onCompositionEnd: () => {},
    onMouseUp: () => {}
  };
  
  paragraphBlock.block = {
    id: 'test-methods',
    type: 'paragraph',
    content: 'Initial content'
  };
  
  await paragraphBlock.updateComplete;
  
  // Test getContent
  const content = paragraphBlock.getContent();
  expect(content).toEqual('Initial content');
  
  // Test setContent
  paragraphBlock.setContent('Updated content');
  await paragraphBlock.updateComplete;
  expect(paragraphBlock.getContent()).toEqual('Updated content');
  
  // Test that the DOM is updated
  const paragraphElement = paragraphBlock.shadowRoot?.querySelector('.block.paragraph');
  expect(paragraphElement?.textContent).toEqual('Updated content');
});

export default tap.start();