import { composeStories } from "@storybook/react"
import { screen } from "@testing-library/react"
import { userEvent } from "@testing-library/user-event"
import React from "react"
import { expect, describe, test } from "vitest"
import { render } from "../../../tests/render"
import * as stories from "./Checkbox.stories"

const { Default, Disabled, Indeterminate } = composeStories(stories)

describe("<Checkbox />", () => {
  test("Default", async () => {
    render(<Default />)

    const checkbox = await screen.findByRole("checkbox")

    expect(checkbox).not.toBeChecked()

    await userEvent.click(checkbox)

    expect(checkbox).toBeChecked()
  })

  test("Disabled", async () => {
    render(<Disabled />)

    const checkbox = await screen.findByRole("checkbox")

    expect(checkbox).toBeDisabled()
    expect(checkbox).toHaveClass("pointer-events-none")

    const checkboxWrapper = checkbox.closest("span")
    expect(checkboxWrapper).toHaveClass("cursor-not-allowed")
  })

  test("Indeterminate", async () => {
    render(<Indeterminate />)

    const checkbox = await screen.findByRole("checkbox")

    expect(checkbox).toHaveAttribute("aria-checked", "mixed")
  })
})