import { render, screen } from "@testing-library/react";
import * as stylex from "@stylexjs/stylex";
import { styles } from "./styles";

/**
 * The StyleX compile-time transform must run in the vitest pipeline, not just
 * in `vite build`. Without the plugin these tests do not fail an assertion —
 * importing the module throws `Unexpected 'stylex.defineVars' call at runtime`
 * before a single case runs, which is the louder failure of the two
 * (milestone 23, ruling 1).
 */
describe("the StyleX build integration", () => {
	it("compiles stylex.props into a class name", () => {
		render(
			<button type="button" {...stylex.props(styles.button, styles.focusRing)}>
				probe
			</button>,
		);
		const probe = screen.getByRole("button", { name: "probe" });
		expect(probe.className).not.toBe("");
	});

	it("keeps composed styles distinct from a single style", () => {
		const one = stylex.props(styles.button).className;
		const two = stylex.props(styles.button, styles.focusRing).className;
		expect(one).toBeTruthy();
		expect(two).not.toBe(one);
	});
});