52 lines
1.7 KiB
TypeScript
52 lines
1.7 KiB
TypeScript
 
|
import { describe, test, expect, vi } from 'vitest';
|
||
|
|
import React from 'react';
|
||
|
|
import { createRoot, Root } from 'react-dom/client';
|
||
|
|
import { act } from 'react-dom/test-utils';
|
||
|
|
|
||
|
|
vi.mock('@craftjs/core', () => ({
|
||
|
|
useNode: (collect?: (node: any) => any) => {
|
||
|
|
const node = { events: { selected: false } };
|
||
|
|
return {
|
||
|
|
connectors: { connect: (el: any) => el, drag: (el: any) => el },
|
||
|
|
actions: { setProp: vi.fn() },
|
||
|
|
...(collect ? collect(node) : {}),
|
||
|
|
};
|
||
|
|
},
|
||
|
|
}));
|
||
|
|
|
||
|
|
import { HtmlBlock } from './HtmlBlock';
|
||
|
|
|
||
|
|
let container: HTMLDivElement;
|
||
|
|
let root: Root;
|
||
|
|
|
||
|
|
function render(ui: React.ReactElement) {
|
||
|
|
container = document.createElement('div');
|
||
|
|
document.body.appendChild(container);
|
||
|
|
act(() => {
|
||
|
|
root = createRoot(container);
|
||
|
|
root.render(ui);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
describe('HtmlBlock render ignores the style prop (matches toHtml)', () => {
|
||
|
|
test('a stored backgroundColor/color/padding is NOT applied to the wrapper', () => {
|
||
|
|
render(
|
||
|
|
React.createElement(HtmlBlock as any, {
|
||
|
|
code: '<p>hello</p>',
|
||
|
|
style: { backgroundColor: 'rgb(255, 0, 0)', color: 'rgb(0, 0, 255)', padding: '40px' },
|
||
|
|
}),
|
||
|
|
);
|
||
|
|
const wrapper = container.firstElementChild as HTMLElement;
|
||
|
|
expect(wrapper.style.backgroundColor).toBe('');
|
||
|
|
expect(wrapper.style.color).toBe('');
|
||
|
|
expect(wrapper.style.padding).toBe('');
|
||
|
|
});
|
||
|
|
|
||
|
|
test('the editor affordances survive: minHeight is kept, content still renders', () => {
|
||
|
|
render(React.createElement(HtmlBlock as any, { code: '<p>hello</p>', style: {} }));
|
||
|
|
const wrapper = container.firstElementChild as HTMLElement;
|
||
|
|
expect(wrapper.style.minHeight).toBe('40px');
|
||
|
|
expect(wrapper.innerHTML).toContain('hello');
|
||
|
|
});
|
||
|
|
});
|