design.estate/dees-catalog
3
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

fix(tests): make WYSIWYG tests more robust and deterministic by initializing and attaching elements consistently, awaiting customElements/firstUpdated, adjusting selectors and assertions, and cleaning up DOM after tests

Browse Source
This commit is contained in:
Jürgen Kunz
2025-12-30 12:24:16 +00:00
parent 7acca2c8e7
commit 05409e89d2
9 changed files with 227 additions and 200 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
test/test.wysiwyg-selection-highlight.browser.ts
View File

@@ -74,31 +74,33 @@ tap.test('Selection highlighting should work consistently for all block types',
const quoteHasSelected = quoteElement.classList.contains('selected');
console.log('Quote has selected class:', quoteHasSelected);
// Test code highlighting
// Test code highlighting - code blocks use .code-editor instead of .block.code
console.log('\nTesting code highlighting...');
const codeWrapper = editor.shadowRoot?.querySelector('[data-block-id="code-1"]');
const codeComponent = codeWrapper?.querySelector('dees-wysiwyg-block') as DeesWysiwygBlock;
const codeContainer = codeComponent?.shadowRoot?.querySelector('.wysiwyg-block-container') as HTMLElement;
const codeElement = codeContainer?.querySelector('.block.code') as HTMLElement;
const codeElement = codeContainer?.querySelector('.code-editor') as HTMLElement;
const codeBlockContainer = codeContainer?.querySelector('.code-block-container') as HTMLElement;
// Focus code to select it
codeElement.focus();
await new Promise(resolve => setTimeout(resolve, 100));
// Check if code has selected class
const codeHasSelected = codeElement.classList.contains('selected');
console.log('Code has selected class:', codeHasSelected);
// For code blocks, the selection is on the container, not the editor
const codeHasSelected = codeBlockContainer?.classList.contains('selected');
console.log('Code container has selected class:', codeHasSelected);
// Focus back on paragraph and check if others are deselected
console.log('\nFocusing back on paragraph...');
paraElement.focus();
await new Promise(resolve => setTimeout(resolve, 100));
// Check that only paragraph is selected
expect(paraElement.classList.contains('selected')).toBeTrue();
expect(headingElement.classList.contains('selected')).toBeFalse();
expect(quoteElement.classList.contains('selected')).toBeFalse();
expect(codeElement.classList.contains('selected')).toBeFalse();
// Code blocks use different selection structure
expect(codeBlockContainer?.classList.contains('selected') || false).toBeFalse();
console.log('Selection highlighting test complete');
});