← Back to branch summary

~bcsaller/juju-gui/charmFind

« back to all changes in this revision

Viewing changes to lib/yui/tests/charts/tests/ariaeventtests.html

  • Committer: kapil.foss at gmail
  • Date: 2012-07-13 18:45:59 UTC
  • Revision ID: kapil.foss@gmail.com-20120713184559-2xl7be17egsrz0c9
reshape

Show diffs side-by-side

added added

removed removed

Lines of Context:
lib/yui/tests/charts/tests/ariaeventtests.html
1
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2
 
<html>
3
 
<head>
4
 
<title>Chart Aria Event Tests</title>
5
 
<style type="text/css">
6
 
#mychart {
7
 
    width: 400px;
8
 
    height: 300px;
9
 
}
10
 
</style>
11
 
<script type="text/javascript" src="../../../build/yui/yui.js"></script>
12
 
</head>
13
 
<body class="yui3-skin-sam">
14
 
    <h1>Chart Aria Event Tests</h1>
15
 
    <div id="mychart"></div>
16
 
    <div id="c"></div>
17
 
<script type="text/javascript">  
18
 
    
19
 
    YUI({
20
 
        allowRollup: false,
21
 
        filter: (window.location.search.match(/[?&]filter=([^&]+)/) || [])[1] || 'min'
22
 
    }).use('charts', 'test', 'node-event-simulate', 'event-focus', 'console', function (Y) {
23
 
 
24
 
    Y.namespace("Tests");
25
 
    
26
 
    Y.Tests.ChartAriaEvents = (function(){
27
 
    
28
 
            var ASSERT = Y.Assert,
29
 
                ObjectAssert = Y.ObjectAssert,
30
 
                UP = 38,
31
 
                DOWN = 40,
32
 
                LEFT = 37,
33
 
                RIGHT = 39;
34
 
            
35
 
            
36
 
            //-------------------------------------------------------------------------
37
 
            // Chart AriaEvent Test Case
38
 
            //-------------------------------------------------------------------------
39
 
            function ChartAriaEventTestCase(cfg, type)
40
 
            {
41
 
                ChartAriaEventTestCase.superclass.constructor.call(this);
42
 
                this.attrCfg = cfg;
43
 
                this.result = null;
44
 
                this.name = type + " Chart AriaEvent KeyDown Tests";
45
 
            }
46
 
        
47
 
            Y.extend(ChartAriaEventTestCase, Y.Test.Case, {
48
 
                //---------------------------------------------------------------------
49
 
                // Setup and teardown of test harnesses
50
 
                //---------------------------------------------------------------------
51
 
                
52
 
                /*
53
 
                 * Sets up several event handlers used to test UserAction mouse events.
54
 
                 */
55
 
                setUp : function() 
56
 
                {
57
 
                    //create the chart 
58
 
                    this.chart = new Y.Chart(this.attrCfg);
59
 
                    this.contentBox = this.chart.get("contentBox");
60
 
                
61
 
                    //reset the result
62
 
                    this.result = null;
63
 
                    
64
 
                    //assign event handler                
65
 
                    this.handler = Y.on("keydown", Y.bind(this.handleEvent, this), this.contentBox);
66
 
 
67
 
                },
68
 
                
69
 
                /*
70
 
                 * Removes event handlers that were used during the test.
71
 
                 */
72
 
                tearDown : function() 
73
 
                {
74
 
                    Y.detach(this.handler);
75
 
                    //remove the element
76
 
                    this.chart.destroy(true);
77
 
                },
78
 
               
79
 
                _seriesIndex: -1, 
80
 
 
81
 
                _itemIndex: -1,
82
 
 
83
 
                compareLiveRegionMessages: function(target, key, liveRegion)
84
 
                {
85
 
                    target.simulate("keydown", {
86
 
                        keyCode: key
87
 
                    });
88
 
                    return [liveRegion.get("innerHTML").toString(), this.getLiveRegionMessage(this.result).toString()];
89
 
                },
90
 
                
91
 
                //---------------------------------------------------------------------
92
 
                // Event handler
93
 
                //---------------------------------------------------------------------
94
 
                
95
 
                /*
96
 
                 * Uses to trap and assign the event object for interrogation.
97
 
                 * @param {Event} event The event object created from the event.
98
 
                 */
99
 
                handleEvent : function(event) 
100
 
                {
101
 
                    this.result = event;
102
 
                }
103
 
            });
104
 
            Y.ChartAriaEventTestCase = ChartAriaEventTestCase; 
105
 
        
106
 
            function CartesianChartAriaEventTestCase()
107
 
            {
108
 
                CartesianChartAriaEventTestCase.superclass.constructor.apply(this, arguments);
109
 
            }
110
 
            
111
 
            Y.extend(CartesianChartAriaEventTestCase, ChartAriaEventTestCase, {
112
 
                testDefault: function()
113
 
                {
114
 
                    var cb = this.chart.get("contentBox"),
115
 
                        dataProvider = this.chart.get("dataProvider"),
116
 
                        liveRegion = this.chart._liveRegion,
117
 
                        i = 0,
118
 
                        len = 5,
119
 
                        target = Y.one(cb),
120
 
                        values;
121
 
                    Y.one(cb).simulate("keydown", {
122
 
                        keyCode: DOWN    
123
 
                    }); 
124
 
                    Y.Assert.isTrue(liveRegion.get("innerHTML") == this.getLiveRegionMessage(this.result));
125
 
                    for(; i < len; ++i)
126
 
                    {
127
 
                        values = this.compareLiveRegionMessages(target, RIGHT, liveRegion);
128
 
                        Y.Assert.isTrue(values[0] == values[1]);
129
 
                    }
130
 
                    Y.one(cb).simulate("keydown", {
131
 
                        keyCode: DOWN    
132
 
                    }); 
133
 
                    Y.Assert.isTrue(liveRegion.get("innerHTML") == this.getLiveRegionMessage(this.result));
134
 
                    for(i = 0; i < len; ++i)
135
 
                    {
136
 
                        values = this.compareLiveRegionMessages(target, RIGHT, liveRegion);
137
 
                        Y.Assert.isTrue(values[0] == values[1]);
138
 
                    }
139
 
                    Y.one(cb).simulate("keydown", {
140
 
                        keyCode: DOWN    
141
 
                    }); 
142
 
                    Y.Assert.isTrue(liveRegion.get("innerHTML") == this.getLiveRegionMessage(this.result));
143
 
                    for(i = 0; i < len; ++i)
144
 
                    {
145
 
                        values = this.compareLiveRegionMessages(target, RIGHT, liveRegion);
146
 
                        Y.Assert.isTrue(values[0] == values[1]);
147
 
                    }
148
 
                },
149
 
 
150
 
                getLiveRegionMessage: function(e) {
151
 
                    var key = parseFloat(e.keyCode),
152
 
                        msg = "",
153
 
                        series,
154
 
                        items,
155
 
                        categoryItem,
156
 
                        valueItem,
157
 
                        seriesIndex = this._seriesIndex,
158
 
                        itemIndex = this._itemIndex,
159
 
                        seriesCollection = this.chart.get("seriesCollection"),
160
 
                        len = seriesCollection.length,
161
 
                        dataLength;
162
 
                    if(key % 2 === 0)
163
 
                    {
164
 
                        if(len > 1)
165
 
                        {
166
 
                            if(key === 38)
167
 
                            {
168
 
                                seriesIndex = seriesIndex < 1 ? len - 1 : seriesIndex - 1;
169
 
                            }
170
 
                            else if(key === 40)
171
 
                            {
172
 
                                seriesIndex = seriesIndex >= len - 1 ? 0 : seriesIndex + 1;
173
 
                            }
174
 
                            this._itemIndex = -1;
175
 
                        }
176
 
                        else
177
 
                        {
178
 
                            seriesIndex = 0;
179
 
                        }
180
 
                        this._seriesIndex = seriesIndex;
181
 
                        series = this.chart.getSeries(parseInt(seriesIndex, 10));
182
 
                        msg = series.get("valueDisplayName") + " series.";
183
 
                    }
184
 
                    else
185
 
                    {
186
 
                        if(seriesIndex > -1)
187
 
                        {
188
 
                            msg = "";
189
 
                            series = this.chart.getSeries(parseInt(seriesIndex, 10));
190
 
                        }
191
 
                        else
192
 
                        {
193
 
                            seriesIndex = 0;
194
 
                            this._seriesIndex = seriesIndex;
195
 
                            series = this.chart.getSeries(parseInt(seriesIndex, 10));
196
 
                            msg = series.get("valueDisplayName") + " series.";
197
 
                        }
198
 
                        dataLength = series._dataLength ? series._dataLength : 0;
199
 
                        if(key === 37)
200
 
                        {
201
 
                            itemIndex = itemIndex > 0 ? itemIndex - 1 : dataLength - 1;
202
 
                            itemIndex = itemIndex > 0 ? itemIndex - 1 : dataLength - 1;
203
 
                        }
204
 
                        else if(key === 39)
205
 
                        {
206
 
                            itemIndex = itemIndex >= dataLength - 1 ? 0 : itemIndex + 1;
207
 
                        }
208
 
                        this._itemIndex = itemIndex;
209
 
                        items = this.chart.getSeriesItems(series, itemIndex);
210
 
                        categoryItem = items.category;
211
 
                        valueItem = items.value;
212
 
                        if(categoryItem && valueItem && categoryItem.value && valueItem.value)
213
 
                        {
214
 
                            msg += categoryItem.displayName + ": " + categoryItem.axis.formatLabel.apply(this, [categoryItem.value, categoryItem.axis.get("labelFormat")]) + ", ";
215
 
                            msg += valueItem.displayName + ": " + valueItem.axis.formatLabel.apply(this, [valueItem.value, valueItem.axis.get("labelFormat")]) + ", "; 
216
 
                        }
217
 
                        else
218
 
                        {
219
 
                            msg += "No data available.";
220
 
                        }
221
 
                        msg += (itemIndex + 1) + " of " + dataLength + ". ";
222
 
                    }
223
 
                    return msg;
224
 
                }
225
 
            });
226
 
            Y.CartesianChartAriaEventTestCase = CartesianChartAriaEventTestCase;
227
 
 
228
 
            function PieChartAriaEventTestCase()
229
 
            {
230
 
                PieChartAriaEventTestCase.superclass.constructor.apply(this, arguments);
231
 
            }
232
 
            
233
 
            Y.extend(PieChartAriaEventTestCase, ChartAriaEventTestCase, {
234
 
                testDefault: function()
235
 
                {
236
 
                    var cb = this.chart.get("contentBox"),
237
 
                        dataProvider = this.chart.get("dataProvider"),
238
 
                        liveRegion = this.chart._liveRegion,
239
 
                        i = 0,
240
 
                        len = 5,
241
 
                        target = Y.one(cb),
242
 
                        values;
243
 
                    for(; i < len; ++i)
244
 
                    {
245
 
                        values = this.compareLiveRegionMessages(target, RIGHT, liveRegion);
246
 
                        Y.Assert.isTrue(values[0] == values[1]);
247
 
                    }
248
 
                    for(i = len; i > -1; --i)
249
 
                    {
250
 
                        values = this.compareLiveRegionMessages(target, LEFT, liveRegion);
251
 
                        Y.Assert.isTrue(values[0] == values[1]);
252
 
                    }
253
 
                },
254
 
 
255
 
                getLiveRegionMessage: function(e) {
256
 
                    var key = parseFloat(e.keyCode),
257
 
                        msg = "",
258
 
                        categoryItem,
259
 
                        items,
260
 
                        series,
261
 
                        valueItem,
262
 
                        seriesIndex = 0,
263
 
                        itemIndex = this._itemIndex,
264
 
                        seriesCollection = this.chart.get("seriesCollection"),
265
 
                        len,
266
 
                        total,
267
 
                        pct,
268
 
                        markers;
269
 
                    series = this.chart.getSeries(parseInt(seriesIndex, 10));
270
 
                    markers = series.get("markers");
271
 
                    len = markers && markers.length ? markers.length : 0;
272
 
                    if(key === 37)
273
 
                    {
274
 
                        itemIndex = itemIndex > 0 ? itemIndex - 1 : len - 1;
275
 
                    }
276
 
                    else if(key === 39)
277
 
                    {
278
 
                        itemIndex = itemIndex >= len - 1 ? 0 : itemIndex + 1;
279
 
                    }
280
 
                    this._itemIndex = itemIndex;
281
 
                    items = this.chart.getSeriesItems(series, itemIndex);
282
 
                    categoryItem = items.category;
283
 
                    valueItem = items.value;
284
 
                    total = series.getTotalValues();
285
 
                    pct = Math.round((valueItem.value / total) * 10000)/100;
286
 
                    if(categoryItem && valueItem)
287
 
                    {
288
 
                        msg += categoryItem.displayName + ": " + categoryItem.axis.formatLabel.apply(this, [categoryItem.value, categoryItem.axis.get("labelFormat")]) + ", ";
289
 
                        msg += valueItem.displayName + ": " + valueItem.axis.formatLabel.apply(this, [valueItem.value, valueItem.axis.get("labelFormat")]) + ", "; 
290
 
                        msg += "Percent of total " + valueItem.displayName + ": " + pct + "%,"; 
291
 
                    }
292
 
                    else
293
 
                    {
294
 
                        msg += "No data available,";
295
 
                    }
296
 
                    msg += (itemIndex + 1) + " of " + len + ". ";
297
 
                    return msg;
298
 
                }
299
 
            });
300
 
            Y.PieChartAriaEventTestCase = PieChartAriaEventTestCase;
301
 
 
302
 
            var DataProvider = [
303
 
                    {category:"5/1/2010", values:2000, expenses:3700, revenue:2200}, 
304
 
                    {category:"5/2/2010", values:50, expenses:9100, revenue:100}, 
305
 
                    {category:"5/3/2010", values:400, expenses:1100, revenue:1500}, 
306
 
                    {category:"5/4/2010", values:200, expenses:1900, revenue:2800}, 
307
 
                    {category:"5/5/2010", values:5000, expenses:5000, revenue:2650}
308
 
                ],
309
 
                PieDataProvider = [
310
 
                    {category:"5/1/2010", revenue:2200}, 
311
 
                    {category:"5/2/2010", revenue:100}, 
312
 
                    {category:"5/3/2010", revenue:1500}, 
313
 
                    {category:"5/4/2010", revenue:2800}, 
314
 
                    {category:"5/5/2010", revenue:2650}
315
 
                ],
316
 
                suite  = new Y.Test.Suite("Chart Aria Event Tests"),
317
 
                columnTests = new Y.CartesianChartAriaEventTestCase({
318
 
                    type: "column",
319
 
                    render: "#mychart",
320
 
                    dataProvider: DataProvider
321
 
                }, "Column"),
322
 
                barTests = new Y.CartesianChartAriaEventTestCase({
323
 
                    type: "bar",
324
 
                    render: "#mychart",
325
 
                    dataProvider: DataProvider
326
 
                }, "Bar"),
327
 
                stackedColumnTests = new Y.CartesianChartAriaEventTestCase({
328
 
                    type: "column",
329
 
                    stacked: true,
330
 
                    render: "#mychart",
331
 
                    dataProvider: DataProvider
332
 
                }, "StackedColumn"),
333
 
                stackedBarTests = new Y.CartesianChartAriaEventTestCase({
334
 
                    type: "bar",
335
 
                    stacked: true,
336
 
                    render: "#mychart",
337
 
                    dataProvider: DataProvider
338
 
                }, "StackedBar"),
339
 
                comboTests = new Y.CartesianChartAriaEventTestCase({
340
 
                    type: "combo",
341
 
                    render: "#mychart",
342
 
                    dataProvider: DataProvider
343
 
                }, "Combo"),
344
 
                stackedComboTests = new Y.CartesianChartAriaEventTestCase({
345
 
                    type: "combo",
346
 
                    stacked: true,
347
 
                    render: "#mychart",
348
 
                    dataProvider: DataProvider
349
 
                }, "StackedCombo"),
350
 
                areaTests = new Y.CartesianChartAriaEventTestCase({
351
 
                    type: "area",
352
 
                    render: "#mychart",
353
 
                    dataProvider: DataProvider
354
 
                }, "Area"),
355
 
                stackedAreaTests = new Y.CartesianChartAriaEventTestCase({
356
 
                    type: "area",
357
 
                    stacked: true,
358
 
                    render: "#mychart",
359
 
                    dataProvider: DataProvider
360
 
                }, "StackedArea"),
361
 
                splineTests = new Y.CartesianChartAriaEventTestCase({
362
 
                    type: "spline",
363
 
                    render: "#mychart",
364
 
                    dataProvider: DataProvider
365
 
                }, "Spline"),
366
 
                stackedSplineTests = new Y.CartesianChartAriaEventTestCase({
367
 
                    type: "spline",
368
 
                    stacked: true,
369
 
                    render: "#mychart",
370
 
                    dataProvider: DataProvider
371
 
                }, "StackedSpline"),
372
 
                comboSplineTests = new Y.CartesianChartAriaEventTestCase({
373
 
                    type: "combospline",
374
 
                    render: "#mychart",
375
 
                    dataProvider: DataProvider
376
 
                }, "ComboSpline"),
377
 
                stackedComboSplineTests = new Y.CartesianChartAriaEventTestCase({
378
 
                    type: "combospline",
379
 
                    stacked: true,
380
 
                    render: "#mychart",
381
 
                    dataProvider: DataProvider
382
 
                }, "StackedComboSpline"),
383
 
                lineTests = new Y.CartesianChartAriaEventTestCase({
384
 
                    type: "line",
385
 
                    render: "#mychart",
386
 
                    dataProvider: DataProvider
387
 
                }, "Line"),
388
 
                stackedLineTests = new Y.CartesianChartAriaEventTestCase({
389
 
                    type: "line",
390
 
                    stacked: true,
391
 
                    render: "#mychart",
392
 
                    dataProvider: DataProvider
393
 
                }, "StackedLine"),
394
 
                markerTests = new Y.CartesianChartAriaEventTestCase({
395
 
                    type: "markerseries",
396
 
                    render: "#mychart",
397
 
                    dataProvider: DataProvider
398
 
                }, "Marker"),
399
 
                stackedMarkerTests = new Y.CartesianChartAriaEventTestCase({
400
 
                    type: "markerseries",
401
 
                    stacked: true,
402
 
                    render: "#mychart",
403
 
                    dataProvider: DataProvider
404
 
                }, "StackedMarker"),
405
 
                pieTests = new Y.PieChartAriaEventTestCase({
406
 
                    type: "pie",
407
 
                    render: "#mychart",
408
 
                    dataProvider: PieDataProvider
409
 
                }, "Pie");
410
 
            
411
 
            suite.add(columnTests);
412
 
            suite.add(barTests);
413
 
            suite.add(stackedColumnTests);
414
 
            suite.add(stackedBarTests);
415
 
            suite.add(comboTests);
416
 
            suite.add(stackedComboTests);
417
 
            suite.add(areaTests);
418
 
            suite.add(stackedAreaTests);
419
 
            suite.add(splineTests);
420
 
            suite.add(stackedSplineTests);
421
 
            suite.add(comboSplineTests);
422
 
            suite.add(stackedComboSplineTests);
423
 
            suite.add(lineTests);
424
 
            suite.add(stackedLineTests);
425
 
            suite.add(markerTests);
426
 
            suite.add(stackedMarkerTests);
427
 
            suite.add(pieTests);
428
 
            //return it
429
 
            return suite;
430
 
        
431
 
        })();
432
 
    
433
 
        var r = new Y.Console({
434
 
            verbose : true,
435
 
            newestOnTop : false
436
 
        });
437
 
        
438
 
        r.render('#c');
439
 
    
440
 
        //add to the testrunner and run
441
 
        Y.Test.Runner.add(Y.Tests.ChartAriaEvents);
442
 
        Y.Test.Runner.run();
443
 
});
444
 
 
445
 
</script>
446
 
</body>
447
 
</html>