shadowdaoandClaude Opus 4.8
802938ec1a
BlocksPanel dropped a new Image block with an explicit `src=""` prop, which overrides ImageBlock's `src = PLACEHOLDER_SRC` default parameter (defaults only apply when a prop is undefined, not when it's an empty string). Craft then persisted `src:''`, and the canvas rendered a broken-image icon instead of the placeholder. - ImageBlock render now falls back to PLACEHOLDER_SRC whenever src is falsy (belt-and-braces: also recovers any legacy saved src:'' state). - BlocksPanel no longer passes src="" when dropping a new Image block, so the craft default applies. - ImageStylePanel now restores the placeholder (instead of blanking to '') when the URL field is cleared. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
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();
|
|
});
|
|
});
|