toolkit/javascript/d3/test/core/transition-test-styleTween.js
changeset 47 c0b4a8b5a012
equal deleted inserted replaced
46:efd9c589177a 47:c0b4a8b5a012
       
     1 require("../env");
       
     2 require("../../d3");
       
     3 
       
     4 var assert = require("assert");
       
     5 
       
     6 module.exports = {
       
     7   topic: function() {
       
     8     var cb = this.callback,
       
     9         dd = [],
       
    10         ii = [],
       
    11         tt = [],
       
    12         vv = [],
       
    13         fails = 0;
       
    14 
       
    15     var s = d3.select("body").html("").append("div").selectAll("div")
       
    16         .data(["red", "green"])
       
    17       .enter().append("div")
       
    18         .style("background-color", function(d) { return d3.rgb(d)+""; });
       
    19 
       
    20     var t = s.transition()
       
    21         .styleTween("background-color", function() { ++fails; })
       
    22         .styleTween("background-color", tween);
       
    23 
       
    24     function tween(d, i, v) {
       
    25       dd.push(d);
       
    26       ii.push(i);
       
    27       vv.push(v);
       
    28       if (tt.push(this) >= 2) cb(null, {
       
    29         selection: s,
       
    30         transition: t,
       
    31         data: dd,
       
    32         index: ii,
       
    33         value: vv,
       
    34         context: tt,
       
    35         fails: fails
       
    36       });
       
    37       return i && d3.interpolateHsl(v, "blue");
       
    38     }
       
    39   },
       
    40 
       
    41   // The order here is a bit brittle: because the transition has zero delay,
       
    42   // it's invoking the start event immediately for all nodes, rather than
       
    43   // pushing each node onto the timer queue (which would reverse the order of
       
    44   // callbacks). The order in which tweens are invoked is undefined, so perhaps
       
    45   // we should sort the expected and actual values before comparing.
       
    46 
       
    47   "defines the corresponding style tween": function(result) {
       
    48     assert.typeOf(result.transition.tween("style.background-color"), "function");
       
    49   },
       
    50   "the last style tween takes precedence": function(result) {
       
    51     assert.equal(result.fails, 0);
       
    52   },
       
    53   "invokes the tween function": function(result) {
       
    54     assert.deepEqual(result.data, ["red", "green"], "expected data, got {actual}");
       
    55     assert.deepEqual(result.index, [0, 1], "expected data, got {actual}");
       
    56     assert.deepEqual(result.value, ["#ff0000", "#008000"], "expected value, got {actual}");
       
    57     assert.domEqual(result.context[0], result.selection[0][0], "expected this, got {actual}");
       
    58     assert.domEqual(result.context[1], result.selection[0][1], "expected this, got {actual}");
       
    59   },
       
    60 
       
    61   "end": {
       
    62     topic: function(result) {
       
    63       var cb = this.callback;
       
    64       result.transition.each("end", function(d, i) { if (i >= 1) cb(null, result); });
       
    65     },
       
    66     "uses the returned interpolator": function(result) {
       
    67       assert.equal(result.selection[0][1].style.getPropertyValue("background-color"), "#0000ff");
       
    68     },
       
    69     "does nothing if the interpolator is falsey": function(result) {
       
    70       assert.equal(result.selection[0][0].style.getPropertyValue("background-color"), "#ff0000");
       
    71     }
       
    72   }
       
    73 };