Skip to content

Commit 8e033dd

Browse files
heidkaemperheidkaemper
committed
add legacy tailwind tests
1 parent 168936a commit 8e033dd

File tree

5 files changed

+186
-80
lines changed

5 files changed

+186
-80
lines changed

‎.github/workflows/npm-publish.yml renamed to ‎.github/workflows/publish.yml

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
name: NPM Publish
1+
name: Publish
22

33
on:
44
release:
@@ -13,6 +13,7 @@ jobs:
1313
with:
1414
node-version: '20.x'
1515
- run: npm install
16+
- run: npm install --prefix jest/legacy
1617
- run: npm test
1718

1819
publish:

‎.github/workflows/ci.yml renamed to ‎.github/workflows/tests.yml

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,20 @@
1-
name: CI
1+
name: Tests
22

33
on: [push, pull_request]
44

55
jobs:
66
test:
7-
87
runs-on: ubuntu-latest
9-
108
strategy:
119
matrix:
12-
node-version: [20.x, 21.x]
13-
10+
node-version: [20.x, 22.x]
1411
steps:
1512
- uses: actions/checkout@v3
1613
- name: Use Node.js ${{ matrix.node-version }}
1714
uses: actions/setup-node@v3
1815
with:
1916
node-version: ${{ matrix.node-version }}
20-
- run: yarn
21-
- run: yarn lint
22-
- run: yarn test
17+
- run: npm install
18+
- run: npm install --prefix jest/legacy
19+
- run: npm run lint
20+
- run: npm run test

‎jest/index.test.js

Lines changed: 73 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -22,84 +22,86 @@ async function run(file, options = {}) {
2222
return result.css
2323
}
2424

25-
it('generates `delay` utilities', async () => {
26-
expect(await run('content/delay.html', { scope: 'utilities' })).toIncludeAll([
27-
'.animate-delay-75 { animation-delay: 75ms; }',
28-
'.animate-delay-333 { animation-delay: 333ms; }',
29-
'.animate-delay-\\[666ms\\] { animation-delay: 666ms; }',
30-
])
31-
})
25+
describe('modern tailwind', () => {
26+
it('generates `composition` utilities', async () => {
27+
expect(await run('content/composition.html', { scope: 'utilities' })).toIncludeAll([
28+
'.animate-add { animation-composition: add; }',
29+
'.animate-replace { animation-composition: replace; }',
30+
'.animate-accumulate { animation-composition: accumulate; }',
31+
])
32+
})
3233

33-
it('generates `duration` utilities', async () => {
34-
expect(await run('content/duration.html', { scope: 'utilities' })).toIncludeAll([
35-
'.animate-duration-75 { animation-duration: 75ms; }',
36-
'.animate-duration-333 { animation-duration: 333ms; }',
37-
'.animate-duration-\\[666ms\\] { animation-duration: 666ms; }',
38-
])
39-
})
34+
it('generates `delay` utilities', async () => {
35+
expect(await run('content/delay.html', { scope: 'utilities' })).toIncludeAll([
36+
'.animate-delay-75 { animation-delay: 75ms; }',
37+
'.animate-delay-333 { animation-delay: 333ms; }',
38+
'.animate-delay-\\[666ms\\] { animation-delay: 666ms; }',
39+
])
40+
})
4041

41-
it('generates `direction` utilities', async () => {
42-
expect(await run('content/direction.html', { scope: 'utilities' })).toIncludeAll([
43-
'.animate-normal { animation-direction: normal; }',
44-
'.animate-reverse { animation-direction: reverse; }',
45-
])
46-
})
42+
it('generates `direction` utilities', async () => {
43+
expect(await run('content/direction.html', { scope: 'utilities' })).toIncludeAll([
44+
'.animate-normal { animation-direction: normal; }',
45+
'.animate-reverse { animation-direction: reverse; }',
46+
])
47+
})
4748

48-
it('generates `fill-mode` utilities', async () => {
49-
expect(await run('content/fill-mode.html', { scope: 'utilities' })).toIncludeAll([
50-
'.animate-fill-both { animation-fill-mode: both; }',
51-
'.animate-fill-none { animation-fill-mode: normal; }',
52-
])
53-
})
49+
it('generates `duration` utilities', async () => {
50+
expect(await run('content/duration.html', { scope: 'utilities' })).toIncludeAll([
51+
'.animate-duration-75 { animation-duration: 75ms; }',
52+
'.animate-duration-333 { animation-duration: 333ms; }',
53+
'.animate-duration-\\[666ms\\] { animation-duration: 666ms; }',
54+
])
55+
})
5456

55-
it('generates `iteration-count` utilities', async () => {
56-
expect(await run('content/iteration-count.html', { scope: 'utilities' })).toIncludeAll([
57-
'.animate-infinite { animation-iteration-count: infinite; }',
58-
'.animate-once { animation-iteration-count: 1; }',
59-
'.animate-iteration-7 { animation-iteration-count: 7; }',
60-
'.animate-iteration-\\[14\\] { animation-iteration-count: 14; }',
61-
])
62-
})
57+
it('generates `fill-mode` utilities', async () => {
58+
expect(await run('content/fill-mode.html', { scope: 'utilities' })).toIncludeAll([
59+
'.animate-fill-both { animation-fill-mode: both; }',
60+
'.animate-fill-none { animation-fill-mode: normal; }',
61+
])
62+
})
6363

64-
it('generates `play-state` utilities', async () => {
65-
expect(await run('content/play-state.html', { scope: 'utilities' })).toIncludeAll([
66-
'.animate-play { animation-play-state: running; }',
67-
'.animate-stop { animation-play-state: paused; }',
68-
])
69-
})
64+
it('generates `iteration-count` utilities', async () => {
65+
expect(await run('content/iteration-count.html', { scope: 'utilities' })).toIncludeAll([
66+
'.animate-infinite { animation-iteration-count: infinite; }',
67+
'.animate-once { animation-iteration-count: 1; }',
68+
'.animate-iteration-7 { animation-iteration-count: 7; }',
69+
'.animate-iteration-\\[14\\] { animation-iteration-count: 14; }',
70+
])
71+
})
7072

71-
it('generates `timing-function` utilities', async () => {
72-
expect(await run('content/timing-function.html', { scope: 'utilities' })).toIncludeAll([
73-
'.animate-ease { animation-timing-function: ease; }',
74-
'.animate-ease-linear { animation-timing-function: linear; }',
75-
'.animate-ease-\\[cubic-bezier\\(1\\,0\\.66\\,0\\.33\\,0\\)\\] { animation-timing-function: cubic-bezier(1,0.66,0.33,0); }',
76-
])
77-
})
73+
it('generates `play-state` utilities', async () => {
74+
expect(await run('content/play-state.html', { scope: 'utilities' })).toIncludeAll([
75+
'.animate-play { animation-play-state: running; }',
76+
'.animate-stop { animation-play-state: paused; }',
77+
])
78+
})
7879

79-
it('generates `composition` utilities', async () => {
80-
expect(await run('content/composition.html', { scope: 'utilities' })).toIncludeAll([
81-
'.animate-add { animation-composition: add; }',
82-
'.animate-replace { animation-composition: replace; }',
83-
'.animate-accumulate { animation-composition: accumulate; }',
84-
])
85-
})
80+
it('generates predefined animations for modern import', async () => {
81+
expect(await run('content/predefined-animations.html', { importType: 'modern' })).toIncludeAll([
82+
'.animate-fade { animation: var(--animate-fade); }',
83+
'--animate-fade: fade var(--default-animation-duration, 1s) var(--default-animation-timing-function, ease) var(--default-animation-delay, 0s) both;',
84+
'@keyframes fade { 0% { opacity: 0; } 100% { opacity: 1; }}',
85+
'.animate-spin { animation: var(--animate-spin); }',
86+
'--animate-spin: spin var(--default-animation-duration, 1s) var(--default-animation-timing-function, linear) var(--default-animation-delay, 0s) infinite;',
87+
'@keyframes spin { to { transform: rotate(360deg); }}',
88+
])
89+
})
8690

87-
it('generates predefined animations for modern import', async () => {
88-
expect(await run('content/predefined-animations.html', { importType: 'modern' })).toIncludeAll([
89-
'.animate-fade { animation: var(--animate-fade); }',
90-
'--animate-fade: fade var(--default-animation-duration, 1s) var(--default-animation-timing-function, ease) var(--default-animation-delay, 0s) both;',
91-
'@keyframes fade { 0% { opacity: 0; } 100% { opacity: 1; }}',
92-
'.animate-spin { animation: var(--animate-spin); }',
93-
'--animate-spin: spin var(--default-animation-duration, 1s) var(--default-animation-timing-function, linear) var(--default-animation-delay, 0s) infinite;',
94-
'@keyframes spin { to { transform: rotate(360deg); }}',
95-
])
96-
})
91+
it('generates predefined animations for legacy import', async () => {
92+
expect(await run('content/predefined-animations.html', { importType: 'legacy' })).toIncludeAll([
93+
'.animate-fade { animation: fade var(--default-animation-duration, 1s) var(--default-animation-timing-function, ease) var(--default-animation-delay, 0s) both; }',
94+
'@keyframes fade { 0% { opacity: 0; } 100% { opacity: 1; }}',
95+
'.animate-spin { animation: spin var(--default-animation-duration, 1s) var(--default-animation-timing-function, linear) var(--default-animation-delay, 0s) infinite; }',
96+
'@keyframes spin { to { transform: rotate(360deg); }}',
97+
])
98+
})
9799

98-
it('generates predefined animations for legacy import', async () => {
99-
expect(await run('content/predefined-animations.html', { importType: 'legacy' })).toIncludeAll([
100-
'.animate-fade { animation: fade var(--default-animation-duration, 1s) var(--default-animation-timing-function, ease) var(--default-animation-delay, 0s) both; }',
101-
'@keyframes fade { 0% { opacity: 0; } 100% { opacity: 1; }}',
102-
'.animate-spin { animation: spin var(--default-animation-duration, 1s) var(--default-animation-timing-function, linear) var(--default-animation-delay, 0s) infinite; }',
103-
'@keyframes spin { to { transform: rotate(360deg); }}',
104-
])
100+
it('generates `timing-function` utilities', async () => {
101+
expect(await run('content/timing-function.html', { scope: 'utilities' })).toIncludeAll([
102+
'.animate-ease { animation-timing-function: ease; }',
103+
'.animate-ease-linear { animation-timing-function: linear; }',
104+
'.animate-ease-\\[cubic-bezier\\(1\\,0\\.66\\,0\\.33\\,0\\)\\] { animation-timing-function: cubic-bezier(1,0.66,0.33,0); }',
105+
])
106+
})
105107
})

‎jest/legacy/index.test.js

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
const fs = require('fs')
2+
const path = require('path')
3+
const postcss = require('postcss')
4+
const tailwindcss = require('tailwindcss')
5+
6+
async function run(file) {
7+
const { currentTestName } = expect.getState()
8+
9+
const config = {
10+
content: [file],
11+
corePlugins: { preflight: false },
12+
plugins: [require('../../src')],
13+
}
14+
15+
const result = await postcss(tailwindcss(config)).process('@tailwind utilities', {
16+
from: `${path.resolve(__filename)}?test=${currentTestName}`,
17+
})
18+
19+
return result.css
20+
}
21+
22+
describe('legacy tailwind', () => {
23+
if (! fs.existsSync(`${__dirname}/node_modules`)) {
24+
throw new Error(`Dependencies in ${__dirname} are missing`)
25+
}
26+
27+
it('generates `composition` utilities', async () => {
28+
expect(await run('jest/content/composition.html')).toIncludeAll([
29+
'.animate-add { animation-composition: add; }',
30+
'.animate-replace { animation-composition: replace; }',
31+
'.animate-accumulate { animation-composition: accumulate; }',
32+
])
33+
})
34+
35+
it('should add `delay` utilities', async () => {
36+
expect(await run('jest/content/delay.html')).toIncludeAll([
37+
'.animate-delay-75 { animation-delay: 75ms; }',
38+
'.animate-delay-\\[666ms\\] { animation-delay: 666ms; }',
39+
])
40+
})
41+
42+
it('generates `direction` utilities', async () => {
43+
expect(await run('jest/content/direction.html')).toIncludeAll([
44+
'.animate-normal { animation-direction: normal; }',
45+
'.animate-reverse { animation-direction: reverse; }',
46+
])
47+
})
48+
49+
it('generates `duration` utilities', async () => {
50+
expect(await run('jest/content/duration.html')).toIncludeAll([
51+
'.animate-duration-75 { animation-duration: 75ms; }',
52+
'.animate-duration-\\[666ms\\] { animation-duration: 666ms; }',
53+
])
54+
})
55+
56+
it('generates `fill-mode` utilities', async () => {
57+
expect(await run('jest/content/fill-mode.html')).toIncludeAll([
58+
'.animate-fill-both { animation-fill-mode: both; }',
59+
'.animate-fill-none { animation-fill-mode: normal; }',
60+
])
61+
})
62+
63+
it('generates `iteration-count` utilities', async () => {
64+
expect(await run('jest/content/iteration-count.html')).toIncludeAll([
65+
'.animate-infinite { animation-iteration-count: infinite; }',
66+
'.animate-once { animation-iteration-count: 1; }',
67+
'.animate-iteration-\\[14\\] { animation-iteration-count: 14; }',
68+
])
69+
})
70+
71+
it('generates `play-state` utilities', async () => {
72+
expect(await run('jest/content/play-state.html')).toIncludeAll([
73+
'.animate-play { animation-play-state: running; }',
74+
'.animate-stop { animation-play-state: paused; }',
75+
])
76+
})
77+
78+
it('generates predefined animations', async () => {
79+
expect(await run('jest/content/predefined-animations.html')).toIncludeAll([
80+
'.animate-fade { animation: fade var(--default-animation-duration, 1s) var(--default-animation-timing-function, ease) var(--default-animation-delay, 0s) both; }',
81+
'@keyframes fade { 0% { opacity: 0; } 100% { opacity: 1; }}',
82+
'.animate-spin { animation: spin var(--default-animation-duration, 1s) var(--default-animation-timing-function, linear) var(--default-animation-delay, 0s) infinite; }',
83+
'@keyframes spin { to { transform: rotate(360deg); }}',
84+
])
85+
})
86+
87+
it('generates `timing-function` utilities', async () => {
88+
expect(await run('jest/content/timing-function.html')).toIncludeAll([
89+
'.animate-ease { animation-timing-function: ease; }',
90+
'.animate-ease-linear { animation-timing-function: linear; }',
91+
'.animate-ease-\\[cubic-bezier\\(1\\2c 0\\.66\\2c 0\\.33\\2c 0\\)\\] { animation-timing-function: cubic-bezier(1,0.66,0.33,0); }',
92+
])
93+
})
94+
})

‎jest/legacy/package.json

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{
2+
"private": true,
3+
"devDependencies": {
4+
"tailwindcss": "3.1.0"
5+
},
6+
"browserslist": {
7+
"defaults": [
8+
"> 2%"
9+
]
10+
}
11+
}

0 commit comments

Comments
 (0)