tests/unit-tests/autodividers/autodividers-tests.js

   1 /*
   2  * autodividers unit tests
   3  */
   4
   5 (function ($) {
   6   $.mobile.defaultTransition = "none";
   7
   8         module( "Autodividers" );
   9
  10         asyncTest( "Adds dividers based on first letters of list items.", function() {
  11                 $.testHelper.pageSequence([
  12                         function() {
  13                                 $.testHelper.openPage( '#autodividers-test' );
  14                         },
  15
  16                         function() {
  17                                 var $new_page = $( '#autodividers-test' );
  18
  19                                 //ok( $new_page.hasClass( 'ui-page-active' ) );
  20                                 ok( $new_page.find( '.ui-li-divider' ).length === 4 );
  21
  22                                 start();
  23                         }
  24                 ]);
  25         });
  26
  27         asyncTest( "Responds to addition/removal of list elements.", function() {
  28                 $.testHelper.pageSequence([
  29                         function() {
  30                                 $.testHelper.openPage( '#autodividers-test' );
  31                         },
  32
  33                         function() {
  34                                 var $new_page = $( '#autodividers-test' );
  35                                 //ok($new_page.hasClass( 'ui-page-active' ));
  36
  37                                 var $listview = $new_page.find( 'ul' );
  38
  39                                 // should remove all existing dividers
  40                                 ok( $new_page.find( 'li:contains("SHOULD REMOVE")' ).length === 0 );
  41
  42                                 // add li; should add an "X" divider
  43                                 $listview.append( '<li>x is for xanthe</li>' );
  44                                 ok( $new_page.find( '.ui-li-divider' ).length === 5 );
  45                                 ok( $new_page.find( '.ui-li-divider' ).is( ':contains("X")' ) );
  46
  47                                 // adding the same element again should create a valid list
  48                                 // item but no new divider
  49                                 ok( $new_page.find( '.ui-li-static' ).length === 5 );
  50                                 $listview.append( '<li>x is for xanthe</li>' );
  51                                 ok( $new_page.find( '.ui-li-divider' ).length === 5 );
  52                                 ok( $new_page.find( '.ui-li-divider:contains("X")' ).length === 1 );
  53                                 ok( $new_page.find( '.ui-li-static' ).length === 6 );
  54
  55                                 // should ignore addition of non-li elements to the list
  56                                 $listview.find( 'li:eq(0)' ).append( '<span>ignore me</span>' );
  57                                 ok( $new_page.find( '.ui-li-divider' ).length === 5 );
  58                                 ok( $new_page.find( '.ui-li-static' ).length === 6 );
  59
  60                                 // add li with the same initial letter as another li
  61                                 // but after the X li item; should add a second "B" divider to the
  62                                 // end of the list
  63                                 $listview.append( '<li>b is for barry</li>' );
  64                                 ok( $new_page.find( '.ui-li-divider' ).length === 6 );
  65                                 ok( $new_page.find( '.ui-li-divider:contains("B")' ).length === 2 );
  66
  67                                 // remove the item with a repeated "b"; should remove the second
  68                                 // "B" divider
  69                                 $listview.find( 'li:contains("barry")' ).remove();
  70                                 ok( $new_page.find( '.ui-li-divider' ).length === 5 );
  71                                 ok( $new_page.find( '.ui-li-divider:contains("B")' ).length === 1 );
  72
  73                                 // remove li; should remove the "A" divider
  74                                 $listview.find( 'li:contains("aquaman")' ).remove();
  75                                 ok( $new_page.find( '.ui-li-divider' ).length === 4 );
  76                                 ok( !$new_page.find( '.ui-li-divider' ).is( ':contains("A")' ) );
  77
  78                                 // adding another "B" item after "C" should create two separate
  79                                 // "B" dividers
  80                                 $listview.find( 'li:contains("catwoman")' ).after( '<li>b is for barry</li>' );
  81                                 ok( $new_page.find( '.ui-li-divider' ).length === 5 );
  82                                 ok( $new_page.find( '.ui-li-divider:contains("B")' ).length === 2 );
  83
  84                                 // if two dividers with the same letter have only non-dividers
  85                                 // between them, they get merged
  86
  87                                 // removing catwoman should cause the two "B" dividers to merge
  88                                 $listview.find( 'li:contains("catwoman")' ).remove();
  89                                 ok( $new_page.find( '.ui-li-divider:contains("B")' ).length === 1 );
  90
  91                                 // adding another "D" item before the "D" divider should only
  92                                 // result in a single "D" divider after merging
  93                                 $listview.find( 'li:contains("barry")' ).after( '<li>d is for dan</li>' );
  94                                 ok( $new_page.find( '.ui-li-divider:contains("D")' ).length === 1 );
  95
  96                                 start();
  97                         }
  98                 ]);
  99         });
 100
 101         module( "Autodividers Selector" );
 102
 103         asyncTest( "Adds divider text from links.", function() {
 104                 $.testHelper.pageSequence([
 105                         function() {
 106                                 $.testHelper.openPage( '#autodividers-selector-test' );
 107                         },
 108
 109                         function() {
 110                                 var $new_page = $( '#autodividers-selector-test' );
 111                                 //ok($new_page.hasClass( 'ui-page-active' ));
 112
 113                                 // check we have the right dividers based on link text
 114                                 var $list = $( '#autodividers-selector-test-list1' );
 115                                 ok( $list.find( '.ui-li-divider' ).length === 4 );
 116                                 ok( $list.find( '.ui-li-divider:eq(0):contains(A)' ).length === 1 );
 117                                 ok( $list.find( '.ui-li-divider:eq(1):contains(B)' ).length === 1 );
 118                                 ok( $list.find( '.ui-li-divider:eq(2):contains(C)' ).length === 1 );
 119                                 ok( $list.find( '.ui-li-divider:eq(3):contains(D)' ).length === 1 );
 120
 121                                 // check that adding a new item with link creates the right divider
 122                                 $list.append( '<li><a href="">e is for ethel</a></li>' );
 123                                 ok( $list.find( '.ui-li-divider:eq(4):contains(E)' ).length === 1 );
 124
 125                                 start();
 126                         }
 127                 ]);
 128         });
 129
 130         asyncTest( "Adds divider text based on custom selector.", function() {
 131                 $.testHelper.pageSequence([
 132                         function() {
 133                                 $.testHelper.openPage( '#autodividers-selector-test' );
 134                         },
 135
 136                         function() {
 137                                 var $new_page = $( '#autodividers-selector-test' );
 138                                 //ok($new_page.hasClass( 'ui-page-active' ));
 139
 140                                 // check we have the right dividers based on custom selector
 141                                 var $list = $( '#autodividers-selector-test-list2' );
 142                                 ok( $list.find( '.ui-li-divider' ).length === 4 );
 143                                 ok( $list.find( '.ui-li-divider:eq(0):contains(E)' ).length === 1 );
 144                                 ok( $list.find( '.ui-li-divider:eq(1):contains(F)' ).length === 1 );
 145                                 ok( $list.find( '.ui-li-divider:eq(2):contains(G)' ).length === 1 );
 146                                 ok( $list.find( '.ui-li-divider:eq(3):contains(H)' ).length === 1 );
 147
 148                                 // check that adding a new item creates the right divider
 149                                 $list.append( '<li><div><span class="autodividers-selector-test-selectme">' +
 150                                 'i is for impy</span></div></li>' );
 151
 152                                 ok( $list.find( '.ui-li-divider:eq(4):contains(I)' ).length === 1 );
 153
 154                                 start();
 155                         }
 156                 ]);
 157         });
 158
 159         asyncTest( "Adds divider text based on full text selected by custom selector.", function() {
 160                 $.testHelper.pageSequence([
 161                         function() {
 162                                 $.testHelper.openPage( '#autodividers-selector-test' );
 163                         },
 164
 165                         function() {
 166                                 var $new_page = $( '#autodividers-selector-test' );
 167                                 //ok($new_page.hasClass( 'ui-page-active' ));
 168
 169                                 var $list = $( '#autodividers-selector-test-list3' );
 170                                 ok( $list.find( '.ui-li-divider' ).length === 2 );
 171                                 ok( $list.find( '.ui-li-divider:eq(0):contains(eddie)' ).length === 1 );
 172                                 ok( $list.find( '.ui-li-divider:eq(1):contains(frankie)' ).length === 1 );
 173
 174                                 start();
 175                         }
 176                 ]);
 177         });
 178 })(jQuery);