import React from "react";
import "@testing-library/jest-dom/extend-expect";
import { render, fireEvent } from "@testing-library/react";
import Badge from "../badge";

const variants = [
  "primary",
  "secondary",
  "success",
  "danger",
  "warning",
  "info",
  "light",
  "dark"
] as const;

test("shows badge with default parameters", () => {
  const { queryByTestId } = render(<Badge variant="primary">Test</Badge>);
  expect(queryByTestId("honeyui-badge-primary")).not.toBeNull();
  expect(queryByTestId("honeyui-badge-primary")).toHaveClass("badge");
  expect(queryByTestId("honeyui-badge-primary")).toHaveClass("badge-primary");
  expect(queryByTestId("honeyui-badge-primary")).toContainHTML("Test");
});

test("shows badge with variants", () => {
  variants.forEach((variant: typeof variants[number]) => {
    const v = render(<Badge variant={variant}>Test</Badge>);
    expect(v.queryByTestId(`honeyui-badge-${variant}`)).not.toBeNull();
    expect(v.queryByTestId(`honeyui-badge-${variant}`)).toHaveClass(`badge-${variant}`);
    v.unmount();
  });
});

test("shows badge with pill variant", () => {
  const { queryByTestId } = render(
    <Badge variant="primary" pill={true}>
      Test
    </Badge>
  );
  expect(queryByTestId("honeyui-badge-primary")).toHaveClass("badge-pill");
});

test("shows badge with custom class name", () => {
  const { queryByTestId } = render(
    <Badge variant="primary" className="custon-class">
      Test
    </Badge>
  );
  expect(queryByTestId("honeyui-badge-primary")).toHaveClass("custon-class");
});

test("shows able to clikc on badge", () => {
  const onClick = jest.fn();
  const { queryByTestId } = render(
    <Badge variant="primary" className="mr-2" onClick={onClick}>
      Test
    </Badge>
  );
  expect(queryByTestId("honeyui-badge-primary")).toBeTruthy();
  fireEvent.click(queryByTestId("honeyui-badge-primary"));
  expect(onClick).toHaveBeenCalled();
});

test("shows able to keypress on badge", () => {
  const onKeyPress = jest.fn();
  const { queryByTestId } = render(
    <Badge variant="primary" className="mr-2" onKeyPress={onKeyPress}>
      Test
    </Badge>
  );
  expect(queryByTestId("honeyui-badge-primary")).toBeTruthy();
  fireEvent.keyPress(queryByTestId("honeyui-badge-primary"), {
    key: "Enter",
    code: 13,
    charCode: 13
  });
  expect(onKeyPress).toHaveBeenCalled();
});

test("badge should be a link if `href` passed", () => {
  const { queryByTestId } = render(
    <Badge variant="primary" href="customLink">
      Test
    </Badge>
  );
  expect(queryByTestId("honeyui-badge-primary").nodeName).toBe("A");
  expect(queryByTestId("honeyui-badge-primary")).toHaveAttribute("href", "customLink");
});