-( function ( $ ) {
+( function () {
var loremIpsum = 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit.';
QUnit.module( 'jquery.makeCollapsible', QUnit.newMwEnvironment() );
$content = $collapsible.find( '.mw-collapsible-content' ),
$toggle = $collapsible.find( '.mw-collapsible-toggle' );
- assert.equal( $content.length, 1, 'content is present' );
- assert.equal( $content.find( $toggle ).length, 0, 'toggle is not a descendant of content' );
+ assert.strictEqual( $content.length, 1, 'content is present' );
+ assert.strictEqual( $content.find( $toggle ).length, 0, 'toggle is not a descendant of content' );
assert.assertTrue( $content.is( ':visible' ), 'content is visible' );
$contentRow = $collapsible.find( 'tr:last' ),
$toggle = $headerRow.find( 'td:last .mw-collapsible-toggle' );
- assert.equal( $toggle.length, 1, 'toggle is added to last cell of first row' );
+ assert.strictEqual( $toggle.length, 1, 'toggle is added to last cell of first row' );
assert.assertTrue( $headerRow.is( ':visible' ), 'headerRow is visible' );
assert.assertTrue( $contentRow.is( ':visible' ), 'contentRow is visible' );
$contentRow = $collapsible.find( 'tr:last' ),
$toggle = $caption.find( '.mw-collapsible-toggle' );
- assert.equal( $toggle.length, 1, 'toggle is added to the end of the caption' );
+ assert.strictEqual( $toggle.length, 1, 'toggle is added to the end of the caption' );
assert.assertTrue( $caption.is( ':visible' ), 'caption is visible' );
assert.assertTrue( $headerRow.is( ':visible' ), 'headerRow is visible' );
$contentItem = $collapsible.find( 'li:last' ),
$toggle = $toggleItem.find( '.mw-collapsible-toggle' );
- assert.equal( $toggle.length, 1, 'toggle is present, added inside new zeroth list item' );
+ assert.strictEqual( $toggle.length, 1, 'toggle is present, added inside new zeroth list item' );
assert.assertTrue( $toggleItem.is( ':visible' ), 'toggleItem is visible' );
assert.assertTrue( $contentItem.is( ':visible' ), 'contentItem is visible' );
'<div>' + loremIpsum + '</div>'
);
- assert.equal( $collapsible.data( 'mw-made-collapsible' ), true, 'mw-made-collapsible data present' );
+ assert.strictEqual( $collapsible.data( 'mw-made-collapsible' ), true, 'mw-made-collapsible data present' );
} );
QUnit.test( 'mw-collapsible added when missing', function ( assert ) {
),
$toggleText = $collapsible.find( '.mw-collapsible-text' );
- assert.equal( $toggleText.text(), 'Collapse me!', 'data-collapsetext is respected' );
+ assert.strictEqual( $toggleText.text(), 'Collapse me!', 'data-collapsetext is respected' );
$collapsible.on( 'afterCollapse.mw-collapsible', function () {
- assert.equal( $toggleText.text(), 'Expand me!', 'data-expandtext is respected' );
+ assert.strictEqual( $toggleText.text(), 'Expand me!', 'data-expandtext is respected' );
} );
$collapsible.find( '.mw-collapsible-toggle' ).trigger( 'click' );
),
$toggleText = $collapsible.find( '.mw-collapsible-text' );
- assert.equal( $toggleText.text(), 'Collapse me!', 'options.collapseText is respected' );
+ assert.strictEqual( $toggleText.text(), 'Collapse me!', 'options.collapseText is respected' );
$collapsible.on( 'afterCollapse.mw-collapsible', function () {
- assert.equal( $toggleText.text(), 'Expand me!', 'options.expandText is respected' );
+ assert.strictEqual( $toggleText.text(), 'Expand me!', 'options.expandText is respected' );
} );
$collapsible.find( '.mw-collapsible-toggle' ).trigger( 'click' );
),
$toggleText = $collapsible.find( '.mw-collapsible-text' );
- assert.equal( $toggleText.text(), 'Toggle', 'predefined text remains' );
+ assert.strictEqual( $toggleText.text(), 'Toggle', 'predefined text remains' );
$collapsible.on( 'afterCollapse.mw-collapsible', function () {
- assert.equal( $toggleText.text(), 'Show', 'predefined text is toggled' );
+ assert.strictEqual( $toggleText.text(), 'Show', 'predefined text is toggled' );
$collapsible.on( 'afterExpand.mw-collapsible', function () {
- assert.equal( $toggleText.text(), 'Hide', 'predefined text is toggled back' );
+ assert.strictEqual( $toggleText.text(), 'Hide', 'predefined text is toggled back' );
} );
$collapsible.find( '.mw-collapsible-toggle' ).trigger( 'click' );
$clone.find( '.mw-collapsible-toggle a' ).trigger( 'click' );
} );
-}( jQuery ) );
+
+ QUnit.test( 'T168689 - nested collapsible divs should keep independent state', function ( assert ) {
+ var $collapsible1 = prepareCollapsible(
+ '<div class="mw-collapsible">' + loremIpsum + '</div>'
+ ),
+ $collapsible2 = prepareCollapsible(
+ '<div class="mw-collapsible">' + loremIpsum + '</div>'
+ );
+
+ $collapsible1
+ .append( $collapsible2 )
+ .appendTo( '#qunit-fixture' ).makeCollapsible();
+
+ $collapsible1.on( 'afterCollapse.mw-collapsible', function () {
+ assert.assertTrue( $collapsible1.hasClass( 'mw-collapsed' ), 'after collapsing: parent is collapsed' );
+ assert.assertFalse( $collapsible2.hasClass( 'mw-collapsed' ), 'after collapsing: child is not collapsed' );
+ assert.assertTrue( $collapsible1.find( '> .mw-collapsible-toggle' ).hasClass( 'mw-collapsible-toggle-collapsed' ) );
+ assert.assertFalse( $collapsible2.find( '> .mw-collapsible-toggle' ).hasClass( 'mw-collapsible-toggle-collapsed' ) );
+ } ).find( '> .mw-collapsible-toggle a' ).trigger( 'click' );
+ } );
+}() );