migrated all Circle tests from old unit test framework to Mocha

2025-10-15 12:34:52 +08:00 · 2013-09-01 14:08:21 -07:00
parent fe551c1ece
commit 159959a077
16 changed files with 1408 additions and 279 deletions
--- a/test/unit/Circle-test.js
+++ b/test/unit/Circle-test.js
@@ -0,0 +1,216 @@
+suite('Circle', function(){
+  // ======================================================
+
+  test('add circle to stage', function(){
+    var stage = new Kinetic.Stage({
+        container: 'container',
+        width: 578,
+        height: 200
+    });
+    var layer = new Kinetic.Layer();
+    var group = new Kinetic.Group();
+    var circle = new Kinetic.Circle({
+        x: 100,
+        y: 100,
+        radius: 70,
+        fill: 'green',
+        stroke: 'black',
+        strokeWidth: 4,
+        name: 'myCircle',
+        draggable: true
+    });
+
+    stage.add(layer);
+    layer.add(group);
+    group.add(circle);
+    layer.draw();
+
+
+    var attrs = circle.getAttrs();
+
+    assert.equal(attrs.x, 100);
+    assert.equal(attrs.y, 100);
+    assert.equal(attrs.radius, 70);
+    assert.equal(attrs.fill, 'green');
+    assert.equal(attrs.stroke, 'black');
+    assert.equal(attrs.strokeWidth, 4);
+    assert.equal(attrs.name, 'myCircle');
+    assert.equal(attrs.draggable, true);
+    assert.equal(circle.getClassName(), 'Circle');
+
+
+
+    var trace = layer.getContext().getTrace();
+    //console.log(trace);
+    assert.equal(trace, 'clearRect(0,0,578,200);clearRect(0,0,578,200);save();transform(1,0,0,1,100,100);beginPath();arc(0,0,70,0,6.283,false);closePath();fillStyle=green;fill();save();lineWidth=4;strokeStyle=black;stroke();restore();restore()');
+  });
+
+  // ======================================================
+  test('add circle with pattern fill', function(done) {
+      var imageObj = new Image();
+      imageObj.onload = function() {
+          var stage = new Kinetic.Stage({
+              container: 'container',
+              width: 578,
+              height: 200
+          });
+          var layer = new Kinetic.Layer();
+          var group = new Kinetic.Group();
+          var circle = new Kinetic.Circle({
+              x: stage.getWidth() / 2,
+              y: stage.getHeight() / 2,
+              radius: 70,
+              fillPatternImage: imageObj,
+              fillPatternOffset: -5,
+              fillPatternScale: 0.7,
+              stroke: 'black',
+              strokeWidth: 4,
+              name: 'myCircle',
+              draggable: true
+          });
+
+          group.add(circle);
+          layer.add(group);
+          stage.add(layer);
+
+          assert.equal(circle.getFillPatternOffset().x, -5);
+          assert.equal(circle.getFillPatternOffset().y, -5);
+
+          circle.setFillPatternOffset(1, 2);
+          assert.equal(circle.getFillPatternOffset().x, 1);
+          assert.equal(circle.getFillPatternOffset().y, 2);
+
+          circle.setFillPatternOffset({
+              x: 3,
+              y: 4
+          });
+          assert.equal(circle.getFillPatternOffset().x, 3);
+          assert.equal(circle.getFillPatternOffset().y, 4);
+
+          done();
+      };
+      imageObj.src = 'assets/darth-vader.jpg';
+
+  });
+
+
+  // ======================================================
+  test('add circle with radial gradient fill', function() {
+      var stage = new Kinetic.Stage({
+          container: 'container',
+          width: 578,
+          height: 200
+      });
+      var layer = new Kinetic.Layer();
+      var group = new Kinetic.Group();
+      var circle = new Kinetic.Circle({
+          x: stage.getWidth() / 2,
+          y: stage.getHeight() / 2,
+          radius: 70,
+          fillRadialGradientStartPoint: -20,
+          fillRadialGradientStartRadius: 0,
+          fillRadialGradientEndPoint: -60,
+          fillRadialGradientEndRadius: 130,
+          fillRadialGradientColorStops: [0, 'red', 0.2, 'yellow', 1, 'blue'],
+          name: 'myCircle',
+          draggable: true,
+          scale: {
+              x: 0.5,
+              y: 0.5
+          }
+      });
+
+      group.add(circle);
+      layer.add(group);
+      stage.add(layer);
+
+      assert.equal(circle.getFillRadialGradientStartPoint().x, -20);
+      assert.equal(circle.getFillRadialGradientStartPoint().y, -20);
+      assert.equal(circle.getFillRadialGradientStartRadius(), 0);
+      assert.equal(circle.getFillRadialGradientEndPoint().x, -60);
+      assert.equal(circle.getFillRadialGradientEndPoint().y, -60);
+      assert.equal(circle.getFillRadialGradientEndRadius(), 130);
+      assert.equal(circle.getFillRadialGradientColorStops().length, 6);
+
+  });
+
+  // ======================================================
+  test('add shape with linear gradient fill', function() {
+      var stage = new Kinetic.Stage({
+          container: 'container',
+          width: 578,
+          height: 200
+      });
+      var layer = new Kinetic.Layer();
+      var group = new Kinetic.Group();
+      var circle = new Kinetic.Circle({
+          x: stage.getWidth() / 2,
+          y: stage.getHeight() / 2,
+          radius: 70,
+          fillLinearGradientStartPoint: -35,
+          fillLinearGradientEndPoint: 35,
+          fillLinearGradientColorStops: [0, 'red', 1, 'blue'],
+          stroke: 'black',
+          strokeWidth: 4,
+          name: 'myCircle',
+          draggable: true
+      });
+
+      group.add(circle);
+      layer.add(group);
+      stage.add(layer);
+
+      assert.equal(circle.getName(), 'myCircle');
+
+  });
+
+  // ======================================================
+  test('set opacity after instantiation', function() {
+      var stage = new Kinetic.Stage({
+          container: 'container',
+          width: 578,
+          height: 200
+      });
+      var layer = new Kinetic.Layer();
+      var group = new Kinetic.Group();
+      var circle = new Kinetic.Circle({
+          x: stage.getWidth() / 2,
+          y: stage.getHeight() / 2,
+          radius: 70,
+          fill: 'red'
+      });
+
+      group.add(circle);
+      layer.add(group);
+      stage.add(layer);
+
+      circle.setOpacity(0.5);
+      layer.draw();
+
+      circle.setOpacity(0.5);
+      layer.draw();
+  });
+
+  // ======================================================
+  test('set fill after instantiation', function() {
+      var stage = new Kinetic.Stage({
+          container: 'container',
+          width: 578,
+          height: 200
+      });
+      var layer = new Kinetic.Layer();
+      var circle = new Kinetic.Circle({
+          x: stage.getWidth() / 2,
+          y: stage.getHeight() / 2,
+          radius: 70,
+          fill: 'green',
+          stroke: 'black',
+          strokeWidth: 4
+      });
+      layer.add(circle);
+
+      circle.setFill('blue');
+
+      stage.add(layer);
+  });
+});
--- a/test/unit/Rect-test.js
+++ b/test/unit/Rect-test.js
@@ -1,13 +1,7 @@
 suite('Rect', function(){
-  var util;
-
-  setup(function(){
-
-  });
-
  // ======================================================

-  suite('add rect to stage', function(){
+  test('add rect to stage', function(){
    var stage = new Kinetic.Stage({
      container: 'container',
      width: 578,
@@ -28,22 +22,18 @@ suite('Rect', function(){
    layer.add(rect);
    stage.add(layer);

-    test('getters', function(){
-      assert.equal(rect.getX(), 100);
-      assert.equal(rect.getY(), 50);
+    assert.equal(rect.getX(), 100);
+    assert.equal(rect.getY(), 50);

-    });
+    var trace = layer.getContext().getTrace();
+    //console.log(trace);
+    assert.equal(trace, 'clearRect(0,0,578,200);save();transform(1,0,0,1,100,50);beginPath();rect(0,0,100,50);closePath();fillStyle=green;fill();save();lineWidth=2;strokeStyle=blue;stroke();restore();restore()');

-    test('context trace', function() {
-      var trace = layer.getContext().getTrace();
-      //console.log(trace);
-      assert.equal(trace, 'clearRect(0,0,578,200);save();transform(1,0,0,1,100,50);beginPath();rect(0,0,100,50);closePath();fillStyle=green;fill();save();lineWidth=2;strokeStyle=blue;stroke();restore();restore()');
-    });
  });

  // ======================================================

-  suite('add rect to stage with shadow, rotation, corner radius, and opacity', function(){
+  test('add rect to stage with shadow, rotation, corner radius, and opacity', function(){
    var stage = new Kinetic.Stage({
      container: 'container',
      width: 578,
@@ -70,21 +60,17 @@ suite('Rect', function(){
    layer.add(rect);
    stage.add(layer);

-    test('getters', function(){
-      assert.equal(rect.getShadowColor(), 'red');
-      assert.equal(rect.getShadowBlur(), 10);
-      assert.equal(rect.getShadowOffsetX(), 5);
-      assert.equal(rect.getShadowOffsetY(), 5);
-      assert.equal(rect.getShadowOpacity(), 0.5);
-      assert.equal(rect.getOpacity(), 0.4);
-      assert.equal(rect.getCornerRadius(), 5);
+    assert.equal(rect.getShadowColor(), 'red');
+    assert.equal(rect.getShadowBlur(), 10);
+    assert.equal(rect.getShadowOffsetX(), 5);
+    assert.equal(rect.getShadowOffsetY(), 5);
+    assert.equal(rect.getShadowOpacity(), 0.5);
+    assert.equal(rect.getOpacity(), 0.4);
+    assert.equal(rect.getCornerRadius(), 5);

-    });
+    var trace = layer.getContext().getTrace();
+    //console.log(trace);
+    assert.equal(trace, 'clearRect(0,0,578,200);save();transform(1,0,0,1,100,50);beginPath();moveTo(5,0);lineTo(95,0);arc(95,5,5,4.712,0,false);lineTo(100,45);arc(95,45,5,0,1.571,false);lineTo(5,50);arc(5,45,5,1.571,3.142,false);lineTo(0,5);arc(5,5,5,3.142,4.712,false);closePath();fillStyle=green;fill();fillStyle=green;fill();save();lineWidth=2;strokeStyle=blue;stroke();restore();restore()');

-    test('context trace', function() {
-      var trace = layer.getContext().getTrace();
-      //console.log(trace);
-      assert.equal(trace, 'clearRect(0,0,578,200);save();transform(1,0,0,1,100,50);beginPath();moveTo(5,0);lineTo(95,0);arc(95,5,5,4.712,0,false);lineTo(100,45);arc(95,45,5,0,1.571,false);lineTo(5,50);arc(5,45,5,1.571,3.142,false);lineTo(0,5);arc(5,5,5,3.142,4.712,false);closePath();fillStyle=green;fill();fillStyle=green;fill();save();lineWidth=2;strokeStyle=blue;stroke();restore();restore()');
-    });
  });
 });
--- a/test/unit/Util-test.js
+++ b/test/unit/Util-test.js
@@ -1,21 +1,11 @@
 suite('Util', function(){
  var util;

-  setup(function(){
-
-  });
-
-  suite('get()', function(){
+  test('get()', function(){
    var get = Kinetic.Util.get;

-    test('get integer', function(){
-      assert.equal(get(1, 2), 1);
-    });
-    test('default to integer', function(){
-      assert.equal(get(undefined, 2), 2);
-    });
-    test('default to object', function(){
-      assert.equal(get(undefined, {foo:'bar'}).foo, 'bar');
-    });
+    assert.equal(get(1, 2), 1);
+    assert.equal(get(undefined, 2), 2);
+    assert.equal(get(undefined, {foo:'bar'}).foo, 'bar');
  });
 });