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 "./Collapsible.stories"

const { SearchFilter } = composeStories(stories)

describe("<Collapsible />", () => {
  test("SearchFilter", async () => {
    render(<SearchFilter />)

    expect(
      await screen.queryByPlaceholderText("Select a collection..."),
    ).not.toBeInTheDocument()

    await userEvent.click(screen.getByRole("button", { name: /Filter/ }))

    expect(
      await screen.findByPlaceholderText("Select a collection..."),
    ).toBeInTheDocument()
  })
})