|
|
|
@ -1,7 +1,10 @@ |
|
|
|
import { describe, it, expect, vi, beforeEach } from "vitest"; |
|
|
|
import { fireEvent, render, screen } from "@testing-library/react"; |
|
|
|
|
|
|
|
import { CanvasOutlineDrawer } from "@/components/CanvasOutlineDrawer"; |
|
|
|
import { |
|
|
|
CanvasOutlineDrawer, |
|
|
|
buildCanvasOutlinePreviewUrl, |
|
|
|
} from "@/components/CanvasOutlineDrawer"; |
|
|
|
|
|
|
|
const translations: Record<string, string> = { |
|
|
|
"canvasOutline.title": "Canvas outline", |
|
|
|
@ -15,6 +18,7 @@ const translations: Record<string, string> = { |
|
|
|
"canvasOutline.expandGroup": "Expand group", |
|
|
|
"canvasOutline.collapseGroup": "Collapse group", |
|
|
|
"node.imageInput": "Image Input", |
|
|
|
"node.videoInput": "Video Input", |
|
|
|
"node.prompt": "Prompt", |
|
|
|
}; |
|
|
|
|
|
|
|
@ -46,7 +50,19 @@ const createState = () => ({ |
|
|
|
id: "image-1", |
|
|
|
type: "imageInput", |
|
|
|
position: { x: 0, y: 0 }, |
|
|
|
data: { customTitle: "Hero image" }, |
|
|
|
data: { |
|
|
|
customTitle: "Hero image", |
|
|
|
image: "https://statictest.popi.art/media/2026/0714/11631.png", |
|
|
|
}, |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: "video-1", |
|
|
|
type: "videoInput", |
|
|
|
position: { x: 20, y: 0 }, |
|
|
|
data: { |
|
|
|
customTitle: "Opening video", |
|
|
|
video: "https://statictest.popi.art/media/2026/0714/11666.mp4", |
|
|
|
}, |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: "group-node-group-1", |
|
|
|
@ -86,9 +102,10 @@ describe("CanvasOutlineDrawer", () => { |
|
|
|
render(<CanvasOutlineDrawer open onClose={vi.fn()} />); |
|
|
|
|
|
|
|
expect(screen.getByText("Hero image")).toBeInTheDocument(); |
|
|
|
expect(screen.getByText("Opening video")).toBeInTheDocument(); |
|
|
|
expect(screen.getByText("Storyboard")).toBeInTheDocument(); |
|
|
|
expect(screen.getByText("Prompt")).toBeInTheDocument(); |
|
|
|
expect(screen.getByText("2 nodes")).toBeInTheDocument(); |
|
|
|
expect(screen.getByText("3 nodes")).toBeInTheDocument(); |
|
|
|
|
|
|
|
fireEvent.click(screen.getByTitle("Hero image")); |
|
|
|
|
|
|
|
@ -104,4 +121,29 @@ describe("CanvasOutlineDrawer", () => { |
|
|
|
expect(mockSelectSingleNode).toHaveBeenCalledWith("group-node-group-1"); |
|
|
|
expect(mockSetNavigationTarget).toHaveBeenCalledWith("group-node-group-1"); |
|
|
|
}); |
|
|
|
|
|
|
|
it("uses compressed Tencent Cloud previews only inside the canvas outline", () => { |
|
|
|
render(<CanvasOutlineDrawer open onClose={vi.fn()} />); |
|
|
|
|
|
|
|
const imagePreview = screen.getByTitle("Hero image").querySelector("img"); |
|
|
|
const videoPreview = screen.getByTitle("Opening video").querySelector("img"); |
|
|
|
|
|
|
|
expect(imagePreview).toHaveAttribute( |
|
|
|
"src", |
|
|
|
"https://statictest.popi.art/media/2026/0714/11631.png?imageMogr2/thumbnail/120x/format/webp/quality/20" |
|
|
|
); |
|
|
|
expect(videoPreview).toHaveAttribute( |
|
|
|
"src", |
|
|
|
"https://statictest.popi.art/media/2026/0714/11666.mp4?ci-process=snapshot&time=1&format=jpg&imageMogr2/thumbnail/120x/format/webp/quality/20" |
|
|
|
); |
|
|
|
}); |
|
|
|
}); |
|
|
|
|
|
|
|
describe("buildCanvasOutlinePreviewUrl", () => { |
|
|
|
it("preserves existing query strings and leaves local urls unchanged", () => { |
|
|
|
expect(buildCanvasOutlinePreviewUrl("https://example.com/a.png?token=1")).toBe( |
|
|
|
"https://example.com/a.png?token=1&imageMogr2/thumbnail/120x/format/webp/quality/20" |
|
|
|
); |
|
|
|
expect(buildCanvasOutlinePreviewUrl("data:image/png;base64,abc")).toBe("data:image/png;base64,abc"); |
|
|
|
}); |
|
|
|
}); |
|
|
|
|
Luckyu_js
6 days ago