Skip to content

Commit

Permalink
chore: organize tests in packages (#83)
Browse files Browse the repository at this point in the history
  • Loading branch information
@halvaradop
halvaradop authored Oct 24, 2024
1 parent 1f4763d commit 21be3e2
Show file tree
Hide file tree
Showing 4 changed files with 142 additions and 99 deletions.
24 changes: 10 additions & 14 deletions packages/tailwindcss-animations/test/index.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 = `<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.concurrent("should load utility classes from theme", async () => {
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 () => {
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 = `<div class="w-full px-2 flex items-center"></div>`
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 = `<div class="w-full px-2 flex items-center"></div>`
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}")
})
})

Expand Down
48 changes: 39 additions & 9 deletions packages/tailwindcss-animations/test/utils.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 }) => {
Expand All @@ -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)
})
})
})
125 changes: 70 additions & 55 deletions packages/tailwindcss-core/test/index.test.ts
View file
Original file line number Diff line number Diff line change
@@ -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"

Expand All @@ -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 = `<div class=""></div>`
const css = await generateClasses(html)
expect(css).toMatch("")
})
const testCases = [
{
input: ``,
expected: "",
},
{
input: `<div class=""></div>`,
expected: "",
},
{
input: `<div class="text-lg"></div>`,
expected: ".text-lg{font-size:1.125rem;line-height:1.75rem}",
},
]

test("Extract classes with provided HTML content and Tailwindcss class", async () => {
const html = `<div class="text-lg"></div>`
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)
})
})
})
44 changes: 23 additions & 21 deletions packages/tailwindcss-utilities/test/index.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,34 +8,35 @@ describe("scroll utilities", () => {
const testCases = [
{
input: `<div class="scroll:w-2"></div>`,
output: ".scroll\\:w-2::-webkit-scrollbar{width:0.5rem}",
expected: ".scroll\\:w-2::-webkit-scrollbar{width:0.5rem}",
},
{
input: `<div class="scroll:w-[10px]"></div>`,
output: ".scroll\\:w-\\[10px\\]::-webkit-scrollbar{width:10px}",
expected: ".scroll\\:w-\\[10px\\]::-webkit-scrollbar{width:10px}",
},
{
input: `<div class="thumb:my-4"></div>`,
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: `<div class="thumb:my-[8px]"></div>`,
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: `<div class="track:border"></div>`,
output: ".track\\:border::-webkit-scrollbar-track{border-width:1px}",
expected: ".track\\:border::-webkit-scrollbar-track{border-width:1px}",
},
{
input: `<div class="track:border-[3px]"></div>`,
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)
})
})
})
Expand All @@ -44,30 +45,31 @@ describe("min-width utilities", () => {
const testCases = [
{
input: `<div class="min-w-sm"></div>`,
output: ".min-w-sm{min-width:640px}",
expected: ".min-w-sm{min-width:640px}",
},
{
input: `<div class="min-w-md"></div>`,
output: ".min-w-md{min-width:768px}",
expected: ".min-w-md{min-width:768px}",
},
{
input: `<div class="min-w-lg"></div>`,
output: ".min-w-lg{min-width:1024px}",
expected: ".min-w-lg{min-width:1024px}",
},
{
input: `<div class="min-w-xl"></div>`,
output: ".min-w-xl{min-width:1280px}",
expected: ".min-w-xl{min-width:1280px}",
},
{
input: `<div class="min-w-2xl"></div>`,
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)
})
})
})
Expand All @@ -76,23 +78,23 @@ describe("psuedo classes utilities", () => {
const testCases = [
{
input: `<div class="where-[div]:w-10"></div>`,
output: ".where-\\[div\\]\\:w-10:where(div){width:2.5rem}",
expected: ".where-\\[div\\]\\:w-10:where(div){width:2.5rem}",
},
{
input: `<div class="is-[div]:w-10"></div>`,
output: ".is-\\[div\\]\\:w-10:is(div){width:2.5rem}",
expected: ".is-\\[div\\]\\:w-10:is(div){width:2.5rem}",
},
{
input: `<div class="w-10 not-[ul]:w-1.5"></div>`,
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)
})
})
})

0 comments on commit 21be3e2

Please sign in to comment.