import { jsx, jsxs } from "react/jsx-runtime";
import React from "react";
import { render, fireEvent } from "@testing-library/react";
import RadioGroup from "..";
import ThemeProvider from "../../Theme";
describe("<RadioGroup />", () => {
  describe("Snapshots", () => {
    it("should match snapshot with default radiogroup", () => {
      const { container } = render(
        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(RadioGroup, {}) })
      );
      expect(container).toMatchSnapshot();
    });
    it("should match snapshot with full radiogroup", () => {
      const { container } = render(
        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(RadioGroup, { full: true }) })
      );
      expect(container).toMatchSnapshot();
    });
    it("should match snapshot with radios as children", () => {
      const { container, getAllByText } = render(
        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsxs(RadioGroup, { children: [
          /* @__PURE__ */ jsx(RadioGroup.Button, { children: "Option 1" }),
          /* @__PURE__ */ jsx(RadioGroup.Button, { children: "Option 2" }),
          /* @__PURE__ */ jsx(RadioGroup.Button, { children: "Option 3" })
        ] }) })
      );
      expect(container).toMatchSnapshot();
      expect(getAllByText(/^Option/)).toHaveLength(3);
    });
    it("should match snapshot with small radios", () => {
      const { container } = render(
        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsxs(RadioGroup, { small: true, children: [
          /* @__PURE__ */ jsx(RadioGroup.Button, { children: "Option 1" }),
          /* @__PURE__ */ jsx(RadioGroup.Button, { children: "Option 2" }),
          /* @__PURE__ */ jsx(RadioGroup.Button, { children: "Option 3" })
        ] }) })
      );
      expect(container).toMatchSnapshot();
    });
    it("should has setted the selected value", () => {
      const { container, getByText } = render(
        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsxs(RadioGroup, { selectedValue: "Option 2", children: [
          /* @__PURE__ */ jsx(RadioGroup.Button, { children: "Option 1" }),
          /* @__PURE__ */ jsx(RadioGroup.Button, { children: "Option 2" }),
          /* @__PURE__ */ jsx(RadioGroup.Button, { children: "Option 3" })
        ] }) })
      );
      expect(container).toMatchSnapshot();
      expect(getByText("Option 2").checked).toBe(true);
    });
    it("should set the name for all children", () => {
      const groupName = "test";
      const { container, getAllByTestId } = render(
        /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsxs(RadioGroup, { name: groupName, children: [
          /* @__PURE__ */ jsx(RadioGroup.Button, { "data-testid": "Option 1", children: "Option 1" }),
          /* @__PURE__ */ jsx(RadioGroup.Button, { "data-testid": "Option 2", children: "Option 2" }),
          /* @__PURE__ */ jsx(RadioGroup.Button, { "data-testid": "Option 3", children: "Option 3" })
        ] }) })
      );
      expect(container).toMatchSnapshot();
      getAllByTestId(/^Option/).map(
        (radio) => expect(radio.name).toBe(groupName)
      );
    });
  });
});
describe("Events", () => {
  it("should set the onchange for its children", () => {
    const onChangeMock = jest.fn();
    const { getByText } = render(
      /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsxs(RadioGroup, { onChange: onChangeMock, children: [
        /* @__PURE__ */ jsx(RadioGroup.Button, { children: "Option 1" }),
        /* @__PURE__ */ jsx(RadioGroup.Button, { children: "Option 2" }),
        /* @__PURE__ */ jsx(RadioGroup.Button, { children: "Option 3" })
      ] }) })
    );
    const firstOption = getByText("Option 1");
    fireEvent.click(firstOption);
    expect(onChangeMock).toHaveBeenCalled();
  });
});
