add regression test for simple css

MichalBryxi · Apr 23, 2015 · 1f075ab · 1f075ab
1 parent ba62f60
commit 1f075ab
Show file tree

Hide file tree

Showing 6 changed files with 35 additions and 17 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,4 @@
 node_modules
 bower_components
 *.iml
+.sublime*
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -6,16 +6,14 @@ module.exports = function (grunt) {
             files: ['Gruntfile.js', 'src/**/*.js', 'spec/**/*.js'],
             options: {
                 globals: {
-                    console: true,
-                    module: true,
-                    document: true
+                    console: true
                 }
             }
         },
         karma: {
             unit: {
                 configFile: 'karma.conf.js',
-                background: true,
+                background: false,
                 autoWatch: false
             }
         },
@@ -41,5 +39,5 @@ module.exports = function (grunt) {
     grunt.loadNpmTasks('grunt-contrib-watch');
 
     grunt.registerTask('test', ['karma']);
-    grunt.registerTask('default', ['test', 'uglify']);
+    grunt.registerTask('default', ['jshint', 'test', 'uglify']);
 };
diff --git a/demo/firefox/firefox.html b/demo/firefox/firefox.html
@@ -36,7 +36,6 @@
         height: 33.333333%;
         width: 100%;
         border: 1px solid lightgrey;
-        border-radius: 6px;
     }
 
     .image {

diff --git a/dist/dom-to-image.min.js b/dist/dom-to-image.min.js
diff --git a/spec/domvas.spec.js b/spec/domvas.spec.js
@@ -10,16 +10,26 @@ describe('domvas', function () {
     it('should render simple css correctly', function (done) {
         loadHtml('regression-simple.html').then(function () {
             var dom_node = $('#dom-node')[0];
-            console.log('hey! ' + dom_node);
-            done();
+            domvas.toImage(dom_node, function (image) {
+                var canvas = $('#rendered-image')[0];
+                canvas.getContext('2d').drawImage(image, 0, 0);
+                var renderedImage = new Image();
+                renderedImage.src = canvas.toDataURL();
+
+                var controlImage = $('#control-image')[0];
+
+                assert.ok(imagediff.equal(renderedImage, controlImage));
+                done();
+            });
+        }).catch(function (e) {
+            console.error(e);
         });
     });
 
     function loadHtml(fileName) {
         return new Promise(function (resolve, reject) {
             var url = '/base/spec/resources/' + fileName;
             var request = new XMLHttpRequest();
-            console.log('request ' + request);
             request.open('GET', url, true);
             request.responseType = 'text/html';
 
@@ -29,9 +39,9 @@ describe('domvas', function () {
                     content.innerHTML = request.response.toString();
                     $('body')[0].appendChild(content);
                     resolve();
-                };
+                }
             };
-            
+
             request.send();
         });
     }

diff --git a/spec/resources/regression-simple.html b/spec/resources/regression-simple.html
@@ -27,11 +27,21 @@
     height: 33.333333%;
     width: 100%;
     border: 1px solid lightgrey;
-    border-radius: 6px;
 }
 </style>
-<div id="dom-node">
-    <div class="red"></div>
-    <div class="green"></div>
-    <div class="blue"></div>
+<div>
+    <h1>DOM node</h1>
+    <div id="dom-node">
+        <div class="red"></div>
+        <div class="green"></div>
+        <div class="blue"></div>
+    </div>
+</div>
+<div>
+    <h1>rendered image</h1>
+    <canvas id="rendered-image" width="100px" height="100px"></canvas>
+</div>
+<div>
+    <h1>control image</h1>
+    <img id="control-image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAABFUlEQVR4nO3bsQkDMBAEwS/dPaogOTMIFaAFTzAVLFx2MzOblNlrLQKOIHuGhwSJESRGkBhBYgSJESRGkBhBYgSJESRGkBhBYgSJESRGkBhBYgSJESRGkBhBYgSJESRGkBhBYgSJESRGkBhBYgSJESTmCsJ7gsQcQeYzPCRIjCAxgsQIEiNIjCAxgsQIEiNIjCAxgsQIEiNIjCAxgsQIEiNIjCAxgsQIEiNIjCAxgsQIEiNIjCAxgsQIEiNIzBWE9wSJOSfr/avrrwkSI0iMIDGCxAgSI0iMIDGCxAgSI0iMIDGCxAgSI0iMIDGCxAgSI0iMIDGCxAgSI0iMIDGCxAgSI0iMIDGCxAgSI0jMFYT3fkHo+ALCsir6OVPgZwAAAABJRU5ErkJggg==">
 </div>