import { describe, it, expect } from "vitest";
import { render, screen } from "@testing-library/react";
import { NumericPropertyControl } from "@/features/editor/components/NumericPropertyControl";

describe("NumericPropertyControl - 테마", () => {
  it("프리셋 셀렉트는 라이트/다크 테마에 맞는 배경/텍스트 클래스를 사용해야 한다", () => {
    render(
      <NumericPropertyControl
        label="테스트 숫자"
        unitLabel="px"
        value={16}
        min={0}
        max={100}
        step={1}
        presets={[
          { id: "small", label: "작게", value: 12 },
          { id: "medium", label: "보통", value: 16 },
        ]}
        onChangeValue={() => {}}
      />,
    );

    const select = screen.getByLabelText("테스트 숫자 프리셋") as HTMLSelectElement;
    const className = select.getAttribute("class") ?? "";

    // 라이트 모드: 흰 배경 + 어두운 텍스트
    expect(className).toContain("bg-white");
    expect(className).toContain("text-slate-900");
    // 다크 모드: 다크 배경 + 밝은 텍스트
    expect(className).toContain("dark:bg-slate-900");
    expect(className).toContain("dark:text-slate-100");
  });
});