charts.html revision 2a322140e93579c14e2037ff2eb3e62eaa86c9df
5852N/A<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
5852N/A<html>
5852N/A <head>
5852N/A <meta http-equiv="content-type" content="text/html; charset=utf-8">
5852N/A <style>
5852N/A /*Supplemental: CSS for the YUI distribution*/
5852N/A #custom-doc { width: 95%; min-width: 950px; }
5852N/A #pagetitle {background-image: url(/assets/bg_hd.gif);}
5852N/A #mychart {
5852N/A padding:10px 10px 10px 10px;
5852N/A }
5852N/A </style>
5852N/A <link rel="stylesheet" type="text/css" href="/build/cssfonts/fonts-min.css">
5852N/A </head>
5852N/A<body class="yui3-skin-sam">
5852N/A<h3>Unit Tests</h3>
5852N/A<div id="mychart"></div>
5852N/A<script type="text/javascript" src="/build/yui/yui-min.js"></script>
5852N/A<script>
5852N/AYUI({
5852N/A allowRollup: false,
5852N/A filter: (window.location.search.match(/[?&]filter=([^&]+)/) || [])[1] || 'min'
5852N/A}).use('charts', 'test', 'console', function (Y)
5852N/A{
5852N/A Y.namespace("example.test");
5852N/A var suite = new Y.Test.Suite("Y.Charts");
5852N/A
5852N/A suite.add(new Y.Test.Case({
5852N/A name: "Chart Tests",
5852N/A
5852N/A setUp: function() {
5852N/A var myDataValues = [
5852N/A {category:"5/1/2010", values:2000, expenses:3700, revenue:2200},
5852N/A {category:"5/2/2010", values:50, expenses:9100, revenue:100},
5852N/A {category:"5/3/2010", values:400, expenses:1100, revenue:1500},
5852N/A {category:"5/4/2010", values:200, expenses:1900, revenue:2800},
5852N/A {category:"5/5/2010", values:5000, expenses:5000, revenue:2650}
5852N/A ];
5852N/A var mychart = new Y.Chart({width:400, height:300, dataProvider:myDataValues});
5852N/A mychart.render("#mychart");
5852N/A this.chart = mychart;
5852N/A },
5852N/A
5852N/A tearDown: function() {
5852N/A this.chart.destroy();
5852N/A },
5852N/A
5852N/A //Test to ensure that all items in the series collection are of the correct type.
5852N/A testGetSeriesByIndex: function()
5852N/A {
5852N/A var series = this.chart.getSeries(0),
5852N/A assert = Y.Assert;
5852N/A assert.isInstanceOf(Y.CartesianSeries, series);
5852N/A },
5852N/A
5852N/A //Test to ensure that all items in the series collection are of the correct type.
5852N/A testGetSeriesByKey: function()
5852N/A {
5852N/A var series = this.chart.getSeries("revenue"),
5852N/A assert = Y.Assert;
5852N/A assert.isInstanceOf(Y.CartesianSeries, series);
5852N/A },
5852N/A
5852N/A //Test to ensure the series axes are numeric and the category axis is of type category
5852N/A testGetAxesByKey: function()
5852N/A {
5852N/A var category = this.chart.getAxisByKey("category"),
5852N/A values = this.chart.getAxisByKey("values"),
5852N/A assert = Y.Assert;
5852N/A assert.isInstanceOf(Y.CategoryAxis, category);
5852N/A assert.isInstanceOf(Y.NumericAxis, values);
5852N/A },
5852N/A
5852N/A //Test to ensure that getCategoryAxis returns a category axis
5852N/A testGetCategoryAxis: function()
5852N/A {
5852N/A var category = this.chart.get("categoryAxis"),
5852N/A assert = Y.Assert;
5852N/A assert.isInstanceOf(Y.CategoryAxis, category);
5852N/A },
5852N/A
5852N/A //Test that the graph attribute is of type Graph
5852N/A testGetGraph: function()
5852N/A {
5852N/A Y.Assert.isInstanceOf(Y.Graph, this.chart.get("graph"));
5852N/A },
5852N/A
5852N/A //Test to ensure that the axes hash contains AxisRenderer instances
5852N/A testGetAxes: function()
5852N/A {
5852N/A var assert = Y.Assert,
5852N/A axes = this.chart.get("axes"),
5852N/A i;
5852N/A for(i in axes)
5852N/A {
5852N/A if(axes.hasOwnProperty(i))
5852N/A {
5852N/A assert.isInstanceOf(Y.Axis, axes[i]);
5852N/A }
5852N/A }
5852N/A },
5852N/A
5852N/A //Test to ensure that default series keys are correct
5852N/A testGetSeriesKeys: function()
5852N/A {
5852N/A var assert = Y.Assert,
5852N/A YArray = Y.Array,
5852N/A selectedIndex,
5852N/A testKeys = ['values', 'expenses', 'revenue'],
4203N/A newArray = [],
4203N/A actualKeys = this.chart.get("seriesKeys"),
5852N/A i = 0,
5852N/A len = testKeys.length;
5852N/A assert.areEqual(actualKeys.length, testKeys.length, "Actual seriesKeys array is not the correct length.");
5852N/A for(; i < len; ++i)
5852N/A {
5852N/A selectedIndex = YArray.indexOf(actualKeys, testKeys[i]);
5852N/A assert.isNotNull(selectedIndex + 1, "The seriesKeys array should contain the following key: " + testKeys[i] + ".");
5852N/A if(selectedIndex > -1)
5852N/A {
5852N/A newArray.push(actualKeys[selectedIndex]);
5852N/A }
5852N/A else
5852N/A {
5852N/A throw new Error("The actual seriesKeys array should but does not contain " + testKeys[i] + ".");
4203N/A }
4203N/A }
4203N/A assert.areEqual(newArray.length, actualKeys.length, "The seriesKeys array has more keys than it should.");
4203N/A },
4203N/A
4203N/A //Test to ensure default attributes are correct
4203N/A testGetDefaultAttributes: function()
4203N/A {
4203N/A var assert = Y.Assert,
4203N/A attrs = {
4203N/A direction: "horizontal",
4203N/A type: "combo",
4203N/A valueAxisName: "values",
4203N/A categoryAxisName: "category",
4203N/A categoryKey: "category"
4203N/A },
4203N/A chart = this.chart,
4203N/A i;
4203N/A for(i in attrs)
4203N/A {
5852N/A if(attrs.hasOwnProperty(i))
4203N/A {
4203N/A assert.areEqual(chart.get(i), attrs[i], "The attribute " + i + " should equal " + attrs[i] + ".");
4203N/A }
4203N/A }
5852N/A
5852N/A }
5852N/A }));
5852N/A
5852N/A suite.add(new Y.Test.Case({
5852N/A name: "Graph Tests",
5852N/A
4203N/A setUp: function() {
5852N/A var myDataValues = [
5852N/A {category:"5/1/2010", values:2000, expenses:3700, revenue:2200},
5852N/A {category:"5/2/2010", values:50, expenses:9100, revenue:100},
5852N/A {category:"5/3/2010", values:400, expenses:1100, revenue:1500},
4203N/A {category:"5/4/2010", values:200, expenses:1900, revenue:2800},
4203N/A {category:"5/5/2010", values:5000, expenses:5000, revenue:2650}
5852N/A ];
5852N/A var mychart = new Y.Chart({width:400, height:300, dataProvider:myDataValues, seriesKeys:["values", "revenue"]});
5852N/A mychart.render("#mychart");
5852N/A this.chart = mychart;
5852N/A },
5852N/A
5852N/A tearDown: function() {
5852N/A this.chart.destroy();
5852N/A },
4203N/A
4203N/A "test:graph._getSeries(line)": function()
4203N/A {
5852N/A var graph = this.chart.get("graph"),
5852N/A series = graph._getSeries("line");
5852N/A Y.Assert.areEqual(series, Y.LineSeries, "The series type should be Y.LineSeries");
5852N/A },
5852N/A
5852N/A "test:graph._getSeries(column)": function()
5852N/A {
5852N/A var graph = this.chart.get("graph"),
5852N/A series = graph._getSeries("column");
5852N/A Y.Assert.areEqual(series, Y.ColumnSeries, "The series type should be Y.ColumnSeries");
5852N/A },
5852N/A
5852N/A "test:graph._getSeries(bar)": function()
5852N/A {
5852N/A var graph = this.chart.get("graph"),
5852N/A series = graph._getSeries("bar");
5852N/A Y.Assert.areEqual(series, Y.BarSeries, "The series type should be Y.BarSeries");
5852N/A },
5852N/A
5852N/A "test:graph._getSeries(area)": function()
5852N/A {
5852N/A var graph = this.chart.get("graph"),
5852N/A series = graph._getSeries("area");
5852N/A Y.Assert.areEqual(series, Y.AreaSeries, "The series type should be Y.AreaSeries");
5852N/A },
5852N/A
5852N/A "test:graph._getSeries(stackedarea)": function()
5852N/A {
5852N/A var graph = this.chart.get("graph"),
5852N/A series = graph._getSeries("stackedarea");
5852N/A Y.Assert.areEqual(series, Y.StackedAreaSeries, "The series type should be Y.StackedAreaSeries");
5852N/A },
4203N/A
5852N/A "test:graph._getSeries(stackedcolumn)": function()
4203N/A {
5852N/A var graph = this.chart.get("graph"),
4203N/A series = graph._getSeries("stackedcolumn");
5852N/A Y.Assert.areEqual(series, Y.StackedColumnSeries, "The series type should be Y.StackedColumnSeries");
5852N/A },
5852N/A
4203N/A "test:graph._getSeries(stackedbar)": function()
4203N/A {
4203N/A var graph = this.chart.get("graph"),
4203N/A series = graph._getSeries("stackedbar");
5852N/A Y.Assert.areEqual(series, Y.StackedBarSeries, "The series type should be Y.StackedBarSeries");
5852N/A },
4203N/A
4203N/A "test:graph._getSeries(stackedline)": function()
5852N/A {r
5852N/A var graph = this.chart.get("graph"),
5852N/A series = graph._getSeries("stackedline");
5852N/A Y.Assert.areEqual(series, Y.StackedLineSeries, "The series type should be Y.StackedLineSeries");
4203N/A },
5852N/A
5852N/A "test:graph._getSeries(markerseries)": function()
5852N/A {
5852N/A var graph = this.chart.get("graph"),
5852N/A series = graph._getSeries("markerseries");
5852N/A Y.Assert.areEqual(series, Y.MarkerSeries, "The series type should be Y.MarkerSeries");
5852N/A },
5852N/A
4203N/A "test:graph._getSeries(stackedmarkerseries)": function()
5852N/A {
5852N/A var graph = this.chart.get("graph"),
5852N/A series = graph._getSeries("stackedmarkerseries");
4203N/A Y.Assert.areEqual(series, Y.StackedMarkerSeries, "The series type should be Y.StackedMarkerSeries");
4203N/A },
"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");
}
}));
suite.add(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;
xAxis.on("axisUpdate", Y.bind(function(e) {
l = xAxis.get("keyCollection").length || 0;
assert.areEqual(0, 0, "The value should be zero");
}, this));
yAxis.on("axisUpdate", 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");
},
testAddKey: function()
{
var assert = Y.Assert,
yAxis = this.chart.getAxisByKey("values"),
keys,
pattern = [3700, 9100, 1100, 1900],
testarray,
i = 0;
l = 4;
yAxis.on("axisUpdate", 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");
},
//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.chart.getAxisByKey("values"),
majorUnit = yAxis.get("styles").majorUnit,
count = majorUnit.count - 1,
setMax = 1492,
setMin = 7,
eventListener,
labels;
yAxis.set("maximum", setMax);
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("minimum", setMin);
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.chart.getAxisByKey("values"),
majorUnit = yAxis.get("styles").majorUnit,
count = majorUnit.count- 1,
setMin = -1721,
setMax = -15,
eventListener,
labels;
yAxis.set("maximum", setMax);
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("minimum", setMin);
eventListener.detach();
},
//Tests min and max with decimals
testMinAndMaxWithDecimals: function()
{
var yAxis = this.chart.getAxisByKey("values"),
majorUnit = yAxis.get("styles").majorUnit,
count = majorUnit.count- 1,
setMin = 14.66,
setMax = 1821.33,
eventListener,
labels;
yAxis.set("maximum", setMax);
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("minimum", setMin);
eventListener.detach();
}
}));
//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>