62 lines
2.4 KiB
TypeScript
62 lines
2.4 KiB
TypeScript
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('Selection highlighting basic test', async () => {
|
|
const editor: DeesInputWysiwyg = await webhelpers.fixture(
|
|
webhelpers.html`<dees-input-wysiwyg></dees-input-wysiwyg>`
|
|
);
|
|
|
|
// Import two blocks
|
|
editor.importBlocks([
|
|
{ id: 'para-1', type: 'paragraph', content: 'First paragraph' },
|
|
{ id: 'head-1', type: 'heading-1', content: 'First heading' }
|
|
]);
|
|
|
|
await editor.updateComplete;
|
|
await new Promise(resolve => setTimeout(resolve, 500));
|
|
|
|
// Get paragraph element
|
|
const paraWrapper = editor.shadowRoot?.querySelector('[data-block-id="para-1"]');
|
|
const paraComponent = paraWrapper?.querySelector('dees-wysiwyg-block') as DeesWysiwygBlock;
|
|
const paraBlock = paraComponent?.shadowRoot?.querySelector('.block.paragraph') as HTMLElement;
|
|
|
|
// Get heading element
|
|
const headWrapper = editor.shadowRoot?.querySelector('[data-block-id="head-1"]');
|
|
const headComponent = headWrapper?.querySelector('dees-wysiwyg-block') as DeesWysiwygBlock;
|
|
const headBlock = headComponent?.shadowRoot?.querySelector('.block.heading-1') as HTMLElement;
|
|
|
|
console.log('Found elements:', {
|
|
paraBlock: !!paraBlock,
|
|
headBlock: !!headBlock
|
|
});
|
|
|
|
// Focus paragraph
|
|
paraBlock.focus();
|
|
await new Promise(resolve => setTimeout(resolve, 100));
|
|
|
|
// Check classes
|
|
console.log('Paragraph classes:', paraBlock.className);
|
|
console.log('Heading classes:', headBlock.className);
|
|
|
|
// Check isSelected property
|
|
console.log('Paragraph component isSelected:', paraComponent.isSelected);
|
|
console.log('Heading component isSelected:', headComponent.isSelected);
|
|
|
|
// Focus heading
|
|
headBlock.focus();
|
|
await new Promise(resolve => setTimeout(resolve, 100));
|
|
|
|
// Check classes again
|
|
console.log('\nAfter focusing heading:');
|
|
console.log('Paragraph classes:', paraBlock.className);
|
|
console.log('Heading classes:', headBlock.className);
|
|
console.log('Paragraph component isSelected:', paraComponent.isSelected);
|
|
console.log('Heading component isSelected:', headComponent.isSelected);
|
|
|
|
// Check that heading is selected
|
|
expect(headBlock.classList.contains('selected')).toBeTrue();
|
|
expect(paraBlock.classList.contains('selected')).toBeFalse();
|
|
});
|
|
|
|
export default tap.start(); |