Skip to content

Commit 7c9db7e

Browse files
author
Adam Plesnik
committed
Finish tests
1 parent 9cd5298 commit 7c9db7e

File tree

4 files changed

+135
-37
lines changed

4 files changed

+135
-37
lines changed

‎tests/content.ts‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
export const contentToTest = String.raw`
2+
<div class="timeline"></div>
3+
<div class="timeline-auto"></div>
4+
<div class="timeline-none"></div>
5+
<div class="timeline-scroll-x"></div>
6+
<div class="timeline-view"></div>
7+
<div class="timeline/test"></div>
8+
9+
<div class="scroll-timeline"></div>
10+
<div class="scroll-timeline-block"></div>
11+
<div class="scroll-timeline-x"></div>
12+
<div class="scroll-timeline/test"></div>
13+
<div class="scroll-timeline-block/test"></div>
14+
<div class="scroll-timeline-x/test"></div>
15+
16+
<div class="view-timeline"></div>
17+
<div class="view-timeline-block"></div>
18+
<div class="view-timeline-x"></div>
19+
<div class="view-timeline/test"></div>
20+
<div class="view-timeline-block/test"></div>
21+
<div class="view-timeline-x/test"></div>
22+
23+
<div class="scope/test"></div>
24+
25+
<div class="range"></div>
26+
<div class="range-on-entry"></div>
27+
<div class="range-on-exit"></div>
28+
<div class="range-contain"></div>
29+
30+
<div class="range/10px-100px"></div>
31+
<div class="range-on-entry/10px-100px"></div>
32+
<div class="range-on-exit/10px-100px"></div>
33+
<div class="range-contain/10px-100px"></div>
34+
35+
<div class="no-animations:px-0"></div>
36+
`

‎tests/expect.ts‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
export const expectedCss = String.raw`
2+
.timeline {
3+
animation-timeline: scroll(y)
4+
}
5+
.timeline-auto {
6+
animation-timeline: auto
7+
}
8+
.timeline-none {
9+
animation-timeline: none
10+
}
11+
.timeline-scroll-x {
12+
animation-timeline: scroll(x)
13+
}
14+
.timeline-view {
15+
animation-timeline: view()
16+
}
17+
.timeline\/test {
18+
animation-timeline: --test
19+
}
20+
.scroll-timeline {
21+
scroll-timeline: none y
22+
}
23+
.scroll-timeline-block {
24+
scroll-timeline: none block
25+
}
26+
.scroll-timeline-block\/test {
27+
scroll-timeline: --test block
28+
}
29+
.scroll-timeline-x {
30+
scroll-timeline: none x
31+
}
32+
.scroll-timeline-x\/test {
33+
scroll-timeline: --test x
34+
}
35+
.scroll-timeline\/test {
36+
scroll-timeline: --test y
37+
}
38+
.view-timeline {
39+
view-timeline: none y
40+
}
41+
.view-timeline-block {
42+
view-timeline: none block
43+
}
44+
.view-timeline-block\/test {
45+
view-timeline: --test block
46+
}
47+
.view-timeline-x {
48+
view-timeline: none x
49+
}
50+
.view-timeline-x\/test {
51+
view-timeline: --test x
52+
}
53+
.view-timeline\/test {
54+
view-timeline: --test y
55+
}
56+
.scope\/test {
57+
timeline-scope: --test
58+
}
59+
.range {
60+
animation-range: cover 0 cover 100%
61+
}
62+
.range-contain {
63+
animation-range: contain 0 contain 100%
64+
}
65+
.range-contain\/10px-100px {
66+
animation-range: contain 10px contain 100px
67+
}
68+
.range-on-entry {
69+
animation-range: entry 0 entry 100%
70+
}
71+
.range-on-entry\/10px-100px {
72+
animation-range: entry 10px entry 100px
73+
}
74+
.range-on-exit {
75+
animation-range: exit 0 exit 100%
76+
}
77+
.range-on-exit\/10px-100px {
78+
animation-range: exit 10px exit 100px
79+
}
80+
.range\/10px-100px {
81+
animation-range: cover 10px cover 100px
82+
}
83+
@supports not (animation-range: cover) {
84+
.no-animations\:px-0 {
85+
padding-left: 0px;
86+
padding-right: 0px
87+
}
88+
}`

‎tests/index.test.ts‎

Lines changed: 7 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,23 @@
11
import { expect, test } from 'vitest'
2-
import { css, html, run } from './utils'
2+
import { expectedCss } from './expect'
3+
import { run, strip } from './utils'
4+
import { contentToTest } from './content'
35

4-
test('Test', async () => {
6+
test('Test all util combinations and @support', async () => {
57
let config = {
68
content: [
79
{
8-
raw: html`
9-
<div>
10-
<div class="timeline"></div>
11-
<div class="timeline-auto"></div>
12-
<div class="timeline-none"></div>
13-
<div class="timeline-scroll-x"></div>
14-
<div class="timeline-view"></div>
15-
<div class="timeline/test"></div>
16-
</div>
17-
`,
10+
raw: contentToTest,
1811
},
1912
],
2013
theme: {},
2114
corePlugins: { preflight: false },
2215
}
2316

24-
let input = `
17+
let input = String.raw`
2518
@tailwind utilities;
2619
`
2720

2821
const result = await run(input, config)
29-
expect(result.css).toMatch(css`
30-
.timeline {
31-
animation-timeline: scroll(y);
32-
}
33-
.timeline-auto {
34-
animation-timeline: auto;
35-
}
36-
.timeline-none {
37-
animation-timeline: none;
38-
}
39-
.timeline-scroll-x {
40-
animation-timeline: scroll(x);
41-
}
42-
.timeline-view {
43-
animation-timeline: view();
44-
}
45-
.timeline\/test {
46-
animation-timeline: --test;
47-
}
48-
`)
22+
expect(strip(result.css)).toEqual(strip(expectedCss))
4923
})

‎tests/utils.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,6 @@ import tailwind, { Config } from 'tailwindcss'
44
import { expect } from 'vitest'
55
import scrollDrivenAnimations from '../src/index'
66

7-
export let css = String.raw
8-
export let html = String.raw
9-
export let javascript = String.raw
10-
117
export function run(input: string, config: Config, plugin = tailwind) {
128
let { currentTestName } = expect.getState()
139

@@ -20,3 +16,7 @@ export function run(input: string, config: Config, plugin = tailwind) {
2016
from: `${path.resolve(__filename)}?test=${currentTestName}`,
2117
})
2218
}
19+
20+
export function strip(str: string) {
21+
return str.replace(/\s/g, '').replace(/;/g, '')
22+
}

0 commit comments

Comments
 (0)