shadowdaoandClaude Opus 4.8
71e675489c
Footer only committed edited text via onBlur, and its effect rewrote innerText from the (stale) text prop whenever selected became false -- if selection cleared without a real DOM blur, the in-progress edit was silently lost. Adopt Heading.tsx's exact mechanism: an editedTextRef updated on onInput, committed to the prop via an effect keyed on the selected->false transition (in addition to the existing onBlur commit). Preserves the 500ms setProp debounce Footer already had for undo grouping. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
106 lines
3.1 KiB
TypeScript
106 lines
3.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';
|
|
|
|
/* Footer only needs useNode from @craftjs/core. Mock it following the
|
|
DOM-harness pattern in src/state/PageContext.slug.test.tsx (no
|
|
@testing-library/react in this repo) so we can drive `selected` across
|
|
re-renders and observe setProp calls without a real <Editor> tree. */
|
|
let mockSelected = false;
|
|
let lastCommittedProps: { text: string } = { text: '' };
|
|
const setPropSpy = vi.fn((updater: (p: any) => void) => {
|
|
updater(lastCommittedProps);
|
|
});
|
|
|
|
vi.mock('@craftjs/core', () => ({
|
|
useNode: (collect?: (node: any) => any) => {
|
|
const node = { events: { selected: mockSelected } };
|
|
return {
|
|
connectors: { connect: (el: any) => el, drag: (el: any) => el },
|
|
actions: { setProp: setPropSpy },
|
|
...(collect ? collect(node) : {}),
|
|
};
|
|
},
|
|
}));
|
|
|
|
import { Footer } from './Footer';
|
|
|
|
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);
|
|
});
|
|
}
|
|
|
|
function rerender(ui: React.ReactElement) {
|
|
act(() => {
|
|
root.render(ui);
|
|
});
|
|
}
|
|
|
|
beforeEach(() => {
|
|
mockSelected = false;
|
|
lastCommittedProps = { text: 'Original' };
|
|
setPropSpy.mockClear();
|
|
});
|
|
|
|
describe('Footer edit-guard (mirrors Heading.tsx mechanism)', () => {
|
|
test('deselecting without a real blur still commits the in-progress edit', () => {
|
|
mockSelected = true;
|
|
render(<Footer text="Original" />);
|
|
|
|
const el = container.querySelector('footer')!;
|
|
act(() => {
|
|
el.innerText = 'Edited footer text';
|
|
el.dispatchEvent(new Event('input', { bubbles: true }));
|
|
});
|
|
|
|
// No blur event fired -- simulate selection clearing (e.g. clicking
|
|
// elsewhere) which is the scenario that used to lose the edit.
|
|
mockSelected = false;
|
|
rerender(<Footer text="Original" />);
|
|
|
|
expect(setPropSpy).toHaveBeenCalled();
|
|
expect(lastCommittedProps.text).toBe('Edited footer text');
|
|
|
|
container.remove();
|
|
});
|
|
|
|
test('a real blur still commits the edit (existing behavior preserved)', () => {
|
|
mockSelected = true;
|
|
render(<Footer text="Original" />);
|
|
|
|
const el = container.querySelector('footer')!;
|
|
act(() => {
|
|
el.innerText = 'Blurred edit';
|
|
el.dispatchEvent(new Event('input', { bubbles: true }));
|
|
// React delegates onBlur via native 'focusout' (which bubbles) rather
|
|
// than 'blur' (which doesn't) -- dispatch what React actually listens for.
|
|
el.dispatchEvent(new FocusEvent('focusout', { bubbles: true }));
|
|
});
|
|
|
|
expect(setPropSpy).toHaveBeenCalled();
|
|
expect(lastCommittedProps.text).toBe('Blurred edit');
|
|
|
|
container.remove();
|
|
});
|
|
|
|
test('deselecting with no edit made does not call setProp', () => {
|
|
mockSelected = true;
|
|
render(<Footer text="Original" />);
|
|
|
|
mockSelected = false;
|
|
rerender(<Footer text="Original" />);
|
|
|
|
expect(setPropSpy).not.toHaveBeenCalled();
|
|
|
|
container.remove();
|
|
});
|
|
});
|