tests/unit-tests/expandablelist/expandablelist-tests.js

   1 /**
   2  * Expandablelist test
   3  *
   4  * Youmin Ha <youmin.ha@samsung.com>
   5  */
   6 ( function ( $ ) {
   7         var DEBUG = true;
   8
   9         $.mobile.defaultTransition = "none";
  10
  11         module( "ExpandableList", {
  12                 setup: function ( ) {
  13                         var page = $( 'div#expandablelist-main:jqmData(role="page")' ),
  14                                 initHtml = '<form>\
  15                                         <div data-role="header">\
  16                                                 <h1>expandable list</h1>\
  17                                         </div>\
  18                                         <div data-role="content">\
  19                                                 <ul data-role="listview" id="list1">\
  20                                                         <li id="exp1" data-expandable="true" data-initial-expansion="true">exp1</li>\
  21                                                         <li id="exp1-1" data-expandable="true"  data-expanded-by="exp1" data-initial-expansion="false">exp1-1</li>\
  22                                                         <li id="exp1-1-1" data-expanded-by="exp1-1">exp1-1-1</li>\
  23                                                         <li id="exp2" data-expandable="true">exp2</li>\
  24                                                 </ul>\
  25                                         </div>\
  26                                 </form>',
  27                                 obj;
  28
  29                                 if( DEBUG ) {
  30                                         page.show( );
  31                                 }
  32                                 page.append( $( initHtml ) );
  33
  34                                 obj = $( ':jqmData(role="listview")' );
  35                                 obj.listview( );
  36
  37                                 obj = $( ':jqmData(expandable="true")' );
  38                                 obj.expandablelist( );
  39                 },
  40                 teardown: function ( ) {
  41                         var page = $( 'div#expandablelist-main:jqmData(role="page")' );
  42                         page.empty( );
  43
  44                         if( DEBUG ) {
  45                                 page.hide( );
  46                         }
  47                 }
  48         } );
  49
  50         function expandCollapseTest ( ) {
  51                 var transitionTimeout = 1000,
  52                         elist = $( ":jqmData(expandable='true')" ),
  53                         li1,
  54                         li1_1,
  55                         li1_1_1,
  56                         val;
  57
  58                 elist.expandablelist( );
  59                 ok( elist, "expandablelist object creation" );
  60
  61                 li1 = $( "li#exp1" );
  62                 li1_1 = $( "li#exp1-1" );
  63                 li1_1_1 = $( "li#exp1-1-1" );
  64
  65                 val = li1_1.height( );
  66                 console.log( "li1_1's height=" + val );
  67                 notEqual( val, 0, "Expanded listitem with expandable parent having data-initial-expansion=true must be visible (height > 0)" );
  68
  69                 equal( li1_1_1.height(), 0, "Expanded listitem with expandable parent having data-initial-expansion=false must not be visible (height == 0)" );
  70
  71                 li1_1.trigger( 'vclick' );
  72                 setTimeout( function ( ) {
  73                         notEqual( li1_1_1.height( ), 0, "After click, expanded listitem must be visible (height > 0)" );
  74
  75                         li1.trigger( 'vclick' );
  76                         setTimeout( function ( ) {
  77                                 // All children must be collapsed when top-level expandable listitem is clicked.
  78                                 equal( li1_1.height(), 0, "After click, all children must be collapsed. (height == 0)" );
  79                                 equal( li1_1_1.height(), 0, "After click, all children must be collapsed. (height == 0)" );
  80
  81                                 start( );
  82                         }, transitionTimeout );
  83
  84                 }, transitionTimeout );
  85         }
  86
  87         asyncTest( "Basic expand-collapse test", 6, function ( ) {
  88                 expandCollapseTest( );
  89         } );
  90
  91         asyncTest( "style test - checkbox" , 6, function ( ) {
  92                 var li = $( "li#exp1-1" ),
  93                         subitem = $( '<input type="checkbox" id="checkbox1" >' );
  94
  95                 // Prepare
  96                 li.append( subitem );
  97                 li.addClass( 'ui-li-1line-check1' )
  98                         .addClass( 'ui-li-dialogue' );
  99                 subitem.checkboxradio( );
 100                 li.trigger( 'refresh' );
 101
 102                 // Run
 103                 expandCollapseTest( );
 104         } );
 105
 106 } ) ( jQuery );