import { cleanup, fireEvent, render, screen } from "@testing-library/react";
import React from "react";
import { afterEach, describe, expect, it, vi } from "vitest";
import { Optgroup, Option, Select } from "./select";
afterEach(cleanup);
describe("Select Component", () => {
    it("should render correctly", () => {
        render(<Select name="fruit" defaultValue="apple">
                <Option value="apple">Apple</Option>
                <Option value="banana">Banana</Option>
            </Select>);
        const select = screen.getByRole("combobox");
        expect(select).toBeTruthy();
        expect(select.value).toBe("apple");
    });
    it("should handle changes", () => {
        const handleChange = vi.fn();
        render(<Select name="fruit" onChange={handleChange}>
                <Option value="apple">Apple</Option>
                <Option value="banana">Banana</Option>
            </Select>);
        const select = screen.getByRole("combobox");
        fireEvent.change(select, { target: { value: "banana" } });
        expect(handleChange).toHaveBeenCalledTimes(1);
        expect(select.value).toBe("banana");
    });
    it("should render optgroups", () => {
        render(<Select name="food">
                <Optgroup label="Fruits">
                    <Option value="apple">Apple</Option>
                </Optgroup>
                <Optgroup label="Vegetables">
                    <Option value="carrot">Carrot</Option>
                </Optgroup>
            </Select>);
        const groups = screen.getAllByRole("group"); // optgroup role is 'group'
        expect(groups.length).toBe(2);
        expect(groups[0].getAttribute("label")).toBe("Fruits");
    });
});