build: Upgrade grunt-eslint from 19.0.0 to 20.0.0
[lhc/web/wiklou.git] / tests / qunit / suites / resources / jquery / jquery.makeCollapsible.test.js
index 4e77d72..0c91e43 100644 (file)
 
        QUnit.test( 'mw-made-collapsible data added', function ( assert ) {
                var $collapsible = prepareCollapsible(
-                               '<div>' + loremIpsum + '</div>'
-                       );
+                       '<div>' + loremIpsum + '</div>'
+               );
 
                assert.equal( $collapsible.data( 'mw-made-collapsible' ), true, 'mw-made-collapsible data present' );
        } );
 
        QUnit.test( 'mw-collapsible added when missing', function ( assert ) {
                var $collapsible = prepareCollapsible(
-                               '<div>' + loremIpsum + '</div>'
-                       );
+                       '<div>' + loremIpsum + '</div>'
+               );
 
                assert.assertTrue( $collapsible.hasClass( 'mw-collapsible' ), 'mw-collapsible class present' );
        } );
        QUnit.test( 'mw-collapsed added when missing', function ( assert ) {
                var $collapsible = prepareCollapsible(
                        '<div>' + loremIpsum + '</div>',
-                               { collapsed: true }
-                       );
+                       { collapsed: true }
+               );
 
                assert.assertTrue( $collapsible.hasClass( 'mw-collapsed' ), 'mw-collapsed class present' );
        } );
                $collapsible.find( '.mw-collapsible-toggle' ).trigger( 'click' );
        } );
 
-       QUnit.test( 'clicks on links inside toggler pass through (options.linksPassthru)', function ( assert ) {
+       QUnit.test( 'clicks on links inside toggler pass through', function ( assert ) {
                var $collapsible = prepareCollapsible(
                                '<div class="mw-collapsible">' +
                                        '<div class="mw-collapsible-toggle">' +
                assert.assertTrue( $content.is( ':hidden' ), 'click event on non-link inside toggle toggles content' );
        } );
 
+       QUnit.test( 'click on non-link inside toggler counts as trigger', function ( assert ) {
+               var $collapsible = prepareCollapsible(
+                               '<div class="mw-collapsible">' +
+                                       '<div class="mw-collapsible-toggle">' +
+                                               'Toggle <a>toggle</a> toggle <b>toggle</b>' +
+                                       '</div>' +
+                                       '<div class="mw-collapsible-content">' + loremIpsum + '</div>' +
+                               '</div>',
+                               { instantHide: true }
+                       ),
+                       $content = $collapsible.find( '.mw-collapsible-content' );
+
+               $collapsible.find( '.mw-collapsible-toggle a' ).trigger( 'click' );
+               assert.assertTrue( $content.is( ':hidden' ), 'click event on link (with no href) inside toggle toggles content' );
+       } );
+
        QUnit.test( 'collapse/expand text (data-collapsetext, data-expandtext)', function ( assert ) {
                var $collapsible = prepareCollapsible(
                                '<div class="mw-collapsible" data-collapsetext="Collapse me!" data-expandtext="Expand me!">' +
                                        loremIpsum +
                                '</div>'
                        ),
-                       $toggleLink = $collapsible.find( '.mw-collapsible-toggle a' );
+                       $toggleText = $collapsible.find( '.mw-collapsible-text' );
 
-               assert.equal( $toggleLink.text(), 'Collapse me!', 'data-collapsetext is respected' );
+               assert.equal( $toggleText.text(), 'Collapse me!', 'data-collapsetext is respected' );
 
                $collapsible.on( 'afterCollapse.mw-collapsible', function () {
-                       assert.equal( $toggleLink.text(), 'Expand me!', 'data-expandtext is respected' );
+                       assert.equal( $toggleText.text(), 'Expand me!', 'data-expandtext is respected' );
                } );
 
                $collapsible.find( '.mw-collapsible-toggle' ).trigger( 'click' );
                                '<div class="mw-collapsible">' + loremIpsum + '</div>',
                                { collapseText: 'Collapse me!', expandText: 'Expand me!' }
                        ),
-                       $toggleLink = $collapsible.find( '.mw-collapsible-toggle a' );
+                       $toggleText = $collapsible.find( '.mw-collapsible-text' );
 
-               assert.equal( $toggleLink.text(), 'Collapse me!', 'options.collapseText is respected' );
+               assert.equal( $toggleText.text(), 'Collapse me!', 'options.collapseText is respected' );
 
                $collapsible.on( 'afterCollapse.mw-collapsible', function () {
-                       assert.equal( $toggleLink.text(), 'Expand me!', 'options.expandText is respected' );
+                       assert.equal( $toggleText.text(), 'Expand me!', 'options.expandText is respected' );
+               } );
+
+               $collapsible.find( '.mw-collapsible-toggle' ).trigger( 'click' );
+       } );
+
+       QUnit.test( 'predefined toggle button and text (.mw-collapsible-toggle/.mw-collapsible-text)', function ( assert ) {
+               var $collapsible = prepareCollapsible(
+                               '<div class="mw-collapsible">' +
+                                       '<div class="mw-collapsible-toggle">' +
+                                               '<span>[</span><span class="mw-collapsible-text">Toggle</span><span>]</span>' +
+                                       '</div>' +
+                                       '<div class="mw-collapsible-content">' + loremIpsum + '</div>' +
+                               '</div>',
+                               { collapseText: 'Hide', expandText: 'Show' }
+                       ),
+                       $toggleText = $collapsible.find( '.mw-collapsible-text' );
+
+               assert.equal( $toggleText.text(), 'Toggle', 'predefined text remains' );
+
+               $collapsible.on( 'afterCollapse.mw-collapsible', function () {
+                       assert.equal( $toggleText.text(), 'Show', 'predefined text is toggled' );
+
+                       $collapsible.on( 'afterExpand.mw-collapsible', function () {
+                               assert.equal( $toggleText.text(), 'Hide', 'predefined text is toggled back' );
+                       } );
+
+                       $collapsible.find( '.mw-collapsible-toggle' ).trigger( 'click' );
                } );
 
                $collapsible.find( '.mw-collapsible-toggle' ).trigger( 'click' );