test: add checkers pattern tests

Author: yet3

tests/config.test.ts

@@ -5,6 +5,7 @@ import {
 	LINE_WIDTHS,
 	OFFSETS,
 	SPACING,
+  SQUARE_SIZES,
 } from "../src/consts";
 import { css, expectCssToBe, generateTwCss } from "./utils";
 
@@ -55,6 +56,31 @@ describe("dot sizes", () => {
 	});
 });
 
+describe("square sizes", () => {
+	test(`square sizes ${SQUARE_SIZES[0]}-${SQUARE_SIZES[SQUARE_SIZES.length - 1]}`, async () => {
+		const expected: string[] = [];
+		const classes: string[] = [];
+		for (const value of SQUARE_SIZES) {
+			classes.push(`${DEFAULT_OPTS.prefix}pattern-square-${value}`);
+			expected.push(
+				css`.${DEFAULT_OPTS.prefix}pattern-square-${value} {
+            --tw-square-size: ${value} /* px */
+        }`,
+			);
+		}
+		expectCssToBe(await generateTwCss(classes.join(" ")), expected.join(""));
+	});
+
+	test("custom square size", async () => {
+		expectCssToBe(
+			await generateTwCss(`${DEFAULT_OPTS.prefix}pattern-square-[321]`),
+			css`.${DEFAULT_OPTS.prefix}pattern-square-[321] {
+          --tw-square-size: 321 /* px */
+        }`,
+		);
+	});
+});
+
 describe("spacing", () => {
 	test(`spacing ${SPACING[0]}-${SPACING[SPACING.length - 1]}`, async () => {
 		const expected: string[] = [];
@@ -174,3 +200,32 @@ describe("dot colors", () => {
 		);
 	});
 });
+
+describe("square colors", () => {
+	test("custom color", async () => {
+		expectCssToBe(
+			await generateTwCss(`${DEFAULT_OPTS.prefix}pattern-square-[#f8f8f8]`),
+			css`.${DEFAULT_OPTS.prefix}pattern-square-[#f8f8f8] {
+        --tw-square-color: #f8f8f8
+    }`,
+		);
+	});
+
+	test("color with variant", async () => {
+		expectCssToBe(
+			await generateTwCss(`${DEFAULT_OPTS.prefix}pattern-square-red-300`),
+			css`.${DEFAULT_OPTS.prefix}pattern-square-red-300 {
+        --tw-square-color: #fca5a5
+    }`,
+		);
+	});
+
+	test("color without variant", async () => {
+		expectCssToBe(
+			await generateTwCss(`${DEFAULT_OPTS.prefix}pattern-square-white`),
+			css`.${DEFAULT_OPTS.prefix}pattern-square-white {
+        --tw-square-color: #fff
+    }`,
+		);
+	});
+});

tests/consts.test.ts

@@ -5,6 +5,7 @@ import {
 	LINE_WIDTHS,
 	OFFSETS,
 	SPACING,
+  SQUARE_SIZES,
 } from "../src/consts";
 
 describe("default production values", () => {
@@ -23,6 +24,10 @@ describe("default production values", () => {
 		expect(DOT_SIZES).toEqual([...Array(96)].map((_, i) => i + 1));
 	});
 
+	test("square sizes", () => {
+		expect(SQUARE_SIZES).toEqual([...Array(96)].map((_, i) => i + 1));
+	});
+
 	test("offsets", () => {
 		expect(OFFSETS).toEqual([...Array(128 + 17)].map((_, i) => i));
 	});

tests/patterns/checkers.test.ts

@@ -0,0 +1,20 @@
+import { test } from "vitest";
+import { DEFAULT_OPTS } from "../../src/consts";
+import { css, expectCssToBe, generateTwCss } from "../utils";
+
+test("checkers pattern", async () => {
+	expectCssToBe(
+		await generateTwCss(`${DEFAULT_OPTS.prefix}pattern-checkers`),
+		css`.${DEFAULT_OPTS.prefix}pattern-checkers {
+      --tw-square-size: 32;
+      --tw-offset-x: 0px;
+      --tw-offset-y: 0px;
+      --tw-square-color: #ffffff;
+      --tw-unit: calc(var(--tw-square-size)* 1px);
+      --tw-total-size: calc(var(--tw-unit)* 2);
+      background-image: linear-gradient(45deg, var(--tw-square-color) 25%, transparent 25%), linear-gradient(-45deg, var(--tw-square-color) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--tw-square-color) 75%), linear-gradient(-45deg, transparent 75%, var(--tw-square-color) 75%);
+      background-size: var(--tw-total-size) var(--tw-total-size);
+      background-position: var(--tw-offset-x) var(--tw-offset-y), var(--tw-offset-x) calc(var(--tw-offset-y) + var(--tw-unit)), calc(var(--tw-offset-x) + var(--tw-unit)) calc(var(--tw-offset-y) - var(--tw-unit)), calc(var(--tw-offset-x) - var(--tw-unit)) var(--tw-offset-y)
+    }`,
+	);
+});