import { render } from "@testing-library/react";
import type { ReactNode } from "react";
import MagneticButton from "./MagneticButton";

jest.mock("motion/react", () => {
  const React = require("react");

  const motion = new Proxy(
    {},
    {
      get: (_, tag: string) => {
        const Component = ({
          children,
          animate: _animate,
          transition: _transition,
          ...props
        }: { children?: ReactNode } & Record<string, unknown>) =>
          React.createElement(tag, props, children);
        Component.displayName = `motion.${tag}`;
        return Component;
      },
    },
  );

  return { motion };
});

describe("MagneticButton semantics", () => {
  it("renders a list item directly when used inside a list", () => {
    const { container } = render(
      <ul>
        <MagneticButton as="li" className="ds-tag">
          TypeScript
        </MagneticButton>
      </ul>,
    );

    expect(container.querySelector("ul > li.ds-tag")).toBeInTheDocument();
    expect(container.querySelector("ul > div > li")).not.toBeInTheDocument();
  });
});