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

135
test/test.wysiwyg-blocks.browser.ts
View File

@@ -41,10 +41,12 @@ tap.test('BlockRegistry should have registered handlers', async () => {
});
tap.test('should render divider block using handler', async () => {
const dividerBlock: DeesWysiwygBlock = await webhelpers.fixture(
webhelpers.html`<dees-wysiwyg-block></dees-wysiwyg-block>`
);
// Wait for custom element to be defined
await customElements.whenDefined('dees-wysiwyg-block');
// Create element and set properties BEFORE attaching to DOM
const dividerBlock = document.createElement('dees-wysiwyg-block') as DeesWysiwygBlock;
// Set required handlers
dividerBlock.handlers = {
onInput: () => {},
@@ -54,31 +56,40 @@ tap.test('should render divider block using handler', async () => {
onCompositionStart: () => {},
onCompositionEnd: () => {}
};
// Set a divider block
dividerBlock.block = {
id: 'test-divider',
type: 'divider',
content: ' '
};
// Attach to DOM and wait for render
document.body.appendChild(dividerBlock);
await dividerBlock.updateComplete;
// Wait for firstUpdated to populate the container
await new Promise(resolve => setTimeout(resolve, 50));
// Check that the divider is rendered
const dividerElement = dividerBlock.shadowRoot?.querySelector('.block.divider');
expect(dividerElement).toBeDefined();
expect(dividerElement).toBeTruthy();
expect(dividerElement?.getAttribute('tabindex')).toEqual('0');
// Check for the divider icon
const icon = dividerBlock.shadowRoot?.querySelector('.divider-icon');
expect(icon).toBeDefined();
// Check for the hr element (divider uses <hr> not .divider-icon)
const hr = dividerBlock.shadowRoot?.querySelector('hr');
expect(hr).toBeTruthy();
// Clean up
document.body.removeChild(dividerBlock);
});
tap.test('should render paragraph block using handler', async () => {
const paragraphBlock: DeesWysiwygBlock = await webhelpers.fixture(
webhelpers.html`<dees-wysiwyg-block></dees-wysiwyg-block>`
);
// Wait for custom element to be defined
await customElements.whenDefined('dees-wysiwyg-block');
// Create element and set properties BEFORE attaching to DOM
const paragraphBlock = document.createElement('dees-wysiwyg-block') as DeesWysiwygBlock;
// Set required handlers
paragraphBlock.handlers = {
onInput: () => {},
@@ -89,30 +100,37 @@ tap.test('should render paragraph block using handler', async () => {
onCompositionEnd: () => {},
onMouseUp: () => {}
};
// Set a paragraph block
paragraphBlock.block = {
id: 'test-paragraph',
type: 'paragraph',
content: 'Test paragraph content'
};
// Attach to DOM and wait for render
document.body.appendChild(paragraphBlock);
await paragraphBlock.updateComplete;
// Wait for firstUpdated to populate the container
await new Promise(resolve => setTimeout(resolve, 50));
// Check that the paragraph is rendered
const paragraphElement = paragraphBlock.shadowRoot?.querySelector('.block.paragraph');
expect(paragraphElement).toBeDefined();
expect(paragraphElement).toBeTruthy();
expect(paragraphElement?.getAttribute('contenteditable')).toEqual('true');
expect(paragraphElement?.textContent).toEqual('Test paragraph content');
// Clean up
document.body.removeChild(paragraphBlock);
});
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
// Wait for custom element to be defined
await customElements.whenDefined('dees-wysiwyg-block');
// Test heading-1 - set properties BEFORE attaching to DOM
const heading1Block = document.createElement('dees-wysiwyg-block') as DeesWysiwygBlock;
heading1Block.handlers = {
onInput: () => {},
onKeyDown: () => {},
@@ -122,25 +140,28 @@ tap.test('should render heading blocks using handler', async () => {
onCompositionEnd: () => {},
onMouseUp: () => {}
};
heading1Block.block = {
id: 'test-h1',
type: 'heading-1',
content: 'Heading 1 Test'
};
document.body.appendChild(heading1Block);
await heading1Block.updateComplete;
// Wait for firstUpdated to populate the container
await new Promise(resolve => setTimeout(resolve, 50));
const h1Element = heading1Block.shadowRoot?.querySelector('.block.heading-1');
expect(h1Element).toBeDefined();
expect(h1Element).toBeTruthy();
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
// Clean up heading-1
document.body.removeChild(heading1Block);
// Test heading-2 - set properties BEFORE attaching to DOM
const heading2Block = document.createElement('dees-wysiwyg-block') as DeesWysiwygBlock;
heading2Block.handlers = {
onInput: () => {},
onKeyDown: () => {},
@@ -150,25 +171,33 @@ tap.test('should render heading blocks using handler', async () => {
onCompositionEnd: () => {},
onMouseUp: () => {}
};
heading2Block.block = {
id: 'test-h2',
type: 'heading-2',
content: 'Heading 2 Test'
};
document.body.appendChild(heading2Block);
await heading2Block.updateComplete;
// Wait for firstUpdated to populate the container
await new Promise(resolve => setTimeout(resolve, 50));
const h2Element = heading2Block.shadowRoot?.querySelector('.block.heading-2');
expect(h2Element).toBeDefined();
expect(h2Element).toBeTruthy();
expect(h2Element?.textContent).toEqual('Heading 2 Test');
// Clean up heading-2
document.body.removeChild(heading2Block);
});
tap.test('paragraph block handler methods should work', async () => {
const paragraphBlock: DeesWysiwygBlock = await webhelpers.fixture(
webhelpers.html`<dees-wysiwyg-block></dees-wysiwyg-block>`
);
// Wait for custom element to be defined
await customElements.whenDefined('dees-wysiwyg-block');
// Create element and set properties BEFORE attaching to DOM
const paragraphBlock = document.createElement('dees-wysiwyg-block') as DeesWysiwygBlock;
// Set required handlers
paragraphBlock.handlers = {
onInput: () => {},
@@ -179,27 +208,33 @@ tap.test('paragraph block handler methods should work', async () => {
onCompositionEnd: () => {},
onMouseUp: () => {}
};
paragraphBlock.block = {
id: 'test-methods',
type: 'paragraph',
content: 'Initial content'
};
document.body.appendChild(paragraphBlock);
await paragraphBlock.updateComplete;
// Wait for firstUpdated to populate the container
await new Promise(resolve => setTimeout(resolve, 50));
// 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');
// Clean up
document.body.removeChild(paragraphBlock);
});
export default tap.start();