chore: add tests to check the theme config

Author: halvaradop

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

@@ -1,7 +1,8 @@
 import { describe, test, expect } from "vitest"
 import { extractClasses } from "@halvaradop/tailwindcss-core/utils"
-import plugin from "../src/index.js"
+import { plugin } from "../src/index.js"
 import { toSlashCase } from "../src/utils.js"
+import { theme } from "../src/theme.js"
 
 export const generateClasses = extractClasses(plugin)
 
@@ -11,9 +12,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,6 +63,31 @@ describe("Animate delay utility classes", () => {
     })
 })
 
+describe("Keyframes utility classes", () => {
+    const testCases = [
+        {
+            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(({ className, expected }) => {
+        test.concurrent(`keyframes with class ${className}`, async () => {
+            const html = `<div class="${className}"></div>`
+            const css = await generateClasses(html)
+            expect(css).toMatch(expected)
+        })
+    })
+})
+
 describe("toSlashCase", () => {
     const testCases = [
         { input: "animation", expected: "animation" },