1
1
import {
2
+ AfterOrBeforeType ,
2
3
BackgroundTypes ,
3
4
BorderTypes ,
4
5
BoxShadowTypes ,
@@ -7,23 +8,65 @@ import {
7
8
MarginTypes ,
8
9
MeasuresTypes ,
9
10
PaddingTypes ,
11
+ PointerTypes ,
10
12
PositionTypes ,
13
+ ScrollTypes ,
11
14
TypographyTypes ,
15
+ WordWrapTypes ,
12
16
} from '@/types/index' ;
17
+ import { AnimationType } from '@/types/styles/animation' ;
13
18
14
19
import {
20
+ getAnimationStyles ,
15
21
getBackgroundStyles ,
16
22
getBorderStyles ,
17
23
getBoxShadowStyles ,
18
24
getDisplayStyles ,
25
+ getGenericTypographyStyles ,
19
26
getMarginStyles ,
20
27
getMeasuresStyles ,
21
28
getPaddingStyles ,
29
+ getPointerStyles ,
22
30
getPositionStyles ,
31
+ getPseudoStyles ,
32
+ getScrollStyles ,
23
33
getStyles ,
24
34
getTypographyStyles ,
35
+ getWordWrapStyles ,
25
36
} from '../getStyles' ;
26
37
38
+ describe ( 'getScrollStyles' , ( ) => {
39
+ it ( 'Return empty array' , ( ) => {
40
+ const scrollStyles = getScrollStyles ( ) ;
41
+ expect ( scrollStyles ) . toEqual ( [ '' ] ) ;
42
+ } ) ;
43
+ it ( 'Return scroll styles' , ( ) => {
44
+ const props : ScrollTypes = {
45
+ scrollbar_width : '10px' ,
46
+ scrollbar_color : 'red' ,
47
+ overflow_block : 'visible' ,
48
+ overflow_inline : 'visible' ,
49
+ overflow_x : 'visible' ,
50
+ overflow_y : 'visible' ,
51
+ overflow : 'visible' ,
52
+ overflow_clip_margin : '10px' ,
53
+ scrollbar_gutter : '10px' ,
54
+ scroll_behavior : 'auto' ,
55
+ scroll_margin : '10px' ,
56
+ scroll_padding : '10px' ,
57
+ scroll_snap_align : 'center' ,
58
+ scroll_snap_stop : 'always' ,
59
+ scroll_snap_type : 'mandatory' ,
60
+ webkit_scrollbar : '10px' ,
61
+ scroll_container : 'auto' ,
62
+ scrollbar_aria_role : 'scrollbar' ,
63
+ } ;
64
+ const scrollStyles = getScrollStyles ( props ) ;
65
+
66
+ expect ( scrollStyles ) . not . toEqual ( [ ] ) ;
67
+ } ) ;
68
+ } ) ;
69
+
27
70
describe ( 'getBackgroundStyles' , ( ) => {
28
71
it ( 'Return empty string' , ( ) => {
29
72
const backgroundStyles = getBackgroundStyles ( ) ;
@@ -38,6 +81,8 @@ describe('getBackgroundStyles', () => {
38
81
background_position : 'top' ,
39
82
background_repeat : 'repeat-x' ,
40
83
background_size : 'contain' ,
84
+ opacity : '0.5' ,
85
+ accent_color : 'red' ,
41
86
} ;
42
87
const backgroundStyles = getBackgroundStyles ( props ) ;
43
88
@@ -69,6 +114,20 @@ describe('getBorderStyles', () => {
69
114
border_top_right_radius : '2px' ,
70
115
border_bottom_left_radius : '2px' ,
71
116
border_bottom_right_radius : '2px' ,
117
+ border_bottom : '2px' ,
118
+ border_left : '2px' ,
119
+ border_right : '2px' ,
120
+ border_top : '2px' ,
121
+ border_style : 'solid' ,
122
+ border_left_style : 'solid' ,
123
+ border_right_style : 'solid' ,
124
+ border_top_style : 'solid' ,
125
+ border_bottom_style : 'solid' ,
126
+ outline : '2px' ,
127
+ outline_color : 'red' ,
128
+ outline_offset : '2px' ,
129
+ outline_style : 'solid' ,
130
+ outline_width : '2px' ,
72
131
} ;
73
132
const borderStyles = getBorderStyles ( props ) ;
74
133
@@ -124,6 +183,10 @@ describe('getDisplayStyles', () => {
124
183
grid_auto_flow : '1' ,
125
184
grid_auto_rows : '1' ,
126
185
grid_auto_columns : '1' ,
186
+ align_self : 'auto' ,
187
+ column_gap : '1' ,
188
+ justify_items : 'center' ,
189
+ row_gap : '1' ,
127
190
} ;
128
191
const displayStyles = getDisplayStyles ( props ) ;
129
192
@@ -165,6 +228,7 @@ describe('getMeasuresStyles', () => {
165
228
height : '50px' ,
166
229
min_height : '50px' ,
167
230
max_height : '50px' ,
231
+ box_sizing : 'border-box' ,
168
232
} ;
169
233
const measuresStyles = getMeasuresStyles ( props ) ;
170
234
@@ -207,6 +271,9 @@ describe('getPositionStyles', () => {
207
271
left : '0' ,
208
272
float : '0' ,
209
273
z_index : 1 ,
274
+ transform : 'rotate(30deg)' ,
275
+ transform_style : 'preserve-3d' ,
276
+ translate : '10px' ,
210
277
} ;
211
278
const positionStyles = getPositionStyles ( props ) ;
212
279
@@ -229,6 +296,38 @@ describe('getBoxShadowStyles', () => {
229
296
} ) ;
230
297
} ) ;
231
298
299
+ describe ( 'getGenericTypographyStyles' , ( ) => {
300
+ it ( 'Return empty array' , ( ) => {
301
+ const genericTypographyStyles = getGenericTypographyStyles ( ) ;
302
+ expect ( genericTypographyStyles ) . toEqual ( [ '' ] ) ;
303
+ } ) ;
304
+ it ( 'Return genericTypography styles' , ( ) => {
305
+ const props : TypographyTypes = {
306
+ font_family : 'Roboto' ,
307
+ font_size : '30px' ,
308
+ font_weight : 600 ,
309
+ font_style : 'bold' ,
310
+ line_height : '30px' ,
311
+ letter_spacing : '30px' ,
312
+ text_align : 'center' ,
313
+ text_decoration : 'underline' ,
314
+ text_transform : 'uppercase' ,
315
+ white_space : 'normal' ,
316
+ word_break : 'no-break' ,
317
+ word_wrap : 'no-wrap' ,
318
+ text_overflow : 'ellipsis' ,
319
+ text_shadow : '30px' ,
320
+ text_indent : 'auto' ,
321
+ text_justify : 'auto' ,
322
+ color : 'black' ,
323
+ overflow : 'visible' ,
324
+ } ;
325
+
326
+ const genericTypographyStyles = getGenericTypographyStyles ( props ) ;
327
+ expect ( genericTypographyStyles ) . not . toEqual ( [ ] ) ;
328
+ } ) ;
329
+ } ) ;
330
+
232
331
describe ( 'getTypographyStyles' , ( ) => {
233
332
it ( 'Return empty array' , ( ) => {
234
333
const typographyStyles = getTypographyStyles ( ) ;
@@ -262,6 +361,105 @@ describe('getTypographyStyles', () => {
262
361
} ) ;
263
362
} ) ;
264
363
364
+ describe ( 'getPointerStyles' , ( ) => {
365
+ it ( 'Return empty array' , ( ) => {
366
+ const pointerStyles = getPointerStyles ( ) ;
367
+ expect ( pointerStyles ) . toEqual ( [ '' ] ) ;
368
+ } ) ;
369
+ it ( 'Return pointer styles' , ( ) => {
370
+ const props : PointerTypes = { cursor : 'pointer' , pointer_events : 'none' } ;
371
+ const pointerStyles = getPointerStyles ( props ) ;
372
+
373
+ expect ( pointerStyles ) . not . toEqual ( [ ] ) ;
374
+ } ) ;
375
+ } ) ;
376
+
377
+ describe ( 'getWordWrapStyles' , ( ) => {
378
+ it ( 'Return empty array' , ( ) => {
379
+ const wordWrapStyles = getWordWrapStyles ( ) ;
380
+ expect ( wordWrapStyles ) . toEqual ( [ '' ] ) ;
381
+ } ) ;
382
+ it ( 'Return wordWrap styles' , ( ) => {
383
+ const props : WordWrapTypes = {
384
+ word_break : 'break-all' ,
385
+ word_wrap : 'break-word' ,
386
+ white_space : 'normal' ,
387
+ text_overflow : 'ellipsis' ,
388
+ } ;
389
+ const wordWrapStyles = getWordWrapStyles ( props ) ;
390
+
391
+ expect ( wordWrapStyles ) . not . toEqual ( [ ] ) ;
392
+ } ) ;
393
+ } ) ;
394
+
395
+ describe ( 'getPseudoStyles' , ( ) => {
396
+ it ( 'Return wordWrap styles' , ( ) => {
397
+ // pseudo elements
398
+ const pseudoKey = {
399
+ afterKey : '&::after' ,
400
+ beforeKey : '&::before' ,
401
+ backdropKey : '&::backdrop' ,
402
+ placeholderKey : '&::placeholder' ,
403
+ passwordRevealButtonKey : '&::-ms-reveal' ,
404
+ webkitInnerSpinButtonKey : '&::-webkit-inner-spin-button' ,
405
+ webkitOuterSpinButtonKey : '&::-webkit-outer-spin-button' ,
406
+ ariaInvalidKey : '&:is([aria-invalid="true"])' ,
407
+ focusVisibleKey : '&:focus-visible' ,
408
+ disabledKey : '&:disabled' ,
409
+ focusKey : '&:focus' ,
410
+ dataTruncateKey : '&[data-truncate="true"]' ,
411
+ dataFilledKey : '&[data-filled="true"]' ,
412
+ } ;
413
+
414
+ const props : AfterOrBeforeType = {
415
+ content : '' ,
416
+ background : 'blue' ,
417
+ } ;
418
+ const pseudoStyles = getPseudoStyles ( pseudoKey . backdropKey , props ) ;
419
+ const pseudoStyles2 = getPseudoStyles ( pseudoKey . placeholderKey , props ) ;
420
+ const pseudoStyles3 = getPseudoStyles ( pseudoKey . passwordRevealButtonKey , props ) ;
421
+ const pseudoStyles4 = getPseudoStyles ( pseudoKey . webkitInnerSpinButtonKey , props ) ;
422
+ const pseudoStyles5 = getPseudoStyles ( pseudoKey . webkitOuterSpinButtonKey , props ) ;
423
+ const pseudoStyles6 = getPseudoStyles ( pseudoKey . ariaInvalidKey , props ) ;
424
+ const pseudoStyles7 = getPseudoStyles ( pseudoKey . focusVisibleKey , props ) ;
425
+ const pseudoStyles8 = getPseudoStyles ( pseudoKey . disabledKey , props ) ;
426
+ const pseudoStyles9 = getPseudoStyles ( pseudoKey . focusKey , props ) ;
427
+ const pseudoStyles10 = getPseudoStyles ( pseudoKey . dataTruncateKey , props ) ;
428
+ const pseudoStyles11 = getPseudoStyles ( pseudoKey . dataFilledKey , props ) ;
429
+
430
+ expect ( pseudoStyles ) . not . toEqual ( [ ] ) ;
431
+ expect ( pseudoStyles2 ) . not . toEqual ( [ ] ) ;
432
+ expect ( pseudoStyles3 ) . not . toEqual ( [ ] ) ;
433
+ expect ( pseudoStyles4 ) . not . toEqual ( [ ] ) ;
434
+ expect ( pseudoStyles5 ) . not . toEqual ( [ ] ) ;
435
+ expect ( pseudoStyles6 ) . not . toEqual ( [ ] ) ;
436
+ expect ( pseudoStyles7 ) . not . toEqual ( [ ] ) ;
437
+ expect ( pseudoStyles8 ) . not . toEqual ( [ ] ) ;
438
+ expect ( pseudoStyles9 ) . not . toEqual ( [ ] ) ;
439
+ expect ( pseudoStyles10 ) . not . toEqual ( [ ] ) ;
440
+ expect ( pseudoStyles11 ) . not . toEqual ( [ ] ) ;
441
+ } ) ;
442
+ } ) ;
443
+
444
+ describe ( 'getAnimationStyles' , ( ) => {
445
+ it ( 'Return empty array' , ( ) => {
446
+ const animationStyles = getAnimationStyles ( ) ;
447
+ expect ( animationStyles ) . toEqual ( [ '' ] ) ;
448
+ } ) ;
449
+ it ( 'Return animation styles' , ( ) => {
450
+ const props : AnimationType = {
451
+ transition : 'all 0.5s ease-in-out' ,
452
+ transition_property : 'all' ,
453
+ transition_duration : '0.5s' ,
454
+ transition_timing_function : 'ease-in-out' ,
455
+ transition_delay : '0.5s' ,
456
+ } ;
457
+ const animationStyles = getAnimationStyles ( props ) ;
458
+
459
+ expect ( animationStyles ) . not . toEqual ( [ ] ) ;
460
+ } ) ;
461
+ } ) ;
462
+
265
463
describe ( 'getStyles' , ( ) => {
266
464
it ( 'Return common styles' , ( ) => {
267
465
const props : CommonStyleType = {
@@ -273,6 +471,15 @@ describe('getStyles', () => {
273
471
after : { content : '' , background : 'red' } ,
274
472
before : { content : '' , background : 'blue' } ,
275
473
backdrop : { background : 'salmon' } ,
474
+ disabled : { background : 'red' } ,
475
+ focus : { background : 'blue' } ,
476
+ placeholder : { font_size : '20px' } ,
477
+ passwordRevealButton : { background : 'red' } ,
478
+ webkitInnerSpinButton : { background : 'blue' } ,
479
+ webkitOuterSpinButton : { background : 'green' } ,
480
+ ariaInvalid : { background : 'red' } ,
481
+ dataTruncate : { background : 'blue' } ,
482
+ dataFilled : { background : 'green' } ,
276
483
} ;
277
484
const commonStyles = getStyles ( props ) ;
278
485
0 commit comments