Skip to content

Commit e5e5e3a

Browse files
tenphitenphi
committed
chore: add tests
1 parent 9337a95 commit e5e5e3a

File tree

8 files changed

+258
-47
lines changed

8 files changed

+258
-47
lines changed

‎src/tasty/styles.test.ts‎

Lines changed: 164 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,164 @@
1+
import { borderStyle } from './styles/border';
2+
import { flowStyle } from './styles/flow';
3+
import { gapStyle } from './styles/gap';
4+
import { insetStyle } from './styles/inset';
5+
import { marginStyle } from './styles/margin';
6+
import { outlineStyle } from './styles/outline';
7+
import { paddingStyle } from './styles/padding';
8+
import { presetStyle } from './styles/preset';
9+
import { radiusStyle } from './styles/radius';
10+
import { scrollbarStyle } from './styles/scrollbar';
11+
12+
describe('Tasty style tests', () => {
13+
it('should handle border styles', () => {
14+
expect(borderStyle({ border: '1px solid #000' })).toEqual({
15+
border: '1px solid var(--000-color, rgb(0 0 0))',
16+
});
17+
});
18+
19+
it('should handle outline styles', () => {
20+
expect(outlineStyle({ outline: '2px dashed #f00' })).toEqual({
21+
outline: '2px dashed var(--f00-color, rgb(255 0 0))',
22+
});
23+
});
24+
25+
it('should handle padding styles', () => {
26+
expect(
27+
paddingStyle({
28+
padding: '10px',
29+
}),
30+
).toEqual({
31+
'padding-top': '10px',
32+
'padding-right': '10px',
33+
'padding-bottom': '10px',
34+
'padding-left': '10px',
35+
});
36+
});
37+
38+
it('should handle margin styles', () => {
39+
expect(
40+
marginStyle({
41+
margin: '5px',
42+
}),
43+
).toEqual({
44+
'margin-top': '5px',
45+
'margin-right': '5px',
46+
'margin-bottom': '5px',
47+
'margin-left': '5px',
48+
});
49+
});
50+
51+
it('should handle inset styles', () => {
52+
expect(insetStyle({ inset: '0 10px 20px 30px' })).toEqual({
53+
top: '0',
54+
right: '10px',
55+
bottom: '20px',
56+
left: '30px',
57+
});
58+
});
59+
60+
it('should handle radius styles', () => {
61+
expect(radiusStyle({ radius: '50%' })).toEqual([
62+
{ '--local-radius': '50%', 'border-radius': 'var(--local-radius)' },
63+
{ $: '>*', '--context-radius': '50%' },
64+
]);
65+
});
66+
67+
it('should handle preset styles', () => {
68+
expect(
69+
presetStyle({
70+
preset: 't3',
71+
}),
72+
).toEqual({
73+
'--font-size': 'var(--t3-font-size, var(--default-font-size, inherit))',
74+
'--font-style':
75+
'var(--t3-font-style, var(--default-font-style, inherit))',
76+
'--font-weight':
77+
'var(--t3-font-weight, var(--default-font-weight, inherit))',
78+
'--letter-spacing':
79+
'var(--t3-letter-spacing, var(--default-letter-spacing, inherit))',
80+
'--line-height':
81+
'var(--t3-line-height, var(--default-line-height, inherit))',
82+
'font-size': 'var(--t3-font-size, var(--default-font-size, inherit))',
83+
'font-style': 'var(--t3-font-style, var(--default-font-style, inherit))',
84+
'font-weight':
85+
'var(--t3-font-weight, var(--default-font-weight, inherit))',
86+
'letter-spacing':
87+
'var(--t3-letter-spacing, var(--default-letter-spacing, inherit))',
88+
'line-height':
89+
'var(--t3-line-height, var(--default-line-height, inherit))',
90+
});
91+
});
92+
93+
it('should handle flow styles', () => {
94+
expect(flowStyle({ flow: 'row nowrap' })).toEqual(null);
95+
});
96+
97+
it('should handle gap styles', () => {
98+
expect(
99+
gapStyle({
100+
gap: '1rem',
101+
}),
102+
).toEqual({
103+
$: '& > *:not(:last-child)',
104+
'margin-bottom': '1rem',
105+
});
106+
});
107+
108+
it('should return undefined for undefined scrollbar', () => {
109+
expect(scrollbarStyle({})).toBeUndefined();
110+
});
111+
112+
it('should return correct styles for `thin` scrollbar', () => {
113+
expect(scrollbarStyle({ scrollbar: 'thin' })).toEqual({
114+
'scrollbar-width': 'thin',
115+
'scrollbar-color': 'var(--scrollbar-thumb-color) transparent',
116+
});
117+
});
118+
119+
it('should return correct styles for `none` scrollbar', () => {
120+
expect(scrollbarStyle({ scrollbar: 'none' })).toEqual({
121+
'scrollbar-color': 'var(--scrollbar-thumb-color) transparent',
122+
'&::-webkit-scrollbar': {
123+
width: 'none',
124+
height: 'none',
125+
},
126+
});
127+
});
128+
129+
it('should handle custom overflow with scrollbar', () => {
130+
expect(scrollbarStyle({ scrollbar: 'always', overflow: 'scroll' })).toEqual(
131+
{
132+
overflow: 'scroll',
133+
'scrollbar-gutter': 'always',
134+
'scrollbar-color': 'var(--scrollbar-thumb-color) transparent',
135+
},
136+
);
137+
});
138+
139+
it('should handle styled scrollbar', () => {
140+
expect(scrollbarStyle({ scrollbar: 'styled' })).toEqual({
141+
'scrollbar-width': 'thin',
142+
'scrollbar-color': 'var(--scrollbar-thumb-color) transparent',
143+
'&::-webkit-scrollbar': {
144+
width: '8px',
145+
height: '8px',
146+
background: 'var(--scrollbar-track-color)',
147+
transition:
148+
'background var(--transition), border-radius var(--transition), box-shadow var(--transition), width var(--transition), height var(--transition), border var(--transition)',
149+
},
150+
'&::-webkit-scrollbar-thumb': {
151+
background: 'var(--scrollbar-thumb-color)',
152+
borderRadius: '8px',
153+
minHeight: '24px',
154+
transition:
155+
'background var(--transition), border-radius var(--transition), box-shadow var(--transition), width var(--transition), height var(--transition), border var(--transition)',
156+
},
157+
'&::-webkit-scrollbar-corner': {
158+
background: 'var(--scrollbar-track-color)',
159+
transition:
160+
'background var(--transition), border-radius var(--transition), box-shadow var(--transition), width var(--transition), height var(--transition), border var(--transition)',
161+
},
162+
});
163+
});
164+
});

‎src/tasty/styles/fill.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
import { parseColor, parseStyle } from '../utils/styles';
1+
import { parseStyle } from '../utils/styles';
22

33
export function fillStyle({ fill }) {
44
if (!fill) return '';
55

66
if (fill.startsWith('#')) {
7-
fill = parseColor(fill).color || fill;
7+
fill = parseStyle(fill).colors[0] || fill;
88
}
99

1010
const match = fill.match(/var\(--(.+?)-color/);

‎src/tasty/styles/gap.ts‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,14 @@
11
import { parseStyle } from '../utils/styles';
22

3-
export function gapStyle({ display = 'block', flow, gap }) {
3+
export function gapStyle({
4+
display = 'block',
5+
flow,
6+
gap,
7+
}: {
8+
display?: string;
9+
flow?: string;
10+
gap?: string | number | boolean;
11+
}) {
412
if (typeof gap === 'number') {
513
gap = `${gap}px`;
614
}
@@ -31,7 +39,7 @@ export function gapStyle({ display = 'block', flow, gap }) {
3139
return { gap };
3240
}
3341

34-
const gapDir = flow.includes('row') ? 'right' : 'bottom';
42+
const gapDir = flow?.includes('row') ? 'right' : 'bottom';
3543

3644
return isWrap
3745
? [

‎src/tasty/styles/margin.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,14 @@ export function marginStyle({
88
marginRight,
99
marginBottom,
1010
marginLeft,
11+
}: {
12+
margin?: string | number | boolean;
13+
marginBlock?: string;
14+
marginInline?: string;
15+
marginTop?: string;
16+
marginRight?: string;
17+
marginBottom?: string;
18+
marginLeft?: string;
1119
}) {
1220
if (typeof margin === 'number') {
1321
margin = `${margin}px`;

‎src/tasty/styles/padding.ts‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,24 @@ export function paddingStyle({
88
paddingRight,
99
paddingBottom,
1010
paddingLeft,
11+
}: {
12+
padding?: string | number | boolean | string[];
13+
paddingBlock?: string;
14+
paddingInline?: string;
15+
paddingTop?: string;
16+
paddingRight?: string;
17+
paddingBottom?: string;
18+
paddingLeft?: string;
1119
}) {
20+
if (Array.isArray(padding)) {
21+
return {
22+
'padding-top': padding[0],
23+
'padding-right': padding[1] || padding[0],
24+
'padding-bottom': padding[2] || padding[0],
25+
'padding-left': padding[3] || padding[1] || padding[0],
26+
};
27+
}
28+
1229
if (typeof padding === 'number') {
1330
padding = `${padding}px`;
1431
}

‎src/tasty/styles/preset.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,15 @@ export function presetStyle({
4242
fontWeight,
4343
fontStyle,
4444
font,
45+
}: {
46+
preset?: string | boolean;
47+
fontSize?: string | number;
48+
lineHeight?: string | number;
49+
textTransform?: string;
50+
letterSpacing?: string | number;
51+
fontWeight?: string | number;
52+
fontStyle?: string;
53+
font?: string;
4554
}) {
4655
if (!preset) return '';
4756

‎src/tasty/styles/scrollbar.ts‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,14 @@ const SCROLLBAR_MODS = [
1010
'always',
1111
];
1212

13-
export function scrollbarStyle({ scrollbar, overflow }) {
13+
export function scrollbarStyle({
14+
scrollbar,
15+
overflow,
16+
}: {
17+
scrollbar?: string | boolean | number;
18+
overflow?: string;
19+
}) {
20+
// Check if scrollbar is defined
1421
if (!scrollbar && scrollbar !== 0) return;
1522

1623
// Support true as alias for thin

0 commit comments

Comments
 (0)