Add animation and methods tests

Author: sarcadass

karma.conf.js

@@ -15,7 +15,8 @@ module.exports = function(config) {
 
     // list of files / patterns to load in the browser
     files: [
-      'dist/**/granim.js',
+      'dist/granim.js',
+      'test/testUtils.js',
       'test/**/*Spec.js'
     ],
 
@@ -64,7 +65,7 @@ module.exports = function(config) {
 
     // start these browsers
     // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
-    browsers: ['PhantomJS'],
+    browsers: ['phantomJS'],
 
 
     // Continuous Integration mode

test/GranimSpec.js

@@ -0,0 +1,55 @@
+describe('Animation: ', function() {
+	var value, granimInstance, gradientColor, canvas;
+
+	beforeEach(function(done) {
+		setTimeout(function() {
+			value = 0;
+			done();
+		}, 1);
+	});
+
+	it("should support async execution of test preparation and expectations", function(done) {
+		setCanvas();
+		granimInstance = new Granim({
+			element: '#granim-canvas',
+			name: 'granim',
+			direction: 'left-right',
+			//isPausedWhenNotInView: true,
+			opacity: [1, 1],
+			states : {
+				"default-state": {
+					gradients: [
+						['#BA8B02', '#181818'],
+						['#7b4397', '#dc2430']
+					],
+					transitionSpeed: 100,
+					loop: true
+				}
+			}
+		});
+		canvas = document.querySelector(granimInstance.element);
+		gradientColor = granimInstance.context.getImageData(150, 75, 5, 5).data;
+
+		expect(granimInstance).toBeDefined();
+		done();
+	});
+
+	describe('Asynchronous specs:', function() {
+		var originalTimeout;
+		beforeEach(function() {
+			originalTimeout = jasmine.DEFAULT_TIMEOUT_INTERVAL;
+			jasmine.DEFAULT_TIMEOUT_INTERVAL = 10000;
+		});
+
+		it('Gradient animation is working', function(done) {
+			setTimeout(function() {
+				expect(gradientColor).not.toEqual(granimInstance.context.getImageData(150, 75, 5, 5).data);
+				done();
+			}, 205);
+		});
+
+		afterEach(function() {
+			jasmine.DEFAULT_TIMEOUT_INTERVAL = originalTimeout;
+		});
+	});
+});

test/animationSpec.js

@@ -0,0 +1,52 @@
+describe('Prelim Checks: ', function(){
+    it('Granim is defined', function(){
+        expect(Granim).toBeDefined();
+    });
+    it('Granim is a function', function(){
+        expect(Granim).toEqual(jasmine.any(Function));
+    });
+});
+
+var validOptions = {
+    element: document.createElement('canvas'),
+    name: 'granim',
+    opacity: [1, 1],
+    states : {
+        "default-state": {
+            gradients: [
+                ['#834D9B', '#D04ED6'],
+                ['#1CD8D2', '#93EDC7']
+            ]
+        }
+    }
+};
+
+describe('Granim Core: ', function(){
+    beforeEach(function(){
+        unsetCanvas();
+        spyOn(console, 'error');
+    });
+
+    describe('Invalid options: ', function(){
+        var func = function(){ return new Granim({element: '#granim-canvas'})};
+
+        it('throws error on invalid element id ', function(){
+            expect(func).toThrowError("`#granim-canvas` could not be found in the DOM");
+        });
+
+        it('throws an error when passed in anything other than a HTMLCanvasElement as an element', function(){
+            var invalidOptions = {
+                element: document.createElement('div'),
+                name: validOptions.name,
+                opactiy: validOptions.opactiy,
+                states: validOptions.states
+            };
+            var func = function(){ return new Granim(invalidOptions)};
+            expect(func).toThrowError("The element you used is neither a String, nor a HTMLCanvasElement");
+        });
+    });
+
+    it('Can use a HTMLCanvasElement as an element', function(){
+        new Granim(validOptions);
+    });
+});

test/coreSpec.js

@@ -0,0 +1,84 @@
+describe('Methods: ', function() {
+	var value, granimInstance;
+
+	beforeEach(function(done) {
+		setTimeout(function() {
+			value = 0;
+			done();
+		}, 1);
+	});
+
+	it("should support async execution of test preparation and expectations", function(done) {
+		setCanvas();
+		granimInstance = new Granim({
+			element: '#granim-canvas',
+			direction: 'left-right',
+			//isPausedWhenNotInView: true,
+			opacity: [1, 1],
+			states : {
+				"default-state": {
+					gradients: [
+						['#BA8B02', '#181818'],
+						['#111', '#252525'],
+						['#7b4397', '#dc2430']
+					],
+					transitionSpeed: 100,
+					loop: false
+				},
+				"second-state": {
+					gradients: [['#00bf8f', '#001510']],
+					transitionSpeed: 100,
+					loop: false
+				}
+			}
+		});
+
+		expect(granimInstance).toBeDefined();
+		done();
+	});
+
+	describe("Asynchronous specs:", function() {
+		var originalTimeout;
+		beforeEach(function() {
+			originalTimeout = jasmine.DEFAULT_TIMEOUT_INTERVAL;
+			jasmine.DEFAULT_TIMEOUT_INTERVAL = 10000;
+		});
+
+		it("Pause method is working", function(done) {
+			setTimeout(function() {
+				granimInstance.pause();
+				expect(granimInstance.isPaused).toBe(true);
+				done();
+			}, 105);
+		});
+
+		it("Play method is working", function(done) {
+			setTimeout(function() {
+				granimInstance.play();
+				expect(granimInstance.isPaused).toBe(false);
+				done();
+			}, 10);
+		});
+
+		it("ChangeState method is working", function(done) {
+			setTimeout(function() {
+				granimInstance.changeState('default-state');
+				granimInstance.changeState('second-state');
+				expect(granimInstance.activeState).toEqual('second-state');
+				done();
+			}, 200);
+		});
+
+		it("Clear method is working", function(done) {
+			setTimeout(function() {
+				granimInstance.clear();
+				expect(granimInstance.context.getImageData(1, 1, 1, 1).data[0]).toEqual(0);
+				done();
+			}, 10);
+		});
+
+		afterEach(function() {
+			jasmine.DEFAULT_TIMEOUT_INTERVAL = originalTimeout;
+		});
+	});
+});

test/methodsSpec.js

@@ -0,0 +1,19 @@
+function setCanvas(canvasId) {
+	var canvas;
+	if (canvasId && document.querySelector(canvasId)) {
+		return;
+
+	} else if (document.querySelector('#granim-canvas')) {
+		return;
+	}
+
+	canvas = document.createElement('canvas');
+	canvas.setAttribute('id', canvasId || 'granim-canvas');
+	canvas.setAttribute('style', 'position:absolute; width: 100%; height: 150px; left: 0; right: 0;');
+	document.body.appendChild(canvas);
+}
+
+function unsetCanvas(canvasId) {
+	var canvas = document.querySelector('#' + (canvasId || 'granim-canvas'));
+	if (canvas) canvas.remove();
+}