95 lines
3.1 KiB
TypeScript
95 lines
3.1 KiB
TypeScript
import { describe, it, expect, vi } from "vitest";
|
|
import { render, screen, fireEvent } from "@testing-library/react";
|
|
import { PropertySliderField } from "@/features/editor/components/PropertySliderField";
|
|
import { ColorPickerField } from "@/features/editor/components/ColorPickerField";
|
|
|
|
// 슬라이더 필드가 라벨과 슬라이더, 입력 박스를 렌더링하고 onChange를 호출하는지 테스트
|
|
|
|
describe("PropertySliderField", () => {
|
|
it("라벨과 슬라이더, 텍스트 입력을 렌더링한다", () => {
|
|
const handleChange = vi.fn();
|
|
|
|
render(
|
|
<PropertySliderField
|
|
label="글자 크기"
|
|
ariaLabelSlider="글자 크기 슬라이더"
|
|
ariaLabelInput="글자 크기 커스텀"
|
|
value={16}
|
|
min={10}
|
|
max={72}
|
|
step={1}
|
|
onChange={handleChange}
|
|
/>,
|
|
);
|
|
|
|
expect(screen.getByText("글자 크기")).toBeInTheDocument();
|
|
expect(screen.getByLabelText("글자 크기 슬라이더")).toBeInTheDocument();
|
|
expect(screen.getByLabelText("글자 크기 커스텀")).toBeInTheDocument();
|
|
});
|
|
|
|
it("슬라이더 변경 시 onChange가 호출된다", () => {
|
|
const handleChange = vi.fn();
|
|
|
|
render(
|
|
<PropertySliderField
|
|
label="줄 간격"
|
|
ariaLabelSlider="줄 간격 슬라이더"
|
|
ariaLabelInput="줄 간격 커스텀"
|
|
value={1.5}
|
|
min={0.5}
|
|
max={3}
|
|
step={0.1}
|
|
onChange={handleChange}
|
|
/>,
|
|
);
|
|
|
|
const slider = screen.getByLabelText("줄 간격 슬라이더") as HTMLInputElement;
|
|
fireEvent.change(slider, { target: { value: "2" } });
|
|
|
|
expect(handleChange).toHaveBeenCalledWith(2);
|
|
});
|
|
});
|
|
|
|
// 컬러 피커 필드가 컬러 인풋과 텍스트 입력, 팔레트 버튼을 렌더링하고 상호작용 되는지 테스트
|
|
|
|
describe("ColorPickerField", () => {
|
|
it("HEX 인풋과 컬러 인풋을 렌더링한다", () => {
|
|
const handleChange = vi.fn();
|
|
|
|
render(
|
|
<ColorPickerField
|
|
label="텍스트 색상"
|
|
ariaLabelColorInput="텍스트 색상 피커"
|
|
ariaLabelHexInput="텍스트 색상 HEX"
|
|
value="#ffffff"
|
|
onChange={handleChange}
|
|
palette={[{ id: "default", label: "기본", color: "#e5e7eb" }]}
|
|
/>,
|
|
);
|
|
|
|
expect(screen.getByText("텍스트 색상")).toBeInTheDocument();
|
|
expect(screen.getByLabelText("텍스트 색상 피커")).toBeInTheDocument();
|
|
expect(screen.getByLabelText("텍스트 색상 HEX")).toBeInTheDocument();
|
|
});
|
|
|
|
it("컬러 인풋 변경 시 onChange가 호출된다", () => {
|
|
const handleChange = vi.fn();
|
|
|
|
render(
|
|
<ColorPickerField
|
|
label="텍스트 색상"
|
|
ariaLabelColorInput="텍스트 색상 피커"
|
|
ariaLabelHexInput="텍스트 색상 HEX"
|
|
value="#ffffff"
|
|
onChange={handleChange}
|
|
palette={[{ id: "default", label: "기본", color: "#e5e7eb" }]}
|
|
/>,
|
|
);
|
|
|
|
const colorInput = screen.getByLabelText("텍스트 색상 피커") as HTMLInputElement;
|
|
fireEvent.change(colorInput, { target: { value: "#000000" } });
|
|
|
|
expect(handleChange).toHaveBeenCalledWith("#000000");
|
|
});
|
|
});
|