tests/unit-tests/color/color-tests.js

   1 /*\r
   2  * Unit Test: Color Picker\r
   3  *\r
   4  * Hyunjung Kim <hjnim.kim@samsung.com>\r
   5  *\r
   6  */\r
   7 $( "#colorpage" ).live( "pageinit", function(event){\r
   8 \r
   9         module("Color Picker");\r
  10 \r
  11         var cutHex = function( h ){ return ( h.charAt(0)=="#" ) ? h.substring(1,7):h}\r
  12         var hexToRgb = function( h ) {\r
  13                 var r = parseInt((cutHex(h)).substring( 0, 2 ),16), g = parseInt((cutHex(h)).substring( 2, 4),16), b = parseInt((cutHex(h)).substring( 4, 6), 16);\r
  14                 return "rgb("+r+", "+g+", "+b+")";\r
  15         }\r
  16         var makeRandomColor = function(){\r
  17                 var letters = '0123456789ABCDEF'.split('');\r
  18                 var color = '#';\r
  19                 for (var i = 0; i < 6; i++ ) {\r
  20                 color += letters[Math.round(Math.random() * 15)];\r
  21                 }\r
  22             return color.toLowerCase();\r
  23         }\r
  24         var colorchange = function( widget, colorcode ){\r
  25                  if( widget.attr("data-color") == colorcode) return true;\r
  26                  else return false;\r
  27         }\r
  28         var testHsvpicker = function( widget ) {\r
  29                 var     wgSiblings,\r
  30                         hsvpicker,\r
  31                         chan,\r
  32                         hsvIdx,\r
  33                         max,\r
  34                         step,\r
  35                         colorcode;\r
  36 \r
  37                 widget = $("#hsvpicker");\r
  38                 widget.hsvpicker();\r
  39                 wgSiblings = widget.siblings();\r
  40                 hsvpicker = wgSiblings.last();\r
  41 \r
  42                 ok( widget.is(":hidden") &&\r
  43                         hsvpicker.hasClass("ui-hsvpicker") &&\r
  44                         hsvpicker.children().length == 3\r
  45                         , "Create - Hue-Saturation-Value");\r
  46 \r
  47                 ok( function ( ) {\r
  48                         var i,\r
  49                                 varArray,\r
  50                                 leftbutton,\r
  51                                 rightbutton,\r
  52                                 view,\r
  53                                 width,\r
  54                                 nowvar,\r
  55                                 indicator,\r
  56                                 result = true,\r
  57                                 hue,\r
  58                                 sat,\r
  59                                 val,\r
  60                                 dragging_hsv = [0,0,0];\r
  61 \r
  62                         for( i = 0 ; i < hsvpicker.children().length; i++ ){\r
  63                                 varArray = hsvpicker.children();\r
  64                                 nowvar = varArray.eq(i);\r
  65                                 leftbutton = nowvar.children().eq(0);\r
  66                                 view = nowvar.children().eq(1);\r
  67                                 rightbutton = nowvar.children().eq(2);\r
  68                                 indicator = nowvar.children().eq(1).children().eq(3);\r
  69 \r
  70                                 while(true) {\r
  71                                         chan = leftbutton.find("a").attr( "data-" + ( $.mobile.ns || "" ) + "target" );\r
  72                                         leftbutton.find("a").trigger( "vclick" );\r
  73                                         if( parseInt( indicator.css("left") ) <= 0 ){\r
  74                                                 break;\r
  75                                         }\r
  76                                 }\r
  77 \r
  78                                 hsvIdx = ( "hue" === chan ) ? 0 :\r
  79                                                         ( "sat" === chan) ? 1 : 2;\r
  80                                 dragging_hsv = [ 0, 0, 0];\r
  81 \r
  82                                 while(true) {\r
  83                                         rightbutton.children().first().trigger( "vclick" );\r
  84                                         width = view.first().width();\r
  85                                         max = ( 0 == hsvIdx ? 360 : 1 );\r
  86                                         step = 0.05 * max;\r
  87                                         dragging_hsv[hsvIdx] = dragging_hsv[hsvIdx] + step;\r
  88                                         dragging_hsv[hsvIdx] = Math.min( max, Math.max( 0.0, dragging_hsv[hsvIdx] ) );\r
  89                                         hue = varArray.eq(0).children().eq(1).children();\r
  90                                         val = varArray.eq(1).children().eq(1).children();\r
  91                                         sat = varArray.eq(2).children().eq(1).children();\r
  92                                         switch(hsvIdx){\r
  93                                                 case 0:\r
  94                                                         if( indicator.css("background-color") != val.last().css("background-color") ||\r
  95                                                                 indicator.css("background-color") != sat.last().css("background-color"))\r
  96                                                                 result = false;\r
  97                                                 break;\r
  98                                                 case 1:\r
  99                                                         if( parseFloat( dragging_hsv[1] ).toFixed(2) != parseFloat(hue.eq(1).css("opacity")).toFixed(2) ||\r
 100                                                                 indicator.css("background-color") != sat.last().css("background-color"))\r
 101                                                                 result = false;\r
 102                                                 break;\r
 103                                                 case 2:\r
 104                                                         if(parseFloat( 1 - dragging_hsv[2] ).toFixed(2) , parseFloat(hue.eq(2).css("opacity")).toFixed(2) ||\r
 105                                                                 parseFloat( 1 - dragging_hsv[2] ).toFixed(2) , parseFloat(val.eq(2).css("opacity")).toFixed(2))\r
 106                                                                 result = false;\r
 107                                                 break;\r
 108                                         }\r
 109                                         if( parseInt( indicator.css("left") ) >= parseInt( width ) || !result){\r
 110                                                 break;\r
 111                                         }\r
 112                                 }\r
 113                         }\r
 114                         return result;\r
 115                 }," Click - Color match, Hue-Saturation-Value " );\r
 116 \r
 117                 colorcode = makeRandomColor();\r
 118                 widget.hsvpicker( { color : colorcode });\r
 119 \r
 120                 ok( colorchange(widget, colorcode),\r
 121                         "Option : Color change")\r
 122         }\r
 123 \r
 124         test( "Color Title" , function ( ) {\r
 125                 var wgSiblings,\r
 126                         colorHex,\r
 127                         widget,\r
 128                         colorcode;\r
 129 \r
 130                 widget = $("#colortitle");\r
 131 \r
 132                 wgSiblings = widget.siblings();\r
 133                 ok( widget.is(":hidden") &&\r
 134                         wgSiblings.length == 2 &&\r
 135                         wgSiblings.last().is(".ui-colortitle, .jquery-mobile-ui-widget"),\r
 136                         "Create - Color Title" );\r
 137 \r
 138                 colorHex = widget.jqmData("color");\r
 139                 equal( wgSiblings.last().css("color"), hexToRgb(colorHex), "Compare - Color" );\r
 140                 equal( wgSiblings.last().text().trim(), colorHex, "Compare - Text" );\r
 141 \r
 142                 colorcode = makeRandomColor();\r
 143                 widget.colortitle({ color : colorcode });\r
 144 \r
 145                 ok( colorchange( widget, colorcode ),\r
 146                         "Option : Color change");\r
 147         });\r
 148 \r
 149         test( "Color palette" , function () {\r
 150                 var widget,\r
 151                         palette,\r
 152                         palettePreview,\r
 153                         wgSiblings,\r
 154                         colorChoice,\r
 155                         i,\r
 156                         colorcode,\r
 157                         palettePrefix = ".colorpalette";\r
 158 \r
 159                 widget = $("#colorpalette");\r
 160 \r
 161                 wgSiblings = widget.siblings();\r
 162                 palette = wgSiblings.last();\r
 163                 ok( widget.is(":hidden") &&\r
 164                         wgSiblings.length == 2 &&\r
 165                         palette.is(".ui-colorpalette, .jquery-mobile-ui-widget"),\r
 166                         "Create - Color palette" );\r
 167 \r
 168                 if( palette.find( palettePrefix + "-preview-container").length ){\r
 169                         palettePreview = palette.find( palettePrefix +"-preview-container");\r
 170                 }\r
 171                 colorChoice = palette.find( palettePrefix + "-table").children().find( "div[class^='colorpalette-choice-container-']" );\r
 172                 equal( colorChoice.length ,\r
 173                                 palette.jqmData("n-choices") , "Count - Color choice container" );\r
 174 \r
 175                 ok( function(){\r
 176                                 var i = 0,\r
 177                                         result = true;\r
 178                                 for(i = 0 ; i < colorChoice.length; i++ ){\r
 179                                         $(colorChoice[i]).children().trigger("vclick");\r
 180                                         if( palettePreview.children().css("background-color") == $(colorChoice[i]).children().css("background-color") ){\r
 181                                                 result = false;\r
 182                                                 break;\r
 183                                         }\r
 184                                 }\r
 185                         return result;\r
 186                 }, "Click - Palette Active check" );\r
 187 \r
 188                 colorcode = makeRandomColor();\r
 189                 widget.colorpalette({ color: colorcode });\r
 190 \r
 191                 ok( colorchange( widget, colorcode ),\r
 192                         "Option : Color change");\r
 193         });\r
 194 \r
 195         test( "Color picker button-noform" , function () {\r
 196                 var widget,\r
 197                         wgSiblings,\r
 198                         colorpickerbutton,\r
 199                         colorcode,\r
 200                         popwindow,\r
 201                         hsvpicker;\r
 202 \r
 203                 widget = $("#colorpickerbutton-noform");\r
 204                 widget.colorpickerbutton();\r
 205                 wgSiblings = widget.siblings();\r
 206                 colorpickerbutton = wgSiblings.last();\r
 207 \r
 208                 ok( widget.is(":hidden") &&\r
 209                         wgSiblings.last().jqmData("role") == "button" &&\r
 210                         wgSiblings.last().attr("aria-haspopup") == "true",\r
 211                         "Create - Color picker" );\r
 212 \r
 213                 widget.colorpickerbutton("open");\r
 214                 popwindow = $("#colorpage").children().last();\r
 215 \r
 216                 ok( parseInt( popwindow.css("top") ) > 0, "Open - Popupwindow");\r
 217                 hsvpicker = popwindow.children().children().first();\r
 218                 testHsvpicker(hsvpicker);\r
 219 \r
 220                 widget.colorpickerbutton("close");\r
 221                 equal( hexToRgb( hsvpicker.jqmData("color") ),\r
 222                                 colorpickerbutton.children().children().children().css("color") );\r
 223 \r
 224                 colorcode = makeRandomColor();\r
 225                 widget.colorpicker({ color: colorcode });\r
 226 \r
 227                 ok( colorchange( widget, colorcode ),\r
 228                         "Option : Color change");\r
 229         });\r
 230 \r
 231         test( "Hue-Saturation-Value" , function () {\r
 232                 testHsvpicker( "#hsvpicker" );\r
 233         });\r
 234 \r
 235         test( "Hue-Saturation-Lightnewss" , function() {\r
 236                 var widget,\r
 237                 wgSiblings,\r
 238                 colorpicker,\r
 239                 colorcode;\r
 240 \r
 241                 widget = $("#colorpicker");\r
 242                 widget.colorpicker();\r
 243                 wgSiblings = widget.siblings();\r
 244                 colorpicker = wgSiblings.last();\r
 245 \r
 246                 ok( widget.is(":hidden") &&\r
 247                         colorpicker.hasClass("ui-colorpicker") &&\r
 248                         colorpicker.children().length == 3\r
 249                         , "Create - Hue-Saturation-Lightness");\r
 250 \r
 251                 colorcode = makeRandomColor();\r
 252                 widget.colorpicker({ color: colorcode });\r
 253 \r
 254                 ok( colorchange( widget, colorcode ),\r
 255                         "Option : Color change");\r
 256         });\r
 257 });