Modify setDirection.js and add tests

Author: sarcadass

dist/granim.js

@@ -942,34 +942,24 @@ module.exports = function() {
 	var ctx = this.context;
 
 	switch(this.direction) {
-		default:
-			this.triggerError('direction');
-			break;
-
 		case 'diagonal':
 			return ctx.createLinearGradient(0, 0, this.x1, this.y1);
-			break;
 
 		case 'left-right':
 			return ctx.createLinearGradient(0, 0, this.x1, 0);
-			break;
 
 		case 'top-bottom':
 			return ctx.createLinearGradient(this.x1 / 2, 0, this.x1 / 2, this.y1);
-			break;
 
 		case 'radial':
 			return ctx.createRadialGradient(this.x1 / 2, this.y1 / 2, this.x1 / 2, this.x1 / 2, this.y1 / 2, 0);
-			break;
 		case 'custom':
 			return ctx.createLinearGradient(
 				getCustomCoordinateInPixels(this.customDirection.x0, this.x1),
 				getCustomCoordinateInPixels(this.customDirection.y0, this.y1),
 				getCustomCoordinateInPixels(this.customDirection.x1, this.x1),
 				getCustomCoordinateInPixels(this.customDirection.y1, this.y1)
 			);
-			break;
-
 	}
 };
 

dist/granim.min.js

@@ -4,34 +4,25 @@ module.exports = function() {
 	var ctx = this.context;
 
 	switch(this.direction) {
-		default:
-			this.triggerError('direction');
-			break;
-
 		case 'diagonal':
 			return ctx.createLinearGradient(0, 0, this.x1, this.y1);
-			break;
 
 		case 'left-right':
 			return ctx.createLinearGradient(0, 0, this.x1, 0);
-			break;
 
 		case 'top-bottom':
 			return ctx.createLinearGradient(this.x1 / 2, 0, this.x1 / 2, this.y1);
-			break;
 
 		case 'radial':
 			return ctx.createRadialGradient(this.x1 / 2, this.y1 / 2, this.x1 / 2, this.x1 / 2, this.y1 / 2, 0);
-			break;
+
 		case 'custom':
 			return ctx.createLinearGradient(
 				getCustomCoordinateInPixels(this.customDirection.x0, this.x1),
 				getCustomCoordinateInPixels(this.customDirection.y0, this.y1),
 				getCustomCoordinateInPixels(this.customDirection.x1, this.x1),
 				getCustomCoordinateInPixels(this.customDirection.y1, this.y1)
 			);
-			break;
-
 	}
 };
 

docs/assets/js/vendor/granim.min.js

@@ -2,17 +2,7 @@ describe('Animation: ', function() {
 	var event = document.createEvent('HTMLEvents');
 	var granimInstance, gradientColor, canvas,
 		canvasWidthMiddle, canvasHeightMiddle;
-
-	beforeEach(function(done) {
-		setTimeout(function() {
-			value = 0;
-			done();
-		}, 1);
-	});
-
-	it('should support async execution of test preparation and expectations', function(done) {
-		canvas = setCanvas();
-		granimInstance = new Granim({
+	var validOptions = {
 			element: '#granim-canvas',
 			name: 'granim',
 			direction: 'left-right',
@@ -22,16 +12,26 @@ describe('Animation: ', function() {
 					gradients: [
 						['hsl(333, 56%,89%)', '#181818', 'rgba(25,63, 48, .75)'],
 						['#7b4397', 'hsla(126,0%, 19%,.9)', 'rgb(69, 89,169)'],
-
 						[{ color: '#833ab4', pos: .2 }, { color: 'rgb(255, 0,25)', pos: .6 }, { color: '#ff0080', pos: .95 }],
-
 						['#222', 'hsl(0, 5%, 5%)', 'rgb(255, 0,0)'],
 					],
 					transitionSpeed: 100,
 					loop: true
 				}
 			}
-		});
+		};
+	var newGranimInstance = function(options) { return new Granim(options) };
+
+	beforeEach(function(done) {
+		setTimeout(function() {
+			value = 0;
+			done();
+		}, 1);
+	});
+
+	it('should support async execution of test preparation and expectations', function(done) {
+		canvas = setCanvas();
+		granimInstance = newGranimInstance(validOptions);
 		event.initEvent('resize', true, false);
 		window.dispatchEvent(event);
 		canvasWidthMiddle = (canvas.width - 50) / 2;
@@ -57,6 +57,27 @@ describe('Animation: ', function() {
 			}, 300);
 		});
 
+		it('Gradient animation with custom direction is working', function(done) {
+			granimInstance.destroy();
+			granimInstance = newGranimInstance(Object.assign(
+				Object.assign({}, validOptions),
+				{
+					direction: 'custom',
+					customDirection: {
+						x0: '10%',
+						y0: '25px',
+						x1: '30%',
+						y1: '322px'
+					}
+				}
+			));
+			
+			setTimeout(function() {
+				expect(granimInstance).toBeDefined();
+				done();
+			}, 300);
+		});
+ 
 		afterEach(function() {
 			jasmine.DEFAULT_TIMEOUT_INTERVAL = originalTimeout;
 		});

lib/setDirection.js

@@ -43,6 +43,15 @@ describe('Granim Core:', function() {
 			expect(func).toThrowError('The element you used is neither a String, nor a HTMLCanvasElement');
 		});
 
+		it('throws an error on invalid direction', function() {
+			var invalidOptions = Object.assign(
+				Object.assign({}, validOptions),
+				{ direction: 'wrongDirectiion' }
+			);
+			var func = function() { return new Granim(invalidOptions) };
+			expect(func).toThrowError(errorMessage('direction'));
+		});
+
 		it('throws an error when the color type of the gradient is not valid', function() {
 			var invalidOptions = Object.assign(
 				Object.assign({}, validOptions),
@@ -76,10 +85,7 @@ describe('Granim Core:', function() {
 				{
 					states: {
 						"default-state": {
-							gradients: [
-								[{ pos: .5 }, { color: '#fff', pos: .6 },],
-								['#1CD8D2', '#93EDC7']
-							]
+							gradients: [[{ pos: .5 }, { color: '#fff', pos: .6 }], ['#1CD8D2', '#93EDC7']]
 						}
 					}
 				}

test/animationSpec.js

@@ -1,5 +1,5 @@
 describe('Methods: ', function() {
-	var value, granimInstance;
+	var granimInstance;
 
 	beforeEach(function(done) {
 		setTimeout(function() {