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

const { Default, CustomText } = composeStories(stories)

describe("<CopyToClipboard />", () => {
  test("Default", async () => {
    const user = userEvent.setup()
    render(<Default />)

    await user.hover(screen.getByLabelText("Content Copy"))

    await expect(
      await screen.findByRole("tooltip", { name: "Copy" }),
    ).toBeVisible()

    await user.click(screen.getByLabelText("Content Copy"))

    await expect(
      await screen.findByRole("tooltip", { name: "Copied!" }),
    ).toBeVisible()
  })

  test("CustomText", async () => {
    const user = userEvent.setup()
    render(<CustomText />)

    await user.hover(screen.getByLabelText("Content Copy"))

    await expect(
      await screen.findByRole("tooltip", { name: "Copy address" }),
    ).toBeVisible()

    await user.click(screen.getByLabelText("Content Copy"))

    await expect(
      await screen.findByRole("tooltip", { name: "Copied the address!" }),
    ).toBeVisible()
  })
})