Skip to content

Commit effee69

Browse files
kottenatorkottenator
committed
Fixing unit tests
1 parent b38e613 commit effee69

File tree

1 file changed

+141
-93
lines changed

1 file changed

+141
-93
lines changed

‎tests/tests.js

+141-93
Original file line numberDiff line numberDiff line change
@@ -4,17 +4,18 @@
44
var output = $('#qunit-fixture');
55
if (!output[0])
66
output = $('body');
7-
var el = $('<span>').appendTo(output).circleProgress(cfg);
8-
return el.circleProgress('widget');
7+
return $('<span>').appendTo(output).circleProgress(cfg);
98
}
109

1110
QUnit.module("Layout tests, no animation");
1211

1312
QUnit.test("Test circle with value = 0 (without any options)", function(assert) {
14-
var canvas = createCircle({value: 0}),
15-
$canvas = $(canvas),
16-
defaultSize = 100,
17-
defaultThickness = parseInt(defaultSize / 14); // 7
13+
var canvas = createCircle({
14+
value: 0
15+
}).circleProgress('widget');
16+
var $canvas = $(canvas);
17+
var defaultSize = 100;
18+
var defaultThickness = parseInt(defaultSize / 14); // 7
1819

1920
assert.equal($.circleProgress.defaults.size, defaultSize, "Default circle size: 100 pixels");
2021
assert.equal($.circleProgress.defaults.thickness, 'auto', "Default circle thickness: 'auto' (i.e. 1/14 of size)");
@@ -28,10 +29,10 @@
2829

2930
QUnit.test("Test circle with value = 0.5 and default fill", function(assert) {
3031
var canvas = createCircle({
31-
value: 0.5,
32-
animation: false
33-
}),
34-
size = $.circleProgress.defaults.size;
32+
value: 0.5,
33+
animation: false
34+
}).circleProgress('widget');
35+
var size = $.circleProgress.defaults.size;
3536

3637
assert.pixelCloseHex(canvas, 1, size / 2 - 1, '#3aeabb');
3738
assert.pixelCloseRGBA(canvas, 1, size / 2 + 1, 'rgba(0, 0, 0, 0.1)');
@@ -44,13 +45,15 @@
4445
});
4546

4647
QUnit.test("Test circle with value = 0.5 and solid fill", function(assert) {
47-
var color = '#ff0000',
48-
canvas = createCircle({
49-
value: 0.5,
50-
fill: {color: color},
51-
animation: false
52-
}),
53-
defaultSize = $.circleProgress.defaults.size;
48+
var color = '#ff0000';
49+
var canvas = createCircle({
50+
value: 0.5,
51+
fill: {
52+
color: color
53+
},
54+
animation: false
55+
}).circleProgress('widget');
56+
var defaultSize = $.circleProgress.defaults.size;
5457

5558
assert.pixelHex(canvas, 1, defaultSize / 2 - 1, color);
5659
assert.pixelHex(canvas, defaultSize - 1, defaultSize / 2 - 1, color);
@@ -59,131 +62,176 @@
5962
QUnit.module("Layout tests with animation");
6063

6164
QUnit.test("Test circle with value = 0.5 and solid fill", function(assert) {
62-
var color = '#00aa55',
63-
canvas = createCircle({
64-
value: 0.5,
65-
fill: {color: color}
66-
}),
67-
size = $.circleProgress.defaults.size;
68-
69-
assert.expect(8);
65+
var color = '#00aa55';
66+
var circle = createCircle({
67+
value: 0, // value will be updated dynamically
68+
animation: false, // initially we draw an empty circle w/o animation
69+
fill: {
70+
color: color
71+
}
72+
});
73+
var canvas = circle.circleProgress('widget');
74+
var size = $.circleProgress.defaults.size;
7075
var done = assert.async();
7176

72-
assert.pixelCloseRGBA(canvas, 1, size / 2 - 1, 'rgba(0, 0, 0, 0.1)');
73-
setTimeout(function() {
74-
assert.pixelHex(canvas, 1, size / 2 - 1, color);
75-
}, 200);
77+
assert.expect(10);
7678

79+
// Before the animation
80+
assert.pixelCloseRGBA(canvas, 1, size / 2 - 1, 'rgba(0, 0, 0, 0.1)');
81+
assert.pixelCloseRGBA(canvas, 1, size / 2 + 1, 'rgba(0, 0, 0, 0.1)');
7782
assert.pixelCloseRGBA(canvas, size / 2 + 1, 1, 'rgba(0, 0, 0, 0.1)');
78-
setTimeout(function() {
79-
assert.pixelHex(canvas, size / 2 + 1, 1, color);
80-
}, 700);
81-
8283
assert.pixelCloseRGBA(canvas, size - 2, size / 2 - 1, 'rgba(0, 0, 0, 0.1)');
83-
setTimeout(function() {
84+
assert.pixelCloseRGBA(canvas, size - 2, size / 2 + 1, 'rgba(0, 0, 0, 0.1)');
85+
86+
// After the animation
87+
circle.on('circle-animation-end', function() {
88+
assert.pixelHex(canvas, 1, size / 2 - 1, color);
89+
assert.pixelCloseRGBA(canvas, 1, size / 2 + 1, 'rgba(0, 0, 0, 0.1)');
90+
assert.pixelHex(canvas, size / 2 + 1, 1, color);
8491
assert.pixelHex(canvas, size - 2, size / 2 - 1, color);
92+
assert.pixelCloseRGBA(canvas, size - 2, size / 2 + 1, 'rgba(0, 0, 0, 0.1)');
8593
done();
86-
}, 1300);
94+
});
8795

88-
assert.pixelCloseRGBA(canvas, 1, size / 2 + 1, 'rgba(0, 0, 0, 0.1)');
89-
assert.pixelCloseRGBA(canvas, size - 2, size / 2 + 1, 'rgba(0, 0, 0, 0.1)');
96+
// Start the animation
97+
circle.circleProgress({
98+
value: 0.5,
99+
animation: {
100+
duration: 500
101+
}
102+
});
90103
});
91104

92105
QUnit.test("Test circle with value = 0.5, size = 80 and custom gradient", function(assert) {
93-
var canvas = createCircle({
94-
value: 0.5,
95-
size: 80,
96-
fill: {
97-
gradient: ['#ff327a', '#fff430', '#ff8989']
98-
}
99-
}),
100-
size = 80;
101-
102-
assert.expect(8);
106+
var circle = createCircle({
107+
value: 0, // value will be updated dynamically
108+
animation: false, // initially we draw an empty circle w/o animation
109+
size: 80,
110+
fill: {
111+
gradient: ['#ff327a', '#fff430', '#ff8989']
112+
}
113+
});
114+
var canvas = circle.circleProgress('widget');
115+
var size = 80;
103116
var done = assert.async();
104117

105-
assert.pixelCloseRGBA(canvas, 1, size / 2 - 1, 'rgba(0, 0, 0, 0.1)');
106-
setTimeout(function() {
107-
assert.pixelCloseHex(canvas, 1, size / 2 - 1, '#ff3777');
108-
}, 200);
118+
assert.expect(10);
109119

120+
// Before the animation
121+
assert.pixelCloseRGBA(canvas, 1, size / 2 - 1, 'rgba(0, 0, 0, 0.1)');
122+
assert.pixelCloseRGBA(canvas, 1, size / 2 + 1, 'rgba(0, 0, 0, 0.1)');
110123
assert.pixelCloseRGBA(canvas, size / 2, 1, 'rgba(0, 0, 0, 0.1)');
111-
setTimeout(function() {
112-
assert.pixelCloseHex(canvas, size / 2, 1, '#fff330');
113-
}, 700);
114-
115124
assert.pixelCloseRGBA(canvas, size - 2, size / 2 - 1, 'rgba(0, 0, 0, 0.1)');
116-
setTimeout(function() {
125+
assert.pixelCloseRGBA(canvas, size - 2, size / 2 + 1, 'rgba(0, 0, 0, 0.1)');
126+
127+
// After the animation
128+
circle.on('circle-animation-end', function() {
129+
assert.pixelCloseHex(canvas, 1, size / 2 - 1, '#ff3777');
130+
assert.pixelCloseRGBA(canvas, 1, size / 2 + 1, 'rgba(0, 0, 0, 0.1)');
131+
assert.pixelCloseHex(canvas, size / 2, 1, '#fff330');
117132
assert.pixelCloseHex(canvas, size - 2, size / 2 - 1, '#ff8c86');
133+
assert.pixelCloseRGBA(canvas, size - 2, size / 2 + 1, 'rgba(0, 0, 0, 0.1)');
118134
done();
119-
}, 1300);
135+
});
120136

121-
assert.pixelCloseRGBA(canvas, 1, size / 2 + 1, 'rgba(0, 0, 0, 0.1)');
122-
assert.pixelCloseRGBA(canvas, size - 2, size / 2 + 1, 'rgba(0, 0, 0, 0.1)');
137+
// Start the animation
138+
circle.circleProgress({
139+
value: 0.5,
140+
animation: {
141+
duration: 500
142+
}
143+
});
123144
});
124145

125146
QUnit.test("Test circle with value = 0.75, custom start angle and custom animation start value", function(assert) {
126-
var canvas = createCircle({
127-
value: 0.75,
147+
var circle = createCircle({
148+
value: 0, // value will be updated dynamically
149+
animation: false, // initially we draw an empty circle w/o animation
128150
startAngle: -Math.PI / 4,
129151
animationStartValue: 0.25
130152
});
131-
132-
assert.expect(8);
153+
var canvas = circle.circleProgress('widget');
133154
var done = assert.async();
134155

156+
assert.expect(12);
157+
158+
// Before the animation
159+
assert.pixelCloseRGBA(canvas, 15, 20, 'rgba(0, 0, 0, 0.1)');
160+
assert.pixelCloseRGBA(canvas, 20, 15, 'rgba(0, 0, 0, 0.1)');
135161
assert.pixelCloseRGBA(canvas, 80, 15, 'rgba(0, 0, 0, 0.1)');
136-
assert.pixelCloseHex(canvas, 85, 20, '#e0d55f');
137-
assert.pixelCloseHex(canvas, 85, 80, '#e0d55f');
138162
assert.pixelCloseRGBA(canvas, 80, 85, 'rgba(0, 0, 0, 0.1)');
139-
setTimeout(function() {
140-
assert.pixelCloseHex(canvas, 80, 85, '#d6d664');
141-
}, 400);
163+
assert.pixelCloseRGBA(canvas, 85, 20, 'rgba(0, 0, 0, 0.1)');
164+
assert.pixelCloseRGBA(canvas, 85, 80, 'rgba(0, 0, 0, 0.1)');
142165

143-
assert.pixelCloseRGBA(canvas, 15, 20, 'rgba(0, 0, 0, 0.1)');
144-
setTimeout(function() {
166+
// After the animation
167+
circle.on('circle-animation-end', function() {
145168
assert.pixelCloseHex(canvas, 15, 20, '#57e6aa');
146169
assert.pixelCloseRGBA(canvas, 20, 15, 'rgba(0, 0, 0, 0.1)');
170+
assert.pixelCloseRGBA(canvas, 80, 15, 'rgba(0, 0, 0, 0.1)');
171+
assert.pixelCloseHex(canvas, 80, 85, '#d6d664');
172+
assert.pixelCloseHex(canvas, 85, 20, '#e0d55f');
173+
assert.pixelCloseHex(canvas, 85, 80, '#e0d55f');
147174
done();
148-
}, 1300);
175+
});
176+
177+
// Start the animation
178+
circle.circleProgress({
179+
value: 0.75,
180+
animation: {
181+
duration: 500
182+
}
183+
});
149184
});
150185

151186
QUnit.test("Test circle with value = 0.5, image background and reverse", function(assert) {
152-
var urlPrefix = $('script[src*="tests.js"]').attr('src').replace(/tests\.js.*$/, ''),
153-
imageUrl = urlPrefix + 'images/circle.png',
154-
image = new Image();
155-
156-
assert.expect(9);
187+
var urlPrefix = $('script[src*="tests.js"]').attr('src').replace(/tests\.js.*$/, '');
188+
var imageUrl = urlPrefix + 'images/circle.png';
189+
var image = new Image();
157190
var done = assert.async();
191+
192+
assert.expect(12);
193+
194+
// Start loading the image
158195
image.src = imageUrl;
159196

160197
$(image).on('load', function() {
161-
var canvas = createCircle({
162-
value: 0.5,
198+
var circle = createCircle({
199+
value: 0, // value will be updated dynamically
200+
animation: false, // initially we draw an empty circle w/o animation
163201
thickness: 20,
164-
fill: {image: image},
202+
fill: {
203+
image: image
204+
},
165205
reverse: true
166206
});
207+
var canvas = circle.circleProgress('widget');
167208

209+
// Before the animation
168210
assert.pixelRGBA(canvas, 21, 49, 'rgba(0, 0, 0, 0)');
169211
assert.pixelRGBA(canvas, 78, 49, 'rgba(0, 0, 0, 0)');
170212
assert.pixelRGBA(canvas, 49, 77, 'rgba(0, 0, 0, 0)');
171-
172213
assert.pixelCloseRGBA(canvas, 17, 51, 'rgba(0, 0, 0, 0.1)');
173-
setTimeout(function() {
174-
assert.pixelCloseHex(canvas, 17, 51, '#00f7ff');
175-
}, 400);
176-
177214
assert.pixelCloseRGBA(canvas, 49, 81, 'rgba(0, 0, 0, 0.1)');
178-
setTimeout(function() {
179-
assert.pixelCloseHex(canvas, 49, 81, '#7700ff');
180-
}, 700);
181-
182215
assert.pixelCloseRGBA(canvas, 81, 51, 'rgba(0, 0, 0, 0.1)');
183-
setTimeout(function() {
216+
217+
// After the animation
218+
circle.on('circle-animation-end', function() {
219+
assert.pixelRGBA(canvas, 21, 49, 'rgba(0, 0, 0, 0)');
220+
assert.pixelRGBA(canvas, 78, 49, 'rgba(0, 0, 0, 0)');
221+
assert.pixelRGBA(canvas, 49, 77, 'rgba(0, 0, 0, 0)');
222+
assert.pixelCloseHex(canvas, 17, 51, '#00f7ff');
223+
assert.pixelCloseHex(canvas, 49, 81, '#7700ff');
184224
assert.pixelCloseHex(canvas, 81, 51, '#ff0008');
185225
done();
186-
}, 1400);
226+
});
227+
228+
// Start the animation
229+
circle.circleProgress({
230+
value: 0.5,
231+
animation: {
232+
duration: 500
233+
}
234+
});
187235
});
188236
});
189237

@@ -196,7 +244,7 @@
196244
var canvas = createCircle({
197245
value: 0.75,
198246
size: 50
199-
});
247+
}).circleProgress('widget');
200248

201249
assert.equal(50, $(canvas).width());
202250
assert.equal(100, canvas.width);
@@ -211,9 +259,9 @@
211259
var canvas = createCircle({
212260
value: 0.75,
213261
size: 50
214-
});
262+
}).circleProgress('widget');
215263

216264
assert.equal(50, $(canvas).height());
217265
assert.equal(50, canvas.width);
218266
});
219-
})();
267+
})();

0 commit comments

Comments
 (0)