/
TextLayerTest.coffee
239 lines (207 loc) · 8.07 KB
/
TextLayerTest.coffee
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
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
assert = require "assert"
{expect} = require "chai"
shortText = "Awesome title"
mediumText = "What about this text that probably spans just over two lines"
longText = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas posuere odio nisi, non elementum ipsum posuere ac. Vestibulum et faucibus ante. Praesent mi eros, scelerisque non venenatis at, tempus ut purus. Morbi volutpat velit lacus, id convallis lacus vulputate id. Nullam eu ex sed purus accumsan finibus sed eget lorem. Maecenas vulputate ante non ipsum luctus cursus. Nam dapibus purus ut lorem laoreet sollicitudin. Sed ullamcorper odio sed risus viverra, in vehicula lectus malesuada. Morbi porttitor, augue vel mollis pulvinar, sem lacus fringilla dui, facilisis venenatis lacus velit vitae velit. Suspendisse dictum elit in quam feugiat, nec ornare neque tempus. Duis eget arcu risus. Sed vitae turpis sit amet sapien pharetra consequat quis a dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla laoreet quis augue ac venenatis. Aenean nec lorem sodales, finibus purus in, ornare elit. Maecenas ut feugiat tellus."
describe "TextLayer", ->
describe "defaults", ->
it "should set the correct defaults", ->
text = new TextLayer
text.html.should.equal "Hello World"
text.color.isEqual("#888").should.equal true
text.backgroundColor.isEqual("transparent").should.equal true
text.padding.should.eql Utils.rectZero()
text.fontSize.should.equal 40
text.fontWeight.should.equal 400
text.lineHeight.should.equal 1.25
text.fontStyle.should.equal "normal"
text.style.fontFamily.should.equal "-apple-system, BlinkMacSystemFont, 'SF UI Text', 'Helvetica Neue'"
it "should not set the default fontFamily default if the fontFamily property is set", ->
text = new TextLayer
fontFamily: "Monaco"
text.fontFamily.should.equal "Monaco"
it "should not set the default fontFamily default if the font property is set", ->
text = new TextLayer
font: "Monaco"
text.fontFamily.should.equal "Monaco"
it "should set the font property if the fontFamily property is set", ->
text = new TextLayer
fontFamily: "Monaco"
text.font.should.equal "Monaco"
describe "Auto-sizing", ->
it "should auto size the layer the size of the text", ->
text = new TextLayer
fontFamily: "Courier, Liberation Mono"
text: shortText
text.size.should.eql width: 312, height: 50
it "should auto size the layer based on the Screen width", ->
text = new TextLayer
fontFamily: "Courier, Liberation Mono"
text: mediumText
text.width.should.equal Screen.width
text.height.should.equal 250
it "should auto size the layer if the width is set explicitly", ->
text = new TextLayer
fontFamily: "Courier, Liberation Mono"
text: mediumText
width: 100
text.width.should.equal 100
text.height.should.equal 550
it "should not auto size the layer the size the layer if it is explictly set", ->
text = new TextLayer
fontFamily: "Courier, Liberation Mono"
text: mediumText
width: 123
height: 456
text.size.should.eql width: 123, height: 456
it "should not auto size the layer when changing text after explictly setting width", ->
text = new TextLayer
fontFamily: "Courier, Liberation Mono"
text.width = 123
text.text = longText
text.width.should.equal 123
it "should not auto size the layer when changing text after explictly setting height", ->
text = new TextLayer
fontFamily: "Courier, Liberation Mono"
text.height = 456
text.text = longText
text.height.should.equal 456
it "should auto size the layer based on it's parent", ->
layer = new Layer width: 150
text = new TextLayer
fontFamily: "Courier, Liberation Mono"
text: mediumText
parent: layer
text.width.should.equal 150
text.height.should.equal 550
it "should auto size the layer when its parent is set afterwards", ->
layer = new Layer width: 150
text = new TextLayer
fontFamily: "Courier, Liberation Mono"
text: mediumText
text.parent = layer
text.width.should.equal 150
text.height.should.equal 550
it "should adjust its size on when a new text is set", (done) ->
text = new TextLayer
fontFamily: "Courier, Liberation Mono"
text.on "change:height", ->
text.size.should.eql width: 400, height: 3500
done()
text.text = longText
it "should take padding into account", ->
text = new TextLayer
fontFamily: "Courier, Liberation Mono"
text: shortText
padding: 10
text.size.should.eql width: 332, height: 70
it "should take border width into account", ->
text = new TextLayer
fontFamily: "Courier, Liberation Mono"
text: shortText
borderWidth: 5
text.size.should.eql width: 322, height: 60
it "should autosize with the right width when inside a parent", ->
text = new TextLayer
fontFamily: "Courier, Liberation Mono"
text: shortText
borderWidth: 5
padding: 3
parent = new Layer
text.parent = parent
text.size.should.eql width: 100, height: 116
it "should autosize with the right width when inside a parent with a border", ->
text = new TextLayer
fontFamily: "Courier, Liberation Mono"
text: shortText
borderWidth: 5
padding: 3
parent = new Layer
borderWidth: 10
text.parent = parent
text.size.should.eql width: 80, height: 116
it "should work together with Align.center", ->
text = new TextLayer
fontFamily: "Courier, Liberation Mono"
fontSize: 5
x: Align.center
y: Align.center
text: shortText
text.point.should.eql x: 180, y: 147
describe "Padding", ->
it "should have no padding initially", ->
text = new TextLayer
text.style.padding.should.equal "0px"
text.padding.top.should.equal 0
text.padding.bottom.should.equal 0
text.padding.left.should.equal 0
text.padding.right.should.equal 0
it "should all padding when given a numeric value", ->
text = new TextLayer
padding: 10
text.style.padding.should.equal "10px"
text.padding.top.should.equal 10
text.padding.bottom.should.equal 10
text.padding.left.should.equal 10
text.padding.right.should.equal 10
it "should set horizontal padding", ->
text = new TextLayer
padding:
horizontal: 10
text.style.padding.should.equal "0px 10px"
text.padding.top.should.equal 0
text.padding.bottom.should.equal 0
text.padding.left.should.equal 10
text.padding.right.should.equal 10
it "should set vertical padding", ->
text = new TextLayer
padding:
vertical: 10
text.style.padding.should.equal "10px 0px"
text.padding.top.should.equal 10
text.padding.bottom.should.equal 10
text.padding.left.should.equal 0
text.padding.right.should.equal 0
it "should set top, left, right and left padding", ->
text = new TextLayer
padding:
top: 1
bottom: 2
left: 3
right: 4
text.style.padding.should.equal "1px 4px 2px 3px"
text.padding.top.should.equal 1
text.padding.bottom.should.equal 2
text.padding.left.should.equal 3
text.padding.right.should.equal 4
it "should keep padding 0 when not explicity set", ->
text = new TextLayer
padding:
horizontal: 3
bottom: 2
text.style.padding.should.equal "0px 3px 2px"
text.padding.top.should.equal 0
text.padding.bottom.should.equal 2
text.padding.left.should.equal 3
text.padding.right.should.equal 3
it "should have a preference for more specific padding definitions", ->
text = new TextLayer
padding:
horizontal: 3
right: 2
text.style.padding.should.equal "0px 2px 0px 3px"
text.padding.top.should.equal 0
text.padding.bottom.should.equal 0
text.padding.left.should.equal 3
text.padding.right.should.equal 2
describe "webfonts", ->
it "sets the weight if the font property is set", ->
l = new TextLayer
font: Utils.loadWebFont("Raleway", 800)
l.fontFamily.should.equal "Raleway"
l.fontWeight.should.equal 800
it "doesn't set the weight if the fontFamily property is set", ->
l = new TextLayer
fontFamily: Utils.loadWebFont("Raleway", 800)
l.fontFamily.should.equal "Raleway"
expect(l.fontWeight).to.equal 400