import { loadStory } from "@opensea/testing-utils/story"
import { expect, test } from "../../../tests/test"
import * as stories from "./Sidebar.stories"

test("Unhovered light", async ({ page }) => {
  const story = await loadStory(page, stories, "Default", "light")
  await expect(story).toHaveScreenshot()
})

test("Unhovered dark", async ({ page }) => {
  const story = await loadStory(page, stories, "Default", "dark")
  await expect(story).toHaveScreenshot()
})

test("Hovered light", async ({ page }) => {
  const story = await loadStory(page, stories, "Default", "light")
  await page.getByRole("navigation").hover()
  await expect(story).toHaveScreenshot()
})

test("Hovered dark", async ({ page }) => {
  const story = await loadStory(page, stories, "Default", "dark")
  await page.getByRole("navigation").hover()
  await expect(story).toHaveScreenshot()
})

test("Collapsible open light", async ({ page }) => {
  const story = await loadStory(page, stories, "Default", "light")
  await page
    .getByRole("navigation")
    .getByRole("button", { name: "zmoney.eth" })
    .click()
  await expect(story).toHaveScreenshot()
})

test("Collapsible open dark", async ({ page }) => {
  const story = await loadStory(page, stories, "Default", "dark")
  await page
    .getByRole("navigation")
    .getByRole("button", { name: "zmoney.eth" })
    .click()
  await expect(story).toHaveScreenshot()
})