98 lines
3.2 KiB
TypeScript
98 lines
3.2 KiB
TypeScript
import { tap, expect, 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('should split paragraph content on Enter key', async () => {
|
|
// Create the wysiwyg editor
|
|
const editor: DeesInputWysiwyg = await webhelpers.fixture(
|
|
webhelpers.html`<dees-input-wysiwyg></dees-input-wysiwyg>`
|
|
);
|
|
|
|
// Import a test paragraph
|
|
editor.importBlocks([{
|
|
id: 'test-para-1',
|
|
type: 'paragraph',
|
|
content: 'Hello World'
|
|
}]);
|
|
|
|
await editor.updateComplete;
|
|
|
|
// Wait for blocks to render
|
|
await new Promise(resolve => setTimeout(resolve, 100));
|
|
|
|
// Get the block wrapper and component
|
|
const blockWrapper = editor.shadowRoot?.querySelector('[data-block-id="test-para-1"]');
|
|
expect(blockWrapper).toBeDefined();
|
|
|
|
const blockComponent = blockWrapper?.querySelector('dees-wysiwyg-block') as DeesWysiwygBlock;
|
|
expect(blockComponent).toBeDefined();
|
|
expect(blockComponent.block.type).toEqual('paragraph');
|
|
|
|
// Wait for block to render
|
|
await blockComponent.updateComplete;
|
|
|
|
// Test getSplitContent
|
|
console.log('Testing getSplitContent...');
|
|
const splitResult = blockComponent.getSplitContent();
|
|
console.log('Split result:', splitResult);
|
|
|
|
// Since we haven't set cursor position, it might return null or split at start
|
|
// This is just to test if the method is callable
|
|
expect(typeof blockComponent.getSplitContent).toEqual('function');
|
|
});
|
|
|
|
tap.test('should handle Enter key press in paragraph', async () => {
|
|
// Create the wysiwyg editor
|
|
const editor: DeesInputWysiwyg = await webhelpers.fixture(
|
|
webhelpers.html`<dees-input-wysiwyg></dees-input-wysiwyg>`
|
|
);
|
|
|
|
// Import a test paragraph
|
|
editor.importBlocks([{
|
|
id: 'test-enter-1',
|
|
type: 'paragraph',
|
|
content: 'First part|Second part' // | marks where we'll simulate cursor
|
|
}]);
|
|
|
|
await editor.updateComplete;
|
|
await new Promise(resolve => setTimeout(resolve, 100));
|
|
|
|
// Check initial state
|
|
expect(editor.blocks.length).toEqual(1);
|
|
expect(editor.blocks[0].content).toEqual('First part|Second part');
|
|
|
|
// Get the block element
|
|
const blockWrapper = editor.shadowRoot?.querySelector('[data-block-id="test-enter-1"]');
|
|
const blockComponent = blockWrapper?.querySelector('dees-wysiwyg-block') as DeesWysiwygBlock;
|
|
const blockElement = blockComponent.shadowRoot?.querySelector('.block.paragraph') as HTMLDivElement;
|
|
|
|
expect(blockElement).toBeDefined();
|
|
|
|
// Set content without the | marker
|
|
blockElement.textContent = 'First partSecond part';
|
|
|
|
// Focus the block
|
|
blockElement.focus();
|
|
|
|
// Create and dispatch Enter key event
|
|
const enterEvent = new KeyboardEvent('keydown', {
|
|
key: 'Enter',
|
|
code: 'Enter',
|
|
bubbles: true,
|
|
cancelable: true,
|
|
composed: true
|
|
});
|
|
|
|
// Dispatch the event
|
|
blockElement.dispatchEvent(enterEvent);
|
|
|
|
// Wait for processing
|
|
await new Promise(resolve => setTimeout(resolve, 200));
|
|
|
|
// Check if block was split (this might not work perfectly in test environment)
|
|
console.log('Blocks after Enter:', editor.blocks.length);
|
|
console.log('Block contents:', editor.blocks.map(b => b.content));
|
|
});
|
|
|
|
export default tap.start(); |