74 lines
2.3 KiB
TypeScript
74 lines
2.3 KiB
TypeScript
import { describe, it, expect, vi } from "vitest";
|
|
import { render, screen, fireEvent } from "@testing-library/react";
|
|
import type { SectionBlockProps } from "@/features/editor/state/editorStore";
|
|
import { SectionPropertiesPanel } from "@/app/editor/panels/SectionPropertiesPanel";
|
|
|
|
// 섹션 레이아웃 프리셋/직접 입력이 columns 배열의 span 값을 올바르게 업데이트하는지 검증한다.
|
|
describe("SectionPropertiesPanel - layout presets", () => {
|
|
const baseProps: SectionBlockProps = {
|
|
background: "default",
|
|
paddingY: "md",
|
|
columns: [{ id: "col-1", span: 12 }],
|
|
maxWidthMode: "normal",
|
|
gapX: "md",
|
|
};
|
|
|
|
it("2열 1/2-1/2 프리셋 선택 시 columns 가 [6,6] 분할로 업데이트된다", () => {
|
|
const updateBlock = vi.fn();
|
|
|
|
render(
|
|
<SectionPropertiesPanel
|
|
sectionProps={baseProps}
|
|
selectedBlockId="section-layout-1"
|
|
updateBlock={updateBlock}
|
|
/>,
|
|
);
|
|
|
|
const select = screen.getByLabelText("Section column layout");
|
|
|
|
fireEvent.change(select, { target: { value: "two-equal" } });
|
|
|
|
expect(updateBlock).toHaveBeenCalledWith(
|
|
"section-layout-1",
|
|
expect.objectContaining({
|
|
columns: expect.arrayContaining([
|
|
expect.objectContaining({ span: 6 }),
|
|
expect.objectContaining({ span: 6 }),
|
|
]),
|
|
}),
|
|
);
|
|
});
|
|
|
|
it("컬럼 span 직접 입력 시 해당 컬럼 span 값이 업데이트된다", () => {
|
|
const updateBlock = vi.fn();
|
|
|
|
render(
|
|
<SectionPropertiesPanel
|
|
sectionProps={{
|
|
...baseProps,
|
|
columns: [
|
|
{ id: "col-1", span: 6 },
|
|
{ id: "col-2", span: 6 },
|
|
],
|
|
}}
|
|
selectedBlockId="section-layout-2"
|
|
updateBlock={updateBlock}
|
|
/>,
|
|
);
|
|
|
|
const inputs = screen.getAllByLabelText("1열 폭 (1~11)");
|
|
const numberInput = inputs.find((el) => (el as HTMLInputElement).tagName === "INPUT" && (el as HTMLInputElement).type === "number") as HTMLInputElement;
|
|
|
|
fireEvent.change(numberInput, { target: { value: "8" } });
|
|
|
|
expect(updateBlock).toHaveBeenCalledWith(
|
|
"section-layout-2",
|
|
expect.objectContaining({
|
|
columns: expect.arrayContaining([
|
|
expect.objectContaining({ span: 8 }),
|
|
]),
|
|
}),
|
|
);
|
|
});
|
|
});
|