103 lines
3.4 KiB
TypeScript
103 lines
3.4 KiB
TypeScript
import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
|
|
import { render, screen, fireEvent, cleanup } from "@testing-library/react";
|
|
import { ProjectPropertiesPanel } from "@/app/editor/panels/ProjectPropertiesPanel";
|
|
import type { ProjectConfig } from "@/features/editor/state/editorStore";
|
|
|
|
let mockState: { projectConfig: ProjectConfig; updateProjectConfig: ReturnType<typeof vi.fn> };
|
|
|
|
beforeEach(() => {
|
|
const baseConfig: ProjectConfig = {
|
|
title: "프로젝트",
|
|
slug: "project",
|
|
canvasPreset: "full",
|
|
canvasWidthPx: 1024,
|
|
canvasBgColorHex: "#0f172a",
|
|
bodyBgColorHex: "#020617",
|
|
headHtml: "",
|
|
trackingScript: "",
|
|
// SEO 필드는 아직 구현 전이지만, TDD 를 위해 기본값 형태만 지정해 둔다.
|
|
// 실제 타입 정의는 추후 15.1 구현에서 확장한다.
|
|
} as ProjectConfig;
|
|
|
|
mockState = {
|
|
projectConfig: baseConfig,
|
|
updateProjectConfig: vi.fn(),
|
|
};
|
|
});
|
|
|
|
afterEach(() => {
|
|
cleanup();
|
|
});
|
|
|
|
vi.mock("@/features/editor/state/editorStore", () => {
|
|
const useEditorStore = (selector: (state: any) => any) => selector(mockState);
|
|
return {
|
|
__esModule: true,
|
|
useEditorStore,
|
|
};
|
|
});
|
|
|
|
describe("ProjectPropertiesPanel SEO 메타", () => {
|
|
it("SEO 타이틀 입력을 변경하면 seoTitle 이 updateProjectConfig 로 전달되어야 한다", () => {
|
|
render(<ProjectPropertiesPanel />);
|
|
|
|
const input = screen.getByLabelText("SEO title") as HTMLInputElement;
|
|
|
|
fireEvent.change(input, { target: { value: "새 SEO 타이틀" } });
|
|
|
|
expect(mockState.updateProjectConfig).toHaveBeenCalledWith({ seoTitle: "새 SEO 타이틀" });
|
|
});
|
|
|
|
it("메타 디스크립션 입력을 변경하면 seoDescription 이 updateProjectConfig 로 전달되어야 한다", () => {
|
|
render(<ProjectPropertiesPanel />);
|
|
|
|
const textarea = screen.getByLabelText("Meta description") as HTMLTextAreaElement;
|
|
|
|
fireEvent.change(textarea, { target: { value: "SEO 설명" } });
|
|
|
|
expect(mockState.updateProjectConfig).toHaveBeenCalledWith({
|
|
seoDescription: "SEO 설명",
|
|
});
|
|
});
|
|
|
|
it("OG/Twitter 이미지 URL 입력을 변경하면 seoOgImageUrl 이 updateProjectConfig 로 전달되어야 한다", () => {
|
|
render(<ProjectPropertiesPanel />);
|
|
|
|
const input = screen.getByLabelText("OG/Twitter image URL") as HTMLInputElement;
|
|
|
|
fireEvent.change(input, { target: { value: "https://example.com/og.png" } });
|
|
|
|
expect(mockState.updateProjectConfig).toHaveBeenCalledWith({
|
|
seoOgImageUrl: "https://example.com/og.png",
|
|
});
|
|
});
|
|
|
|
it("공유 URL(og:url) 입력을 변경하면 seoCanonicalUrl 이 updateProjectConfig 로 전달되어야 한다", () => {
|
|
render(<ProjectPropertiesPanel />);
|
|
|
|
const input = screen.getByLabelText("Share URL (og:url)") as HTMLInputElement;
|
|
|
|
fireEvent.change(input, { target: { value: "https://example.com/landing" } });
|
|
|
|
expect(mockState.updateProjectConfig).toHaveBeenCalledWith({
|
|
seoCanonicalUrl: "https://example.com/landing",
|
|
});
|
|
});
|
|
|
|
it("검색 노출 제어 체크박스를 토글하면 seoNoIndex 가 true 로 업데이트되어야 한다", () => {
|
|
render(<ProjectPropertiesPanel />);
|
|
|
|
const checkbox = screen.getByLabelText(
|
|
"Hide from search engines (noindex)",
|
|
) as HTMLInputElement;
|
|
|
|
expect(checkbox.checked).toBe(false);
|
|
|
|
fireEvent.click(checkbox);
|
|
|
|
expect(mockState.updateProjectConfig).toHaveBeenCalledWith({
|
|
seoNoIndex: true,
|
|
});
|
|
});
|
|
});
|