chore: add tests to check the theme config (#74)

* chore: add tests to check the theme config

* chore: add `utils.test.ts` file

* chore: remove `addUtilitiesRegex`

Author: halvaradop

packages/tailwindcss-animations/src/utils.ts

@@ -10,18 +10,6 @@
  */
 export const matchUtilitiesRegex = new RegExp(/^(animation(?=Delay|Duration|Steps|IterationCount|FillMode|Range))/)
 
-/**
- * Match utilities that are generated by addUtilities function provided by TailwindCSS.
- * @example
- *
- * // Expected: true
- * addUtilitiesRegex.test("animation")
- *
- * // Expected: false
- * addUtilitiesRegex.test("animation-delay-100")
- */
-export const addUtilitiesRegex = new RegExp(/^(animation|keyframes|animationCubicBezier)/)
-
 /**
  * Converts a camelCase string to a slash-case string.
  *

packages/tailwindcss-animations/test/index.test.ts

@@ -1,7 +1,7 @@
 import { describe, test, expect } from "vitest"
 import { extractClasses } from "@halvaradop/tailwindcss-core/utils"
-import plugin from "../src/index.js"
-import { toSlashCase } from "../src/utils.js"
+import { plugin } from "../src/index.js"
+import { theme } from "../src/theme.js"
 
 export const generateClasses = extractClasses(plugin)
 
@@ -11,9 +11,15 @@ describe("Plugin", () => {
             const html = `<div class="animation-delay-100"></div>`
             const css = await generateClasses(html)
             expect(css).toMatch(".animation-delay-100{animation-delay:100ms}")
+            expect(css).not.toMatch(".animation-delay-200{animation-delay:200ms}")
         })
     })
 
+    test("Loaded keyframes utility classes", async () => {
+        expect(plugin.config?.theme?.keyframes).toEqual(theme.keyframes)
+        expect(plugin.config?.theme?.keyframes).not.toEqual({})
+    })
+
     describe("Conflict prevention", () => {
         test.concurrent("should not create conflicting classes", async () => {
             const html = `<div class="w-full px-2 flex items-center"></div>`
@@ -56,17 +62,27 @@ describe("Animate delay utility classes", () => {
     })
 })
 
-describe("toSlashCase", () => {
+describe("Keyframes utility classes", () => {
     const testCases = [
-        { input: "animation", expected: "animation" },
-        { input: "animationDelay", expected: "animation-delay" },
-        { input: "animationDuration", expected: "animation-duration" },
-        { input: "animationIterationCount", expected: "animation-iteration-count" },
+        {
+            className: "animate-fade-in",
+            expected: "@keyframes fade-in{0%{opacity:0}100%{opacity:1}}",
+        },
+        {
+            className: "animate-fade-out",
+            expected: "@keyframes fade-out{0%{opacity:1}100%{opacity:0}}",
+        },
+        {
+            className: "animate-rotate-90",
+            expected: "@keyframes rotate-90{0%{transform:rotate(0deg)}100%{transform:rotate(90deg)}}",
+        },
     ]
 
-    testCases.forEach(({ input, expected }) => {
-        test(`converts ${input} to ${expected}`, () => {
-            expect(toSlashCase(input)).toBe(expected)
+    testCases.forEach(({ className, expected }) => {
+        test.concurrent(`keyframes with class ${className}`, async () => {
+            const html = `<div class="${className}"></div>`
+            const css = await generateClasses(html)
+            expect(css).toMatch(expected)
         })
     })
 })

packages/tailwindcss-animations/test/utils.test.ts

@@ -0,0 +1,26 @@
+import { describe, test, expect } from "vitest"
+import { toSlashCase, matchUtilitiesRegex } from "../src/utils.js"
+
+describe("toSlashCase", () => {
+    const testCases = [
+        { input: "animation", expected: "animation" },
+        { input: "animationDelay", expected: "animation-delay" },
+        { input: "animationDuration", expected: "animation-duration" },
+        { input: "animationIterationCount", expected: "animation-iteration-count" },
+    ]
+
+    testCases.forEach(({ input, expected }) => {
+        test(`converts ${input} to ${expected}`, () => {
+            expect(toSlashCase(input)).toBe(expected)
+        })
+    })
+})
+
+describe("matchUtilitiesRegex", () => {
+    test("matches animation utilities", () => {
+        expect(matchUtilitiesRegex.test("animationDelay")).toBe(true)
+        expect(matchUtilitiesRegex.test("animationDuration")).toBe(true)
+        expect(matchUtilitiesRegex.test("animation")).toBe(false)
+        expect(matchUtilitiesRegex.test("keyframes")).toBe(false)
+    })
+})