charts/tests/charts.html

	charts.html revision 2283e3a241de1db1aaba484b89c8aadd89446b36
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <style>
            /*Supplemental: CSS for the YUI distribution*/
            #custom-doc { width: 95%; min-width: 950px; }
            #pagetitle {background-image: url(/assets/bg_hd.gif);}
            #mychart {
                padding:10px 10px 10px 10px;
            }
        </style>
        <link rel="stylesheet" type="text/css" href="/build/cssfonts/fonts-min.css">
    </head>
<body class="yui3-skin-sam">
<h3>Unit Tests</h3>
<div id="mychart"></div>
<script type="text/javascript" src="/build/yui/yui-min.js"></script>
<script>
YUI({
    allowRollup: false,
    filter: (window.location.search.match(/[?&]filter=([^&]+)/) || [])[1] || 'min'
}).use('charts', 'test', 'console', function (Y)
{
    Y.namespace("example.test");

    var suite = new Y.Test.Suite("Y.Charts");

    var ChartTests = new Y.Test.Case({
        name: "Chart Tests",

        setUp: function() {
            var myDataValues = [
                {category:"5/1/2010", values:2000, expenses:3700, revenue:2200},
                {category:"5/2/2010", values:50, expenses:9100, revenue:100},
                {category:"5/3/2010", values:400, expenses:1100, revenue:1500},
                {category:"5/4/2010", values:200, expenses:1900, revenue:2800},
                {category:"5/5/2010", values:5000, expenses:5000, revenue:2650}
            ];
            var mychart = new Y.Chart({width:400, height:300, dataProvider:myDataValues});
            mychart.render("#mychart");
            this.chart = mychart;
        },

        tearDown: function() {
            this.chart.destroy();
        },

        //Test to ensure that all items in the series collection are of the correct type.
        testGetSeriesByIndex: function()
        {
            var series = this.chart.getSeries(0),
                assert = Y.Assert;
                assert.isInstanceOf(Y.CartesianSeries, series);
        },

        //Test to ensure that all items in the series collection are of the correct type.
        testGetSeriesByKey: function()
        {
            var series = this.chart.getSeries("revenue"),
                assert = Y.Assert;
                assert.isInstanceOf(Y.CartesianSeries, series);
        },

        //Test to ensure the series axes are numeric and the category axis is of type category
        testGetAxesByKey: function()
        {
            var category = this.chart.getAxisByKey("category"),
                values = this.chart.getAxisByKey("values"),
                assert = Y.Assert;
            assert.isInstanceOf(Y.CategoryAxis, category);
            assert.isInstanceOf(Y.NumericAxis, values);
        },

        //Test to ensure that getCategoryAxis returns a category axis
        testGetCategoryAxis: function()
        {
            var category = this.chart.get("categoryAxis"),
                assert = Y.Assert;
            assert.isInstanceOf(Y.CategoryAxis, category);
        },

        //Test that the graph attribute is of type Graph
        testGetGraph: function()
        {
            Y.Assert.isInstanceOf(Y.Graph, this.chart.get("graph"));
        },

        //Test to ensure that the axes hash contains AxisRenderer instances
        testGetAxes: function()
        {
            var assert = Y.Assert,
                axes = this.chart.get("axes"),
                i;
            for(i in axes)
            {
                if(axes.hasOwnProperty(i))
                {
                    assert.isInstanceOf(Y.Axis, axes[i]);
                }
            }
        },

        //Test to ensure that default series keys are correct
        testGetSeriesKeys: function()
        {
            var assert = Y.Assert,
                YArray = Y.Array,
                selectedIndex,
                testKeys = ['values', 'expenses', 'revenue'],
                newArray = [],
                actualKeys = this.chart.get("seriesKeys"),
                i = 0,
                len = testKeys.length;
            assert.areEqual(actualKeys.length, testKeys.length, "Actual seriesKeys array is not the correct length.");
            for(; i < len; ++i)
            {
                selectedIndex = YArray.indexOf(actualKeys, testKeys[i]);
                assert.isNotNull(selectedIndex + 1, "The seriesKeys array should contain the following key: " + testKeys[i] + ".");
                if(selectedIndex > -1)
                {
                    newArray.push(actualKeys[selectedIndex]);
                }
                else
                {
                    throw new Error("The actual seriesKeys array should but does not contain " + testKeys[i] + ".");
                }
            }
            assert.areEqual(newArray.length, actualKeys.length, "The seriesKeys array has more keys than it should.");
        },

        //Test to ensure default attributes are correct
        testGetDefaultAttributes: function()
        {
            var assert = Y.Assert,
                attrs = {
                    direction: "horizontal",
                    type: "combo",
                    valueAxisName: "values",
                    categoryAxisName: "category",
                    categoryKey: "category"
                },
                chart = this.chart,
                i;
            for(i in attrs)
            {
                if(attrs.hasOwnProperty(i))
                {
                    assert.areEqual(chart.get(i), attrs[i], "The attribute " + i + " should equal " + attrs[i] + ".");
                }
            }

        }
    });

    var GraphTests = new Y.Test.Case({
        name: "Graph Tests",

        setUp: function() {
            var myDataValues = [
                {category:"5/1/2010", values:2000, expenses:3700, revenue:2200},
                {category:"5/2/2010", values:50, expenses:9100, revenue:100},
                {category:"5/3/2010", values:400, expenses:1100, revenue:1500},
                {category:"5/4/2010", values:200, expenses:1900, revenue:2800},
                {category:"5/5/2010", values:5000, expenses:5000, revenue:2650}
            ];
            var mychart = new Y.Chart({width:400, height:300, dataProvider:myDataValues, seriesKeys:["values", "revenue"]});
            mychart.render("#mychart");
            this.chart = mychart;
        },

        tearDown: function() {
            this.chart.destroy();
        },

        "test:graph._getSeries(line)": function()
        {
            var graph = this.chart.get("graph"),
                series = graph._getSeries("line");
            Y.Assert.areEqual(series, Y.LineSeries, "The series type should be Y.LineSeries");
        },

        "test:graph._getSeries(column)": function()
        {
            var graph = this.chart.get("graph"),
                series = graph._getSeries("column");
            Y.Assert.areEqual(series, Y.ColumnSeries, "The series type should be Y.ColumnSeries");
        },

        "test:graph._getSeries(bar)": function()
        {
            var graph = this.chart.get("graph"),
                series = graph._getSeries("bar");
            Y.Assert.areEqual(series, Y.BarSeries, "The series type should be Y.BarSeries");
        },

        "test:graph._getSeries(area)": function()
        {
            var graph = this.chart.get("graph"),
                series = graph._getSeries("area");
            Y.Assert.areEqual(series, Y.AreaSeries, "The series type should be Y.AreaSeries");
        },

        "test:graph._getSeries(stackedarea)": function()
        {
            var graph = this.chart.get("graph"),
                series = graph._getSeries("stackedarea");
            Y.Assert.areEqual(series, Y.StackedAreaSeries, "The series type should be Y.StackedAreaSeries");
        },

        "test:graph._getSeries(stackedcolumn)": function()
        {
            var graph = this.chart.get("graph"),
                series = graph._getSeries("stackedcolumn");
            Y.Assert.areEqual(series, Y.StackedColumnSeries, "The series type should be Y.StackedColumnSeries");
        },

        "test:graph._getSeries(stackedbar)": function()
        {
            var graph = this.chart.get("graph"),
                series = graph._getSeries("stackedbar");
            Y.Assert.areEqual(series, Y.StackedBarSeries, "The series type should be Y.StackedBarSeries");
        },

        "test:graph._getSeries(stackedline)": function()
        {
            var graph = this.chart.get("graph"),
                series = graph._getSeries("stackedline");
            Y.Assert.areEqual(series, Y.StackedLineSeries, "The series type should be Y.StackedLineSeries");
        },

        "test:graph._getSeries(markerseries)": function()
        {
            var graph = this.chart.get("graph"),
                series = graph._getSeries("markerseries");
            Y.Assert.areEqual(series, Y.MarkerSeries, "The series type should be Y.MarkerSeries");
        },

        "test:graph._getSeries(stackedmarkerseries)": function()
        {
            var graph = this.chart.get("graph"),
                series = graph._getSeries("stackedmarkerseries");
            Y.Assert.areEqual(series, Y.StackedMarkerSeries, "The series type should be Y.StackedMarkerSeries");
        },

        "test:graph._getSeries(spline)": function()
        {
            var graph = this.chart.get("graph"),
                series = graph._getSeries("spline");
            Y.Assert.areEqual(series, Y.SplineSeries, "The series type should be Y.SplineSeries");
        },

        "test:graph._getSeries(areaspline)": function()
        {
            var graph = this.chart.get("graph"),
                series = graph._getSeries("areaspline");
            Y.Assert.areEqual(series, Y.AreaSplineSeries, "The series type should be Y.AreaSplineSeries");
        },

        "test:graph._getSeries(stackedspline)": function()
        {
            var graph = this.chart.get("graph"),
                series = graph._getSeries("stackedspline");
            Y.Assert.areEqual(series, Y.StackedSplineSeries, "The series type should be Y.StackedSplineSeries");
        },

        "test:graph._getSeries(stackedareapline)": function()
        {
            var graph = this.chart.get("graph"),
                series = graph._getSeries("stackedareaspline");
            Y.Assert.areEqual(series, Y.StackedAreaSplineSeries, "The series type should be Y.StackedAreaSplineSeries");
        },

        "test:graph._getSeries(pie)": function()
        {
            var graph = this.chart.get("graph"),
                series = graph._getSeries("pie");
            Y.Assert.areEqual(series, Y.PieSeries, "The series type should be Y.PieSeries");
        },

        "test:graph._getSeries(combo)": function()
        {
            var graph = this.chart.get("graph"),
                series = graph._getSeries("combo");
            Y.Assert.areEqual(series, Y.ComboSeries, "The series type should be Y.ComboSeries");
        },

        "test:graph._getSeries(stackedcombo)": function()
        {
            var graph = this.chart.get("graph"),
                series = graph._getSeries("stackedcombo");
            Y.Assert.areEqual(series, Y.StackedComboSeries, "The series type should be Y.StackedComboSeries");
        },
        "test:graph._getSeries(combospline)": function()
        {
            var graph = this.chart.get("graph"),
                series = graph._getSeries("combospline");
            Y.Assert.areEqual(series, Y.ComboSplineSeries, "The series type should be Y.ComboSplineSeries");
        },

        "test:graph._getSeries(stackedcombospline)": function()
        {
            var graph = this.chart.get("graph"),
                series = graph._getSeries("stackedcombospline");
            Y.Assert.areEqual(series, Y.StackedComboSplineSeries, "The series type should be Y.StackedComboSplineSeries");
        },

        "test:graph._getSeries(customclass)" : function()
        {
            var graph = this.chart.get("graph"),
                series;

            Y.CustomLineSeries = Y.Base.create("customLineSeries", Y.LineSeries, [], {
                mycustomprop: null,

                mycustommethod: function()
                {
                    var yaypie = "mmmm";
                    yaypie += "Pie";
                }
            });

            series = graph._getSeries(Y.CustomLineSeries);
            Y.Assert.areEqual(series, Y.CustomLineSeries, "The series type should be Y.CustomLineSeries");
        }
    }),

    AxesTests = new Y.Test.Case({
        name: "Axes Tests",

        setUp: function() {
            var myDataValues = [
                {category:"5/1/2010", values:2000, expenses:3700, revenue:2200},
                {category:"5/2/2010", values:50, expenses:9100, revenue:100},
                {category:"5/3/2010", values:400, expenses:1100, revenue:1500},
                {category:"5/4/2010", values:200, expenses:1900, revenue:2800},
                {category:"5/5/2010", values:5000, expenses:5000, revenue:2650}
            ];
            var mychart = new Y.Chart({width:400, height:300, dataProvider:myDataValues, seriesKeys:["values", "revenue"]});
            mychart.render("#mychart");
            this.chart = mychart;
        },

        tearDown: function() {
            this.chart.destroy();
        },

        //Test axes data classes
        testRemoveKey: function()
        {
            var assert = Y.Assert,
                xAxis = this.chart.getCategoryAxis(),
                yAxis = this.chart.getAxisByKey("values"),
                keys,
                l,
                i;
            this.xHandle = xAxis.on("dataUpdate", Y.bind(function(e) {
                l = xAxis.get("keyCollection").length || 0;
                assert.areEqual(0, 0, "The value should be zero");
            }, this));
            this.yHandle = yAxis.on("dataUpdate", Y.bind(function(e) {
                keys = yAxis.get("keyCollection");
                assert.areEqual(1, keys.length, "The length should be 1");
                assert.areEqual(Y.Array.indexOf(keys, "revenue"), -1, "The key revenue should be removed");
            }));
            xAxis.removeKey("category");
            yAxis.removeKey("revenue");
            this.xHandle.detach();
            this.yHandle.detach();
        },

        testAddKey: function()
        {
            var assert = Y.Assert,
                yAxis = this.chart.getAxisByKey("values"),
                keys,
                pattern = [3700, 9100, 1100, 1900],
                testarray,
                i = 0;
                l = 4;
            this.yHandle = yAxis.on("dataUpdate", Y.bind(function(e) {
                keys = yAxis.get("keyCollection");
                testarray = yAxis.getDataByKey("expenses");
                assert.areEqual(3, keys.length);
                assert.areEqual(Y.Array.indexOf(keys, "expenses"), 2);
                for(; i < l; ++i)
                {
                    assert.areEqual(pattern[i], testarray[i]);
                }
            }, this));
            yAxis.addKey("expenses");
            this.yHandle.detach();
        }

    }),

    AxisMinAndMaxTest = new Y.Test.Case({
        name: "Axes Min and Max Tests",

        setUp: function() {
            var myDataValues = [
                {category:"5/1/2010", values:2000, expenses:3700, revenue:2200},
                {category:"5/2/2010", values:50, expenses:9100, revenue:100},
                {category:"5/3/2010", values:400, expenses:1100, revenue:1500},
                {category:"5/4/2010", values:200, expenses:1900, revenue:2800},
                {category:"5/5/2010", values:5000, expenses:5000, revenue:2650}
            ];
            var mychart = new Y.Chart({width:400, height:300, dataProvider:myDataValues});
            mychart.render("#mychart");
            this.minandmaxchart = mychart;
        },

        tearDown: function() {
            this.minandmaxchart.destroy();
        },

        //Tests a NumericAxis minimum and maximum by applying the labelFunction of the axis to the set minimum and maximum values and
        //then comparing the innerHTML of the first and last labels
        testMinAndMax: function()
        {
            var yAxis = this.minandmaxchart.getAxisByKey("values"),
                majorUnit = yAxis.get("styles").majorUnit,
                count = majorUnit.count - 1,
                setMax = 1492,
                setMin = 7,
                eventListener,
                labels;
            yAxis.set("minimum", setMin);
            eventListener = yAxis.on("axisRendered", function(e) {
                labels = yAxis.get("labels");
                Y.assert(labels[0].innerHTML == yAxis.get("labelFunction").apply(yAxis, [setMin, yAxis.get("labelFormat")]));
                Y.assert(labels[count].innerHTML == yAxis.get("labelFunction").apply(yAxis, [setMax, yAxis.get("labelFormat")]));
            });
            yAxis.set("maximum", setMax);
            eventListener.detach();
        },

        //change min to negative value and test.
        //change max to negative value and test.
        //tests negative min/positive max and negative min/negative max
        testNegativeMinAndMax: function()
        {
            var yAxis = this.minandmaxchart.getAxisByKey("values"),
                majorUnit = yAxis.get("styles").majorUnit,
                count = majorUnit.count- 1,
                setMin = -1721,
                setMax = -15,
                eventListener,
                labels;
            yAxis.set("minimum", setMin);
            eventListener = yAxis.on("axisRendered", function(e) {
                labels = yAxis.get("labels");
                Y.assert(labels[0].innerHTML == yAxis.get("labelFunction").apply(yAxis, [setMin, yAxis.get("labelFormat")]));
                Y.assert(labels[count].innerHTML == yAxis.get("labelFunction").apply(yAxis, [setMax, yAxis.get("labelFormat")]));
            });
            yAxis.set("maximum", setMax);
            eventListener.detach();
        },

        //Tests min and max with decimals
        testMinAndMaxWithDecimals: function()
        {
            var yAxis = this.minandmaxchart.getAxisByKey("values"),
                majorUnit = yAxis.get("styles").majorUnit,
                count = majorUnit.count- 1,
                setMin = 14.66,
                setMax = 1821.33,
                eventListener,
                labels;
            yAxis.set("minimum", setMin);
            eventListener = yAxis.on("axisRendered", function(e) {
                labels = yAxis.get("labels");
                Y.assert(labels[0].innerHTML == yAxis.get("labelFunction").apply(yAxis, [setMin, yAxis.get("labelFormat")]));
                Y.assert(labels[count].innerHTML == yAxis.get("labelFunction").apply(yAxis, [setMax, yAxis.get("labelFormat")]));
            });
            yAxis.set("maximum", setMax);
            eventListener.detach();
        }

    }),

    //test to ensure that pie charts are drawn from center
    //pie charts need to have the same width/height
    PieCenterTest = new Y.Test.Case({
        name: "PieChartCenterTest",
        setUp: function() {
            var myDataValues = [
                {day:"Monday", taxes:2000},
                {day:"Tuesday", taxes:50},
                {day:"Wednesday", taxes:4000},
                {day:"Thursday", taxes:200},
                {day:"Friday", taxes:2000}
            ];
            var mychart = new Y.Chart({type: "pie", width:400, height:400, dataProvider:myDataValues});
            mychart.render("#mychart");
            this.chart = mychart;
        },

        tearDown: function() {
            this.chart.destroy();
        },

        testWidthAndHeightEqual: function()
        {
            var graphic = this.chart.get("graph").get("graphic"),
                shapes = graphic.get("shapes"),
                i,
                shape;
            for(i in shapes)
            {
                if(shapes.hasOwnProperty(i))
                {
                    shape = shapes[i];
                    Y.assert(shape.get("width") === shape.get("height"));
                }
            }
        },

        testWidthGreaterThanHeight: function()
        {
            var graphic = this.chart.get("graph").get("graphic"),
                shapes,
                i,
                shape;
            this.chart.set("width", 500);
            shapes = graphic.get("shapes");
            for(i in shapes)
            {
                if(shapes.hasOwnProperty(i))
                {
                    shape = shapes[i];
                    Y.assert(shape.get("width") === shape.get("height"));
                }
            }
        },

        testHeightGreaterThanWidth: function()
        {
            var graphic = this.chart.get("graph").get("graphic"),
                shapes,
                i,
                shape;
            this.chart.set("height", 600);
            shapes = graphic.get("shapes");
            for(i in shapes)
            {
                if(shapes.hasOwnProperty(i))
                {
                    shape = shapes[i];
                    Y.assert(shape.get("width") === shape.get("height"));
                }
            }
        }
    });

    suite.add(ChartTests);
    suite.add(GraphTests);
    suite.add(AxesTests);
    suite.add(AxisMinAndMaxTest);
    suite.add(PieCenterTest);

    //create the console
    var r = new Y.Console({
        newestOnTop : false,
        style: 'block' // to anchor in the example content
    });

    r.render('#testLogger');

    //run the tests
    Y.Test.Runner.setName("Y.Charts");
    Y.Test.Runner.add(suite);
    Y.Test.Runner.run();
});
</script>
</body>
</html>