tests/qunit/suites/resources/jquery/jquery.makeCollapsible.test.js

   1 ( function ( mw, $ ) {
   2         var loremIpsum = 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit.';
   3
   4         QUnit.module( 'jquery.makeCollapsible', QUnit.newMwEnvironment() );
   5
   6         function prepareCollapsible( html, options ) {
   7                 return $( $.parseHTML( html ) )
   8                         .appendTo( '#qunit-fixture' )
   9                         // options might be undefined here - this is okay
  10                         .makeCollapsible( options );
  11         }
  12
  13         // This test is first because if it fails, then almost all of the latter tests are meaningless.
  14         QUnit.asyncTest( 'testing hooks/triggers', 4, function ( assert ) {
  15                 var $collapsible, $content, $toggle;
  16                 $collapsible = prepareCollapsible(
  17                         '<div class="mw-collapsible">' + loremIpsum + '</div>'
  18                 );
  19                 $content = $collapsible.find( '.mw-collapsible-content' );
  20                 $toggle = $collapsible.find( '.mw-collapsible-toggle' );
  21
  22                 // In one full collapse-expand cycle, each event will be fired once
  23
  24                 // On collapse...
  25                 $collapsible.on( 'beforeCollapse.mw-collapsible', function () {
  26                         assert.assertTrue( $content.is( ':visible' ), 'first beforeCollapseExpand: content is visible' );
  27                 } );
  28                 $collapsible.on( 'afterCollapse.mw-collapsible', function () {
  29                         assert.assertTrue( $content.is( ':hidden' ), 'first afterCollapseExpand: content is hidden' );
  30
  31                         // On expand...
  32                         $collapsible.on( 'beforeExpand.mw-collapsible', function () {
  33                                 assert.assertTrue( $content.is( ':hidden' ), 'second beforeCollapseExpand: content is hidden' );
  34                         } );
  35                         $collapsible.on( 'afterExpand.mw-collapsible', function () {
  36                                 assert.assertTrue( $content.is( ':visible' ), 'second afterCollapseExpand: content is visible' );
  37
  38                                 QUnit.start();
  39                         } );
  40
  41                         // ...expanding happens here
  42                         $toggle.trigger( 'click' );
  43                 } );
  44
  45                 // ...collapsing happens here
  46                 $toggle.trigger( 'click' );
  47         } );
  48
  49         QUnit.asyncTest( 'basic operation (<div>)', 5, function ( assert ) {
  50                 var $collapsible, $content, $toggle;
  51                 $collapsible = prepareCollapsible(
  52                         '<div class="mw-collapsible">' + loremIpsum + '</div>'
  53                 );
  54                 $content = $collapsible.find( '.mw-collapsible-content' );
  55                 $toggle = $collapsible.find( '.mw-collapsible-toggle' );
  56
  57                 assert.equal( $content.length, 1, 'content is present' );
  58                 assert.equal( $content.find( $toggle ).length, 0, 'toggle is not a descendant of content' );
  59
  60                 assert.assertTrue( $content.is( ':visible' ), 'content is visible' );
  61
  62                 $collapsible.on( 'afterCollapse.mw-collapsible', function () {
  63                         assert.assertTrue( $content.is( ':hidden' ), 'after collapsing: content is hidden' );
  64
  65                         $collapsible.on( 'afterExpand.mw-collapsible', function () {
  66                                 assert.assertTrue( $content.is( ':visible' ), 'after expanding: content is visible' );
  67                                 QUnit.start();
  68                         } );
  69
  70                         $toggle.trigger( 'click' );
  71                 } );
  72
  73                 $toggle.trigger( 'click' );
  74         } );
  75
  76         QUnit.asyncTest( 'basic operation (<table>)', 7, function ( assert ) {
  77                 var $collapsible, $headerRow, $contentRow, $toggle;
  78                 $collapsible = prepareCollapsible(
  79                         '<table class="mw-collapsible">' +
  80                                 '<tr><td>' + loremIpsum + '</td><td>' + loremIpsum + '</td></tr>' +
  81                                 '<tr><td>' + loremIpsum + '</td><td>' + loremIpsum + '</td></tr>' +
  82                                 '<tr><td>' + loremIpsum + '</td><td>' + loremIpsum + '</td></tr>' +
  83                         '</table>'
  84                 );
  85                 $headerRow = $collapsible.find( 'tr:first' );
  86                 $contentRow = $collapsible.find( 'tr:last' );
  87
  88                 $toggle = $headerRow.find( 'td:last .mw-collapsible-toggle' );
  89                 assert.equal( $toggle.length, 1, 'toggle is added to last cell of first row' );
  90
  91                 assert.assertTrue( $headerRow.is( ':visible' ), 'headerRow is visible' );
  92                 assert.assertTrue( $contentRow.is( ':visible' ), 'contentRow is visible' );
  93
  94                 $collapsible.on( 'afterCollapse.mw-collapsible', function () {
  95                         assert.assertTrue( $headerRow.is( ':visible' ), 'after collapsing: headerRow is still visible' );
  96                         assert.assertTrue( $contentRow.is( ':hidden' ), 'after collapsing: contentRow is hidden' );
  97
  98                         $collapsible.on( 'afterExpand.mw-collapsible', function () {
  99                                 assert.assertTrue( $headerRow.is( ':visible' ), 'after expanding: headerRow is still visible' );
 100                                 assert.assertTrue( $contentRow.is( ':visible' ), 'after expanding: contentRow is visible' );
 101                                 QUnit.start();
 102                         } );
 103
 104                         $toggle.trigger( 'click' );
 105                 } );
 106
 107                 $toggle.trigger( 'click' );
 108         } );
 109
 110         function listTest( listType, assert ) {
 111                 var $collapsible, $toggleItem, $contentItem, $toggle;
 112                 $collapsible = prepareCollapsible(
 113                         '<' + listType + ' class="mw-collapsible">' +
 114                                 '<li>' + loremIpsum + '</li>' +
 115                                 '<li>' + loremIpsum + '</li>' +
 116                         '</' + listType + '>'
 117                 );
 118                 $toggleItem = $collapsible.find( 'li.mw-collapsible-toggle-li:first-child' );
 119                 $contentItem = $collapsible.find( 'li:last' );
 120
 121                 $toggle = $toggleItem.find( '.mw-collapsible-toggle' );
 122                 assert.equal( $toggle.length, 1, 'toggle is present, added inside new zeroth list item' );
 123
 124                 assert.assertTrue( $toggleItem.is( ':visible' ), 'toggleItem is visible' );
 125                 assert.assertTrue( $contentItem.is( ':visible' ), 'contentItem is visible' );
 126
 127                 $collapsible.on( 'afterCollapse.mw-collapsible', function () {
 128                         assert.assertTrue( $toggleItem.is( ':visible' ), 'after collapsing: toggleItem is still visible' );
 129                         assert.assertTrue( $contentItem.is( ':hidden' ), 'after collapsing: contentItem is hidden' );
 130
 131                         $collapsible.on( 'afterExpand.mw-collapsible', function () {
 132                                 assert.assertTrue( $toggleItem.is( ':visible' ), 'after expanding: toggleItem is still visible' );
 133                                 assert.assertTrue( $contentItem.is( ':visible' ), 'after expanding: contentItem is visible' );
 134                                 QUnit.start();
 135                         } );
 136
 137                         $toggle.trigger( 'click' );
 138                 } );
 139
 140                 $toggle.trigger( 'click' );
 141         }
 142
 143         QUnit.asyncTest( 'basic operation (<ul>)', 7, function ( assert ) {
 144                 listTest( 'ul', assert );
 145         } );
 146
 147         QUnit.asyncTest( 'basic operation (<ol>)', 7, function ( assert ) {
 148                 listTest( 'ol', assert );
 149         } );
 150
 151         QUnit.test( 'basic operation when synchronous (options.instantHide)', 2, function ( assert ) {
 152                 var $collapsible, $content;
 153                 $collapsible = prepareCollapsible(
 154                         '<div class="mw-collapsible">' + loremIpsum + '</div>',
 155                         { instantHide: true }
 156                 );
 157                 $content = $collapsible.find( '.mw-collapsible-content' );
 158
 159                 assert.assertTrue( $content.is( ':visible' ), 'content is visible' );
 160
 161                 $collapsible.find( '.mw-collapsible-toggle' ).trigger( 'click' );
 162
 163                 assert.assertTrue( $content.is( ':hidden' ), 'after collapsing: content is hidden' );
 164         } );
 165
 166         QUnit.test( 'mw-made-collapsible data added', 1, function ( assert ) {
 167                 var $collapsible;
 168                 $collapsible = prepareCollapsible(
 169                         '<div>' + loremIpsum + '</div>'
 170                 );
 171                 assert.equal( $collapsible.data( 'mw-made-collapsible' ), true, 'mw-made-collapsible data present' );
 172         } );
 173
 174         QUnit.test( 'mw-collapsible added when missing', 1, function ( assert ) {
 175                 var $collapsible;
 176                 $collapsible = prepareCollapsible(
 177                         '<div>' + loremIpsum + '</div>'
 178                 );
 179                 assert.assertTrue( $collapsible.hasClass( 'mw-collapsible' ), 'mw-collapsible class present' );
 180         } );
 181
 182         QUnit.test( 'mw-collapsed added when missing', 1, function ( assert ) {
 183                 var $collapsible;
 184                 $collapsible = prepareCollapsible(
 185                         '<div>' + loremIpsum + '</div>',
 186                         { collapsed: true }
 187                 );
 188                 assert.assertTrue( $collapsible.hasClass( 'mw-collapsed' ), 'mw-collapsed class present' );
 189         } );
 190
 191         QUnit.asyncTest( 'initial collapse (mw-collapsed class)', 2, function ( assert ) {
 192                 var $collapsible, $content;
 193                 $collapsible = prepareCollapsible(
 194                         '<div class="mw-collapsible mw-collapsed">' + loremIpsum + '</div>'
 195                 );
 196                 $content = $collapsible.find( '.mw-collapsible-content' );
 197
 198                 // Synchronous - mw-collapsed should cause instantHide: true to be used on initial collapsing
 199                 assert.assertTrue( $content.is( ':hidden' ), 'content is hidden' );
 200
 201                 $collapsible.on( 'afterExpand.mw-collapsible', function () {
 202                         assert.assertTrue( $content.is( ':visible' ), 'after expanding: content is visible' );
 203                         QUnit.start();
 204                 } );
 205
 206                 $collapsible.find( '.mw-collapsible-toggle' ).trigger( 'click' );
 207         } );
 208
 209         QUnit.asyncTest( 'initial collapse (options.collapsed)', 2, function ( assert ) {
 210                 var $collapsible, $content;
 211                 $collapsible = prepareCollapsible(
 212                         '<div class="mw-collapsible">' + loremIpsum + '</div>',
 213                         { collapsed: true }
 214                 );
 215                 $content = $collapsible.find( '.mw-collapsible-content' );
 216
 217                 // Synchronous - collapsed: true should cause instantHide: true to be used on initial collapsing
 218                 assert.assertTrue( $content.is( ':hidden' ), 'content is hidden' );
 219
 220                 $collapsible.on( 'afterExpand.mw-collapsible', function () {
 221                         assert.assertTrue( $content.is( ':visible' ), 'after expanding: content is visible' );
 222                         QUnit.start();
 223                 } );
 224
 225                 $collapsible.find( '.mw-collapsible-toggle' ).trigger( 'click' );
 226         } );
 227
 228         QUnit.test( 'clicks on links inside toggler pass through (options.linksPassthru)' , 2, function ( assert ) {
 229                 var $collapsible, $content;
 230
 231                 $collapsible = prepareCollapsible(
 232                         '<div class="mw-collapsible">' +
 233                                 '<div class="mw-collapsible-toggle">' +
 234                                         'Toggle <a href="#top">toggle</a> toggle <b>toggle</b>' +
 235                                 '</div>' +
 236                                 '<div class="mw-collapsible-content">' + loremIpsum + '</div>' +
 237                         '</div>',
 238                         // Can't do asynchronous because we're testing that the event *doesn't* happen
 239                         { instantHide: true }
 240                 );
 241                 $content = $collapsible.find( '.mw-collapsible-content' );
 242
 243                 $collapsible.find( '.mw-collapsible-toggle a' ).trigger( 'click' );
 244                 assert.assertTrue( $content.is( ':visible' ), 'click event on link inside toggle passes through (content not toggled)' );
 245
 246                 $collapsible.find( '.mw-collapsible-toggle b' ).trigger( 'click' );
 247                 assert.assertTrue( $content.is( ':hidden' ), 'click event on non-link inside toggle toggles content' );
 248         } );
 249
 250         QUnit.asyncTest( 'collapse/expand text (data-collapsetext, data-expandtext)', 2, function ( assert ) {
 251                 var $collapsible, $toggleLink;
 252                 $collapsible = prepareCollapsible(
 253                         '<div class="mw-collapsible" data-collapsetext="Collapse me!" data-expandtext="Expand me!">' +
 254                                 loremIpsum +
 255                         '</div>'
 256                 );
 257                 $toggleLink = $collapsible.find( '.mw-collapsible-toggle a' );
 258
 259                 assert.equal( $toggleLink.text(), 'Collapse me!', 'data-collapsetext is respected' );
 260
 261                 $collapsible.on( 'afterCollapse.mw-collapsible', function () {
 262                         assert.equal( $toggleLink.text(), 'Expand me!', 'data-expandtext is respected' );
 263                         QUnit.start();
 264                 } );
 265
 266                 $collapsible.find( '.mw-collapsible-toggle' ).trigger( 'click' );
 267         } );
 268
 269         QUnit.asyncTest( 'collapse/expand text (options.collapseText, options.expandText)', 2, function ( assert ) {
 270                 var $collapsible, $toggleLink;
 271                 $collapsible = prepareCollapsible(
 272                         '<div class="mw-collapsible">' + loremIpsum + '</div>',
 273                         { collapseText: 'Collapse me!', expandText: 'Expand me!' }
 274                 );
 275                 $toggleLink = $collapsible.find( '.mw-collapsible-toggle a' );
 276
 277                 assert.equal( $toggleLink.text(), 'Collapse me!', 'options.collapseText is respected' );
 278
 279                 $collapsible.on( 'afterCollapse.mw-collapsible', function () {
 280                         assert.equal( $toggleLink.text(), 'Expand me!', 'options.expandText is respected' );
 281                         QUnit.start();
 282                 } );
 283
 284                 $collapsible.find( '.mw-collapsible-toggle' ).trigger( 'click' );
 285         } );
 286
 287 }( mediaWiki, jQuery ) );