import { jsx, jsxs } from "react/jsx-runtime";
import React from "react";
import { render } from "@testing-library/react";
import { ThemeProvider, Skeleton } from "../..";
describe("<Skeleton />", () => {
  it("should render the circular skeleton", () => {
    const { container } = render(
      /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Skeleton, { type: "circular", width: 64, height: 64 }) })
    );
    expect(container).toMatchSnapshot();
  });
  it("should render the rectangular skeleton", () => {
    const { container } = render(
      /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Skeleton, { type: "rectangular", width: 400, height: 200 }) })
    );
    expect(container).toMatchSnapshot();
  });
  it("should render the text skeleton", () => {
    const { container } = render(
      /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Skeleton, { type: "text", variant: "body1", width: 61 }) })
    );
    expect(container).toMatchSnapshot();
  });
  it("should render all text skeleton variants correctly", () => {
    const { container } = render(
      /* @__PURE__ */ jsxs(ThemeProvider, { children: [
        /* @__PURE__ */ jsx(Skeleton, { type: "text", variant: "h1", width: "100" }),
        /* @__PURE__ */ jsx(Skeleton, { type: "text", variant: "h2", width: "100" }),
        /* @__PURE__ */ jsx(Skeleton, { type: "text", variant: "h3", width: "100" }),
        /* @__PURE__ */ jsx(Skeleton, { type: "text", variant: "h4", width: "100" }),
        /* @__PURE__ */ jsx(Skeleton, { type: "text", variant: "h5", width: "100" }),
        /* @__PURE__ */ jsx(Skeleton, { type: "text", variant: "body1", width: "100" }),
        /* @__PURE__ */ jsx(Skeleton, { type: "text", variant: "body2", width: "100" }),
        /* @__PURE__ */ jsx(Skeleton, { type: "text", variant: "overline", width: "100" }),
        /* @__PURE__ */ jsx(Skeleton, { type: "text", variant: "exception", width: "100" })
      ] })
    );
    expect(container).toMatchSnapshot();
  });
  it("should render all background color variants correctly", () => {
    const { container } = render(
      /* @__PURE__ */ jsxs(ThemeProvider, { children: [
        /* @__PURE__ */ jsx(Skeleton, { type: "text", variant: "body1", width: "100" }),
        /* @__PURE__ */ jsx(Skeleton, { type: "text", variant: "body1", width: "100", color: "secondary" })
      ] })
    );
    expect(container).toMatchSnapshot();
  });
});
