Does Robot Framework supports test flex PieChart and BarChart graphics? How to pls!

[spooning]

Originally submitted to Google Code by scottyan... on 7 Sep 2011

Hello, I hava questions on Flex auto test here:

Question1: Did you implement Flex-Testing through Flex-Pilot not Selenium's API? Because we have the next question, and it seems the RF api is not enough.

Question2: Do you supports test flex PieChart and BarChart? we have many flex-relatived test case to test but seems it is difficult to test.

what we want to test are the following items: 1> toolstips which could be saw by putting mouse over the piechart or barchart. 2> text descriptions besides the piechart/barchart 3> the legend text and legend icon color

By the way, the tooltips and text descriptions are all generated by actionscript. check the attachments: flexPie.mxml and flexPie.html

[spooning]

Originally submitted to Google Code by scottyan... on 7 Sep 2011

---

flexPie.mxml (Sorry, we are not allowed to upload files)

---

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init();" applicationComplete="init1();">
<mx:Script> <![CDATA[ import org.flex_pilot.FPBootstrap;

        private function init1():void {
            FPBootstrap.flex_pilotLibPath = 'FlexPilot.swf';
            FPBootstrap.init(stage);
        }
    ]]>
</mx:Script>
<mx:Script>  
    <![CDATA[  
        import mx.charts.ChartItem;
        import mx.charts.HitData;
        import mx.charts.chartClasses.Series;
        import mx.charts.events.ChartItemEvent;
        import mx.charts.series.PieSeries;
        import mx.charts.series.items.*;
        import mx.charts.series.items.ColumnSeriesItem;
        import mx.collections.ArrayCollection;
        import mx.collections.XMLListCollection;
        import mx.controls.Alert;
        import mx.effects.easing.*;
        import mx.graphics.IFill;
        import mx.graphics.SolidColor;
        import mx.rpc.events.FaultEvent;
        import mx.rpc.events.ResultEvent;
        import mx.utils.StringUtil;
        [Bindable] 
        private var  _precise:Object  = new Object();
        [Bindable] 

        private var  _callData:XML ;

        private var labelText:String;                       
        private var xmlList:XMLList=new XMLList();  

        private var xmlListCollection:XMLListCollection=new XMLListCollection();

        private var _selectedRegion:Object;  

        public function get selectedRegion():Object  
        {  
            return _selectedRegion;  
        }  

        public function get callData():XML
        {
            return _callData;
        }

        /**
         *label(display the line besides piechart)
         */

        private function display(data:Object, field:String, index:Number, percentValue:Number):String {  

         if(data.@⁠data%7==0){
             return data.@⁠label + ": " +  '\n' + numberFormatter.format(Math.round(Number(numberFormatter.format(percentValue)))) + "%";  
         }else{
            return data.@⁠label + ": " +  '\n' + numberFormatter.format(percentValue) + "%"; 
         }
        }  

        /**
         * shake effect by clicking mouse
         */ 

        public function set selectedRegion(item:Object):void  
        {  
            _selectedRegion = item;  

            var index:int = -1;  
            for (var i:int=0; i < xmlListCollection.length && index == -1; i++)  
            {  
                if (xmlListCollection[i].@⁠label == item.@⁠label)  
                    index = i;  
            }  

            var explodeData:Array = [];  
            explodeData[index] = 0.03;  
            chart.series[0].perWedgeExplodeRadius = explodeData;  
        }  

        private function regionChange(item:Object):void  
        {  
            selectedRegion = item;  
            dispatchEvent(new Event("regionChange"));  
        }  

        /**
         * format data display
         */ 
        private function formatDataTip(item:HitData):String  
        {   
            var cSI:PieSeriesItem = item.chartItem as PieSeriesItem;  
            var name:String = PieSeries(item.element).nameField;
            var col:String = PieSeries(item.element).field;
            if(cSI.item[col]%7==0){
            return  "<b>"+cSI.item[name]+":</b><b>"+cSI.item[col]+"</b>\n<b>"+ numberFormatter.format(Math.round(Number(numberFormatter.format(cSI.percentValue))))+"%</b>";
            }else{
            return  "<b>"+cSI.item[name]+":</b><b>"+cSI.item[col]+"</b>\n<b>"+ numberFormatter.format(cSI.percentValue)+"%</b>";
            }

        }  

        /**
         * define the pie fill color
         */

        private function pieSeriesFill(item:ChartItem, index:Number):IFill   
        {   

            return null;   
        } 

        /**
         * flex initializing
         */ 

        private function init():void{
            //interface invoked by js 
            //jsFlexPieChart();             
            staticTest();               
            //flex invokes automatically interface after completing loading

            //callWrapper();
        }

[spooning]

Originally submitted to Google Code by scottyan... on 7 Sep 2011

/* * invoke js interface /

        public function jsFlexPieChart():void {

            ExternalInterface.addCallback("getPieChartPrivider",jsHandlerValue);
        }

        /**
         *  js interface and methods
         */ 
        private  function jsHandlerValue(dataPro:String,legendTitle:String):void{

            _callData = new XML(dataPro);   

            xmlList=_callData.elements("items");  

            xmlListCollection.source = xmlList; 

            var leng:int  = legendTitle.split(",").length;
            //parse legend title and attach relative title
            for(var i:int= 0; i < leng; i++)
            {
                chart.series[i].displayName = legendTitle.split(",")[i];
            }                       
        }   

        /**
         *  flex invokes js interface
         */

        public function callWrapper():void {
            var jsFunction:String = "setPieChartPrivider";
            //define external interface
            var jsPara:String = ExternalInterface.call(jsFunction);
            var dataPro:String   = jsPara.split(";")[0];
            _precise = jsPara.split(";")[1];
                _callData = new XML(dataPro);
                xmlList=_callData.elements("items");                
                xmlListCollection.source = xmlList;             

        }

        /**
         *  flex pre-loading common method
         */

        public function preLoadChart():void{

            var jsFunction:String = "preLoadChart";
            var jsPara:String = ExternalInterface.call(jsFunction);
        }

        /**
         * flex static test
         */ 
        private function staticTest(){              
            _callData = new XML(myData);
            xmlList=_callData.elements("items");                
            xmlListCollection.source = xmlList; 
            _precise = 2 ;

        }

        /**
         * test data
         */ 
        public var myData:XML= 
            <item>
            <items label="Product 1" data="7" fillColor="0xFDB500" />
            <items  label="Product 2" data="0" fillColor="0xAAD71A" />
            <items label="Product 3" data="0" fillColor="0xFFE30E" />             
            <items label="Product 4" data="0" fillColor="0xFDB500" />             
            <items label="Product 5" data="0" fillColor="4CD0EF" />               
            <items label="Product 6" data="0" fillColor="0x4CD6EF" />
            <items label="Product 6" data="0" fillColor="0x4CD6EF" /> 
            </item>;

    ]]>  

</mx:Script>      
<!-- Define custom colors for use as fills in the AreaChart control. -->
<mx:SolidColor id="sc1" color="blue" alpha=".3"/>
<mx:SolidColor id="sc2" color="red" alpha=".3"/>
<mx:SolidColor id="sc3" color="green" alpha=".3"/>    
<mx:Stroke id="callouts" weight="2" color="0x999999" alpha=".8" caps="square"/>  
<mx:Stroke id="radial" weight="1" color="0xFFFFCC" alpha=".3"/>  
<mx:Stroke id="pieborder" color="0x000000" weight="2" alpha=".5"/>  
<mx:CheckBox id="test" click="Alert.show('Hello World!')">

</mx:CheckBox>
<mx:NumberFormatter id="numberFormatter" precision="{_precise}" />    
    <mx:PieChart id="chart"  showDataTips="true" height="100%"  dataTipFunction="formatDataTip" 
                 itemClick="regionChange(event.hitData.item)"  dataProvider="{xmlListCollection}"  width="100%">             
        <mx:series>  
            <mx:Array>  
                <mx:PieSeries nameField="@⁠label" labelPosition="callout"  field="@⁠data" useHandCursor="true"   labelFunction="display" >  
                    <mx:showDataEffect>    
                        <mx:SeriesInterpolate duration="1000" easingFunction="{Elastic.easeOut}" />    
                    </mx:showDataEffect>     
                </mx:PieSeries>  
            </mx:Array>  
        </mx:series>              
    </mx:PieChart>        
    <mx:Legend dataProvider="{chart}" direction="horizontal" />   

</mx:Application>

[spooning]

Originally submitted to Google Code by scottyan... on 7 Sep 2011

---

flexPie.html (Sorry, we are not allowed to upload files)

---

<html> <head> <title>Login Page</title> <style type="text/css" /> body { background: white; text-align: center; }

container {

      width: 30em;
      height: 15em;
      margin: 5em auto;
      background: white;
      border: 1px solid gray;
  }
</style>
<script type="text/javascript">
  var testApp;
  function init() {
    var html = '';
    var movieName = 'flexPie.swf';
    if (navigator.appName == 'Microsoft Internet Explorer') {
      html = '<object type="application/x-shockwave-flash" ' +
             'width="100%" height="100%" id="flexPie">' +
             '<param name="movie" value="' + movieName + '">' +
             '</object>';
    }
    else {
      html = '<embed id="flexPie" height="100%" width="100%"' +
             'name="flexPie" src="' + movieName + '"' +
             'type="application/x-shockwave-flash"/>';
    }
    document.getElementById('container').innerHTML = html;
  }
  window.onload = init;
</script>

</head> <body> <div id="container" style="width: 400px; height: 300px;" /> </body> </html>

[spooning]

Originally submitted to Google Code by @yanne on 16 Oct 2011

1) We support Flex through FlexPilot, Selenium has no support for Flex built-in.

2) I am not aware that FlexPilot would have any special support for charts; you might want to try Flex Element Property Should Be to assert properties of the charts, and Flex element Text Should Be with labels. Tooltips are out of reach of the FlexPilot AFAIK.

3) Since this issue does not report a concrete enhancement request or bug report, I'll close it. Discussion can be continued on mailing list: http://groups.google.com/group/robotframework-users/

[spooning]

Originally submitted to Google Code by @yanne on 16 Oct 2011

1) We support Flex through FlexPilot, Selenium has no support for Flex built-in.

2) I am not aware that FlexPilot would have any special support for charts; you might want to try Flex Element Property Should Be to assert properties of the charts, and Flex element Text Should Be with labels. Tooltips are out of reach of the FlexPilot AFAIK.

3) Since this issue does not report a concrete enhancement request or bug report, I'll close it. Discussion can be continued on mailing list: http://groups.google.com/group/robotframework-users/

[spooning]

Originally submitted to Google Code by scottyan... on 17 Oct 2011

Thanks for you reply!