seriestests.html revision 562568c870b1109f8b462727a15d214d71d892af
<html>
<head>
<title>Chart Series Tests</title>
<link type="text/css" rel="stylesheet" href="/build/logreader/assets/skins/sam/logreader.css" />
<style type="text/css">
#mychart {
width: 400px;
height: 300px;
}
</style>
<script type="text/javascript" src="/build/yui/yui.js"></script>
</head>
<body class="yui3-skin-sam">
<h1>Chart Series Tests</h1>
<div id="mychart"></div>
<div id="c"></div>
<script type="text/javascript">
YUI({
allowRollup: false,
filter: (window.location.search.match(/[?&]filter=([^&]+)/) || [])[1] || 'min'
}).use('charts', 'test', 'event-simulate', 'console', function (Y) {
Y.namespace("Tests");
Y.Tests.ChartSeriesEvents = (function(){
var ASSERT = Y.Assert,
ObjectAssert = Y.ObjectAssert;
//-------------------------------------------------------------------------
// Chart Event Test Case
//-------------------------------------------------------------------------
function ChartEventTestCase(cfg, type)
{
ChartEventTestCase.superclass.constructor.call(this);
this.eventType = type;
this.attrCfg = cfg;
this.name = "Event '" + type + "' Tests";
this.result = null;
}
Y.extend(ChartEventTestCase, Y.Test.Case, {
//---------------------------------------------------------------------
// Setup and teardown of test harnesses
//---------------------------------------------------------------------
/*
* Sets up several event handlers used to test UserAction mouse events.
*/
setUp : function()
{
//create the chart
this.chart = new Y.Chart(this.attrCfg);
this.contentBox = this.chart.get("contentBox");
//reset the result
this.result = null;
//assign event handler
//this.handler = Y.on(this.eventType, Y.bind(this.handleEvent,this), this.element);
this.handler = Y.delegate(this.eventType, Y.bind(this.handleEvent, this), this.contentBox, ".yui3-seriesmarker");
},
/*
* Removes event handlers that were used during the test.
*/
tearDown : function()
{
Y.detach(this.handler);
//remove the element
this.chart.destroy();
},
//---------------------------------------------------------------------
// Event handler
//---------------------------------------------------------------------
/*
* Uses to trap and assign the event object for interrogation.
* @param {Event} event The event object created from the event.
*/
handleEvent : function(event)
{
this.result = event;
}
});
function ChartMarkerEventTestCase()
{
ChartMarkerEventTestCase.superclass.constructor.apply(this, arguments);
}
Y.extend(ChartMarkerEventTestCase, ChartEventTestCase, {
getMarkerData: function(e)
{
var type = e.type,
cb = this.chart.get("contentBox"),
markerNode = e.currentTarget,
strArr = markerNode.getAttribute("id").split("_"),
seriesIndex = strArr[1],
series = this.chart.getSeries(parseInt(seriesIndex, 10)),
index = strArr[2],
items = this.chart.getSeriesItems(series, index),
x = e.pageX - cb.getX(),
y = e.pageY - cb.getY();
return {categoryItem:items.category, valueItem:items.value, node:markerNode, x:x, y:y, series:series, index:index, seriesIndex:seriesIndex};
},
seriesKeys: ["miscellaneous", "expenses", "revenue"],
//Simulate a mouseover event to test to ensure that the correct series data is associated with
//the correct marker.
//Tests bug fix #2530533
testDefault: function()
{
var currentSeries,
keys = {},
key,
i = 0,
len = this.seriesKeys.length,
categoryKey,
seriesKey,
categoryDisplayName,
seriesDisplayName,
categoryValue,
seriesValue,
marker,
markerData,
//determine category and series axes by direction of chart
direction = this.chart.get("direction"),
categoryAxis = direction == "horizontal" ? "x" : "y",
seriesAxis = direction == "horizontal" ? "y" : "x";
for(; i < len; ++i)
{
keys[this.seriesKeys[i]] = i;
}
for(key in keys)
{
if(keys.hasOwnProperty(key))
{
currentSeries = this.chart.getSeries(key);
if(currentSeries)
{
i = 0;
len = currentSeries.get("markers").length || 0;
categoryKey = currentSeries.get(categoryAxis + "Key");
seriesKey = currentSeries.get(seriesAxis + "Key");
categoryDisplayName = currentSeries.get(categoryAxis + "DisplayName");
seriesDisplayName = currentSeries.get(seriesAxis + "DisplayName");
for(; i < len; ++i)
{
marker = currentSeries.get("markers")[i];
if(marker)
{
Y.Assert.isNumber(marker.get("width"));
Y.Assert.isNumber(marker.get("height"));
Y.Event.simulate(marker.get("node"), "mouseover");
markerData = this.getMarkerData(this.result);
categoryValue = this.chart.get("dataProvider")[markerData.index][categoryKey];
seriesValue = this.chart.get("dataProvider")[markerData.index][seriesKey];
Y.assert(markerData.categoryItem.displayName == categoryDisplayName);
Y.assert(markerData.valueItem.displayName == seriesDisplayName);
Y.assert(markerData.series == currentSeries);
Y.assert(markerData.categoryItem.key == categoryKey);
Y.assert(markerData.valueItem.key == seriesKey);
Y.assert(markerData.categoryItem.value == categoryValue);
Y.assert(markerData.valueItem.value == seriesValue);
}
}
}
}
}
}
});
Y.ChartMarkerEventTestCase = ChartMarkerEventTestCase;
var DataProviderWithZeros = [
{category:"1/1/2010", miscellaneous:1000, expenses:0, revenue:2200},
{category:"2/1/2010", miscellaneous:0, expenses:0, revenue:100},
{category:"3/1/2010", miscellaneous:0, expenses:0, revenue:1500},
{category:"4/1/2010", miscellaneous:0, expenses:500, revenue:2800},
{category:"5/1/2010", miscellaneous:0, expenses:0, revenue:2650},
{category:"6/1/2010", miscellaneous:0, expenses:0, revenue:1200}
],
SeriesKeys = ["miscellaneous", "expenses", "revenue"],
DataProviderWithNull = [
{category:"1/1/2010", miscellaneous:1000, expenses:null, revenue:2200},
{category:"2/1/2010", expenses:null, revenue:100},
{category:"3/1/2010", expenses:null, revenue:1500},
{category:"4/1/2010", expenses:500, revenue:2800},
{category:"5/1/2010", expenses:null, revenue:2650},
{category:"6/1/2010", expenses:null, revenue:1200}
],
DataProvider,
suite = new Y.Test.Suite("Chart Series Tests"),
zeroValueColumnMouseOverTests = new Y.ChartMarkerEventTestCase({
type: "column",
render: "#mychart",
dataProvider: DataProviderWithZeros,
seriesKeys: SeriesKeys
}, "mouseover"),
zeroValueBarMouseOverTests = new Y.ChartMarkerEventTestCase({
type: "bar",
render: "#mychart",
dataProvider: DataProviderWithZeros,
seriesKeys: SeriesKeys
}, "mouseover"),
zeroValueStackedColumnMouseOverTests = new Y.ChartMarkerEventTestCase({
type: "column",
stacked: true,
render: "#mychart",
dataProvider: DataProviderWithZeros,
seriesKeys: SeriesKeys
}, "mouseover"),
zeroValueStackedBarMouseOverTests = new Y.ChartMarkerEventTestCase({
type: "bar",
stacked: true,
render: "#mychart",
dataProvider: DataProviderWithZeros,
seriesKeys: SeriesKeys
}, "mouseover"),
nullValueColumnMouseOverTests = new Y.ChartMarkerEventTestCase({
type: "column",
render: "#mychart",
dataProvider: DataProviderWithNull,
seriesKeys: SeriesKeys
}, "mouseover"),
nullValueBarMouseOverTests = new Y.ChartMarkerEventTestCase({
type: "bar",
render: "#mychart",
dataProvider: DataProviderWithNull,
seriesKeys: SeriesKeys
}, "mouseover"),
nullValueStackedColumnMouseOverTests = new Y.ChartMarkerEventTestCase({
type: "column",
stacked: true,
render: "#mychart",
dataProvider: DataProviderWithNull,
seriesKeys: SeriesKeys
}, "mouseover"),
nullValueStackedBarMouseOverTests = new Y.ChartMarkerEventTestCase({
type: "bar",
stacked: true,
render: "#mychart",
dataProvider: DataProviderWithNull,
seriesKeys: SeriesKeys
}, "mouseover"),
zeroValueComboMouseOverTests = new Y.ChartMarkerEventTestCase({
render: "#mychart",
dataProvider: DataProviderWithZeros,
seriesKeys: SeriesKeys
}, "mouseover"),
nullValueComboMouseOverTests = new Y.ChartMarkerEventTestCase({
render: "#mychart",
dataProvider: DataProviderWithNull,
seriesKeys: SeriesKeys
}, "mouseover");
suite.add(zeroValueColumnMouseOverTests);
suite.add(zeroValueBarMouseOverTests);
suite.add(zeroValueStackedColumnMouseOverTests);
suite.add(zeroValueStackedBarMouseOverTests);
suite.add(nullValueColumnMouseOverTests);
suite.add(nullValueBarMouseOverTests);
suite.add(nullValueStackedColumnMouseOverTests);
suite.add(nullValueStackedBarMouseOverTests);
suite.add(zeroValueComboMouseOverTests);
suite.add(nullValueComboMouseOverTests);
//return it
return suite;
})();
var r = new Y.Console({
verbose : true,
newestOnTop : false
});
r.render('#c');
//add to the testrunner and run
Y.Test.Runner.add(Y.Tests.ChartSeriesEvents);
Y.Test.Runner.run();
});
</script>
</body>
</html>