8
8
*/
9
9
'use strict' ;
10
10
11
- var flattenStyle = require ( 'flattenStyle' ) ;
11
+ const StyleSheet = require ( 'StyleSheet' ) ;
12
+ const StyleSheetValidation = require ( 'StyleSheetValidation' ) ;
13
+ const flattenStyle = require ( 'flattenStyle' ) ;
12
14
13
- describe ( 'flattenStyle' , ( ) => {
15
+ function getFixture ( ) {
16
+ StyleSheetValidation . addValidStylePropTypes ( {
17
+ styleA : ( ) => { } ,
18
+ styleB : ( ) => { } ,
19
+ } ) ;
20
+
21
+ return StyleSheet . create ( {
22
+ elementA : {
23
+ styleA : 'moduleA/elementA/styleA' ,
24
+ styleB : 'moduleA/elementA/styleB' ,
25
+ } ,
26
+ elementB : {
27
+ styleB : 'moduleA/elementB/styleB' ,
28
+ } ,
29
+ } ) ;
30
+ }
14
31
32
+ describe ( 'flattenStyle' , ( ) => {
15
33
it ( 'should merge style objects' , ( ) => {
16
- var style1 = { width : 10 } ;
17
- var style2 = { height : 20 } ;
18
- var flatStyle = flattenStyle ( [ style1 , style2 ] ) ;
34
+ const style1 = { width : 10 } ;
35
+ const style2 = { height : 20 } ;
36
+ const flatStyle = flattenStyle ( [ style1 , style2 ] ) ;
19
37
expect ( flatStyle . width ) . toBe ( 10 ) ;
20
38
expect ( flatStyle . height ) . toBe ( 20 ) ;
21
39
} ) ;
22
40
23
41
it ( 'should override style properties' , ( ) => {
24
- var style1 = { backgroundColor : '#000' , width : 10 } ;
25
- var style2 = { backgroundColor : '#023c69' , width : null } ;
26
- var flatStyle = flattenStyle ( [ style1 , style2 ] ) ;
42
+ const style1 = { backgroundColor : '#000' , width : 10 } ;
43
+ const style2 = { backgroundColor : '#023c69' , width : null } ;
44
+ const flatStyle = flattenStyle ( [ style1 , style2 ] ) ;
27
45
expect ( flatStyle . backgroundColor ) . toBe ( '#023c69' ) ;
28
46
expect ( flatStyle . width ) . toBe ( null ) ;
29
47
} ) ;
30
48
31
49
it ( 'should overwrite properties with `undefined`' , ( ) => {
32
- var style1 = { backgroundColor : '#000' } ;
33
- var style2 = { backgroundColor : undefined } ;
34
- var flatStyle = flattenStyle ( [ style1 , style2 ] ) ;
50
+ const style1 = { backgroundColor : '#000' } ;
51
+ const style2 = { backgroundColor : undefined } ;
52
+ const flatStyle = flattenStyle ( [ style1 , style2 ] ) ;
35
53
expect ( flatStyle . backgroundColor ) . toBe ( undefined ) ;
36
54
} ) ;
37
55
@@ -40,11 +58,99 @@ describe('flattenStyle', () => {
40
58
} ) ;
41
59
42
60
it ( 'should recursively flatten arrays' , ( ) => {
43
- var style1 = { width : 10 } ;
44
- var style2 = { height : 20 } ;
45
- var style3 = { width : 30 } ;
46
- var flatStyle = flattenStyle ( [ null , [ ] , [ style1 , style2 ] , style3 ] ) ;
61
+ const style1 = { width : 10 } ;
62
+ const style2 = { height : 20 } ;
63
+ const style3 = { width : 30 } ;
64
+ const flatStyle = flattenStyle ( [ null , [ ] , [ style1 , style2 ] , style3 ] ) ;
47
65
expect ( flatStyle . width ) . toBe ( 30 ) ;
48
66
expect ( flatStyle . height ) . toBe ( 20 ) ;
49
67
} ) ;
68
+
69
+ it ( 'should not allocate an object when there is no style' , ( ) => {
70
+ const nullStyle = flattenStyle ( null ) ;
71
+ const nullStyleAgain = flattenStyle ( null ) ;
72
+
73
+ expect ( nullStyle ) . toBe ( nullStyleAgain ) ;
74
+ expect ( nullStyle ) . toBe ( undefined ) ;
75
+ } ) ;
76
+
77
+ it ( 'should not allocate an object when there is a style' , ( ) => {
78
+ const style = { a : 'b' } ;
79
+ const nullStyle = flattenStyle ( style ) ;
80
+
81
+ expect ( nullStyle ) . toBe ( style ) ;
82
+ } ) ;
83
+
84
+ it ( 'should not allocate an object when there is a single class' , ( ) => {
85
+ const fixture = getFixture ( ) ;
86
+ var singleStyle = flattenStyle ( fixture . elementA ) ;
87
+ var singleStyleAgain = flattenStyle ( fixture . elementA ) ;
88
+
89
+ expect ( singleStyle ) . toBe ( singleStyleAgain ) ;
90
+ expect ( singleStyle ) . toEqual ( {
91
+ styleA : 'moduleA/elementA/styleA' ,
92
+ styleB : 'moduleA/elementA/styleB' ,
93
+ } ) ;
94
+ } ) ;
95
+
96
+ it ( 'should merge single class and style properly' , ( ) => {
97
+ const fixture = getFixture ( ) ;
98
+ var style = { styleA : 'overrideA' , styleC : 'overrideC' } ;
99
+ var arrayStyle = flattenStyle ( [ fixture . elementA , style ] ) ;
100
+
101
+ expect ( arrayStyle ) . toEqual ( {
102
+ styleA : 'overrideA' ,
103
+ styleB : 'moduleA/elementA/styleB' ,
104
+ styleC : 'overrideC' ,
105
+ } ) ;
106
+ } ) ;
107
+
108
+ it ( 'should merge multiple classes' , ( ) => {
109
+ const fixture = getFixture ( ) ;
110
+ var AthenB = flattenStyle ( [ fixture . elementA , fixture . elementB ] ) ;
111
+ var BthenA = flattenStyle ( [ fixture . elementB , fixture . elementA ] ) ;
112
+
113
+ expect ( AthenB ) . toEqual ( {
114
+ styleA : 'moduleA/elementA/styleA' ,
115
+ styleB : 'moduleA/elementB/styleB' ,
116
+ } ) ;
117
+ expect ( BthenA ) . toEqual ( {
118
+ styleA : 'moduleA/elementA/styleA' ,
119
+ styleB : 'moduleA/elementA/styleB' ,
120
+ } ) ;
121
+ } ) ;
122
+
123
+ it ( 'should merge multiple classes with style' , ( ) => {
124
+ const fixture = getFixture ( ) ;
125
+ var style = { styleA : 'overrideA' } ;
126
+ var AthenB = flattenStyle ( [ fixture . elementA , fixture . elementB , style ] ) ;
127
+ var BthenA = flattenStyle ( [ fixture . elementB , fixture . elementA , style ] ) ;
128
+
129
+ expect ( AthenB ) . toEqual ( {
130
+ styleA : 'overrideA' ,
131
+ styleB : 'moduleA/elementB/styleB' ,
132
+ } ) ;
133
+ expect ( BthenA ) . toEqual ( {
134
+ styleA : 'overrideA' ,
135
+ styleB : 'moduleA/elementA/styleB' ,
136
+ } ) ;
137
+ } ) ;
138
+
139
+ it ( 'should flatten recursively' , ( ) => {
140
+ const fixture = getFixture ( ) ;
141
+ var style = [ { styleA : 'newA' , styleB : 'newB' } , { styleA : 'newA2' } ] ;
142
+ var AthenB = flattenStyle ( [ fixture . elementA , fixture . elementB , style ] ) ;
143
+
144
+ expect ( AthenB ) . toEqual ( {
145
+ styleA : 'newA2' ,
146
+ styleB : 'newB' ,
147
+ } ) ;
148
+ } ) ;
149
+
150
+ it ( 'should ignore invalid class names' , ( ) => {
151
+ var invalid = flattenStyle ( 1234 , null ) ;
152
+
153
+ expect ( invalid ) . toEqual ( { } ) ;
154
+ // Invalid class name 1234 skipping ...
155
+ } ) ;
50
156
} ) ;
0 commit comments