Do you supports test flex PieChart and BarChart graphics?

[GoogleCodeExporter]

Hello, I hava questions on Flex auto test here:

1.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, check pic1
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 in the next 
text block

Original issue reported on code.google.com by scottyan...@gmail.com on 8 Sep 2011 at 1:08

[GoogleCodeExporter]

___________________________
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  ""+cSI.item[name]+":"+cSI.item[col]+"\n"+ numberFormatter.format(Math.round(Number(numberFormatter.format(cSI.percentValue))))+"%";
                }else{
                return  ""+cSI.item[name]+":"+cSI.item[col]+"\n"+ numberFormatter.format(cSI.percentValue)+"%";
                }

            }  

Original comment by scottyan...@gmail.com on 8 Sep 2011 at 1:09

[GoogleCodeExporter]

/**
             * 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();
            }     

            /**
             *  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>  

Original comment by scottyan...@gmail.com on 8 Sep 2011 at 1:10

[GoogleCodeExporter]

___________________________
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>

Original comment by scottyan...@gmail.com on 8 Sep 2011 at 1:10

[GoogleCodeExporter]

HI Scott.

Did you get any success with the Flex chart automation
We also have the same kind of testing to do

Original comment by dharmesh...@gmail.com on 18 Sep 2012 at 8:54

[GoogleCodeExporter]

You can certainly automate both PieCharts and BarCharts.  We did it but it 
involves custom SFAPI logic as well as hooks in your specific apps to talk to 
those chart types.

Original comment by Anthony...@gmail.com on 6 Nov 2012 at 6:42