63 lines
2.2 KiB
TypeScript
63 lines
2.2 KiB
TypeScript
 
|
import { describe, test, expect, vi, beforeEach } from 'vitest';
|
||
|
|
import React from 'react';
|
||
|
|
import { createRoot, Root } from 'react-dom/client';
|
||
|
|
import { act } from 'react-dom/test-utils';
|
||
|
|
|
||
|
|
/* ImageBlock only needs useNode from @craftjs/core. Mock it following the
|
||
|
|
DOM-harness pattern in src/components/basic/Footer.editguard.test.tsx (no
|
||
|
|
@testing-library/react in this repo) so we can render the real component
|
||
|
|
tree and inspect the emitted <img src> without a real <Editor>. */
|
||
|
|
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 { ImageBlock } from './ImageBlock';
|
||
|
|
|
||
|
|
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);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
beforeEach(() => {
|
||
|
|
vi.clearAllMocks();
|
||
|
|
});
|
||
|
|
|
||
|
|
describe('ImageBlock render falls back to the placeholder for an explicit empty src (Bug 1)', () => {
|
||
|
|
test('src="" (explicit, overrides the default parameter) still renders a non-empty placeholder src', () => {
|
||
|
|
render(<ImageBlock src="" alt="Image" />);
|
||
|
|
const img = container.querySelector('img')!;
|
||
|
|
expect(img.getAttribute('src')).not.toBe('');
|
||
|
|
expect(img.getAttribute('src')).toMatch(/^data:image\/svg\+xml/);
|
||
|
|
container.remove();
|
||
|
|
});
|
||
|
|
|
||
|
|
test('src=undefined (default parameter path) still renders the placeholder (unchanged behavior)', () => {
|
||
|
|
render(<ImageBlock alt="Image" />);
|
||
|
|
const img = container.querySelector('img')!;
|
||
|
|
expect(img.getAttribute('src')).not.toBe('');
|
||
|
|
expect(img.getAttribute('src')).toMatch(/^data:image\/svg\+xml/);
|
||
|
|
container.remove();
|
||
|
|
});
|
||
|
|
|
||
|
|
test('a real src is rendered unchanged', () => {
|
||
|
|
render(<ImageBlock src="https://example.com/photo.jpg" alt="A photo" />);
|
||
|
|
const img = container.querySelector('img')!;
|
||
|
|
expect(img.getAttribute('src')).toBe('https://example.com/photo.jpg');
|
||
|
|
container.remove();
|
||
|
|
});
|
||
|
|
});
|