56 lines
2.8 KiB
TypeScript
56 lines
2.8 KiB
TypeScript
import { describe, expect, it } from "vitest";
|
|
|
|
import {
|
|
CanvasEditHistory,
|
|
createEditorCanvasState,
|
|
defaultBackgroundAdjustments,
|
|
deserializeFabricCanvas,
|
|
switchBackground,
|
|
updateBackgroundAdjustments,
|
|
} from "../../apps/web/src/editor-canvas.js";
|
|
|
|
const element = {
|
|
colors: ["#111111", "#222222", "#333333", "#444444", "#555555"],
|
|
created_at: "2026-08-02T18:00:00.000Z",
|
|
element_id: "00000000-0000-4000-8000-000000000001",
|
|
opacity: 1,
|
|
position: { x: 0.25, y: 0.35 },
|
|
resource_version: "palette-v1",
|
|
rotation: 14,
|
|
scale: { x: 1.2, y: 0.8 },
|
|
template_or_asset_id: "palette-fixture",
|
|
type: "color_card" as const,
|
|
z_index: 0,
|
|
};
|
|
|
|
describe("TDD-WP4-BG-001/002 canvas boundary", () => {
|
|
it("switches background without moving overlays, resets processing, and re-extracts palette", () => {
|
|
const initial = createEditorCanvasState({ assetId: "00000000-0000-4000-8000-000000000010", ratio: "3:4" });
|
|
const withOverlay = { ...initial, background: { ...initial.background, adjustments: { ...initial.background.adjustments, brightness: 42, filter: "mono" } }, elements: [element] };
|
|
const nextPalette = ["#abcdef", "#123456", "#fedcba", "#654321", "#a1b2c3"];
|
|
const switched = switchBackground(withOverlay, "00000000-0000-4000-8000-000000000011", nextPalette);
|
|
expect(switched.background).toEqual({ asset_id: "00000000-0000-4000-8000-000000000011", adjustments: defaultBackgroundAdjustments() });
|
|
expect(switched.elements[0]).toMatchObject({ position: element.position, scale: element.scale, rotation: element.rotation, colors: nextPalette });
|
|
});
|
|
|
|
it("keeps preview changes immutable and allows one committed history step", () => {
|
|
const initial = createEditorCanvasState({ assetId: "00000000-0000-4000-8000-000000000010", ratio: "1:1" });
|
|
const history = new CanvasEditHistory(initial);
|
|
const preview = updateBackgroundAdjustments(initial, { brightness: 25, contrast: -10, fit: "fit" });
|
|
expect(initial.background.adjustments).toEqual(defaultBackgroundAdjustments());
|
|
expect(preview.background.adjustments).toMatchObject({ brightness: 25, contrast: -10, fit: "fit" });
|
|
history.commit(preview);
|
|
expect(history.canUndo).toBe(true);
|
|
expect(history.undo()).toEqual(initial);
|
|
expect(history.canRedo).toBe(true);
|
|
expect(history.redo()).toEqual(preview);
|
|
});
|
|
|
|
it("strips Fabric-private fields at the persistence boundary", () => {
|
|
const state = createEditorCanvasState({ assetId: "00000000-0000-4000-8000-000000000010", ratio: "9:16" });
|
|
const decoded = deserializeFabricCanvas({ ...state, _objects: [{ type: "fabric-private" }], viewportTransform: [1, 0, 0, 1, 0, 0] });
|
|
expect(decoded).toEqual(state);
|
|
expect(deserializeFabricCanvas({ ...state, elements: [{ ...element, _cacheCanvas: {} }] })).toBeUndefined();
|
|
});
|
|
});
|