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' );