shadowdaoandClaude Opus 4.8
458069afb6
.empty-canvas-hint existed in editor.css but was never rendered anywhere. Wire it up in Canvas.tsx: an EmptyCanvasHint component reads Craft's ROOT node via useEditor and shows the hint once ROOT exists with zero children, hiding again the instant something is dropped in or while a drag is in progress. It's absolutely positioned over the Frame with pointer-events: none so it never intercepts clicks/drops meant for the underlying (empty) canvas -- scoped to regular page editing only, not the header/footer editing mode. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
68 lines
2.1 KiB
TypeScript
68 lines
2.1 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';
|
|
|
|
/* Same DOM-harness pattern as Footer.editguard.test.tsx: mock @craftjs/core's
|
|
useEditor so we can drive editor state without a real <Editor> tree. */
|
|
let mockNodes: Record<string, { data: { nodes: string[] } }> = {};
|
|
let mockDraggedSize = 0;
|
|
|
|
vi.mock('@craftjs/core', () => ({
|
|
useEditor: (collect: (state: any) => any) =>
|
|
collect({
|
|
nodes: mockNodes,
|
|
events: { dragged: { size: mockDraggedSize } },
|
|
}),
|
|
}));
|
|
|
|
import { EmptyCanvasHint } from './Canvas';
|
|
|
|
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(() => {
|
|
mockNodes = {};
|
|
mockDraggedSize = 0;
|
|
});
|
|
|
|
describe('EmptyCanvasHint', () => {
|
|
test('renders nothing before ROOT has mounted (no root node yet)', () => {
|
|
render(<EmptyCanvasHint />);
|
|
expect(container.querySelector('.empty-canvas-hint')).toBeNull();
|
|
container.remove();
|
|
});
|
|
|
|
test('renders the hint once ROOT exists with zero children', () => {
|
|
mockNodes = { ROOT: { data: { nodes: [] } } };
|
|
render(<EmptyCanvasHint />);
|
|
expect(container.querySelector('.empty-canvas-hint')).not.toBeNull();
|
|
expect(container.textContent).toContain('Drag blocks from the left panel');
|
|
container.remove();
|
|
});
|
|
|
|
test('hides once the page has content', () => {
|
|
mockNodes = { ROOT: { data: { nodes: ['node-1'] } } };
|
|
render(<EmptyCanvasHint />);
|
|
expect(container.querySelector('.empty-canvas-hint')).toBeNull();
|
|
container.remove();
|
|
});
|
|
|
|
test('hides while a drag is in progress, even on an empty root', () => {
|
|
mockNodes = { ROOT: { data: { nodes: [] } } };
|
|
mockDraggedSize = 1;
|
|
render(<EmptyCanvasHint />);
|
|
expect(container.querySelector('.empty-canvas-hint')).toBeNull();
|
|
container.remove();
|
|
});
|
|
});
|