import { describe, expect, it } from "vitest";
import { getBuild } from "./utils";

describe("attr", () => {
  const compileESBuild = getBuild("attr");

  it("supports grouped array css attribute", async () => {
    const { files } = await compileESBuild({
      clsx: "emotion",
      expectFiles: 2,
      javascript: /* tsx */ `
        export function Hello() {
          return (
            <div css={["text-center", { hover: "font-semibold" }]}>
              Hello, world!
            </div>
          );
        }
      `,
    });

    expect(files.js.text).toMatchSnapshot();
    expect(files.css.text).toMatchSnapshot();
  });

  it('supports conditional expression in "css" attribute', async () => {
    const { files } = await compileESBuild({
      clsx: "emotion",
      expectFiles: 2,
      javascript: /* tsx */ `
        export function Hello({ isCenter }) {
          return (
            <div css={isCenter ? "text-center" : undefined}>
              Hello, world!
            </div>
          );
        }
      `,
    });

    expect(files.js.text).toMatchSnapshot();
    expect(files.css.text).toMatchSnapshot();
  });
});