import React from "react"
import { render, screen } from "@testing-library/react"
import TitleBar from "../title-bar"

describe("TitleBar", () => {
  test("if `content` is a string, it should be wrapped in an h2", () => {
    const content = "Example"

    const { container } = render(<TitleBar content={content} />)

    expect(container.querySelector("h2")).toBeInTheDocument()
    expect(screen.getByText(content)).toBeInTheDocument()
  })

  test("if `content` is a string object, it should be wrapped in an h2", () => {
    const content = new String("Example")

    const { container } = render(<TitleBar content={content} />)

    expect(container.querySelector("h2")).toBeInTheDocument()
    expect(screen.getByText(content)).toBeInTheDocument()
  })

  test("if `content` is JSX, it should be rendered by itself", () => {
    const text = "Example"

    const { container } = render(<TitleBar content={<h1>{text}</h1>} />)

    expect(container.querySelector("h2")).not.toBeInTheDocument()
    expect(container.querySelector("h1")).toBeInTheDocument()
    expect(screen.getByText(text)).toBeInTheDocument()
  })
})
