start writing regression tests

MichalBryxi · Apr 22, 2015 · 7202475 · 7202475
1 parent 98c5f35
commit 7202475
Show file tree

Hide file tree

Showing 9 changed files with 165 additions and 79 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,2 +1,3 @@
 node_modules
+bower_components
 *.iml
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -3,7 +3,7 @@ module.exports = function (grunt) {
     grunt.initConfig({
         pkg: grunt.file.readJSON('package.json'),
         jshint: {
-            files: ['Gruntfile.js', 'src/**/*.js', 'test/**/*.js'],
+            files: ['Gruntfile.js', 'src/**/*.js', 'spec/**/*.js'],
             options: {
                 globals: {
                     console: true,

diff --git a/bower.json b/bower.json
@@ -23,5 +23,11 @@
     "bower_components",
     "test",
     "tests"
-  ]
+  ],
+  "devDependencies": {
+    "js-imagediff": "~1.0.8",
+    "fixtures": "~1.5.3",
+    "jquery": "~2.1.3",
+    "bluebird": "~2.9.24"
+  }
 }
diff --git a/demo/firefox/firefox.html b/demo/firefox/firefox.html
@@ -1,67 +1,74 @@
 <!DOCTYPE html>
 <html>
+
 <head lang="en">
     <meta charset="UTF-8">
     <style>
-        * {
-            box-sizing: border-box;
-        }
-
-        #root {
-            height: 100px;
-            width: 100px;
-        }
-
-        #dom-content {
-            border: 1px solid black;
-            height: 100%;
-        }
-
-        .red {
-            background-color: red;
-        }
-
-        .green {
-            background-color: lightgreen;
-        }
-
-        .blue {
-            background-color: lightblue;
-        }
-
-        .red, .green, .blue {
-            height: 33.333333%;
-            width: 100%;
-        }
-
-        .image {
-            width: 100px;
-            height: 100px;
-        }
+    * {
+        box-sizing: border-box;
+    }
+
+    #root {
+        height: 100px;
+        width: 100px;
+    }
+
+    #dom-content {
+        border: 1px solid black;
+        height: 100%;
+    }
+
+    .red {
+        background-color: red;
+    }
+
+    .green {
+        background-color: green;
+    }
+
+    .blue {
+        background-color: blue;
+    }
+
+    .red,
+    .green,
+    .blue {
+        height: 33.333333%;
+        width: 100%;
+        border: 1px solid lightgrey;
+        border-radius: 6px;
+    }
+
+    .image {
+        width: 100px;
+        height: 100px;
+    }
     </style>
     <script src="../../src/domvas.js"></script>
 </head>
+
 <body>
-<script>
-    exportToImage = function () {
+    <script>
+    exportToImage = function() {
         var canvas = document.getElementById('canvas');
         var context = canvas.getContext('2d');
 
-        domvas.toImage(document.getElementById('root'), function (image) {
+        domvas.toImage(document.getElementById('root'), function(image) {
             context.drawImage(image, 0, 0);
         });
     };
-</script>
-<div id="root">
-    <div id="dom-content">
-        <div class="red">red</div>
-        <div class="green">green</div>
-        <div class="blue">blue</div>
+    </script>
+    <div id="root">
+        <div id="dom-content">
+            <div class="red"></div>
+            <div class="green"></div>
+            <div class="blue"></div>
+        </div>
+    </div>
+    <button onclick="exportToImage()">draw</button>
+    <div class="image">
+        <canvas id="canvas" width="100" height="100"></canvas>
     </div>
-</div>
-<button onclick="exportToImage()">draw</button>
-<div class="image">
-    <canvas id="canvas" width="100" height="100"></canvas>
-</div>
 </body>
+
 </html>
diff --git a/karma.conf.js b/karma.conf.js
@@ -2,28 +2,29 @@ module.exports = function (config) {
     config.set({
         basePath: '',
         frameworks: ['mocha', 'chai'],
-
-        files: [
+
+        files: [{
+                pattern: 'spec/resources/regression-simple.html',
+                included: false,
+                served: true
+            },
+
+            'bower_components/jquery/dist/jquery.js',
+            'bower_components/bluebird/js/browser/bluebird.js',
+            'bower_components/js-imagediff/imagediff.js',
+
             'src/domvas.js',
-            'test/**/*spec.js'
+            'spec/**/*spec.js'
         ],
-        
+
         exclude: [],
         preprocessors: {},
         reporters: ['mocha'],
         port: 9876,
         colors: true,
         logLevel: config.LOG_INFO,
         autoWatch: true,
-        browsers: ['chrome-small'],
-        customLaunchers: {
-            'chrome-small': {
-                base: 'Chrome',
-                flags: [
-                    '--window-size=300,200'
-                ]
-            }
-        },
+        browsers: ['Chrome', 'Firefox'],
         singleRun: true
     });
 };
diff --git a/spec/domvas.spec.js b/spec/domvas.spec.js
@@ -0,0 +1,31 @@
+describe('domvas', function () {
+    'use strict';
+
+    var assert = chai.assert;
+
+    it('should load', function () {
+        assert.ok(domvas);
+    });
+
+    it('should render simple css correctly', function (done) {
+        loadHtml('regression-simple.html').then(function (html) {
+            document.write(html);
+            var dom_node = $('#dom-node')[0];
+            console.log('hey! ' + dom_node);
+            done();
+        });
+    });
+
+    function loadHtml(path) {
+        return new Promise(function (resolve) {
+            var request = new XMLHttpRequest();
+            console.log('request ' + request);
+            request.open('GET', '/base/spec/resources/' + path, true);
+            request.responseType = 'text/html';
+            request.onload = function () {
+                if (this.status == 200) resolve(request.response.toString());
+            };
+            request.send();
+        });
+    }
+});
diff --git a/spec/resources/regression-simple.html b/spec/resources/regression-simple.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html>
+
+<head lang="en">
+    <meta charset="UTF-8">
+    <style>
+    * {
+        box-sizing: border-box;
+    }
+
+    #dom-node {
+        border: 1px solid black;
+        height: 100px;
+        width: 100px;
+    }
+
+    .red {
+        background-color: red;
+    }
+
+    .green {
+        background-color: green;
+    }
+
+    .blue {
+        background-color: blue;
+    }
+
+    .red,
+    .green,
+    .blue {
+        height: 33.333333%;
+        width: 100%;
+        border: 1px solid lightgrey;
+        border-radius: 6px;
+    }
+
+    </style>
+</head>
+
+<body>
+    <div id="dom-node">
+        <div class="red"></div>
+        <div class="green"></div>
+        <div class="blue"></div>
+    </div>
+</body>
+
+</html>
diff --git a/src/domvas.js b/src/domvas.js
@@ -1,14 +1,14 @@
-(function (global) {
+(function(global) {
     "use strict";
 
     function copyCss(source, target) {
-        var sourceStyle = global.window.getComputedStyle(source);
+        var sourceStyle = global.window.getComputedStyle(source);  
 
         if (sourceStyle.cssText) {
             target.style.cssText = sourceStyle.cssText;
             return;
         }
-        
+
         for (var i = 0; i < sourceStyle.length; i++) {
             var propertyName = sourceStyle[i];
             target.style.setProperty(
@@ -28,7 +28,7 @@
         copyCss(origElem, elem);
 
         // collect all nodes within the element, copy the current style to the clone
-        Array.prototype.forEach.call(children, function (child, i) {
+        Array.prototype.forEach.call(children, function(child, i) {
             copyCss(origChildren[i], child);
         });
 
@@ -39,7 +39,7 @@
 
     function init() {
         return {
-            toImage: function (origElem, callback, width, height, left, top) {
+            toImage: function(origElem, callback, width, height, left, top) {
 
                 left = (left || 0);
                 top = (top || 0);
@@ -68,7 +68,7 @@
                 img.src = dataUri;
 
                 // when loaded, fire onload callback with actual image node
-                img.onload = function () {
+                img.onload = function() {
                     if (callback) {
                         callback.call(img, img);
                     }
@@ -79,4 +79,3 @@
 
     global.domvas = init();
 })(this);
-
diff --git a/test/domvas.spec.js b/test/domvas.spec.js