Skip to content

Commit

Permalink
Unit tests completed ('reverse' option tested)
Browse files Browse the repository at this point in the history 
Karma SauceLabs runner config updated
  • Loading branch information
@kottenator
kottenator committed Oct 18, 2014
1 parent 54ba946 commit 0a03134
Show file tree
Hide file tree
Showing 4 changed files with 80 additions and 33 deletions.
13 changes: 10 additions & 3 deletions karma-saucelabs.conf.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,24 +14,31 @@ module.exports = function(config) {
browserName: 'internet explorer',
version: '9'
},
'safari-5': {
base: 'SauceLabs',
platform: "OS X 10.6",
browserName: 'safari',
version: '5'
},
'ios-6': {
base: 'SauceLabs',
browserName: 'iphone',
platform: "OS X 10.8",
browserName: 'iphone',
version: "6.0"
},
'android-4': {
base: 'SauceLabs',
browserName: 'android',
device: 'Motorola Droid Razr Emulator',
platform: "Linux",
device: 'Motorola Droid Razr Emulator',
browserName: 'android',
version: "4.0"
}
};

config.set({
frameworks: ['qunit'],
files: [
{ pattern: 'tests/images/circle.png', served: true, watched: false, included: false },
'bower_components/jquery/dist/jquery.min.js',
'bower_components/modernizr/modernizr.js',
'dist/circle-progress.js',
Expand Down
1 change: 1 addition & 0 deletions karma.conf.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ module.exports = function(config) {
config.set({
frameworks: ['qunit'],
files: [
{ pattern: 'tests/images/circle.png', served: true, watched: false, included: false },
'bower_components/jquery/dist/jquery.min.js',
'bower_components/modernizr/modernizr.js',
'dist/circle-progress.js',
Expand Down
Binary file added tests/images/circle.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
99 changes: 69 additions & 30 deletions tests/tests.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,16 +23,16 @@
value: 0.5,
animation: false
}),
defaultSize = $.circleProgress.defaults.size;

assert.pixelCloseHex(canvas, 1, defaultSize / 2 - 1, '#3aeabb', 0.015);
assert.pixelCloseRGBA(canvas, 1, defaultSize / 2 + 1, 'rgba(0, 0, 0, 0.1)', 0.01);
assert.pixelCloseHex(canvas, defaultSize - 1, defaultSize / 2 - 1, '#fdd250', 0.015);
assert.pixelCloseRGBA(canvas, defaultSize - 1, defaultSize / 2 + 1, 'rgba(0, 0, 0, 0.1)', 0.01);
assert.pixelCloseHex(canvas, defaultSize / 2, 1, '#9ade85', 0.015);
assert.pixelRGBA(canvas, defaultSize / 2, 8, 'rgba(0, 0, 0, 0)');
assert.pixelCloseRGBA(canvas, defaultSize / 2, defaultSize - 1, 'rgba(0, 0, 0, 0.1)', 0.01);
assert.pixelRGBA(canvas, defaultSize / 2, defaultSize - 9, 'rgba(0, 0, 0, 0)');
size = $.circleProgress.defaults.size;

assert.pixelCloseHex(canvas, 1, size / 2 - 1, '#3aeabb', 0.015);
assert.pixelCloseRGBA(canvas, 1, size / 2 + 1, 'rgba(0, 0, 0, 0.1)', 0.01);
assert.pixelCloseHex(canvas, size - 1, size / 2 - 1, '#fdd250', 0.015);
assert.pixelCloseRGBA(canvas, size - 1, size / 2 + 1, 'rgba(0, 0, 0, 0.1)', 0.01);
assert.pixelCloseHex(canvas, size / 2, 1, '#9ade85', 0.015);
assert.pixelRGBA(canvas, size / 2, 8, 'rgba(0, 0, 0, 0)');
assert.pixelCloseRGBA(canvas, size / 2, size - 1, 'rgba(0, 0, 0, 0.1)', 0.01);
assert.pixelRGBA(canvas, size / 2, size - 9, 'rgba(0, 0, 0, 0)');
});

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

assert.expect(8);
QUnit.stop();

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

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

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

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

QUnit.test("Test circle with value = 0.5 and custom gradient", function(assert) {
QUnit.test("Test circle with value = 0.5, size = 80 and custom gradient", function(assert) {
var canvas = createCircle({
value: 0.5,
size: 80,
fill: {
gradient: ['#ff327a', '#fff430', '#ff8989']
}
}),
defaultSize = $.circleProgress.defaults.size;
size = 80;

assert.expect(8);
QUnit.stop();

assert.pixelCloseRGBA(canvas, 1, defaultSize / 2 - 1, 'rgba(0, 0, 0, 0.1)', 0.01);
assert.pixelCloseRGBA(canvas, 1, size / 2 - 1, 'rgba(0, 0, 0, 0.1)', 0.01);
setTimeout(function() {
assert.pixelCloseHex(canvas, 1, defaultSize / 2 - 1, '#ff3777', 0.01);
assert.pixelCloseHex(canvas, 1, size / 2 - 1, '#ff3777', 0.01);
}, 200);

assert.pixelCloseRGBA(canvas, defaultSize / 2, 1, 'rgba(0, 0, 0, 0.1)', 0.01);
assert.pixelCloseRGBA(canvas, size / 2, 1, 'rgba(0, 0, 0, 0.1)', 0.01);
setTimeout(function() {
assert.pixelCloseHex(canvas, defaultSize / 2, 1, '#fff330', 0.01);
assert.pixelCloseHex(canvas, size / 2, 1, '#fff330', 0.01);
}, 700);

assert.pixelCloseRGBA(canvas, defaultSize - 2, defaultSize / 2 - 1, 'rgba(0, 0, 0, 0.1)', 0.01);
assert.pixelCloseRGBA(canvas, size - 2, size / 2 - 1, 'rgba(0, 0, 0, 0.1)', 0.01);
setTimeout(function() {
assert.pixelCloseHex(canvas, defaultSize - 2, defaultSize / 2 - 1, '#ff8c86', 0.01);
assert.pixelCloseHex(canvas, size - 2, size / 2 - 1, '#ff8c86', 0.01);
QUnit.start();
}, 1300);

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

QUnit.test("Test circle with value = 0.75, custom start angle and animation start value", function(assert) {
QUnit.test("Test circle with value = 0.75, custom start angle and custom animation start value", function(assert) {
var canvas = createCircle({
value: 0.75,
startAngle: -Math.PI / 4,
Expand All @@ -138,6 +139,44 @@
QUnit.start();
}, 1300);
});

QUnit.asyncTest("Test circle with value = 0.5, image background and reverse", function(assert) {
var urlPrefix = $('script[src*="tests.js"]').attr('src').replace(/tests\.js.*$/, ''),
imageUrl = urlPrefix + 'images/circle.png',
image = new Image();

assert.expect(9);
image.src = imageUrl;

$(image).load(function() {
var canvas = createCircle({
value: 0.5,
thickness: 20,
fill: {image: image},
reverse: true
});

assert.pixelRGBA(canvas, 21, 49, 'rgba(0, 0, 0, 0)');
assert.pixelRGBA(canvas, 78, 49, 'rgba(0, 0, 0, 0)');
assert.pixelRGBA(canvas, 49, 77, 'rgba(0, 0, 0, 0)');

assert.pixelCloseRGBA(canvas, 17, 51, 'rgba(0, 0, 0, 0.1)', 0.01);
setTimeout(function() {
assert.pixelCloseHex(canvas, 17, 51, '#00f7ff', 0.01);
}, 400);

assert.pixelCloseRGBA(canvas, 49, 81, 'rgba(0, 0, 0, 0.1)', 0.01);
setTimeout(function() {
assert.pixelCloseHex(canvas, 49, 81, '#7700ff', 0.01);
}, 700);

assert.pixelCloseRGBA(canvas, 81, 51, 'rgba(0, 0, 0, 0.1)', 0.01);
setTimeout(function() {
assert.pixelCloseHex(canvas, 81, 51, '#ff0008', 0.01);
QUnit.start();
}, 1400);
});
});
} else {
QUnit.test("Your browser doesn't support Canvas", function(assert) {
assert.ok(true, "That's fine");
Expand Down

0 comments on commit 0a03134

Please sign in to comment.