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.asyncTest( 'initial collapse (mw-collapsed class)', 2, function ( assert ) {
  83                 var $collapsible, $content;
  84                 $collapsible = prepareCollapsible(
  85                         '<div class="mw-collapsible mw-collapsed">' + loremIpsum + '</div>'
  86                 );
  87                 $content = $collapsible.find( '.mw-collapsible-content' );
  88
  89                 // Synchronous - mw-collapsed should cause instantHide: true to be used on initial collapsing
  90                 assert.assertTrue( $content.is( ':hidden' ), 'content is hidden' );
  91
  92                 $collapsible.on( 'afterExpand.mw-collapsible', function () {
  93                         assert.assertTrue( $content.is( ':visible' ), 'after expanding: content is visible' );
  94                         QUnit.start();
  95                 } );
  96
  97                 $collapsible.find( '.mw-collapsible-toggle' ).trigger( 'click' );
  98         } );
  99
 100         QUnit.asyncTest( 'initial collapse (options.collapsed)', 2, function ( assert ) {
 101                 var $collapsible, $content;
 102                 $collapsible = prepareCollapsible(
 103                         '<div class="mw-collapsible">' + loremIpsum + '</div>',
 104                         { collapsed: true }
 105                 );
 106                 $content = $collapsible.find( '.mw-collapsible-content' );
 107
 108                 // Synchronous - collapsed: true should cause instantHide: true to be used on initial collapsing
 109                 assert.assertTrue( $content.is( ':hidden' ), 'content is hidden' );
 110
 111                 $collapsible.on( 'afterExpand.mw-collapsible', function () {
 112                         assert.assertTrue( $content.is( ':visible' ), 'after expanding: content is visible' );
 113                         QUnit.start();
 114                 } );
 115
 116                 $collapsible.find( '.mw-collapsible-toggle' ).trigger( 'click' );
 117         } );
 118
 119         QUnit.test( 'clicks on links inside toggler pass through (options.linksPassthru)' , 2, function ( assert ) {
 120                 var $collapsible, $content;
 121
 122                 $collapsible = prepareCollapsible(
 123                         '<div class="mw-collapsible">' +
 124                                 '<div class="mw-collapsible-toggle">' +
 125                                         'Toggle <a href="#top">toggle</a> toggle <b>toggle</b>' +
 126                                 '</div>' +
 127                                 '<div class="mw-collapsible-content">' + loremIpsum + '</div>' +
 128                         '</div>',
 129                         // Can't do asynchronous because we're testing that the event *doesn't* happen
 130                         { instantHide: true }
 131                 );
 132                 $content = $collapsible.find( '.mw-collapsible-content' );
 133
 134                 $collapsible.find( '.mw-collapsible-toggle a' ).trigger( 'click' );
 135                 assert.assertTrue( $content.is( ':visible' ), 'click event on link inside toggle passes through (content not toggled)' );
 136
 137                 $collapsible.find( '.mw-collapsible-toggle b' ).trigger( 'click' );
 138                 assert.assertTrue( $content.is( ':hidden' ), 'click event on non-link inside toggle toggles content' );
 139         } );
 140
 141         QUnit.asyncTest( 'collapse/expand text (data-collapsetext, data-expandtext)', 2, function ( assert ) {
 142                 var $collapsible, $toggleLink;
 143                 $collapsible = prepareCollapsible(
 144                         '<div class="mw-collapsible" data-collapsetext="Collapse me!" data-expandtext="Expand me!">' +
 145                                 loremIpsum +
 146                         '</div>'
 147                 );
 148                 $toggleLink = $collapsible.find( '.mw-collapsible-toggle a' );
 149
 150                 assert.equal( $toggleLink.text(), 'Collapse me!', 'data-collapsetext is respected' );
 151
 152                 $collapsible.on( 'afterCollapse.mw-collapsible', function () {
 153                         assert.equal( $toggleLink.text(), 'Expand me!', 'data-expandtext is respected' );
 154                         QUnit.start();
 155                 } );
 156
 157                 $collapsible.find( '.mw-collapsible-toggle' ).trigger( 'click' );
 158         } );
 159
 160         QUnit.asyncTest( 'collapse/expand text (options.collapseText, options.expandText)', 2, function ( assert ) {
 161                 var $collapsible, $toggleLink;
 162                 $collapsible = prepareCollapsible(
 163                         '<div class="mw-collapsible">' + loremIpsum + '</div>',
 164                         { collapseText: 'Collapse me!', expandText: 'Expand me!' }
 165                 );
 166                 $toggleLink = $collapsible.find( '.mw-collapsible-toggle a' );
 167
 168                 assert.equal( $toggleLink.text(), 'Collapse me!', 'options.collapseText is respected' );
 169
 170                 $collapsible.on( 'afterCollapse.mw-collapsible', function () {
 171                         assert.equal( $toggleLink.text(), 'Expand me!', 'options.expandText is respected' );
 172                         QUnit.start();
 173                 } );
 174
 175                 $collapsible.find( '.mw-collapsible-toggle' ).trigger( 'click' );
 176         } );
 177
 178 }( mediaWiki, jQuery ) );