libs/js/jquery-mobile-1.0.1pre/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         module( "Theming", {});
 120
 121         asyncTest( "Collapsible", 6, function(){
 122                 $.testHelper.pageSequence([
 123                         function(){
 124                                 $.testHelper.openPage( "#collapsible-with-theming" );
 125                         },
 126
 127                         function() {
 128                                 var collapsibles = $.mobile.activePage.find( ".ui-collapsible" );
 129                                 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");
 130                                 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");
 131                                 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");
 132                                 ok( collapsibles.eq(1).find( ".ui-collapsible-content" ).hasClass( "ui-body-b" ), "Content of second collapsible should have class ui-btn-up-b");
 133                                 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");
 134                                 ok( collapsibles.eq(2).find( ".ui-collapsible-content" ).hasClass( "ui-body-c" ), "Content of third collapsible should have class ui-btn-up-c");
 135                                 start();
 136                         }
 137                 ]);
 138         });
 139
 140
 141         asyncTest( "Collapsible Set", function(){
 142                 $.testHelper.pageSequence([
 143                         function(){
 144                                 $.testHelper.openPage( "#collapsible-set-with-theming" );
 145                         },
 146
 147                         function() {
 148                                 var collapsibles = $.mobile.activePage.find( ".ui-collapsible" );
 149                                 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");
 150                                 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]");
 151                                 ok( collapsibles.eq(0).find( ".ui-collapsible-content" ).hasClass( "ui-body-d" ), "Content of first collapsible should NOT have class ui-btn-up-d");
 152                                 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");
 153                                 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]");
 154                                 ok( collapsibles.eq(1).find( ".ui-collapsible-content" ).hasClass( "ui-body-b" ), "Content of second collapsible should have class ui-btn-up-b");
 155                                 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");
 156                                 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]");
 157                                 ok( collapsibles.eq(2).find( ".ui-collapsible-content" ).hasClass( "ui-body-d" ), "Content of third collapsible should have class ui-btn-up-d");
 158                                 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");
 159                                 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");
 160                                 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]");
 161                                 ok( collapsibles.eq(3).find( ".ui-collapsible-content" ).hasClass( "ui-body-d" ), "Content of fourth collapsible should have class ui-btn-up-d");
 162                                 start();
 163                         }
 164                 ]);
 165         });
 166
 167
 168 })( jQuery );