139 lines
3.7 KiB
TypeScript
139 lines
3.7 KiB
TypeScript
/* eslint-disable unicorn/string-content */
|
|
import { describe, expect, it } from "vitest";
|
|
|
|
import { getClassName } from "../index";
|
|
|
|
import { getBuild } from "./utils";
|
|
|
|
describe("merges with existing className attribute", () => {
|
|
const compileESBuild = getBuild("merge");
|
|
|
|
it("string literal", async () => {
|
|
const { files } = await compileESBuild({
|
|
clsx: "emotion",
|
|
expectFiles: 2,
|
|
javascript: /* tsx */ `
|
|
export function Hello() {
|
|
return (
|
|
<div className="text-center" css="text-center">
|
|
Hello, world!
|
|
</div>
|
|
);
|
|
}
|
|
`,
|
|
});
|
|
|
|
const clsName = getClassName("text-center");
|
|
expect(files.js.text).toContain(`className: "text-center ${clsName}"`);
|
|
expect(files.css.text).toMatch(`.${clsName} {\n text-align: center;\n}`);
|
|
});
|
|
|
|
it("existing function", async () => {
|
|
const { files } = await compileESBuild({
|
|
clsx: "emotion",
|
|
expectFiles: 2,
|
|
javascript: /* tsx */ `
|
|
export function Hello() {
|
|
return (
|
|
<div className={({ isEntering }) => isEntering ? "enter" : "exit"} css="text-center">
|
|
Hello, world!
|
|
</div>
|
|
);
|
|
}
|
|
`,
|
|
});
|
|
|
|
const clsName = getClassName("text-center");
|
|
expect(files.js.text).toContain(
|
|
`className: ({\n isEntering\n }) => _cx("${clsName}", isEntering ? "enter" : "exit")`
|
|
);
|
|
expect(files.css.text).toMatch(`.${clsName} {\n text-align: center;\n}`);
|
|
});
|
|
|
|
it("supports composeRenderProps", async () => {
|
|
const { files } = await compileESBuild({
|
|
clsx: "clsx",
|
|
expectFiles: 2,
|
|
composeRenderProps: true,
|
|
javascript: /* tsx */ `
|
|
export function Hello(props) {
|
|
return (
|
|
<div {...props} css="text-center">
|
|
Hello, world!
|
|
</div>
|
|
);
|
|
}
|
|
`,
|
|
});
|
|
|
|
const clsName = getClassName("text-center");
|
|
expect(files.js.text).toContain(
|
|
`{ ...props, className: _composeClassName("${clsName}", _className),`
|
|
);
|
|
});
|
|
|
|
it("supports composeRenderProps (2)", async () => {
|
|
const { files } = await compileESBuild({
|
|
clsx: "clsx",
|
|
expectFiles: 2,
|
|
composeRenderProps: true,
|
|
javascript: /* tsx */ `
|
|
export function Hello({ className, ...props }) {
|
|
return (
|
|
<div className={className} css="text-center">
|
|
<span {...props}>Hello, world!</span>
|
|
</div>
|
|
);
|
|
}
|
|
`,
|
|
});
|
|
|
|
const clsName = getClassName("text-center");
|
|
expect(files.js.text).toContain(
|
|
`{ className: _composeClassName("${clsName}", className),`
|
|
);
|
|
});
|
|
|
|
it("reuses clsx in scope", async () => {
|
|
const { files } = await compileESBuild({
|
|
clsx: "clsx",
|
|
expectFiles: 2,
|
|
javascript: /* tsx */ `
|
|
import { clsx } from "clsx";
|
|
|
|
export function Hello(className) {
|
|
return (
|
|
<div className={clsx("font-semibold", className)} css="text-center" />
|
|
);
|
|
}
|
|
`,
|
|
});
|
|
|
|
expect([...files.js.text.match(/from "clsx"/g)!]).toHaveLength(1);
|
|
expect(files.js.text).toContain(
|
|
'{ className: clsx("tw-gqn2k6", "font-semibold", className)'
|
|
);
|
|
});
|
|
|
|
it("does not reuse invalid clsx", async () => {
|
|
const { files } = await compileESBuild({
|
|
clsx: "clsx",
|
|
expectFiles: 2,
|
|
javascript: /* tsx */ `
|
|
import { clsx } from "clsx";
|
|
|
|
export function Hello(className) {
|
|
let clsx = () => {};
|
|
return (
|
|
<div className={clsx("font-semibold", className)} css="text-center" />
|
|
);
|
|
}
|
|
`,
|
|
});
|
|
|
|
expect(files.js.text).toContain(
|
|
'className: _cx("tw-gqn2k6", clsx("font-semibold", className))'
|
|
);
|
|
});
|
|
});
|