/* @vitest-environment jsdom */

import { render, screen } from "@testing-library/react"
import { describe, expect, it, vi } from "vitest"

import { CreateNavigationItemForm } from "./create-navigation-item-form"

describe("CreateNavigationItemForm", () => {
  it("renders menu/page options and defaults", () => {
    render(
      <CreateNavigationItemForm
        action={vi.fn()}
        menus={[{ id: "menu-1", name: "Primary", location: "header" }]}
        pages={[{ id: "page-1", title: "Home", slug: "home" }]}
      />,
    )

    const menu = screen.getByLabelText("Menu") as HTMLSelectElement
    expect(menu.options.length).toBe(1)
    expect(menu.value).toBe("menu-1")

    const page = screen.getByLabelText("Linked page") as HTMLSelectElement
    expect(page.options.length).toBe(2)
    expect(page.options[0]?.value).toBe("")

    const sortOrder = screen.getByLabelText("Sort order") as HTMLInputElement
    expect(sortOrder.value).toBe("0")

    const visible = screen.getByLabelText("Visible") as HTMLInputElement
    expect(visible.checked).toBe(true)
  })
})