734382b5b3
* Moving to vitest * Rearranging test * Fixing prettier linting * Reverting launch.json * Adjustments * Merged with main and regenerated lockfile * Fixing tests for API * Yarn updated, docs is gone --------- Co-authored-by: Peer Richelsen <peeroke@gmail.com> Co-authored-by: zomars <zomars@me.com> Co-authored-by: Alex van Andel <me@alexvanandel.com>
55 lines
2.0 KiB
TypeScript
55 lines
2.0 KiB
TypeScript
import { describe, expect, it } from "vitest";
|
|
|
|
import { applyStyleToMultipleVariants } from "./cva";
|
|
|
|
describe("CVA Utils", () => {
|
|
it("Should return an array of all possible variants", () => {
|
|
const variants = {
|
|
color: ["blue", "red"],
|
|
size: ["small", "medium", "large"],
|
|
className: "text-blue w-10",
|
|
};
|
|
|
|
const result = applyStyleToMultipleVariants(variants);
|
|
expect(result).toEqual([
|
|
{ color: "blue", size: "small", className: "text-blue w-10" },
|
|
{ color: "blue", size: "medium", className: "text-blue w-10" },
|
|
{ color: "blue", size: "large", className: "text-blue w-10" },
|
|
{ color: "red", size: "small", className: "text-blue w-10" },
|
|
{ color: "red", size: "medium", className: "text-blue w-10" },
|
|
{ color: "red", size: "large", className: "text-blue w-10" },
|
|
]);
|
|
});
|
|
|
|
it("Should no erorr when no arrays are passed in", () => {
|
|
const variants = {
|
|
color: "blue",
|
|
size: "large",
|
|
className: "text-blue w-10",
|
|
};
|
|
|
|
const result = applyStyleToMultipleVariants(variants);
|
|
expect(result).toEqual([{ color: "blue", size: "large", className: "text-blue w-10" }]);
|
|
});
|
|
|
|
it("Should accept numbers, null values, booleans and undefined in arrays as well", () => {
|
|
const variants = {
|
|
color: ["blue", null],
|
|
size: ["small", 30, false, undefined],
|
|
className: "text-blue w-10",
|
|
};
|
|
|
|
const result = applyStyleToMultipleVariants(variants);
|
|
expect(result).toEqual([
|
|
{ color: "blue", size: "small", className: "text-blue w-10" },
|
|
{ color: "blue", size: 30, className: "text-blue w-10" },
|
|
{ color: "blue", size: false, className: "text-blue w-10" },
|
|
{ color: "blue", size: undefined, className: "text-blue w-10" },
|
|
{ color: null, size: "small", className: "text-blue w-10" },
|
|
{ color: null, size: 30, className: "text-blue w-10" },
|
|
{ color: null, size: false, className: "text-blue w-10" },
|
|
{ color: null, size: undefined, className: "text-blue w-10" },
|
|
]);
|
|
});
|
|
});
|