@pyreon/rocketstyle 0.11.5 → 0.11.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +32 -32
- package/lib/index.d.ts +25 -6
- package/lib/index.js +122 -97
- package/package.json +25 -24
- package/src/__tests__/attrs.test.ts +49 -49
- package/src/__tests__/chaining.test.ts +27 -27
- package/src/__tests__/collection.test.ts +12 -12
- package/src/__tests__/compose.test.ts +10 -10
- package/src/__tests__/context.test.ts +65 -65
- package/src/__tests__/createLocalProvider.test.ts +53 -53
- package/src/__tests__/dimensions.test.ts +54 -54
- package/src/__tests__/e2e-styler.test.ts +142 -136
- package/src/__tests__/hooks.test.ts +41 -70
- package/src/__tests__/isRocketComponent.test.ts +11 -11
- package/src/__tests__/misc.test.ts +91 -91
- package/src/__tests__/providerConsumer.test.ts +54 -126
- package/src/__tests__/rocketstyleIntegration.test.ts +182 -255
- package/src/__tests__/themeUtils.test.ts +173 -173
- package/src/cache/index.ts +1 -1
- package/src/constants/booleanTags.ts +25 -25
- package/src/constants/defaultDimensions.ts +5 -5
- package/src/constants/index.ts +16 -16
- package/src/context/context.ts +13 -10
- package/src/context/createLocalProvider.ts +26 -13
- package/src/context/localContext.ts +2 -2
- package/src/hoc/index.ts +1 -1
- package/src/hoc/rocketstyleAttrsHoc.ts +26 -29
- package/src/hooks/index.ts +2 -2
- package/src/hooks/usePseudoState.ts +3 -3
- package/src/hooks/useTheme.ts +14 -17
- package/src/index.ts +32 -15
- package/src/init.ts +12 -12
- package/src/isRocketComponent.ts +2 -2
- package/src/rocketstyle.ts +125 -112
- package/src/types/attrs.ts +2 -2
- package/src/types/config.ts +4 -4
- package/src/types/configuration.ts +5 -5
- package/src/types/dimensions.ts +5 -5
- package/src/types/hoc.ts +1 -1
- package/src/types/rocketComponent.ts +4 -4
- package/src/types/rocketstyle.ts +10 -10
- package/src/types/styles.ts +9 -4
- package/src/types/theme.ts +4 -4
- package/src/types/utils.ts +1 -1
- package/src/utils/attrs.ts +2 -2
- package/src/utils/chaining.ts +2 -2
- package/src/utils/compose.ts +1 -1
- package/src/utils/dimensions.ts +6 -6
- package/src/utils/statics.ts +2 -2
- package/src/utils/styles.ts +2 -2
- package/src/utils/theme.ts +10 -10
|
@@ -1,34 +1,34 @@
|
|
|
1
|
-
import { popContext, pushContext } from
|
|
2
|
-
import {
|
|
3
|
-
import { localContext, useLocalContext } from
|
|
4
|
-
import usePseudoState from
|
|
5
|
-
import useThemeAttrs from
|
|
6
|
-
|
|
7
|
-
describe(
|
|
8
|
-
it(
|
|
1
|
+
import { popContext, pushContext } from '@pyreon/core'
|
|
2
|
+
import { buildThemeContextMap } from '@pyreon/test-utils'
|
|
3
|
+
import { localContext, useLocalContext } from '../context/localContext'
|
|
4
|
+
import usePseudoState from '../hooks/usePseudoState'
|
|
5
|
+
import useThemeAttrs from '../hooks/useTheme'
|
|
6
|
+
|
|
7
|
+
describe('usePseudoState', () => {
|
|
8
|
+
it('returns initial state with all false', () => {
|
|
9
9
|
const { state } = usePseudoState({})
|
|
10
10
|
expect(state.hover).toBe(false)
|
|
11
11
|
expect(state.focus).toBe(false)
|
|
12
12
|
expect(state.pressed).toBe(false)
|
|
13
13
|
})
|
|
14
14
|
|
|
15
|
-
it(
|
|
15
|
+
it('returns event handlers', () => {
|
|
16
16
|
const { events } = usePseudoState({})
|
|
17
|
-
expect(typeof events.onMouseEnter).toBe(
|
|
18
|
-
expect(typeof events.onMouseLeave).toBe(
|
|
19
|
-
expect(typeof events.onMouseDown).toBe(
|
|
20
|
-
expect(typeof events.onMouseUp).toBe(
|
|
21
|
-
expect(typeof events.onFocus).toBe(
|
|
22
|
-
expect(typeof events.onBlur).toBe(
|
|
17
|
+
expect(typeof events.onMouseEnter).toBe('function')
|
|
18
|
+
expect(typeof events.onMouseLeave).toBe('function')
|
|
19
|
+
expect(typeof events.onMouseDown).toBe('function')
|
|
20
|
+
expect(typeof events.onMouseUp).toBe('function')
|
|
21
|
+
expect(typeof events.onFocus).toBe('function')
|
|
22
|
+
expect(typeof events.onBlur).toBe('function')
|
|
23
23
|
})
|
|
24
24
|
|
|
25
|
-
it(
|
|
25
|
+
it('sets hover on mouseEnter', () => {
|
|
26
26
|
const { state, events } = usePseudoState({})
|
|
27
27
|
events.onMouseEnter({} as any)
|
|
28
28
|
expect(state.hover).toBe(true)
|
|
29
29
|
})
|
|
30
30
|
|
|
31
|
-
it(
|
|
31
|
+
it('clears hover and pressed on mouseLeave', () => {
|
|
32
32
|
const { state, events } = usePseudoState({})
|
|
33
33
|
events.onMouseEnter({} as any)
|
|
34
34
|
events.onMouseDown({} as any)
|
|
@@ -40,7 +40,7 @@ describe("usePseudoState", () => {
|
|
|
40
40
|
expect(state.pressed).toBe(false)
|
|
41
41
|
})
|
|
42
42
|
|
|
43
|
-
it(
|
|
43
|
+
it('sets pressed on mouseDown, clears on mouseUp', () => {
|
|
44
44
|
const { state, events } = usePseudoState({})
|
|
45
45
|
events.onMouseDown({} as any)
|
|
46
46
|
expect(state.pressed).toBe(true)
|
|
@@ -49,7 +49,7 @@ describe("usePseudoState", () => {
|
|
|
49
49
|
expect(state.pressed).toBe(false)
|
|
50
50
|
})
|
|
51
51
|
|
|
52
|
-
it(
|
|
52
|
+
it('sets focus on focus, clears on blur', () => {
|
|
53
53
|
const { state, events } = usePseudoState({})
|
|
54
54
|
events.onFocus({} as any)
|
|
55
55
|
expect(state.focus).toBe(true)
|
|
@@ -58,7 +58,7 @@ describe("usePseudoState", () => {
|
|
|
58
58
|
expect(state.focus).toBe(false)
|
|
59
59
|
})
|
|
60
60
|
|
|
61
|
-
it(
|
|
61
|
+
it('calls user-provided event handlers', () => {
|
|
62
62
|
const onMouseEnter = vi.fn()
|
|
63
63
|
const onMouseLeave = vi.fn()
|
|
64
64
|
const onMouseDown = vi.fn()
|
|
@@ -92,7 +92,7 @@ describe("usePseudoState", () => {
|
|
|
92
92
|
})
|
|
93
93
|
})
|
|
94
94
|
|
|
95
|
-
describe(
|
|
95
|
+
describe('useThemeAttrs', () => {
|
|
96
96
|
let pushed = false
|
|
97
97
|
|
|
98
98
|
afterEach(() => {
|
|
@@ -102,80 +102,51 @@ describe("useThemeAttrs", () => {
|
|
|
102
102
|
}
|
|
103
103
|
})
|
|
104
104
|
|
|
105
|
-
it(
|
|
105
|
+
it('returns default values when no context', () => {
|
|
106
106
|
const result = useThemeAttrs({ inversed: false })
|
|
107
107
|
expect(result.theme).toEqual({})
|
|
108
|
-
expect(result.mode).toBe(
|
|
108
|
+
expect(result.mode).toBe('light')
|
|
109
109
|
expect(result.isLight).toBe(true)
|
|
110
110
|
})
|
|
111
111
|
|
|
112
|
-
it(
|
|
113
|
-
pushContext(
|
|
114
|
-
new Map([
|
|
115
|
-
[
|
|
116
|
-
context.id,
|
|
117
|
-
{
|
|
118
|
-
theme: { rootSize: 16 },
|
|
119
|
-
mode: "light",
|
|
120
|
-
isDark: false,
|
|
121
|
-
isLight: true,
|
|
122
|
-
},
|
|
123
|
-
],
|
|
124
|
-
]),
|
|
125
|
-
)
|
|
112
|
+
it('reads theme from context', () => {
|
|
113
|
+
pushContext(buildThemeContextMap())
|
|
126
114
|
pushed = true
|
|
127
115
|
|
|
128
116
|
const result = useThemeAttrs({ inversed: false })
|
|
129
117
|
expect(result.theme).toEqual({ rootSize: 16 })
|
|
130
|
-
expect(result.mode).toBe(
|
|
118
|
+
expect(result.mode).toBe('light')
|
|
131
119
|
})
|
|
132
120
|
|
|
133
|
-
it(
|
|
134
|
-
pushContext(
|
|
135
|
-
new Map([
|
|
136
|
-
[
|
|
137
|
-
context.id,
|
|
138
|
-
{
|
|
139
|
-
theme: { rootSize: 16 },
|
|
140
|
-
mode: "light",
|
|
141
|
-
isDark: false,
|
|
142
|
-
isLight: true,
|
|
143
|
-
},
|
|
144
|
-
],
|
|
145
|
-
]),
|
|
146
|
-
)
|
|
121
|
+
it('inverts mode when inversed is true', () => {
|
|
122
|
+
pushContext(buildThemeContextMap())
|
|
147
123
|
pushed = true
|
|
148
124
|
|
|
149
125
|
const result = useThemeAttrs({ inversed: true })
|
|
150
|
-
expect(result.mode).toBe(
|
|
126
|
+
expect(result.mode).toBe('dark')
|
|
151
127
|
expect(result.isDark).toBe(true)
|
|
152
128
|
expect(result.isLight).toBe(false)
|
|
153
129
|
})
|
|
154
130
|
|
|
155
|
-
it(
|
|
131
|
+
it('inverts dark to light', () => {
|
|
156
132
|
pushContext(
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
isDark: true,
|
|
164
|
-
isLight: false,
|
|
165
|
-
},
|
|
166
|
-
],
|
|
167
|
-
]),
|
|
133
|
+
buildThemeContextMap({
|
|
134
|
+
theme: {},
|
|
135
|
+
mode: 'dark',
|
|
136
|
+
isDark: true,
|
|
137
|
+
isLight: false,
|
|
138
|
+
}),
|
|
168
139
|
)
|
|
169
140
|
pushed = true
|
|
170
141
|
|
|
171
142
|
const result = useThemeAttrs({ inversed: true })
|
|
172
|
-
expect(result.mode).toBe(
|
|
143
|
+
expect(result.mode).toBe('light')
|
|
173
144
|
expect(result.isDark).toBe(false)
|
|
174
145
|
expect(result.isLight).toBe(true)
|
|
175
146
|
})
|
|
176
147
|
})
|
|
177
148
|
|
|
178
|
-
describe(
|
|
149
|
+
describe('useLocalContext', () => {
|
|
179
150
|
let pushed = false
|
|
180
151
|
|
|
181
152
|
afterEach(() => {
|
|
@@ -185,17 +156,17 @@ describe("useLocalContext", () => {
|
|
|
185
156
|
}
|
|
186
157
|
})
|
|
187
158
|
|
|
188
|
-
it(
|
|
159
|
+
it('returns default pseudo when no consumer', () => {
|
|
189
160
|
const result = useLocalContext(null)
|
|
190
161
|
expect(result).toEqual({ pseudo: {} })
|
|
191
162
|
})
|
|
192
163
|
|
|
193
|
-
it(
|
|
164
|
+
it('returns default pseudo when consumer is undefined', () => {
|
|
194
165
|
const result = useLocalContext(undefined)
|
|
195
166
|
expect(result).toEqual({ pseudo: {} })
|
|
196
167
|
})
|
|
197
168
|
|
|
198
|
-
it(
|
|
169
|
+
it('calls consumer with getter function', () => {
|
|
199
170
|
pushContext(new Map([[localContext.id, { pseudo: { hover: true } }]]))
|
|
200
171
|
pushed = true
|
|
201
172
|
|
|
@@ -1,30 +1,30 @@
|
|
|
1
|
-
import isRocketComponent from
|
|
1
|
+
import isRocketComponent from '../isRocketComponent'
|
|
2
2
|
|
|
3
|
-
describe(
|
|
4
|
-
it(
|
|
3
|
+
describe('isRocketComponent', () => {
|
|
4
|
+
it('returns true for object with IS_ROCKETSTYLE property', () => {
|
|
5
5
|
const component = { IS_ROCKETSTYLE: true }
|
|
6
6
|
expect(isRocketComponent(component)).toBe(true)
|
|
7
7
|
})
|
|
8
8
|
|
|
9
|
-
it(
|
|
9
|
+
it('returns false for plain object without IS_ROCKETSTYLE', () => {
|
|
10
10
|
expect(isRocketComponent({})).toBe(false)
|
|
11
11
|
})
|
|
12
12
|
|
|
13
|
-
it(
|
|
13
|
+
it('returns false for null', () => {
|
|
14
14
|
expect(isRocketComponent(null)).toBe(false)
|
|
15
15
|
})
|
|
16
16
|
|
|
17
|
-
it(
|
|
17
|
+
it('returns false for undefined', () => {
|
|
18
18
|
expect(isRocketComponent(undefined)).toBe(false)
|
|
19
19
|
})
|
|
20
20
|
|
|
21
|
-
it(
|
|
22
|
-
expect(isRocketComponent(
|
|
21
|
+
it('returns false for primitives', () => {
|
|
22
|
+
expect(isRocketComponent('string')).toBe(false)
|
|
23
23
|
expect(isRocketComponent(42)).toBe(false)
|
|
24
24
|
expect(isRocketComponent(true)).toBe(false)
|
|
25
25
|
})
|
|
26
26
|
|
|
27
|
-
it(
|
|
27
|
+
it('returns false for plain functions without IS_ROCKETSTYLE', () => {
|
|
28
28
|
expect(
|
|
29
29
|
isRocketComponent(() => {
|
|
30
30
|
/* no-op */
|
|
@@ -32,7 +32,7 @@ describe("isRocketComponent", () => {
|
|
|
32
32
|
).toBe(false)
|
|
33
33
|
})
|
|
34
34
|
|
|
35
|
-
it(
|
|
35
|
+
it('returns true for functions with IS_ROCKETSTYLE', () => {
|
|
36
36
|
const fn = () => {
|
|
37
37
|
/* no-op */
|
|
38
38
|
}
|
|
@@ -40,7 +40,7 @@ describe("isRocketComponent", () => {
|
|
|
40
40
|
expect(isRocketComponent(fn)).toBe(true)
|
|
41
41
|
})
|
|
42
42
|
|
|
43
|
-
it(
|
|
43
|
+
it('returns true even if IS_ROCKETSTYLE is falsy', () => {
|
|
44
44
|
// hasOwnProperty check only, doesn't check truthiness
|
|
45
45
|
const component = { IS_ROCKETSTYLE: false }
|
|
46
46
|
expect(isRocketComponent(component)).toBe(true)
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import ThemeManager from
|
|
1
|
+
import ThemeManager from '../cache/LocalThemeManager'
|
|
2
2
|
import {
|
|
3
3
|
ALL_RESERVED_KEYS,
|
|
4
4
|
CONFIG_KEYS,
|
|
@@ -9,93 +9,93 @@ import {
|
|
|
9
9
|
STYLING_KEYS,
|
|
10
10
|
THEME_MODES,
|
|
11
11
|
THEME_MODES_INVERSED,
|
|
12
|
-
} from
|
|
13
|
-
import BOOLEAN_TAGS from
|
|
14
|
-
import DEFAULT_DIMENSIONS from
|
|
15
|
-
import { createStaticsChainingEnhancers, createStaticsEnhancers } from
|
|
16
|
-
import { calculateStyles } from
|
|
17
|
-
|
|
18
|
-
describe(
|
|
19
|
-
it(
|
|
12
|
+
} from '../constants'
|
|
13
|
+
import BOOLEAN_TAGS from '../constants/booleanTags'
|
|
14
|
+
import DEFAULT_DIMENSIONS from '../constants/defaultDimensions'
|
|
15
|
+
import { createStaticsChainingEnhancers, createStaticsEnhancers } from '../utils/statics'
|
|
16
|
+
import { calculateStyles } from '../utils/styles'
|
|
17
|
+
|
|
18
|
+
describe('createStaticsChainingEnhancers', () => {
|
|
19
|
+
it('attaches chaining methods for dimension keys + static keys', () => {
|
|
20
20
|
const context: Record<string, any> = {}
|
|
21
21
|
const func = vi.fn()
|
|
22
22
|
|
|
23
23
|
createStaticsChainingEnhancers({
|
|
24
24
|
context,
|
|
25
|
-
dimensionKeys: [
|
|
25
|
+
dimensionKeys: ['states', 'sizes'],
|
|
26
26
|
func,
|
|
27
27
|
options: {} as any,
|
|
28
28
|
})
|
|
29
29
|
|
|
30
|
-
expect(typeof context.states).toBe(
|
|
31
|
-
expect(typeof context.sizes).toBe(
|
|
32
|
-
expect(typeof context.theme).toBe(
|
|
33
|
-
expect(typeof context.styles).toBe(
|
|
34
|
-
expect(typeof context.compose).toBe(
|
|
30
|
+
expect(typeof context.states).toBe('function')
|
|
31
|
+
expect(typeof context.sizes).toBe('function')
|
|
32
|
+
expect(typeof context.theme).toBe('function')
|
|
33
|
+
expect(typeof context.styles).toBe('function')
|
|
34
|
+
expect(typeof context.compose).toBe('function')
|
|
35
35
|
})
|
|
36
36
|
|
|
37
|
-
it(
|
|
37
|
+
it('calls func with options and key-value pair', () => {
|
|
38
38
|
const context: Record<string, any> = {}
|
|
39
39
|
const func = vi.fn()
|
|
40
|
-
const options = { some:
|
|
40
|
+
const options = { some: 'option' } as any
|
|
41
41
|
|
|
42
42
|
createStaticsChainingEnhancers({
|
|
43
43
|
context,
|
|
44
|
-
dimensionKeys: [
|
|
44
|
+
dimensionKeys: ['states'],
|
|
45
45
|
func,
|
|
46
46
|
options,
|
|
47
47
|
})
|
|
48
48
|
|
|
49
|
-
context.states({ primary: { color:
|
|
49
|
+
context.states({ primary: { color: 'red' } })
|
|
50
50
|
expect(func).toHaveBeenCalledWith(options, {
|
|
51
|
-
states: { primary: { color:
|
|
51
|
+
states: { primary: { color: 'red' } },
|
|
52
52
|
})
|
|
53
53
|
})
|
|
54
54
|
})
|
|
55
55
|
|
|
56
|
-
describe(
|
|
57
|
-
it(
|
|
56
|
+
describe('createStaticsEnhancers', () => {
|
|
57
|
+
it('copies options to context', () => {
|
|
58
58
|
const context: Record<string, any> = {}
|
|
59
|
-
createStaticsEnhancers({ context, options: { foo:
|
|
60
|
-
expect(context.foo).toBe(
|
|
59
|
+
createStaticsEnhancers({ context, options: { foo: 'bar', baz: 42 } })
|
|
60
|
+
expect(context.foo).toBe('bar')
|
|
61
61
|
expect(context.baz).toBe(42)
|
|
62
62
|
})
|
|
63
63
|
|
|
64
|
-
it(
|
|
64
|
+
it('does nothing when options is empty', () => {
|
|
65
65
|
const context: Record<string, any> = { existing: true }
|
|
66
66
|
createStaticsEnhancers({ context, options: {} })
|
|
67
67
|
expect(context).toEqual({ existing: true })
|
|
68
68
|
})
|
|
69
69
|
|
|
70
|
-
it(
|
|
70
|
+
it('does nothing when options is undefined', () => {
|
|
71
71
|
const context: Record<string, any> = { existing: true }
|
|
72
72
|
createStaticsEnhancers({ context, options: undefined as any })
|
|
73
73
|
expect(context).toEqual({ existing: true })
|
|
74
74
|
})
|
|
75
75
|
})
|
|
76
76
|
|
|
77
|
-
describe(
|
|
78
|
-
it(
|
|
77
|
+
describe('calculateStyles', () => {
|
|
78
|
+
it('returns empty array when styles is undefined', () => {
|
|
79
79
|
expect(calculateStyles(undefined)).toEqual([])
|
|
80
80
|
})
|
|
81
81
|
|
|
82
|
-
it(
|
|
83
|
-
const styleFn1 = () =>
|
|
84
|
-
const styleFn2 = () =>
|
|
82
|
+
it('evaluates each style callback', () => {
|
|
83
|
+
const styleFn1 = () => 'style1'
|
|
84
|
+
const styleFn2 = () => 'style2'
|
|
85
85
|
const result = calculateStyles([styleFn1, styleFn2] as any)
|
|
86
86
|
expect(result).toHaveLength(2)
|
|
87
|
-
expect(result[0]).toBe(
|
|
88
|
-
expect(result[1]).toBe(
|
|
87
|
+
expect(result[0]).toBe('style1')
|
|
88
|
+
expect(result[1]).toBe('style2')
|
|
89
89
|
})
|
|
90
90
|
|
|
91
|
-
it(
|
|
91
|
+
it('returns empty array for empty styles array', () => {
|
|
92
92
|
const result = calculateStyles([])
|
|
93
93
|
expect(result).toEqual([])
|
|
94
94
|
})
|
|
95
95
|
})
|
|
96
96
|
|
|
97
|
-
describe(
|
|
98
|
-
it(
|
|
97
|
+
describe('ThemeManager', () => {
|
|
98
|
+
it('creates instance with WeakMap caches', () => {
|
|
99
99
|
const tm = new ThemeManager()
|
|
100
100
|
expect(tm.baseTheme).toBeInstanceOf(WeakMap)
|
|
101
101
|
expect(tm.dimensionsThemes).toBeInstanceOf(WeakMap)
|
|
@@ -105,100 +105,100 @@ describe("ThemeManager", () => {
|
|
|
105
105
|
expect(tm.modeDimensionTheme.dark).toBeInstanceOf(WeakMap)
|
|
106
106
|
})
|
|
107
107
|
|
|
108
|
-
it(
|
|
108
|
+
it('caches and retrieves values', () => {
|
|
109
109
|
const tm = new ThemeManager()
|
|
110
110
|
const key = {}
|
|
111
|
-
tm.baseTheme.set(key, { color:
|
|
112
|
-
expect(tm.baseTheme.get(key)).toEqual({ color:
|
|
111
|
+
tm.baseTheme.set(key, { color: 'red' })
|
|
112
|
+
expect(tm.baseTheme.get(key)).toEqual({ color: 'red' })
|
|
113
113
|
})
|
|
114
114
|
|
|
115
|
-
it(
|
|
115
|
+
it('mode caches are independent', () => {
|
|
116
116
|
const tm = new ThemeManager()
|
|
117
117
|
const key = {}
|
|
118
|
-
tm.modeBaseTheme.light.set(key,
|
|
119
|
-
tm.modeBaseTheme.dark.set(key,
|
|
120
|
-
expect(tm.modeBaseTheme.light.get(key)).toBe(
|
|
121
|
-
expect(tm.modeBaseTheme.dark.get(key)).toBe(
|
|
118
|
+
tm.modeBaseTheme.light.set(key, 'light-theme')
|
|
119
|
+
tm.modeBaseTheme.dark.set(key, 'dark-theme')
|
|
120
|
+
expect(tm.modeBaseTheme.light.get(key)).toBe('light-theme')
|
|
121
|
+
expect(tm.modeBaseTheme.dark.get(key)).toBe('dark-theme')
|
|
122
122
|
})
|
|
123
123
|
})
|
|
124
124
|
|
|
125
|
-
describe(
|
|
126
|
-
it(
|
|
127
|
-
expect(MODE_DEFAULT).toBe(
|
|
125
|
+
describe('constants', () => {
|
|
126
|
+
it('MODE_DEFAULT is light', () => {
|
|
127
|
+
expect(MODE_DEFAULT).toBe('light')
|
|
128
128
|
})
|
|
129
129
|
|
|
130
|
-
it(
|
|
131
|
-
expect(PSEUDO_KEYS).toEqual([
|
|
130
|
+
it('PSEUDO_KEYS', () => {
|
|
131
|
+
expect(PSEUDO_KEYS).toEqual(['hover', 'active', 'focus', 'pressed'])
|
|
132
132
|
})
|
|
133
133
|
|
|
134
|
-
it(
|
|
135
|
-
expect(PSEUDO_META_KEYS).toEqual([
|
|
134
|
+
it('PSEUDO_META_KEYS', () => {
|
|
135
|
+
expect(PSEUDO_META_KEYS).toEqual(['disabled', 'readOnly'])
|
|
136
136
|
})
|
|
137
137
|
|
|
138
|
-
it(
|
|
138
|
+
it('THEME_MODES', () => {
|
|
139
139
|
expect(THEME_MODES.light).toBe(true)
|
|
140
140
|
expect(THEME_MODES.dark).toBe(true)
|
|
141
141
|
})
|
|
142
142
|
|
|
143
|
-
it(
|
|
144
|
-
expect(THEME_MODES_INVERSED.light).toBe(
|
|
145
|
-
expect(THEME_MODES_INVERSED.dark).toBe(
|
|
143
|
+
it('THEME_MODES_INVERSED', () => {
|
|
144
|
+
expect(THEME_MODES_INVERSED.light).toBe('dark')
|
|
145
|
+
expect(THEME_MODES_INVERSED.dark).toBe('light')
|
|
146
146
|
})
|
|
147
147
|
|
|
148
|
-
it(
|
|
149
|
-
expect(CONFIG_KEYS).toContain(
|
|
150
|
-
expect(CONFIG_KEYS).toContain(
|
|
151
|
-
expect(CONFIG_KEYS).toContain(
|
|
152
|
-
expect(CONFIG_KEYS).toContain(
|
|
153
|
-
expect(CONFIG_KEYS).toContain(
|
|
154
|
-
expect(CONFIG_KEYS).toContain(
|
|
155
|
-
expect(CONFIG_KEYS).toContain(
|
|
156
|
-
expect(CONFIG_KEYS).toContain(
|
|
148
|
+
it('CONFIG_KEYS includes expected keys', () => {
|
|
149
|
+
expect(CONFIG_KEYS).toContain('provider')
|
|
150
|
+
expect(CONFIG_KEYS).toContain('consumer')
|
|
151
|
+
expect(CONFIG_KEYS).toContain('name')
|
|
152
|
+
expect(CONFIG_KEYS).toContain('component')
|
|
153
|
+
expect(CONFIG_KEYS).toContain('inversed')
|
|
154
|
+
expect(CONFIG_KEYS).toContain('passProps')
|
|
155
|
+
expect(CONFIG_KEYS).toContain('styled')
|
|
156
|
+
expect(CONFIG_KEYS).toContain('DEBUG')
|
|
157
157
|
})
|
|
158
158
|
|
|
159
|
-
it(
|
|
160
|
-
expect(STYLING_KEYS).toEqual([
|
|
159
|
+
it('STYLING_KEYS', () => {
|
|
160
|
+
expect(STYLING_KEYS).toEqual(['theme', 'styles'])
|
|
161
161
|
})
|
|
162
162
|
|
|
163
|
-
it(
|
|
164
|
-
expect(STATIC_KEYS).toContain(
|
|
165
|
-
expect(STATIC_KEYS).toContain(
|
|
166
|
-
expect(STATIC_KEYS).toContain(
|
|
163
|
+
it('STATIC_KEYS includes styling keys and compose', () => {
|
|
164
|
+
expect(STATIC_KEYS).toContain('theme')
|
|
165
|
+
expect(STATIC_KEYS).toContain('styles')
|
|
166
|
+
expect(STATIC_KEYS).toContain('compose')
|
|
167
167
|
})
|
|
168
168
|
|
|
169
|
-
it(
|
|
170
|
-
expect(ALL_RESERVED_KEYS).toContain(
|
|
171
|
-
expect(ALL_RESERVED_KEYS).toContain(
|
|
172
|
-
expect(ALL_RESERVED_KEYS).toContain(
|
|
173
|
-
expect(ALL_RESERVED_KEYS).toContain(
|
|
174
|
-
expect(ALL_RESERVED_KEYS).toContain(
|
|
169
|
+
it('ALL_RESERVED_KEYS includes mode keys and others', () => {
|
|
170
|
+
expect(ALL_RESERVED_KEYS).toContain('light')
|
|
171
|
+
expect(ALL_RESERVED_KEYS).toContain('dark')
|
|
172
|
+
expect(ALL_RESERVED_KEYS).toContain('attrs')
|
|
173
|
+
expect(ALL_RESERVED_KEYS).toContain('theme')
|
|
174
|
+
expect(ALL_RESERVED_KEYS).toContain('compose')
|
|
175
175
|
})
|
|
176
176
|
})
|
|
177
177
|
|
|
178
|
-
describe(
|
|
179
|
-
it(
|
|
180
|
-
expect(DEFAULT_DIMENSIONS.states).toBe(
|
|
181
|
-
expect(DEFAULT_DIMENSIONS.sizes).toBe(
|
|
182
|
-
expect(DEFAULT_DIMENSIONS.variants).toBe(
|
|
178
|
+
describe('DEFAULT_DIMENSIONS', () => {
|
|
179
|
+
it('has states, sizes, variants, multiple', () => {
|
|
180
|
+
expect(DEFAULT_DIMENSIONS.states).toBe('state')
|
|
181
|
+
expect(DEFAULT_DIMENSIONS.sizes).toBe('size')
|
|
182
|
+
expect(DEFAULT_DIMENSIONS.variants).toBe('variant')
|
|
183
183
|
expect(DEFAULT_DIMENSIONS.multiple).toEqual({
|
|
184
|
-
propName:
|
|
184
|
+
propName: 'multiple',
|
|
185
185
|
multi: true,
|
|
186
186
|
})
|
|
187
187
|
})
|
|
188
188
|
})
|
|
189
189
|
|
|
190
|
-
describe(
|
|
191
|
-
it(
|
|
190
|
+
describe('BOOLEAN_TAGS', () => {
|
|
191
|
+
it('is an array of HTML boolean attributes', () => {
|
|
192
192
|
expect(Array.isArray(BOOLEAN_TAGS)).toBe(true)
|
|
193
|
-
expect(BOOLEAN_TAGS).toContain(
|
|
194
|
-
expect(BOOLEAN_TAGS).toContain(
|
|
195
|
-
expect(BOOLEAN_TAGS).toContain(
|
|
196
|
-
expect(BOOLEAN_TAGS).toContain(
|
|
197
|
-
expect(BOOLEAN_TAGS).toContain(
|
|
198
|
-
expect(BOOLEAN_TAGS).toContain(
|
|
193
|
+
expect(BOOLEAN_TAGS).toContain('disabled')
|
|
194
|
+
expect(BOOLEAN_TAGS).toContain('checked')
|
|
195
|
+
expect(BOOLEAN_TAGS).toContain('readOnly')
|
|
196
|
+
expect(BOOLEAN_TAGS).toContain('required')
|
|
197
|
+
expect(BOOLEAN_TAGS).toContain('hidden')
|
|
198
|
+
expect(BOOLEAN_TAGS).toContain('autoFocus')
|
|
199
199
|
})
|
|
200
200
|
|
|
201
|
-
it(
|
|
201
|
+
it('has more than 20 entries', () => {
|
|
202
202
|
expect(BOOLEAN_TAGS.length).toBeGreaterThan(20)
|
|
203
203
|
})
|
|
204
204
|
})
|