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         QUnit.asyncTest( 'testing hooks (triggers)', 4, function ( assert ) {
  14                 var $collapsible, $content, $toggle;
  15                 $collapsible = prepareCollapsible(
  16                         '<div class="mw-collapsible">' + loremIpsum + '</div>'
  17                 );
  18                 $content = $collapsible.find( '.mw-collapsible-content' );
  19                 $toggle = $collapsible.find( '.mw-collapsible-toggle' );
  20
  21                 // In one full collapse-expand cycle, each event will be fired once
  22
  23                 // On collapse...
  24                 $collapsible.on( 'beforeCollapse.mw-collapsible', function () {
  25                         assert.assertTrue( $content.is( ':visible' ), 'first beforeCollapseExpand: content is visible' );
  26                 } );
  27                 $collapsible.on( 'afterCollapse.mw-collapsible', function () {
  28                         assert.assertTrue( $content.is( ':hidden' ), 'first afterCollapseExpand: content is hidden' );
  29
  30                         // On expand...
  31                         $collapsible.on( 'beforeExpand.mw-collapsible', function () {
  32                                 assert.assertTrue( $content.is( ':hidden' ), 'second beforeCollapseExpand: content is hidden' );
  33                         } );
  34                         $collapsible.on( 'afterExpand.mw-collapsible', function () {
  35                                 assert.assertTrue( $content.is( ':visible' ), 'second afterCollapseExpand: content is visible' );
  36
  37                                 QUnit.start();
  38                         } );
  39
  40                         // ...expanding happens here
  41                         $toggle.trigger( 'click' );
  42                 } );
  43
  44                 // ...collapsing happens here
  45                 $toggle.trigger( 'click' );
  46         } );
  47
  48         QUnit.asyncTest( 'basic operation', 3, function ( assert ) {
  49                 var $collapsible, $content;
  50                 $collapsible = prepareCollapsible(
  51                         '<div class="mw-collapsible">' + loremIpsum + '</div>'
  52                 );
  53                 $content = $collapsible.find( '.mw-collapsible-content' );
  54
  55                 assert.equal( $content.length, 1, 'content is present' );
  56                 assert.assertTrue( $content.is( ':visible' ), 'content is visible' );
  57
  58                 $collapsible.on( 'afterCollapse.mw-collapsible', function () {
  59                         assert.assertTrue( $content.is( ':hidden' ), 'after collapsing: content is hidden' );
  60                         QUnit.start();
  61                 } );
  62
  63                 $collapsible.find( '.mw-collapsible-toggle' ).trigger( 'click' );
  64         } );
  65
  66         QUnit.test( 'basic operation with instantHide (synchronous test)', 2, function ( assert ) {
  67                 var $collapsible, $content;
  68                 $collapsible = prepareCollapsible(
  69                         '<div class="mw-collapsible">' + loremIpsum + '</div>',
  70                         { instantHide: true }
  71                 );
  72                 $content = $collapsible.find( '.mw-collapsible-content' );
  73
  74                 assert.assertTrue( $content.is( ':visible' ), 'content is visible' );
  75
  76                 $collapsible.find( '.mw-collapsible-toggle' ).trigger( 'click' );
  77
  78                 assert.assertTrue( $content.is( ':hidden' ), 'after collapsing: content is hidden' );
  79         } );
  80
  81         QUnit.asyncTest( 'initially collapsed - mw-collapsed class', 2, function ( assert ) {
  82                 var $collapsible, $content;
  83                 $collapsible = prepareCollapsible(
  84                         '<div class="mw-collapsible mw-collapsed">' + loremIpsum + '</div>'
  85                 );
  86                 $content = $collapsible.find( '.mw-collapsible-content' );
  87
  88                 // Synchronous - mw-collapsed should cause instantHide: true to be used on initial collapsing
  89                 assert.assertTrue( $content.is( ':hidden' ), 'content is hidden' );
  90
  91                 $collapsible.on( 'afterExpand.mw-collapsible', function () {
  92                         assert.assertTrue( $content.is( ':visible' ), 'after expanding: content is visible' );
  93                         QUnit.start();
  94                 } );
  95
  96                 $collapsible.find( '.mw-collapsible-toggle' ).trigger( 'click' );
  97         } );
  98
  99         QUnit.asyncTest( 'initially collapsed - options', 2, function ( assert ) {
 100                 var $collapsible, $content;
 101                 $collapsible = prepareCollapsible(
 102                         '<div class="mw-collapsible">' + loremIpsum + '</div>',
 103                         { collapsed: true }
 104                 );
 105                 $content = $collapsible.find( '.mw-collapsible-content' );
 106
 107                 // Synchronous - collapsed: true should cause instantHide: true to be used on initial collapsing
 108                 assert.assertTrue( $content.is( ':hidden' ), 'content is hidden' );
 109
 110                 $collapsible.on( 'afterExpand.mw-collapsible', function () {
 111                         assert.assertTrue( $content.is( ':visible' ), 'after expanding: content is visible' );
 112                         QUnit.start();
 113                 } );
 114
 115                 $collapsible.find( '.mw-collapsible-toggle' ).trigger( 'click' );
 116         } );
 117
 118         QUnit.test( 'premade toggler - options.linksPassthru' , 2, function ( assert ) {
 119                 var $collapsible, $content;
 120
 121                 $collapsible = prepareCollapsible(
 122                         '<div class="mw-collapsible">' +
 123                                 '<div class="mw-collapsible-toggle">' +
 124                                         'Toggle <a href="#top">toggle</a> toggle <b>toggle</b>' +
 125                                 '</div>' +
 126                                 '<div class="mw-collapsible-content">' + loremIpsum + '</div>' +
 127                         '</div>',
 128                         // Can't do asynchronous because we're testing that the event *doesn't* happen
 129                         { instantHide: true }
 130                 );
 131                 $content = $collapsible.find( '.mw-collapsible-content' );
 132
 133                 $collapsible.find( '.mw-collapsible-toggle a' ).trigger( 'click' );
 134                 assert.assertTrue( $content.is( ':visible' ), 'click event on link inside toggle passes through (content not toggled)' );
 135
 136                 $collapsible.find( '.mw-collapsible-toggle b' ).trigger( 'click' );
 137                 assert.assertTrue( $content.is( ':hidden' ), 'click event on non-link inside toggle toggles content' );
 138         } );
 139
 140 }( mediaWiki, jQuery ) );