forked from segmentio/evergreen
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.test-d.ts
127 lines (117 loc) · 4.85 KB
/
index.test-d.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
import { expectAssignable, expectType, expectError } from 'tsd'
import { defaultTheme, mergeTheme, StyleProps, Intent, Theme, Fill, Partial, Pick, Color } from '.'
interface ThemeOverrides extends Partial<Pick<Theme, 'colors' | 'fills' | 'components'>> {
colors: {
speakers: Color<string[]>
}
fills: {
awesomeBlue: Fill
}
components: {
Button: {
appearances: {
primary: Partial<StyleProps<'Button'>>
warning: Partial<StyleProps<'Button'>>
}
}
}
}
const themeOverridesOrAdditions: ThemeOverrides = {
colors: {
speakers: ['#0f4880', '#1d781d', '#db0a5b', '#8d6708', '#d43900']
},
fills: {
awesomeBlue: {
color: '#3492eb',
backgroundColor: '#057ceb'
}
},
components: {
Button: {
appearances: {
primary: {
color: 'white',
backgroundColor: '#fc7ef8',
_hover: {
backgroundColor: '#fc03f0'
},
_focus: {
boxShadow: '0 0 0 2px #fccafa'
}
},
warning: {
color: 'white',
backgroundColor: '#fcef79'
}
}
}
}
}
// Test cases for default theme
expectType<string>(defaultTheme.colors.gray100)
expectType<Fill>(defaultTheme.fills.neutral)
expectType<string>(defaultTheme.fills.neutral.color)
expectType<string>(defaultTheme.fills.neutral.backgroundColor)
expectType<Intent>(defaultTheme.intents.info)
expectType<Intent>(defaultTheme.intents.danger)
expectType<Intent>(defaultTheme.intents.warning)
expectType<Intent>(defaultTheme.intents.success)
expectType<Partial<StyleProps<'Button'>>>(defaultTheme.components.Button.baseStyle)
expectType<Partial<StyleProps<'Button'>>>(defaultTheme.components.Button.sizes.small)
expectType<Partial<StyleProps<'Button'>>>(defaultTheme.components.Button.sizes.medium)
expectType<Partial<StyleProps<'Button'>>>(defaultTheme.components.Button.sizes.large)
expectType<Partial<StyleProps<'Button'>>>(defaultTheme.components.Button.appearances.minimal)
expectType<Partial<StyleProps<'Button'>>>(defaultTheme.components.Button.appearances.default)
expectType<Partial<StyleProps<'Button'>>>(defaultTheme.components.Button.appearances.destructive)
expectType<Partial<StyleProps<'Button'>>>(defaultTheme.components.Button.appearances.primary)
expectType<Partial<StyleProps<'Text'>>>(defaultTheme.components.Text.sizes[300])
expectAssignable<Theme>(mergeTheme(defaultTheme, themeOverridesOrAdditions))
// Test cases for a custom theme merged w/ default
const customTheme = mergeTheme(defaultTheme, themeOverridesOrAdditions)
// Ensure original theme values are still strongly typed
expectAssignable<StyleProps<'Button'>['backgroundColor']>(
customTheme.components.Button.appearances.minimal.backgroundColor
)
// Ensure new values are strongly typed
expectAssignable<StyleProps<'Button'>['backgroundColor']>(
customTheme.components.Button.appearances.warning.backgroundColor
)
// Ensure original theme values are still strongly typed
expectType<string>(customTheme.colors.gray100)
expectType<Fill>(customTheme.fills.neutral)
expectType<string>(customTheme.fills.neutral.color)
expectType<string>(customTheme.fills.neutral.backgroundColor)
expectType<Intent>(customTheme.intents.info)
expectType<Intent>(customTheme.intents.danger)
expectType<Intent>(customTheme.intents.warning)
expectType<Intent>(customTheme.intents.success)
expectType<Partial<StyleProps<'Button'>>>(customTheme.components.Button.baseStyle)
expectType<Partial<StyleProps<'Button'>>>(customTheme.components.Button.sizes.small)
expectType<Partial<StyleProps<'Button'>>>(customTheme.components.Button.sizes.medium)
expectType<Partial<StyleProps<'Button'>>>(customTheme.components.Button.sizes.large)
expectType<Partial<StyleProps<'Button'>>>(customTheme.components.Button.appearances.minimal)
expectType<Partial<StyleProps<'Button'>>>(customTheme.components.Button.appearances.default)
expectType<Partial<StyleProps<'Button'>>>(customTheme.components.Button.appearances.destructive)
expectType<Partial<StyleProps<'Button'>>>(customTheme.components.Button.appearances.primary)
expectType<Partial<StyleProps<'Text'>>>(customTheme.components.Text.sizes[300])
// Ensure new values are strongly typed
expectAssignable<Fill>(customTheme.fills.awesomeBlue)
expectType<string[]>(customTheme.colors.speakers)
// Negative case - attempting to reference pseudoselector not defined in index.d.ts
const themeWithNonExistentPseudoSelector = {
components: {
Button: {
baseStyle: {
_doesNotExist: {
backgroundColor: '#fc03f0'
}
}
}
}
}
expectError(mergeTheme(defaultTheme, themeWithNonExistentPseudoSelector))
// Negative case - attempting to assign colors property to string[] (should at least have a key wrapping it)
const themeWithTopLevelColorsArray = {
colors: ['#0f4880', '#1d781d', '#db0a5b', '#8d6708', '#d43900']
}
expectError(mergeTheme(defaultTheme, themeWithTopLevelColorsArray))