// On collapse...
$collapsible.on( 'beforeCollapse.mw-collapsible', function () {
- assert.assertTrue( $content.is( ':visible' ), 'first beforeCollapseExpand: content is visible' );
+ assert.assertTrue( $content.css( 'display' ) !== 'none', 'first beforeCollapseExpand: content is visible' );
} );
$collapsible.on( 'afterCollapse.mw-collapsible', function () {
- assert.assertTrue( $content.is( ':hidden' ), 'first afterCollapseExpand: content is hidden' );
+ assert.assertTrue( $content.css( 'display' ) === 'none', 'first afterCollapseExpand: content is hidden' );
// On expand...
$collapsible.on( 'beforeExpand.mw-collapsible', function () {
- assert.assertTrue( $content.is( ':hidden' ), 'second beforeCollapseExpand: content is hidden' );
+ assert.assertTrue( $content.css( 'display' ) === 'none', 'second beforeCollapseExpand: content is hidden' );
} );
$collapsible.on( 'afterExpand.mw-collapsible', function () {
- assert.assertTrue( $content.is( ':visible' ), 'second afterCollapseExpand: content is visible' );
+ assert.assertTrue( $content.css( 'display' ) !== 'none', 'second afterCollapseExpand: content is visible' );
} );
// ...expanding happens here
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' );
+ assert.assertTrue( $content.css( 'display' ) !== 'none', 'content is visible' );
$collapsible.on( 'afterCollapse.mw-collapsible', function () {
- assert.assertTrue( $content.is( ':hidden' ), 'after collapsing: content is hidden' );
+ assert.assertTrue( $content.css( 'display' ) === 'none', 'after collapsing: content is hidden' );
$collapsible.on( 'afterExpand.mw-collapsible', function () {
- assert.assertTrue( $content.is( ':visible' ), 'after expanding: content is visible' );
+ assert.assertTrue( $content.css( 'display' ) !== 'none', 'after expanding: content is visible' );
} );
$toggle.trigger( 'click' );
'<tr><td>' + loremIpsum + '</td><td>' + loremIpsum + '</td></tr>' +
'</table>'
),
- $headerRow = $collapsible.find( 'tr:first' ),
- $contentRow = $collapsible.find( 'tr:last' ),
- $toggle = $headerRow.find( 'td:last .mw-collapsible-toggle' );
+ $headerRow = $collapsible.find( 'tr' ).first(),
+ $contentRow = $collapsible.find( 'tr' ).last(),
+ $toggle = $headerRow.find( 'td' ).last().find( '.mw-collapsible-toggle' );
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' );
+ assert.assertTrue( $headerRow.css( 'display' ) !== 'none', 'headerRow is visible' );
+ assert.assertTrue( $contentRow.css( 'display' ) !== 'none', 'contentRow is visible' );
$collapsible.on( 'afterCollapse.mw-collapsible', function () {
- assert.assertTrue( $headerRow.is( ':visible' ), 'after collapsing: headerRow is still visible' );
- assert.assertTrue( $contentRow.is( ':hidden' ), 'after collapsing: contentRow is hidden' );
+ assert.assertTrue( $headerRow.css( 'display' ) !== 'none', 'after collapsing: headerRow is still visible' );
+ assert.assertTrue( $contentRow.css( 'display' ) === 'none', 'after collapsing: contentRow is hidden' );
$collapsible.on( 'afterExpand.mw-collapsible', function () {
- assert.assertTrue( $headerRow.is( ':visible' ), 'after expanding: headerRow is still visible' );
- assert.assertTrue( $contentRow.is( ':visible' ), 'after expanding: contentRow is visible' );
+ assert.assertTrue( $headerRow.css( 'display' ) !== 'none', 'after expanding: headerRow is still visible' );
+ assert.assertTrue( $contentRow.css( 'display' ) !== 'none', 'after expanding: contentRow is visible' );
} );
$toggle.trigger( 'click' );
function tableWithCaptionTest( $collapsible, test, assert ) {
var $caption = $collapsible.find( 'caption' ),
- $headerRow = $collapsible.find( 'tr:first' ),
- $contentRow = $collapsible.find( 'tr:last' ),
+ $headerRow = $collapsible.find( 'tr' ).first(),
+ $contentRow = $collapsible.find( 'tr' ).last(),
$toggle = $caption.find( '.mw-collapsible-toggle' );
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' );
- assert.assertTrue( $contentRow.is( ':visible' ), 'contentRow is visible' );
+ assert.assertTrue( $caption.css( 'display' ) !== 'none', 'caption is visible' );
+ assert.assertTrue( $headerRow.css( 'display' ) !== 'none', 'headerRow is visible' );
+ assert.assertTrue( $contentRow.css( 'display' ) !== 'none', 'contentRow is visible' );
$collapsible.on( 'afterCollapse.mw-collapsible', function () {
- assert.assertTrue( $caption.is( ':visible' ), 'after collapsing: caption is still visible' );
- assert.assertTrue( $headerRow.is( ':hidden' ), 'after collapsing: headerRow is hidden' );
- assert.assertTrue( $contentRow.is( ':hidden' ), 'after collapsing: contentRow is hidden' );
+ assert.assertTrue( $caption.css( 'display' ) !== 'none', 'after collapsing: caption is still visible' );
+ assert.assertTrue( $headerRow.css( 'display' ) === 'none', 'after collapsing: headerRow is hidden' );
+ assert.assertTrue( $contentRow.css( 'display' ) === 'none', 'after collapsing: contentRow is hidden' );
$collapsible.on( 'afterExpand.mw-collapsible', function () {
- assert.assertTrue( $caption.is( ':visible' ), 'after expanding: caption is still visible' );
- assert.assertTrue( $headerRow.is( ':visible' ), 'after expanding: headerRow is visible' );
- assert.assertTrue( $contentRow.is( ':visible' ), 'after expanding: contentRow is visible' );
+ assert.assertTrue( $caption.css( 'display' ) !== 'none', 'after expanding: caption is still visible' );
+ assert.assertTrue( $headerRow.css( 'display' ) !== 'none', 'after expanding: headerRow is visible' );
+ assert.assertTrue( $contentRow.css( 'display' ) !== 'none', 'after expanding: contentRow is visible' );
} );
$toggle.trigger( 'click' );
'</' + listType + '>'
),
$toggleItem = $collapsible.find( 'li.mw-collapsible-toggle-li:first-child' ),
- $contentItem = $collapsible.find( 'li:last' ),
+ $contentItem = $collapsible.find( 'li' ).last(),
$toggle = $toggleItem.find( '.mw-collapsible-toggle' );
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' );
+ assert.assertTrue( $toggleItem.css( 'display' ) !== 'none', 'toggleItem is visible' );
+ assert.assertTrue( $contentItem.css( 'display' ) !== 'none', 'contentItem is visible' );
$collapsible.on( 'afterCollapse.mw-collapsible', function () {
- assert.assertTrue( $toggleItem.is( ':visible' ), 'after collapsing: toggleItem is still visible' );
- assert.assertTrue( $contentItem.is( ':hidden' ), 'after collapsing: contentItem is hidden' );
+ assert.assertTrue( $toggleItem.css( 'display' ) !== 'none', 'after collapsing: toggleItem is still visible' );
+ assert.assertTrue( $contentItem.css( 'display' ) === 'none', 'after collapsing: contentItem is hidden' );
$collapsible.on( 'afterExpand.mw-collapsible', function () {
- assert.assertTrue( $toggleItem.is( ':visible' ), 'after expanding: toggleItem is still visible' );
- assert.assertTrue( $contentItem.is( ':visible' ), 'after expanding: contentItem is visible' );
+ assert.assertTrue( $toggleItem.css( 'display' ) !== 'none', 'after expanding: toggleItem is still visible' );
+ assert.assertTrue( $contentItem.css( 'display' ) !== 'none', 'after expanding: contentItem is visible' );
} );
$toggle.trigger( 'click' );
),
$content = $collapsible.find( '.mw-collapsible-content' );
- assert.assertTrue( $content.is( ':visible' ), 'content is visible' );
+ assert.assertTrue( $content.css( 'display' ) !== 'none', 'content is visible' );
$collapsible.find( '.mw-collapsible-toggle' ).trigger( 'click' );
- assert.assertTrue( $content.is( ':hidden' ), 'after collapsing: content is hidden' );
+ assert.assertTrue( $content.css( 'display' ) === 'none', 'after collapsing: content is hidden' );
} );
QUnit.test( 'mw-made-collapsible data added', function ( assert ) {
$content = $collapsible.find( '.mw-collapsible-content' );
// Synchronous - mw-collapsed should cause instantHide: true to be used on initial collapsing
- assert.assertTrue( $content.is( ':hidden' ), 'content is hidden' );
+ assert.assertTrue( $content.css( 'display' ) === 'none', 'content is hidden' );
$collapsible.on( 'afterExpand.mw-collapsible', function () {
- assert.assertTrue( $content.is( ':visible' ), 'after expanding: content is visible' );
+ assert.assertTrue( $content.css( 'display' ) !== 'none', 'after expanding: content is visible' );
} );
$collapsible.find( '.mw-collapsible-toggle' ).trigger( 'click' );
$content = $collapsible.find( '.mw-collapsible-content' );
// Synchronous - collapsed: true should cause instantHide: true to be used on initial collapsing
- assert.assertTrue( $content.is( ':hidden' ), 'content is hidden' );
+ assert.assertTrue( $content.css( 'display' ) === 'none', 'content is hidden' );
$collapsible.on( 'afterExpand.mw-collapsible', function () {
- assert.assertTrue( $content.is( ':visible' ), 'after expanding: content is visible' );
+ assert.assertTrue( $content.css( 'display' ) !== 'none', 'after expanding: content is visible' );
} );
$collapsible.find( '.mw-collapsible-toggle' ).trigger( 'click' );
$content = $collapsible.find( '.mw-collapsible-content' );
$collapsible.find( '.mw-collapsible-toggle a' ).trigger( 'click' );
- assert.assertTrue( $content.is( ':visible' ), 'click event on link inside toggle passes through (content not toggled)' );
+ assert.assertTrue( $content.css( 'display' ) !== 'none', 'click event on link inside toggle passes through (content not toggled)' );
$collapsible.find( '.mw-collapsible-toggle b' ).trigger( 'click' );
- assert.assertTrue( $content.is( ':hidden' ), 'click event on non-link inside toggle toggles content' );
+ assert.assertTrue( $content.css( 'display' ) === 'none', 'click event on non-link inside toggle toggles content' );
} );
QUnit.test( 'click on non-link inside toggler counts as trigger', function ( assert ) {
$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' );
+ assert.assertTrue( $content.css( 'display' ) === 'none', 'click event on link (with no href) inside toggle toggles content' );
} );
QUnit.test( 'collapse/expand text (data-collapsetext, data-expandtext)', function ( assert ) {
.appendTo( '#qunit-fixture' ).makeCollapsible(),
$content = $clone.find( '.mw-collapsible-content' );
- assert.assertTrue( $content.is( ':visible' ), 'content is visible' );
+ assert.assertTrue( $content.css( 'display' ) !== 'none', 'content is visible' );
$clone.on( 'afterCollapse.mw-collapsible', function () {
- assert.assertTrue( $content.is( ':hidden' ), 'after collapsing: content is hidden' );
+ assert.assertTrue( $content.css( 'display' ) === 'none', 'after collapsing: content is hidden' );
} );
$clone.find( '.mw-collapsible-toggle a' ).trigger( 'click' );