libs/js/jquery-mobile-1.1.0/tests/unit/collapsible/collapsible_core.js

   1 /*
   2  * mobile listview unit tests
   3  */
   4
   5 // TODO split out into seperate test files
   6 (function( $ ){
   7         module( "Collapsible section", {});
   8
   9         asyncTest( "The page should enhanced correctly", function(){
  10                 $.testHelper.pageSequence([
  11                         function(){
  12                                 $.testHelper.openPage( "#basic-collapsible-test" );
  13                         },
  14
  15                         function() {
  16                                 var $page = $( "#basic-collapsible-test" );
  17                                 ok($page.find( ".ui-content >:eq(0)" ).hasClass( "ui-collapsible" ), ".ui-collapsible class added to collapsible elements" );
  18                                 ok($page.find( ".ui-content >:eq(0) >:header" ).hasClass( "ui-collapsible-heading" ), ".ui-collapsible-heading class added to collapsible heading" );
  19                                 ok($page.find( ".ui-content >:eq(0) > div" ).hasClass( "ui-collapsible-content" ), ".ui-collapsible-content class added to collapsible content" );
  20                                 ok($page.find( ".ui-content >:eq(0)" ).hasClass( "ui-collapsible-collapsed" ), ".ui-collapsible-collapsed added to collapsed elements" );
  21                                 ok(!$page.find( ".ui-content >:eq(1)" ).hasClass( "ui-collapsible-collapsed" ), ".ui-collapsible-collapsed not added to expanded elements" );
  22                                 ok($page.find( ".ui-collapsible.ui-collapsible-collapsed" ).find( ".ui-collapsible-heading-toggle > .ui-btn-inner" ).hasClass( "ui-corner-top ui-corner-bottom" ), "Collapsible header button should have class ui-corner-all" );
  23                                 start();
  24                         }
  25                 ]);
  26         });
  27
  28         asyncTest( "Expand/Collapse", function(){
  29                 $.testHelper.pageSequence([
  30                         function(){
  31                                 $.testHelper.openPage( "#basic-collapsible-test" );
  32                         },
  33
  34                         function() {
  35                                 ok($( "#basic-collapsible-test .ui-collapsible" ).eq(0).hasClass( "ui-collapsible-collapsed" ), "First collapsible should be collapsed");
  36                                 $( "#basic-collapsible-test .ui-collapsible-heading-toggle" ).eq(0).click();
  37                                 ok(!$( "#basic-collapsible-test .ui-collapsible" ).eq(0).hasClass( "ui-collapsible-collapsed" ), "First collapsible should be expanded after click");
  38                                 $( "#basic-collapsible-test .ui-collapsible-heading-toggle" ).eq(0).click();
  39                                 ok($( "#basic-collapsible-test .ui-collapsible" ).eq(0).hasClass( "ui-collapsible-collapsed" ), "First collapsible should be collapsed");
  40                                 start();
  41                         }
  42                 ]);
  43         });
  44
  45         module( "Collapsible set", {});
  46
  47         asyncTest( "The page should enhanced correctly", function(){
  48                 $.testHelper.pageSequence([
  49                         function(){
  50                                 $.testHelper.openPage( "#basic-collapsible-set-test" );
  51                         },
  52
  53                         function() {
  54                                 var $page = $( "#basic-collapsible-set-test" );
  55
  56                                 ok($page.find( ".ui-content >:eq(0)" ).hasClass( "ui-collapsible-set" ), ".ui-collapsible-set class added to collapsible set" );
  57                                 ok($page.find( ".ui-content >:eq(0) > div" ).hasClass( "ui-collapsible" ), ".ui-collapsible class added to collapsible elements" );
  58                                 $page.find( ".ui-collapsible-set" ).each(function() {
  59                                         var $this = $( this );
  60                                         ok($this.find( ".ui-collapsible" ).first().find( ".ui-collapsible-heading-toggle > .ui-btn-inner" ).hasClass( "ui-corner-top" ), "First collapsible header button should have class ui-corner-top" );
  61                                         ok($this.find( ".ui-collapsible" ).last().find( ".ui-collapsible-heading-toggle > .ui-btn-inner" ).hasClass( "ui-corner-bottom" ), "Last collapsible header button should have class ui-corner-bottom" );
  62                                 });
  63
  64                                 start();
  65                         }
  66                 ]);
  67         });
  68
  69         asyncTest( "Collapsible set with only one collapsible", function() {
  70                 $.testHelper.pageSequence([
  71                         function(){
  72                                 $.testHelper.openPage( "#collapsible-set-with-lonely-collapsible-test" );
  73                         },
  74
  75                         function() {
  76                                 var $page = $( "#collapsible-set-with-lonely-collapsible-test" );
  77                                 $page.find( ".ui-collapsible-set" ).each(function() {
  78                                         var $this = $( this );
  79                                         ok($this.find( ".ui-collapsible" ).first().find( ".ui-collapsible-heading-toggle > .ui-btn-inner" ).hasClass( "ui-corner-top" ), "First collapsible header button should have class ui-corner-top" );
  80                                         ok($this.find( ".ui-collapsible" ).last().find( ".ui-collapsible-heading-toggle > .ui-btn-inner" ).hasClass( "ui-corner-bottom" ), "Last collapsible header button should have class ui-corner-bottom" );
  81                                 });
  82
  83                                 start();
  84                         }
  85                 ]);
  86         });
  87
  88         asyncTest( "Section expanded by default", function(){
  89                 $.testHelper.pageSequence([
  90                         function(){
  91                                 $.testHelper.openPage( "#basic-collapsible-set-test" );
  92                         },
  93
  94                         function() {
  95                                 equals($( "#basic-collapsible-set-test .ui-content >:eq(0) .ui-collapsible-collapsed" ).length, 2, "There should be 2 section collapsed" );
  96                                 ok(!$( "#basic-collapsible-set-test .ui-content >:eq(0) >:eq(1)" ).hasClass( "ui-collapsible-collapsed" ), "Section B should be expanded" );
  97                                 start();
  98                         }
  99                 ]);
 100         });
 101
 102         asyncTest( "Expand/Collapse", function(){
 103                 $.testHelper.pageSequence([
 104                         function(){
 105                                 $.testHelper.openPage( "#basic-collapsible-set-test" );
 106                         },
 107
 108                         function() {
 109                                 ok($( "#basic-collapsible-set-test .ui-collapsible" ).eq(0).hasClass( "ui-collapsible-collapsed" ), "First collapsible should be collapsed");
 110                                 $( "#basic-collapsible-set-test .ui-collapsible-heading-toggle" ).eq(0).click();
 111                                 ok(!$( "#basic-collapsible-set-test .ui-collapsible" ).eq(0).hasClass( "ui-collapsible-collapsed" ), "First collapsible should be expanded after click");
 112                                 $( "#basic-collapsible-set-test .ui-collapsible-heading-toggle" ).eq(0).click();
 113                                 ok($( "#basic-collapsible-set-test .ui-collapsible" ).hasClass( "ui-collapsible-collapsed" ), "All collapsible should be collapsed");
 114                                 start();
 115                         }
 116                 ]);
 117         });
 118
 119         asyncTest( "Collapsible Set with dynamic content", function(){
 120                 $.testHelper.pageSequence([
 121                         function(){
 122                                 $.testHelper.openPage( "#collapsible-set-with-dynamic-content" );
 123                         },
 124
 125                         function() {
 126                                 var set = $( ".ui-page-active" ).find( ".ui-collapsible-set" );
 127                                 for ( var i = 0; i < 3; i++ ) {
 128                                         $( '<div data-'+ $.mobile.ns +'role="collapsible"><h3>Collapsible Item ' + i + '</h3></div>' ).appendTo( set );
 129                                 }
 130                                 set.collapsibleset( "refresh" );
 131                                 equal( set.find( ".ui-collapsible" ).length, 3, "The 3 collapsibles should be enhanced" );
 132                                 ok( set.find( ".ui-collapsible" ).eq( 0 ).find( "a" ).hasClass( "ui-corner-top" ), "The 1st collapsible should have top corners" );
 133                                 ok( !set.find( ".ui-collapsible" ).eq( 0 ).find( "a" ).hasClass( "ui-corner-bottom" ), "The 1st collapsible should NOT have bottom corners" );
 134                                 ok( !set.find( ".ui-collapsible" ).eq( 1 ).find( "a" ).hasClass( "ui-corner-top" ), "The 2nd collapsible should NOT have top corners" );
 135                                 ok( !set.find( ".ui-collapsible" ).eq( 1 ).find( "a" ).hasClass( "ui-corner-bottom" ), "The 2nd collapsible should NOT have bottom corners" );
 136                                 ok( set.find( ".ui-collapsible" ).eq( 2 ).find( "a" ).hasClass( "ui-corner-bottom" ), "The 3rd collapsible should have bottom corners" );
 137                                 ok( !set.find( ".ui-collapsible" ).eq( 2 ).find( "a" ).hasClass( "ui-corner-top" ), "The 3rd collapsible should NOT have top corners" );
 138                                 start();
 139                         }
 140                 ]);
 141         });
 142
 143   asyncTest( "Collapsible Set with static and dynamic content", function(){
 144                 $.testHelper.pageSequence([
 145                         function(){
 146                                 $.testHelper.openPage( "#collapsible-set-with-static-and-dynamic-content" );
 147                         },
 148
 149                         function() {
 150                                 var set = $( ".ui-page-active" ).find( ".ui-collapsible-set" );
 151                                 for ( var i = 0; i < 2; i++ ) {
 152                                         $( '<div data-'+ $.mobile.ns +'role="collapsible"><h3>Collapsible Item ' + i + '</h3></div>' ).appendTo( set );
 153                                 }
 154                                 set.collapsibleset( "refresh" );
 155                                 equal( set.find( ".ui-collapsible" ).length, 3, "The 3 collapsibles should be enhanced" );
 156                                 ok( set.find( ".ui-collapsible" ).eq( 0 ).find( "a" ).hasClass( "ui-corner-top" ), "The 1st collapsible should have top corners" );
 157                                 ok( !set.find( ".ui-collapsible" ).eq( 0 ).find( "a" ).hasClass( "ui-corner-bottom" ), "The 1st collapsible should NOT have bottom corners" );
 158                                 ok( !set.find( ".ui-collapsible" ).eq( 1 ).find( "a" ).hasClass( "ui-corner-top" ), "The 2nd collapsible should NOT have top corners" );
 159                                 ok( !set.find( ".ui-collapsible" ).eq( 1 ).find( "a" ).hasClass( "ui-corner-bottom" ), "The 2nd collapsible should NOT have bottom corners" );
 160                                 ok( set.find( ".ui-collapsible" ).eq( 2 ).find( "a" ).hasClass( "ui-corner-bottom" ), "The 3rd collapsible should have bottom corners" );
 161                                 ok( !set.find( ".ui-collapsible" ).eq( 2 ).find( "a" ).hasClass( "ui-corner-top" ), "The 3rd collapsible should NOT have top corners" );
 162                                 start();
 163                         }
 164                 ]);
 165         });
 166
 167         module( "Theming", {});
 168
 169         asyncTest( "Collapsible", 6, function(){
 170                 $.testHelper.pageSequence([
 171                         function(){
 172                                 $.testHelper.openPage( "#collapsible-with-theming" );
 173                         },
 174
 175                         function() {
 176                                 var collapsibles = $.mobile.activePage.find( ".ui-collapsible" );
 177                                 ok( collapsibles.eq(0).find( ".ui-collapsible-heading-toggle" ).hasClass( "ui-btn-up-a" ), "Heading of first collapsible should have class ui-btn-up-a");
 178                                 ok( !collapsibles.eq(0).find( ".ui-collapsible-content" ).hasClass( "ui-btn-up-a" ), "Content of first collapsible should NOT have class ui-btn-up-a");
 179                                 ok( collapsibles.eq(1).find( ".ui-collapsible-heading-toggle" ).hasClass( "ui-btn-up-b" ), "Heading of second collapsible should have class ui-btn-up-b");
 180                                 ok( collapsibles.eq(1).find( ".ui-collapsible-content" ).hasClass( "ui-body-b" ), "Content of second collapsible should have class ui-btn-up-b");
 181                                 ok( collapsibles.eq(2).find( ".ui-collapsible-heading-toggle" ).hasClass( "ui-btn-up-c" ), "Heading of third collapsible should have class ui-btn-up-c");
 182                                 ok( collapsibles.eq(2).find( ".ui-collapsible-content" ).hasClass( "ui-body-c" ), "Content of third collapsible should have class ui-btn-up-c");
 183                                 start();
 184                         }
 185                 ]);
 186         });
 187
 188
 189         asyncTest( "Collapsible Set", function(){
 190                 $.testHelper.pageSequence([
 191                         function(){
 192                                 $.testHelper.openPage( "#collapsible-set-with-theming" );
 193                         },
 194
 195                         function() {
 196                                 var collapsibles = $.mobile.activePage.find( ".ui-collapsible" );
 197                                 ok( collapsibles.eq(0).find( ".ui-collapsible-heading-toggle" ).hasClass( "ui-btn-up-a" ), "Heading of first collapsible should have class ui-btn-up-a");
 198                                 ok( !collapsibles.eq(0).find( ".ui-collapsible-content" ).is( ".ui-body-a,.ui-body-b,.ui-body-c" ), "Content of first collapsible should NOT have class ui-btn-up-[a,b,c]");
 199                                 ok( collapsibles.eq(0).find( ".ui-collapsible-content" ).hasClass( "ui-body-d" ), "Content of first collapsible should NOT have class ui-btn-up-d");
 200                                 ok( collapsibles.eq(1).find( ".ui-collapsible-heading-toggle" ).hasClass( "ui-btn-up-b" ), "Heading of second collapsible should have class ui-btn-up-b");
 201                                 ok( !collapsibles.eq(1).find( ".ui-collapsible-content" ).is( ".ui-body-a,.ui-body-c,.ui-body-d" ), "Content of second collapsible should NOT have class ui-btn-up-[a,c,d]");
 202                                 ok( collapsibles.eq(1).find( ".ui-collapsible-content" ).hasClass( "ui-body-b" ), "Content of second collapsible should have class ui-btn-up-b");
 203                                 ok( collapsibles.eq(2).find( ".ui-collapsible-heading-toggle" ).hasClass( "ui-btn-up-d" ), "Heading of third collapsible should have class ui-btn-up-d");
 204                                 ok( !collapsibles.eq(2).find( ".ui-collapsible-content" ).is( ".ui-body-a,.ui-body-b,.ui-body-c" ), "Content of third collapsible should NOT have class ui-btn-up-[a,b,c]");
 205                                 ok( collapsibles.eq(2).find( ".ui-collapsible-content" ).hasClass( "ui-body-d" ), "Content of third collapsible should have class ui-btn-up-d");
 206                                 ok( !collapsibles.eq(2).find( ".ui-collapsible-content" ).hasClass( "ui-collapsible-content-collapsed" ), "Content of third collapsible should NOT have class ui-collapsible-content-collapsed");
 207                                 ok( collapsibles.eq(3).find( ".ui-collapsible-heading-toggle" ).hasClass( "ui-btn-up-d" ), "Heading of fourth collapsible should have class ui-btn-up-d");
 208                                 ok( !collapsibles.eq(3).find( ".ui-collapsible-content" ).is( ".ui-body-a,.ui-body-b,.ui-body-c" ), "Content of fourth collapsible should NOT have class ui-btn-up-[a,b,c]");
 209                                 ok( collapsibles.eq(3).find( ".ui-collapsible-content" ).hasClass( "ui-body-d" ), "Content of fourth collapsible should have class ui-btn-up-d");
 210                                 start();
 211                         }
 212                 ]);
 213         });
 214
 215
 216 })( jQuery );