import React from "react"
import { render, cleanup } from "@testing-library/react"
import "@testing-library/jest-dom/extend-expect"
import ConfirmModal from "../confirm-modal"
import Action from "../action"

afterEach(cleanup)
describe("ConfirmModal", () => {
  it("renders", () => {
    const { getByText } = render(
      <ConfirmModal label="Label" onClose={() => { }}>
        Content
        <Action>Do not destroy</Action>
        <Action destructive>Destroy</Action>
      </ConfirmModal>
    )

    expect(getByText("Label")).toBeInTheDocument()
    expect(getByText("Content")).toBeInTheDocument()
  })

  it("splits Actions out into a separate section", () => {
    const { getByText } = render(
      <ConfirmModal label="Label" onClose={() => { }}>
        Content
        <Action destructive>Confirm</Action>
        <Action>Cancel</Action>
      </ConfirmModal>
    )

    // Gets the DOM node containing the description. If we weren't
    // splitting the actions out, it would contain them too
    const description = getByText("Content")
    const confirm = getByText("Confirm")

    expect(description.contains(confirm)).toBe(false)
  })
})