tests/additional-unit-tests/segmentcontrol/segmentcontrol-tests.js

   1 /*
   2  * segmentcontrol unit tests
   3  */
   4 /*jslint browser: true*/
   5 /*global $, jQuery, test, equal, ok*/
   6 ( function ( $ ) {
   7         module( "SegmentControl" );
   8
   9         var unit_segmentcontrol = function ( widget, inputCount, layout ) {
  10                 var segmentGroup = widget;
  11
  12                 /* Create */
  13                 ok( segmentGroup, "Create" );
  14                 equal( "fieldcontain", segmentGroup.jqmData("role" ), "segment control generate" );
  15                 equal( segmentGroup.find( "input" ).length, inputCount, "segment control listitem count test" );
  16                 equal( segmentGroup.find( "input" ).is( ":jqmData(icon=segment-titlestyle-segonly)" ), true, "segment control style test" );
  17
  18                 /*Markup Check*/
  19                 equal( segmentGroup.hasClass("ui-field-contain" ), true, "ui-field-contain class added" ) ;
  20                 equal( segmentGroup.find(":jqmData(role=controlgroup )" ).hasClass("ui-controlgroup-" + layout ), true ) ;
  21                 equal( segmentGroup.find(":jqmData(role=controlgroup )" ).jqmData("type" ) , layout, "data-type" ) ;
  22
  23         };
  24
  25         test( "segmentcontrol 2btn-h test", function ( ) {
  26                 unit_segmentcontrol( $("#segmentcontrol-2btn" ), 2 , "horizontal" );
  27         } );
  28
  29         test( "segmentcontrol 3btn-h test", function ( ) {
  30                 unit_segmentcontrol( $("#segmentcontrol-3btn" ), 3, "horizontal" );
  31         } );
  32
  33         test( "segmentcontrol 4btn-h test", function ( ) {
  34                 unit_segmentcontrol( $("#segmentcontrol-4btn" ), 4, "horizontal" );
  35         } );
  36
  37         test( "segmentcontrol 2btn-v test", function ( ) {
  38                 unit_segmentcontrol( $("#segmentcontrol-2btn-v" ), 2, "vertical" );
  39         } );
  40
  41         test( "segmentcontrol 3btn-v test", function ( ) {
  42                 unit_segmentcontrol( $("#segmentcontrol-3btn-v" ), 3 , "vertical" );
  43         } );
  44
  45         test( "segmentcontrol 4btn-v test", function ( ) {
  46                 unit_segmentcontrol( $("#segmentcontrol-4btn-v" ), 4, "vertical" );
  47         } );
  48
  49
  50         test( "segmentcontrol 2btn-h test - dynamic", function ( ) {
  51
  52                 /* Create */
  53                 var segmentControlHTML = '<div data-nstest-role= "content">' +
  54                                                                                                                 '<div data-role= "fieldcontain" id= "segmentcontrol-2btn">' +
  55                                                                                                                         '<fieldset data-role= "controlgroup" data-type= "horizontal">' +
  56                                                                                                                                 '<input type= "radio" name= "radio-view-1" data-icon= "segment-titlestyle-segonly" id= "segment1" value= "on" checked= "checked" />' +
  57                                                                                                                                 '<label for= "segment1">List</label>' +
  58                                                                                                                                 '<input type= "radio" name= "radio-view-1" data-icon= "segment-titlestyle-segonly" id= "segment2" value= "off" />' +
  59                                                                                                                                 '<label for= "segment2">Grid</label>' +
  60                                                                                                                         '</fieldset>' +
  61                                                                                                         '</div>';
  62                 /* Clean */
  63                 $('#segmentcontrol_page').find(":jqmData(role=content)" ).empty( );
  64                 $('#segmentcontrol_page').find(":jqmData(role=content)" ).append( segmentControlHTML ).trigger('create') ;
  65                 unit_segmentcontrol( $("#segmentcontrol-2btn" ), 2 , "horizontal" );
  66         } );
  67
  68         test( "segmentcontrol 3btn test-h - dynamic", function ( ) {
  69
  70                 /* Create */
  71                 var segmentControlHTML = '<div data-nstest-role= "content">' +
  72                                                                                                                 '<div data-role= "fieldcontain" id= "segmentcontrol-2btn">' +
  73                                                                                                                         '<fieldset data-role= "controlgroup" data-type= "horizontal">' +
  74                                                                                                                                 '<input type= "radio" name= "radio-view-1" data-icon= "segment-titlestyle-segonly" id= "segment1" value= "on" checked= "checked" />' +
  75                                                                                                                                 '<label for= "segment1">List</label>' +
  76                                                                                                                                 '<input type= "radio" name= "radio-view-1" data-icon= "segment-titlestyle-segonly" id= "segment2" value= "off" />' +
  77                                                                                                                                 '<label for= "segment2">Grid</label>' +
  78                                                                                                                                 '<input type= "radio" name= "radio-view-1" data-icon= "segment-titlestyle-segonly" id= "segment3" value= "off" />' +
  79                                                                                                                                 '<label for= "segment3">Grid</label>' +
  80                                                                                                                         '</fieldset>' +
  81                                                                                                         '</div>';
  82                 /* Clean */
  83                 $('#segmentcontrol_page').find(":jqmData(role=content)" ).empty( );
  84
  85                 $('#segmentcontrol_page').find(":jqmData(role=content)" ).append( segmentControlHTML ).trigger('create') ;
  86                 unit_segmentcontrol( $("#segmentcontrol-3btn" ), 3, "horizontal" );
  87         } );
  88
  89         test( "segmentcontrol 4btn test-h - dynamic", function ( ) {
  90
  91                 /* Create */
  92                 var segmentControlHTML = '<div data-nstest-role= "content">' +
  93                                                                                                                 '<div data-role= "fieldcontain" id= "segmentcontrol-2btn">' +
  94                                                                                                                         '<fieldset data-role= "controlgroup" data-type= "horizontal">' +
  95                                                                                                                                 '<input type= "radio" name= "radio-view-1" data-icon= "segment-titlestyle-segonly" id= "segment1" value= "on" checked= "checked" />' +
  96                                                                                                                                 '<label for= "segment1">List</label>' +
  97                                                                                                                                 '<input type= "radio" name= "radio-view-1" data-icon= "segment-titlestyle-segonly" id= "segment2" value= "off" />' +
  98                                                                                                                                 '<label for= "segment2">Grid</label>' +
  99                                                                                                                                 '<input type= "radio" name= "radio-view-1" data-icon= "segment-titlestyle-segonly" id= "segment3" value= "off" />' +
 100                                                                                                                                 '<label for= "segment3">Grid</label>' +
 101                                                                                                                                         '<input type= "radio" name= "radio-view-1" data-icon= "segment-titlestyle-segonly" id= "segment4" value= "off" />' +
 102                                                                                                                                 '<label for= "segment4">Grid</label>' +
 103                                                                                                                         '</fieldset>' +
 104                                                                                                         '</div>';
 105                 /* Clean */
 106                 $('#segmentcontrol_page').find(":jqmData(role=content)" ).empty( );
 107
 108                 $('#segmentcontrol_page').find(":jqmData(role=content)" ).append( segmentControlHTML ).trigger('create') ;
 109                 unit_segmentcontrol( $("#segmentcontrol-4btn" ), 4, "horizontal" );
 110         } );
 111
 112         test( "segmentcontrol 2btn-v test - dynamic", function ( ) {
 113
 114                 /* Create */
 115                 var segmentControlHTML = '<div data-nstest-role= "content">' +
 116                                                                                                                 '<div data-role= "fieldcontain" id= "segmentcontrol-2btn">' +
 117                                                                                                                         '<fieldset data-role= "controlgroup" data-type= "vertical">' +
 118                                                                                                                                 '<input type= "radio" name= "radio-view-1" data-icon= "segment-titlestyle-segonly" id= "segment1" value= "on" checked= "checked" />' +
 119                                                                                                                                 '<label for= "segment1">List</label>' +
 120                                                                                                                                 '<input type= "radio" name= "radio-view-1" data-icon= "segment-titlestyle-segonly" id= "segment2" value= "off" />' +
 121                                                                                                                                 '<label for= "segment2">Grid</label>' +
 122                                                                                                                         '</fieldset>' +
 123                                                                                                         '</div>';
 124                 /* Clean */
 125                 $('#segmentcontrol_page').find(":jqmData(role=content)" ).empty( );
 126
 127                 $('#segmentcontrol_page').find(":jqmData(role=content)" ).append( segmentControlHTML ).trigger('create') ;
 128                 unit_segmentcontrol( $("#segmentcontrol-2btn-v" ), 2, "vertical" );
 129         } );
 130
 131         test( "segmentcontrol 3btn-v test - dynamic", function ( ) {
 132
 133                 /* Create */
 134                 var segmentControlHTML = '<div data-nstest-role= "content">' +
 135                                                                                                                 '<div data-role= "fieldcontain" id= "segmentcontrol-2btn">' +
 136                                                                                                                         '<fieldset data-role= "controlgroup" data-type= "vertical">' +
 137                                                                                                                                 '<input type= "radio" name= "radio-view-1" data-icon= "segment-titlestyle-segonly" id= "segment1" value= "on" checked= "checked" />' +
 138                                                                                                                                 '<label for= "segment1">List</label>' +
 139                                                                                                                                 '<input type= "radio" name= "radio-view-1" data-icon= "segment-titlestyle-segonly" id= "segment2" value= "off" />' +
 140                                                                                                                                 '<label for= "segment2">Grid</label>' +
 141                                                                                                                                 '<input type= "radio" name= "radio-view-1" data-icon= "segment-titlestyle-segonly" id= "segment3" value= "off" />' +
 142                                                                                                                                 '<label for= "segment3">Grid</label>' +
 143                                                                                                                         '</fieldset>' +
 144                                                                                                         '</div>';
 145                 /* Clean */
 146                 $('#segmentcontrol_page').find(":jqmData(role=content)" ).empty( );
 147                 $('#segmentcontrol_page').find(":jqmData(role=content)" ).append( segmentControlHTML ).trigger('create') ;
 148                 unit_segmentcontrol( $("#segmentcontrol-3btn-v" ), 3 , "vertical" );
 149         } );
 150
 151         test( "segmentcontrol 4btn-v test - dynamic", function ( ) {
 152                 /* Create */
 153                 var segmentControlHTML = '<div data-nstest-role= "content">' +
 154                                                                                                                 '<div data-role= "fieldcontain" id= "segmentcontrol-2btn">' +
 155                                                                                                                         '<fieldset data-role= "controlgroup" data-type= "vertical">' +
 156                                                                                                                                 '<input type= "radio" name= "radio-view-1" data-icon= "segment-titlestyle-segonly" id= "segment1" value= "on" checked= "checked" />' +
 157                                                                                                                                 '<label for= "segment1">List</label>' +
 158                                                                                                                                 '<input type= "radio" name= "radio-view-1" data-icon= "segment-titlestyle-segonly" id= "segment2" value= "off" />' +
 159                                                                                                                                 '<label for= "segment2">Grid</label>' +
 160                                                                                                                                 '<input type= "radio" name= "radio-view-1" data-icon= "segment-titlestyle-segonly" id= "segment3" value= "off" />' +
 161                                                                                                                                 '<label for= "segment3">Grid</label>' +
 162                                                                                                                                         '<input type= "radio" name= "radio-view-1" data-icon= "segment-titlestyle-segonly" id= "segment4" value= "off" />' +
 163                                                                                                                                 '<label for= "segment4">Grid</label>' +
 164                                                                                                                         '</fieldset>' +
 165                                                                                                         '</div>';
 166                 /* Clean */
 167                 $('#segmentcontrol_page').find(":jqmData(role=content)" ).empty( );
 168
 169                 $('#segmentcontrol_page').find(":jqmData(role=content)" ).append( segmentControlHTML ).trigger('create') ;
 170                 unit_segmentcontrol( $("#segmentcontrol-4btn-v" ), 4, "vertical" );
 171         } );
 172
 173
 174
 175 } ( jQuery ) );