import { fireEvent, render, screen } from "@testing-library/react";
import { Box } from "../box";
import { Text } from "../text";
import { Dialog } from ".";

const MockDialog = () => {
  return (
    <Dialog trigger={<Box>Mock Trigger</Box>}>
      <Box>
        <Text variant="h3">Mock Title</Text>
        <Box>
          <Text>Mock Content</Text>
        </Box>
      </Box>
    </Dialog>
  );
};

describe("Dialog", () => {
  it("should render the Dialog trigger", () => {
    render(<MockDialog />);
    expect(screen.getByText("Mock Trigger")).toBeInTheDocument();
  });

  it("should render the Dialog content", () => {
    render(<MockDialog />);

    const button = screen.getByText("Mock Trigger");
    fireEvent.click(button);

    expect(screen.getByText("Mock Title")).toBeInTheDocument();
    expect(screen.getByText("Mock Content")).toBeInTheDocument();
  });
});