added unit tests for Jonathan\'s toJSON() fix

dist/kinetic-core.js

@@ -1725,18 +1725,16 @@ Kinetic.Stage.prototype = {
         function addNode(node) {
             var obj = {};
 
-            var cleanAttrs = node.attrs;
+            obj.attrs = {};
 
-            // remove function, image, DOM, and objects with methods
+            // serialize only attributes that are not function, image, DOM, or objects with methods
-            for(var key in cleanAttrs) {
+            for(var key in node.attrs) {
-                var val = cleanAttrs[key];
+                var val = node.attrs[key];
-                if(go._isFunction(val) || go._isElement(val) || go._hasMethods(val)) {
+                if(!go._isFunction(val) && !go._isElement(val) && !go._hasMethods(val)) {
-                    cleanAttrs[key] = undefined;
+                    obj.attrs[key] = val;
                 }
             }
 
-            obj.attrs = cleanAttrs;
-
             obj.nodeType = node.nodeType;
             obj.shapeType = node.shapeType;
 

tests/html/functionalTests.html

@@ -14,7 +14,7 @@
         </style>
         <link rel="stylesheet" type="text/css"href="../base.css">
         <script src="../../dist/kinetic-core.js"></script>
-        <script src="../assets/dataUrls.js"></script>
+        <script src="../assets/functionalDataUrls.js"></script>
         <script src="../js/Test.js"></script>
         <script src="../js/functionalTests.js"></script>
         <script>

tests/html/unitTests.html

@@ -5,6 +5,7 @@
         <script src="../../dist/kinetic-core.js"></script>
         <script src="../assets/worldMap.js"></script>
         <script src="../assets/tiger.js"></script>
+        <script src="../assets/unitDataUrls.js"></script>
         <script src="../js/Test.js"></script>
         <script src="../js/unitTests.js"></script>
         <script>

tests/js/unitTests.js

@@ -328,6 +328,8 @@ Test.prototype.tests = {
         //test(stage.toJSON() === json, "problem loading stage with json");
     },
     'STAGE - serialize stage with custom shape': function(containerId) {
+        var urls = dataUrls['STAGE - serialize stage with custom shape'];
+
         var stage = new Kinetic.Stage({
             container: containerId,
             width: 578,
@@ -359,10 +361,26 @@ Test.prototype.tests = {
         group.add(triangle);
         layer.draw();
 
-        test(triangle.getId() === 'myTriangle', 'triangle id should be myTriangle');
+        stage.toDataURL(function(startDataUrl) {
+            test(startDataUrl === urls[0], 'start data url is incorrect');
 
-        var expectedJson = '{"attrs":{"width":578,"height":200,"throttle":80,"visible":true,"listen":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"nodeType":"Stage","children":[{"attrs":{"throttle":80,"visible":true,"listen":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"nodeType":"Layer","children":[{"attrs":{"visible":true,"listen":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"nodeType":"Group","children":[{"attrs":{"fill":"#00D2FF","stroke":"black","strokeWidth":4,"detectionType":"path","shadow":{"blur":10,"alpha":1,"offset":{"x":0,"y":0}},"visible":true,"listen":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false,"id":"myTriangle"},"nodeType":"Shape"}]}]}]}';
+            test(triangle.getId() === 'myTriangle', 'triangle id should be myTriangle');
-        //test(stage.toJSON() === expectedJson, "problem serializing stage with custom shape");
+
+            //console.log(stage.toJSON())
+
+            var expectedJson = '{"attrs":{"width":578,"height":200,"throttle":80,"visible":true,"listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"nodeType":"Stage","children":[{"attrs":{"throttle":80,"visible":true,"listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"nodeType":"Layer","children":[{"attrs":{"visible":true,"listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"nodeType":"Group","children":[{"attrs":{"fill":"#00D2FF","stroke":"black","strokeWidth":4,"detectionType":"path","shadow":{"blur":10,"alpha":1,"offset":{"x":0,"y":0}},"visible":true,"listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false,"id":"myTriangle"},"nodeType":"Shape"}]}]}]}';
+            test(stage.toJSON() === expectedJson, "problem serializing stage with custom shape");
+
+            /*
+             * test redrawing layer after serialization
+             * drawing should be the same
+             */
+            layer.draw();
+
+            stage.toDataURL(function(endDataUrl) {
+                test(endDataUrl === urls[0], 'end data url is incorrect');
+            });
+        });
     },
     'STAGE - load stage with custom shape using json': function(containerId) {
         var stage = new Kinetic.Stage({
@@ -2996,7 +3014,7 @@ Test.prototype.tests = {
         var offsetChange = false;
         var shadowOffsetChange = false;
 
-        rect.on('offsetChange', function() {
+        rect.on('offsetChange', function(val) {
             offsetChange = true;
         });