diff --git a/packages/tailwindcss-animations/test/index.test.ts b/packages/tailwindcss-animations/test/index.test.ts index b295111..b1ccf5b 100644 --- a/packages/tailwindcss-animations/test/index.test.ts +++ b/packages/tailwindcss-animations/test/index.test.ts @@ -6,26 +6,22 @@ import { theme } from "../src/theme.js" export const generateClasses = extractClasses(plugin) describe("Plugin", () => { - describe("Loading plugin", () => { - test.concurrent("should load utility classes from theme", async () => { - const html = `
` - 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.concurrent("should load utility classes from theme", async () => { + const html = `
` + 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 () => { + test.concurrent("should load keyframes utility classes from theme", 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 = `
` - const css = await generateClasses(html) - expect(css).toMatch(".flex{display:flex}.w-full{width:100%}.items-center{align-items:center}.px-2{padding-left:0.5rem;padding-right:0.5rem}") - }) + test.concurrent("should not create conflicting classes", async () => { + const html = `
` + const css = await generateClasses(html) + expect(css).toMatch(".flex{display:flex}.w-full{width:100%}.items-center{align-items:center}.px-2{padding-left:0.5rem;padding-right:0.5rem}") }) }) diff --git a/packages/tailwindcss-animations/test/utils.test.ts b/packages/tailwindcss-animations/test/utils.test.ts index 6e0b012..821fe9a 100644 --- a/packages/tailwindcss-animations/test/utils.test.ts +++ b/packages/tailwindcss-animations/test/utils.test.ts @@ -3,10 +3,22 @@ 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" }, + { + input: "animation", + expected: "animation", + }, + { + input: "animationDelay", + expected: "animation-delay", + }, + { + input: "animationDuration", + expected: "animation-duration", + }, + { + input: "animationIterationCount", + expected: "animation-iteration-count", + }, ] testCases.forEach(({ input, expected }) => { @@ -17,10 +29,28 @@ describe("toSlashCase", () => { }) 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) + const testCases = [ + { + input: "animationDelay", + expected: true, + }, + { + input: "animationDuration", + expected: true, + }, + { + input: "animation", + expected: false, + }, + { + input: "keyframes", + expected: false, + }, + ] + + testCases.forEach(({ input, expected }) => { + test.concurrent(`matches ${input} as ${expected}`, ({ expect }) => { + expect(matchUtilitiesRegex.test(input)).toBe(expected) + }) }) }) diff --git a/packages/tailwindcss-core/test/index.test.ts b/packages/tailwindcss-core/test/index.test.ts index 0e05ad1..4140204 100644 --- a/packages/tailwindcss-core/test/index.test.ts +++ b/packages/tailwindcss-core/test/index.test.ts @@ -1,4 +1,4 @@ -import { describe, test, expect } from "vitest" +import { describe, test } from "vitest" import { extractClasses } from "../src/generate-classes" import { merge } from "../src/merge" @@ -13,65 +13,80 @@ const generateClasses = extractClasses({ }) describe("Extract classes from tailwindcss", () => { - test("Extract classes without provided HTML content", async () => { - const html = `` - const css = await generateClasses(html) - expect(css).toMatch("") - }) - - test("Extract classes with provided empty HTML content", async () => { - const html = `
` - const css = await generateClasses(html) - expect(css).toMatch("") - }) + const testCases = [ + { + input: ``, + expected: "", + }, + { + input: `
`, + expected: "", + }, + { + input: `
`, + expected: ".text-lg{font-size:1.125rem;line-height:1.75rem}", + }, + ] - test("Extract classes with provided HTML content and Tailwindcss class", async () => { - const html = `
` - const css = await generateClasses(html) - expect(css).toMatch(".text-lg{font-size:1.125rem;line-height:1.75rem}") + testCases.forEach(({ input, expected }) => { + const extract = input.match(/class="([^"]*)"/)?.[1] + test(`Extract classes from HTML content: ${extract}`, async ({ expect }) => { + const css = await generateClasses(input) + expect(css).toMatch(expected) + }) }) }) describe("Merge objects", () => { - test("Merge two objects", () => { - const source = { a: 1, b: 2 } - const target = { b: 3, c: 4 } - expect(merge(source, target)).toEqual({ a: 1, b: 3, c: 4 }) - }) - - test("Merge two objects with nested objects", () => { - const source = { a: 1, b: { c: 2 } } - const target = { b: 3, c: 4 } - expect(merge(source, target)).toEqual({ a: 1, b: { c: 2 }, c: 4 }) - }) - - test("Merge two objects with nested objects and nested objects", () => { - const source = { a: 1, b: { c: 2 } } - const target = { b: { c: 3 }, c: 4 } - expect(merge(source, target)).toEqual({ a: 1, b: { c: 3 }, c: 4 }) - }) - - test("Merge two objects with nested objects and nested objects with different keys", () => { - const source = { a: 1, b: { c: 2 } } - const target = { b: { d: 3 }, c: 4 } - expect(merge(source, target)).toEqual({ a: 1, b: { c: 2, d: 3 }, c: 4 }) - }) - - test("Merge two objects with nested objects and nested objects with different keys and nested objects", () => { - const source = { a: 1, b: { c: 2, d: { e: 3 } } } - const target = { b: { d: 4 }, c: 5 } - expect(merge(source, target)).toEqual({ a: 1, b: { c: 2, d: { e: 3 } }, c: 5 }) - }) - - test("Merge two objects with nested objects and nested objects with different keys and nested objects with different keys", () => { - const source = { a: 1, b: { c: 2, d: { e: 3 } } } - const target = { b: { d: { f: 4 } }, c: 5 } - expect(merge(source, target)).toEqual({ a: 1, b: { c: 2, d: { e: 3, f: 4 } }, c: 5 }) - }) + const testCases = [ + { + description: "Merge two objects", + source: { a: 1, b: 2 }, + target: { b: 3, c: 4 }, + expected: { a: 1, b: 3, c: 4 }, + }, + { + description: "Merge two objects with nested objects", + source: { a: 1, b: { c: 2 } }, + target: { b: 3, c: 4 }, + expected: { a: 1, b: { c: 2 }, c: 4 }, + }, + { + description: "Merge two objects with nested objects and nested objects", + source: { a: 1, b: { c: 2 } }, + target: { b: { c: 3 }, c: 4 }, + expected: { a: 1, b: { c: 3 }, c: 4 }, + }, + { + description: "Merge two objects with nested objects and nested objects with different keys", + source: { a: 1, b: { c: 2 } }, + target: { b: { d: 3 }, c: 4 }, + expected: { a: 1, b: { c: 2, d: 3 }, c: 4 }, + }, + { + description: "Merge two objects with nested objects and nested objects with different keys and nested objects", + source: { a: 1, b: { c: 2, d: { e: 3 } } }, + target: { b: { d: 4 }, c: 5 }, + expected: { a: 1, b: { c: 2, d: { e: 3 } }, c: 5 }, + }, + { + description: "Merge two objects with nested objects and nested objects with different keys and nested objects with different keys", + source: { a: 1, b: { c: 2, d: { e: 3 } } }, + target: { b: { d: { f: 4 } }, c: 5 }, + expected: { a: 1, b: { c: 2, d: { e: 3, f: 4 } }, c: 5 }, + }, + { + description: "Merge two object with nested object and nested object without priority", + source: { a: 1, b: { c: 2, d: { e: 3 } } }, + target: { b: { d: 4 }, c: 5 }, + expected: { a: 1, b: { c: 2, d: 4 }, c: 5 }, + priority: false, + }, + ] - test("Merge two object with nested object and nested object without priority", () => { - const source = { a: 1, b: { c: 2, d: { e: 3 } } } - const target = { b: { d: 4 }, c: 5 } - expect(merge(source, target, false)).toEqual({ a: 1, b: { c: 2, d: 4 }, c: 5 }) + testCases.forEach(({ description, source, target, expected, priority = true }) => { + test.concurrent(description, ({ expect }) => { + expect(merge(source, target, priority)).toEqual(expected) + }) }) }) diff --git a/packages/tailwindcss-utilities/test/index.test.ts b/packages/tailwindcss-utilities/test/index.test.ts index 4e34122..80d28b2 100644 --- a/packages/tailwindcss-utilities/test/index.test.ts +++ b/packages/tailwindcss-utilities/test/index.test.ts @@ -8,34 +8,35 @@ describe("scroll utilities", () => { const testCases = [ { input: `
`, - output: ".scroll\\:w-2::-webkit-scrollbar{width:0.5rem}", + expected: ".scroll\\:w-2::-webkit-scrollbar{width:0.5rem}", }, { input: `
`, - output: ".scroll\\:w-\\[10px\\]::-webkit-scrollbar{width:10px}", + expected: ".scroll\\:w-\\[10px\\]::-webkit-scrollbar{width:10px}", }, { input: `
`, - output: ".thumb\\:my-4::-webkit-scrollbar-thumb{margin-top:1rem;margin-bottom:1rem}", + expected: ".thumb\\:my-4::-webkit-scrollbar-thumb{margin-top:1rem;margin-bottom:1rem}", }, { input: `
`, - output: ".thumb\\:my-\\[8px\\]::-webkit-scrollbar-thumb{margin-top:8px;margin-bottom:8px}", + expected: ".thumb\\:my-\\[8px\\]::-webkit-scrollbar-thumb{margin-top:8px;margin-bottom:8px}", }, { input: `
`, - output: ".track\\:border::-webkit-scrollbar-track{border-width:1px}", + expected: ".track\\:border::-webkit-scrollbar-track{border-width:1px}", }, { input: `
`, - output: ".track\\:border-\\[3px\\]::-webkit-scrollbar-track{border-width:3px}", + expected: ".track\\:border-\\[3px\\]::-webkit-scrollbar-track{border-width:3px}", }, ] - testCases.forEach(({ input, output }) => { + + testCases.forEach(({ input, expected }) => { const extract = input.match(/class="([^"]*)"/)?.[1] test.concurrent(`generate the css for ${extract}`, async ({ expect }) => { const css = await generateClasses(input) - expect(css).toMatch(output) + expect(css).toMatch(expected) }) }) }) @@ -44,30 +45,31 @@ describe("min-width utilities", () => { const testCases = [ { input: `
`, - output: ".min-w-sm{min-width:640px}", + expected: ".min-w-sm{min-width:640px}", }, { input: `
`, - output: ".min-w-md{min-width:768px}", + expected: ".min-w-md{min-width:768px}", }, { input: `
`, - output: ".min-w-lg{min-width:1024px}", + expected: ".min-w-lg{min-width:1024px}", }, { input: `
`, - output: ".min-w-xl{min-width:1280px}", + expected: ".min-w-xl{min-width:1280px}", }, { input: `
`, - output: ".min-w-2xl{min-width:1526px}", + expected: ".min-w-2xl{min-width:1526px}", }, ] - testCases.forEach(({ input, output }) => { + + testCases.forEach(({ input, expected }) => { const extract = input.match(/class="([^"]*)"/)?.[1] test.concurrent(`generate the css for ${extract}`, async ({ expect }) => { const css = await generateClasses(input) - expect(css).toMatch(output) + expect(css).toMatch(expected) }) }) }) @@ -76,23 +78,23 @@ describe("psuedo classes utilities", () => { const testCases = [ { input: `
`, - output: ".where-\\[div\\]\\:w-10:where(div){width:2.5rem}", + expected: ".where-\\[div\\]\\:w-10:where(div){width:2.5rem}", }, { input: `
`, - output: ".is-\\[div\\]\\:w-10:is(div){width:2.5rem}", + expected: ".is-\\[div\\]\\:w-10:is(div){width:2.5rem}", }, { input: `
`, - output: "w-10{width:2.5rem}.not-\\[ul\\]\\:w-1\\.5:not(ul){width:0.375rem}", + expected: "w-10{width:2.5rem}.not-\\[ul\\]\\:w-1\\.5:not(ul){width:0.375rem}", }, ] - testCases.forEach(({ input, output }) => { + + testCases.forEach(({ input, expected }) => { const extract = input.match(/class="([^"]*)"/)?.[1] test.concurrent(`generate the css for ${extract}`, async ({ expect }) => { const css = await generateClasses(input) - console.log(css) - expect(css).toMatch(output) + expect(css).toMatch(expected) }) }) })