Skip to content

Commit 0a03134

Browse files
kottenatorkottenator
committed
Unit tests completed ('reverse' option tested)
Karma SauceLabs runner config updated
1 parent 54ba946 commit 0a03134

File tree

4 files changed

+80
-33
lines changed

4 files changed

+80
-33
lines changed

‎karma-saucelabs.conf.js

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,24 +14,31 @@ module.exports = function(config) {
1414
browserName: 'internet explorer',
1515
version: '9'
1616
},
17+
'safari-5': {
18+
base: 'SauceLabs',
19+
platform: "OS X 10.6",
20+
browserName: 'safari',
21+
version: '5'
22+
},
1723
'ios-6': {
1824
base: 'SauceLabs',
19-
browserName: 'iphone',
2025
platform: "OS X 10.8",
26+
browserName: 'iphone',
2127
version: "6.0"
2228
},
2329
'android-4': {
2430
base: 'SauceLabs',
25-
browserName: 'android',
26-
device: 'Motorola Droid Razr Emulator',
2731
platform: "Linux",
32+
device: 'Motorola Droid Razr Emulator',
33+
browserName: 'android',
2834
version: "4.0"
2935
}
3036
};
3137

3238
config.set({
3339
frameworks: ['qunit'],
3440
files: [
41+
{ pattern: 'tests/images/circle.png', served: true, watched: false, included: false },
3542
'bower_components/jquery/dist/jquery.min.js',
3643
'bower_components/modernizr/modernizr.js',
3744
'dist/circle-progress.js',

‎karma.conf.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ module.exports = function(config) {
33
config.set({
44
frameworks: ['qunit'],
55
files: [
6+
{ pattern: 'tests/images/circle.png', served: true, watched: false, included: false },
67
'bower_components/jquery/dist/jquery.min.js',
78
'bower_components/modernizr/modernizr.js',
89
'dist/circle-progress.js',

‎tests/images/circle.png

5.38 KB
Loading

‎tests/tests.js

Lines changed: 69 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -23,16 +23,16 @@
2323
value: 0.5,
2424
animation: false
2525
}),
26-
defaultSize = $.circleProgress.defaults.size;
27-
28-
assert.pixelCloseHex(canvas, 1, defaultSize / 2 - 1, '#3aeabb', 0.015);
29-
assert.pixelCloseRGBA(canvas, 1, defaultSize / 2 + 1, 'rgba(0, 0, 0, 0.1)', 0.01);
30-
assert.pixelCloseHex(canvas, defaultSize - 1, defaultSize / 2 - 1, '#fdd250', 0.015);
31-
assert.pixelCloseRGBA(canvas, defaultSize - 1, defaultSize / 2 + 1, 'rgba(0, 0, 0, 0.1)', 0.01);
32-
assert.pixelCloseHex(canvas, defaultSize / 2, 1, '#9ade85', 0.015);
33-
assert.pixelRGBA(canvas, defaultSize / 2, 8, 'rgba(0, 0, 0, 0)');
34-
assert.pixelCloseRGBA(canvas, defaultSize / 2, defaultSize - 1, 'rgba(0, 0, 0, 0.1)', 0.01);
35-
assert.pixelRGBA(canvas, defaultSize / 2, defaultSize - 9, 'rgba(0, 0, 0, 0)');
26+
size = $.circleProgress.defaults.size;
27+
28+
assert.pixelCloseHex(canvas, 1, size / 2 - 1, '#3aeabb', 0.015);
29+
assert.pixelCloseRGBA(canvas, 1, size / 2 + 1, 'rgba(0, 0, 0, 0.1)', 0.01);
30+
assert.pixelCloseHex(canvas, size - 1, size / 2 - 1, '#fdd250', 0.015);
31+
assert.pixelCloseRGBA(canvas, size - 1, size / 2 + 1, 'rgba(0, 0, 0, 0.1)', 0.01);
32+
assert.pixelCloseHex(canvas, size / 2, 1, '#9ade85', 0.015);
33+
assert.pixelRGBA(canvas, size / 2, 8, 'rgba(0, 0, 0, 0)');
34+
assert.pixelCloseRGBA(canvas, size / 2, size - 1, 'rgba(0, 0, 0, 0.1)', 0.01);
35+
assert.pixelRGBA(canvas, size / 2, size - 9, 'rgba(0, 0, 0, 0)');
3636
});
3737

3838
QUnit.test("Test circle with value = 0.5 and solid fill", function(assert) {
@@ -56,64 +56,65 @@
5656
value: 0.5,
5757
fill: { color: color }
5858
}),
59-
defaultSize = $.circleProgress.defaults.size;
59+
size = $.circleProgress.defaults.size;
6060

6161
assert.expect(8);
6262
QUnit.stop();
6363

64-
assert.pixelCloseRGBA(canvas, 1, defaultSize / 2 - 1, 'rgba(0, 0, 0, 0.1)', 0.01);
64+
assert.pixelCloseRGBA(canvas, 1, size / 2 - 1, 'rgba(0, 0, 0, 0.1)', 0.01);
6565
setTimeout(function() {
66-
assert.pixelHex(canvas, 1, defaultSize / 2 - 1, color);
66+
assert.pixelHex(canvas, 1, size / 2 - 1, color);
6767
}, 200);
6868

69-
assert.pixelCloseRGBA(canvas, defaultSize / 2 + 1, 1, 'rgba(0, 0, 0, 0.1)', 0.01);
69+
assert.pixelCloseRGBA(canvas, size / 2 + 1, 1, 'rgba(0, 0, 0, 0.1)', 0.01);
7070
setTimeout(function() {
71-
assert.pixelHex(canvas, defaultSize / 2 + 1, 1, color);
71+
assert.pixelHex(canvas, size / 2 + 1, 1, color);
7272
}, 700);
7373

74-
assert.pixelCloseRGBA(canvas, defaultSize - 2, defaultSize / 2 - 1, 'rgba(0, 0, 0, 0.1)', 0.01);
74+
assert.pixelCloseRGBA(canvas, size - 2, size / 2 - 1, 'rgba(0, 0, 0, 0.1)', 0.01);
7575
setTimeout(function() {
76-
assert.pixelHex(canvas, defaultSize - 2, defaultSize / 2 - 1, color);
76+
assert.pixelHex(canvas, size - 2, size / 2 - 1, color);
7777
QUnit.start();
7878
}, 1300);
7979

80-
assert.pixelCloseRGBA(canvas, 1, defaultSize / 2 + 1, 'rgba(0, 0, 0, 0.1)', 0.01);
81-
assert.pixelCloseRGBA(canvas, defaultSize - 2, defaultSize / 2 + 1, 'rgba(0, 0, 0, 0.1)', 0.01);
80+
assert.pixelCloseRGBA(canvas, 1, size / 2 + 1, 'rgba(0, 0, 0, 0.1)', 0.01);
81+
assert.pixelCloseRGBA(canvas, size - 2, size / 2 + 1, 'rgba(0, 0, 0, 0.1)', 0.01);
8282
});
8383

84-
QUnit.test("Test circle with value = 0.5 and custom gradient", function(assert) {
84+
QUnit.test("Test circle with value = 0.5, size = 80 and custom gradient", function(assert) {
8585
var canvas = createCircle({
8686
value: 0.5,
87+
size: 80,
8788
fill: {
8889
gradient: ['#ff327a', '#fff430', '#ff8989']
8990
}
9091
}),
91-
defaultSize = $.circleProgress.defaults.size;
92+
size = 80;
9293

9394
assert.expect(8);
9495
QUnit.stop();
9596

96-
assert.pixelCloseRGBA(canvas, 1, defaultSize / 2 - 1, 'rgba(0, 0, 0, 0.1)', 0.01);
97+
assert.pixelCloseRGBA(canvas, 1, size / 2 - 1, 'rgba(0, 0, 0, 0.1)', 0.01);
9798
setTimeout(function() {
98-
assert.pixelCloseHex(canvas, 1, defaultSize / 2 - 1, '#ff3777', 0.01);
99+
assert.pixelCloseHex(canvas, 1, size / 2 - 1, '#ff3777', 0.01);
99100
}, 200);
100101

101-
assert.pixelCloseRGBA(canvas, defaultSize / 2, 1, 'rgba(0, 0, 0, 0.1)', 0.01);
102+
assert.pixelCloseRGBA(canvas, size / 2, 1, 'rgba(0, 0, 0, 0.1)', 0.01);
102103
setTimeout(function() {
103-
assert.pixelCloseHex(canvas, defaultSize / 2, 1, '#fff330', 0.01);
104+
assert.pixelCloseHex(canvas, size / 2, 1, '#fff330', 0.01);
104105
}, 700);
105106

106-
assert.pixelCloseRGBA(canvas, defaultSize - 2, defaultSize / 2 - 1, 'rgba(0, 0, 0, 0.1)', 0.01);
107+
assert.pixelCloseRGBA(canvas, size - 2, size / 2 - 1, 'rgba(0, 0, 0, 0.1)', 0.01);
107108
setTimeout(function() {
108-
assert.pixelCloseHex(canvas, defaultSize - 2, defaultSize / 2 - 1, '#ff8c86', 0.01);
109+
assert.pixelCloseHex(canvas, size - 2, size / 2 - 1, '#ff8c86', 0.01);
109110
QUnit.start();
110111
}, 1300);
111112

112-
assert.pixelCloseRGBA(canvas, 1, defaultSize / 2 + 1, 'rgba(0, 0, 0, 0.1)', 0.01);
113-
assert.pixelCloseRGBA(canvas, defaultSize - 2, defaultSize / 2 + 1, 'rgba(0, 0, 0, 0.1)', 0.01);
113+
assert.pixelCloseRGBA(canvas, 1, size / 2 + 1, 'rgba(0, 0, 0, 0.1)', 0.01);
114+
assert.pixelCloseRGBA(canvas, size - 2, size / 2 + 1, 'rgba(0, 0, 0, 0.1)', 0.01);
114115
});
115116

116-
QUnit.test("Test circle with value = 0.75, custom start angle and animation start value", function(assert) {
117+
QUnit.test("Test circle with value = 0.75, custom start angle and custom animation start value", function(assert) {
117118
var canvas = createCircle({
118119
value: 0.75,
119120
startAngle: -Math.PI / 4,
@@ -138,6 +139,44 @@
138139
QUnit.start();
139140
}, 1300);
140141
});
142+
143+
QUnit.asyncTest("Test circle with value = 0.5, image background and reverse", function(assert) {
144+
var urlPrefix = $('script[src*="tests.js"]').attr('src').replace(/tests\.js.*$/, ''),
145+
imageUrl = urlPrefix + 'images/circle.png',
146+
image = new Image();
147+
148+
assert.expect(9);
149+
image.src = imageUrl;
150+
151+
$(image).load(function() {
152+
var canvas = createCircle({
153+
value: 0.5,
154+
thickness: 20,
155+
fill: {image: image},
156+
reverse: true
157+
});
158+
159+
assert.pixelRGBA(canvas, 21, 49, 'rgba(0, 0, 0, 0)');
160+
assert.pixelRGBA(canvas, 78, 49, 'rgba(0, 0, 0, 0)');
161+
assert.pixelRGBA(canvas, 49, 77, 'rgba(0, 0, 0, 0)');
162+
163+
assert.pixelCloseRGBA(canvas, 17, 51, 'rgba(0, 0, 0, 0.1)', 0.01);
164+
setTimeout(function() {
165+
assert.pixelCloseHex(canvas, 17, 51, '#00f7ff', 0.01);
166+
}, 400);
167+
168+
assert.pixelCloseRGBA(canvas, 49, 81, 'rgba(0, 0, 0, 0.1)', 0.01);
169+
setTimeout(function() {
170+
assert.pixelCloseHex(canvas, 49, 81, '#7700ff', 0.01);
171+
}, 700);
172+
173+
assert.pixelCloseRGBA(canvas, 81, 51, 'rgba(0, 0, 0, 0.1)', 0.01);
174+
setTimeout(function() {
175+
assert.pixelCloseHex(canvas, 81, 51, '#ff0008', 0.01);
176+
QUnit.start();
177+
}, 1400);
178+
});
179+
});
141180
} else {
142181
QUnit.test("Your browser doesn't support Canvas", function(assert) {
143182
assert.ok(true, "That's fine");

0 commit comments

Comments
 (0)