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>)', 3, function ( assert ) {
  50                 var $collapsible, $content;
  51                 $collapsible = prepareCollapsible(
  52                         '<div class="mw-collapsible">' + loremIpsum + '</div>'
  53                 );
  54                 $content = $collapsible.find( '.mw-collapsible-content' );
  55
  56                 assert.equal( $content.length, 1, 'content is present' );
  57                 assert.assertTrue( $content.is( ':visible' ), 'content is visible' );
  58
  59                 $collapsible.on( 'afterCollapse.mw-collapsible', function () {
  60                         assert.assertTrue( $content.is( ':hidden' ), 'after collapsing: content is hidden' );
  61                         QUnit.start();
  62                 } );
  63
  64                 $collapsible.find( '.mw-collapsible-toggle' ).trigger( 'click' );
  65         } );
  66
  67         QUnit.test( 'basic operation when synchronous (options.instantHide)', 2, function ( assert ) {
  68                 var $collapsible, $content;
  69                 $collapsible = prepareCollapsible(
  70                         '<div class="mw-collapsible">' + loremIpsum + '</div>',
  71                         { instantHide: true }
  72                 );
  73                 $content = $collapsible.find( '.mw-collapsible-content' );
  74
  75                 assert.assertTrue( $content.is( ':visible' ), 'content is visible' );
  76
  77                 $collapsible.find( '.mw-collapsible-toggle' ).trigger( 'click' );
  78
  79                 assert.assertTrue( $content.is( ':hidden' ), 'after collapsing: content is hidden' );
  80         } );
  81
  82         QUnit.test( 'mw-made-collapsible data added', 1, function ( assert ) {
  83                 var $collapsible;
  84                 $collapsible = prepareCollapsible(
  85                         '<div>' + loremIpsum + '</div>'
  86                 );
  87                 assert.equal( $collapsible.data( 'mw-made-collapsible' ), true, 'mw-made-collapsible data present' );
  88         } );
  89
  90         QUnit.test( 'mw-collapsible added when missing', 1, function ( assert ) {
  91                 var $collapsible;
  92                 $collapsible = prepareCollapsible(
  93                         '<div>' + loremIpsum + '</div>'
  94                 );
  95                 assert.assertTrue( $collapsible.hasClass( 'mw-collapsible' ), 'mw-collapsible class present' );
  96         } );
  97
  98         QUnit.test( 'mw-collapsed added when missing', 1, function ( assert ) {
  99                 var $collapsible;
 100                 $collapsible = prepareCollapsible(
 101                         '<div>' + loremIpsum + '</div>',
 102                         { collapsed: true }
 103                 );
 104                 assert.assertTrue( $collapsible.hasClass( 'mw-collapsed' ), 'mw-collapsed class present' );
 105         } );
 106
 107         QUnit.asyncTest( 'initial collapse (mw-collapsed class)', 2, function ( assert ) {
 108                 var $collapsible, $content;
 109                 $collapsible = prepareCollapsible(
 110                         '<div class="mw-collapsible mw-collapsed">' + loremIpsum + '</div>'
 111                 );
 112                 $content = $collapsible.find( '.mw-collapsible-content' );
 113
 114                 // Synchronous - mw-collapsed should cause instantHide: true to be used on initial collapsing
 115                 assert.assertTrue( $content.is( ':hidden' ), 'content is hidden' );
 116
 117                 $collapsible.on( 'afterExpand.mw-collapsible', function () {
 118                         assert.assertTrue( $content.is( ':visible' ), 'after expanding: content is visible' );
 119                         QUnit.start();
 120                 } );
 121
 122                 $collapsible.find( '.mw-collapsible-toggle' ).trigger( 'click' );
 123         } );
 124
 125         QUnit.asyncTest( 'initial collapse (options.collapsed)', 2, function ( assert ) {
 126                 var $collapsible, $content;
 127                 $collapsible = prepareCollapsible(
 128                         '<div class="mw-collapsible">' + loremIpsum + '</div>',
 129                         { collapsed: true }
 130                 );
 131                 $content = $collapsible.find( '.mw-collapsible-content' );
 132
 133                 // Synchronous - collapsed: true should cause instantHide: true to be used on initial collapsing
 134                 assert.assertTrue( $content.is( ':hidden' ), 'content is hidden' );
 135
 136                 $collapsible.on( 'afterExpand.mw-collapsible', function () {
 137                         assert.assertTrue( $content.is( ':visible' ), 'after expanding: content is visible' );
 138                         QUnit.start();
 139                 } );
 140
 141                 $collapsible.find( '.mw-collapsible-toggle' ).trigger( 'click' );
 142         } );
 143
 144         QUnit.test( 'clicks on links inside toggler pass through (options.linksPassthru)' , 2, function ( assert ) {
 145                 var $collapsible, $content;
 146
 147                 $collapsible = prepareCollapsible(
 148                         '<div class="mw-collapsible">' +
 149                                 '<div class="mw-collapsible-toggle">' +
 150                                         'Toggle <a href="#top">toggle</a> toggle <b>toggle</b>' +
 151                                 '</div>' +
 152                                 '<div class="mw-collapsible-content">' + loremIpsum + '</div>' +
 153                         '</div>',
 154                         // Can't do asynchronous because we're testing that the event *doesn't* happen
 155                         { instantHide: true }
 156                 );
 157                 $content = $collapsible.find( '.mw-collapsible-content' );
 158
 159                 $collapsible.find( '.mw-collapsible-toggle a' ).trigger( 'click' );
 160                 assert.assertTrue( $content.is( ':visible' ), 'click event on link inside toggle passes through (content not toggled)' );
 161
 162                 $collapsible.find( '.mw-collapsible-toggle b' ).trigger( 'click' );
 163                 assert.assertTrue( $content.is( ':hidden' ), 'click event on non-link inside toggle toggles content' );
 164         } );
 165
 166         QUnit.asyncTest( 'collapse/expand text (data-collapsetext, data-expandtext)', 2, function ( assert ) {
 167                 var $collapsible, $toggleLink;
 168                 $collapsible = prepareCollapsible(
 169                         '<div class="mw-collapsible" data-collapsetext="Collapse me!" data-expandtext="Expand me!">' +
 170                                 loremIpsum +
 171                         '</div>'
 172                 );
 173                 $toggleLink = $collapsible.find( '.mw-collapsible-toggle a' );
 174
 175                 assert.equal( $toggleLink.text(), 'Collapse me!', 'data-collapsetext is respected' );
 176
 177                 $collapsible.on( 'afterCollapse.mw-collapsible', function () {
 178                         assert.equal( $toggleLink.text(), 'Expand me!', 'data-expandtext is respected' );
 179                         QUnit.start();
 180                 } );
 181
 182                 $collapsible.find( '.mw-collapsible-toggle' ).trigger( 'click' );
 183         } );
 184
 185         QUnit.asyncTest( 'collapse/expand text (options.collapseText, options.expandText)', 2, function ( assert ) {
 186                 var $collapsible, $toggleLink;
 187                 $collapsible = prepareCollapsible(
 188                         '<div class="mw-collapsible">' + loremIpsum + '</div>',
 189                         { collapseText: 'Collapse me!', expandText: 'Expand me!' }
 190                 );
 191                 $toggleLink = $collapsible.find( '.mw-collapsible-toggle a' );
 192
 193                 assert.equal( $toggleLink.text(), 'Collapse me!', 'options.collapseText is respected' );
 194
 195                 $collapsible.on( 'afterCollapse.mw-collapsible', function () {
 196                         assert.equal( $toggleLink.text(), 'Expand me!', 'options.expandText is respected' );
 197                         QUnit.start();
 198                 } );
 199
 200                 $collapsible.find( '.mw-collapsible-toggle' ).trigger( 'click' );
 201         } );
 202
 203 }( mediaWiki, jQuery ) );