tests/additional-unit-tests/tabbar/tabbar-tests.js

   1 /*
   2  * tabbar unit tests
   3  */
   4 /*jslint browser: true*/
   5 /*global $, jQuery, test, equal, ok*/
   6 ( function ( $ ) {
   7         $.mobile.defaultTransition = "none";
   8
   9         module( "Tabbar" );
  10
  11         var unit_tabbar = function ( widget, drayStyle ) {
  12                 var tabbar,
  13                         tabbar_style,
  14                         item_count,
  15                         activeIndex,
  16                         deactiveReturn,
  17                         activeReturn,
  18                         ww,
  19                         wh,
  20                         index,
  21                         isLandscape,
  22                         created_tabbar = widget.tabbar( );
  23
  24                 /* Create */
  25                 ok( created_tabbar, "Create" );
  26                 equal( widget.find( "a" ).length, drayStyle.icon.length, "Markup check icons" ) ;
  27                 if ( drayStyle ) {
  28                         if ( drayStyle.icon ) {
  29                                 for ( index = 0; index < drayStyle.icon.length; index++ ) {
  30                                         equal( widget.find( "a" )[index].getAttribute("data-icon" ), drayStyle.icon[index], "Icon check" );
  31                                         equal( widget.find( "a span.ui-btn-text" )[index].innerHTML, drayStyle.text[index], "Text check" );
  32                                 }
  33                         }
  34                 }
  35
  36                 /*Markup check*/
  37                 ww = window.innerWidth || $( window ).width( ) ;
  38                 wh = window.innerHeight || $( window ).height( );
  39                 isLandscape = ww > wh && ( ww - wh );
  40
  41                 if ( isLandscape ) {
  42                         equal( widget.hasClass( "ui-landscape-tabbar" ), true, "Markup check layout" );
  43                 } else {
  44                         equal( widget.hasClass( "ui-portrait-tabbar" ), true, "Markup check layout" );
  45                 }
  46
  47
  48                 /* Check APIs */
  49                 activeIndex = created_tabbar.find(".ui-btn-active" ).index( );
  50                 created_tabbar.tabbar( "disable", activeIndex );
  51                 deactiveReturn = created_tabbar.find("li:eq(" + activeIndex + " )" ).is(".ui-disabled" );
  52
  53                 equal( deactiveReturn, true, "List Deactive test" );
  54
  55                 created_tabbar.tabbar("enable", activeIndex );
  56                 activeReturn = created_tabbar.find("li:eq(" + activeIndex + " )" ).is(".ui-disabled" );
  57                 equal( activeReturn, false, "List Active test" );
  58         };
  59
  60         test( "tabbar text style test - footer", function ( ) {
  61                 unit_tabbar( $("#tabbar-test-text-only" ), {icon : ['delete', 'forward', 'plus', 'back', 'search'], text : ["Menu", "Save", "Share", "Timeline", "WorldClock"]} );
  62         } );
  63
  64         test( "tabbar text style test - header", function ( ) {
  65                 unit_tabbar( $("#tabbar-test-text-only-header" ), {icon : ['delete', 'forward', 'plus', 'back', 'search'], text : ["Menu", "Save", "Share", "Timeline", "WorldClock"]} );
  66         } );
  67
  68         test( "tabbar text style test - footer - Dynamic", function ( ) {
  69
  70                 $('#abbar-test-text-only').remove( );
  71                 var VirtualMarkup = '<div id= "tabbar-test-text-only" data-role= "tabbar">' +
  72                                                                                         '<ul>' +
  73                                                                                                 '<li><a href= "#" data-icon= "delete">Menu</a></li>' +
  74                                                                                                 '<li><a href= "#" class= "ui-btn-active" data-icon= "forward">Save</a></li>' +
  75                                                                                                 '<li><a href= "#" data-icon= "plus">Share</a></li>' +
  76                                                                                                 '<li><a href= "#" data-icon= "Back">Timeline</a></li>' +
  77                                                                                                 '<li><a href= "#" data-icon= "search"WorldClock</a></li>' +
  78                                                                                         '</ul>' +
  79                                                                                 '</div>';
  80                 $('#tabbarfooter').append( VirtualMarkup ).trigger("create" );
  81                 unit_tabbar( $("#tabbar-test-text-only" ), {icon : ['delete', 'forward', 'plus', 'back', 'search'], text : ["Menu", "Save", "Share", "Timeline", "WorldClock"]} );
  82         } );
  83
  84         test( "tabbar text style test- header - Dynamic", function ( ) {
  85
  86                 $('#abbar-test-text-only-header').remove( );
  87                 var VirtualMarkup = '<div id= "tabbar-test-text-only-header" data-role= "tabbar">' +
  88                                                                                         '<ul>' +
  89                                                                                                 '<li><a href= "#" data-icon= "delete">Menu</a></li>' +
  90                                                                                                 '<li><a href= "#" class= "ui-btn-active" data-icon= "forward">Save</a></li>' +
  91                                                                                                 '<li><a href= "#" data-icon= "plus">Share</a></li>' +
  92                                                                                                 '<li><a href= "#" data-icon= "Back">Timeline</a></li>' +
  93                                                                                                 '<li><a href= "#" data-icon= "search"WorldClock</a></li>' +
  94                                                                                         '</ul>' +
  95                                                                                 '</div>';
  96                 $('#tabbarheader').append( VirtualMarkup ).trigger("create" );
  97                 unit_tabbar( $("#tabbar-test-text-only-header" ), {icon : ['delete', 'forward', 'plus', 'back', 'search'], text : ["Menu", "Save", "Share", "Timeline", "WorldClock"]} );
  98         } );
  99 } ( jQuery ) );