2 var loremIpsum
= 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit.';
4 QUnit
.module( 'jquery.makeCollapsible', QUnit
.newMwEnvironment() );
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
);
13 // This test is first because if it fails, then almost all of the latter tests are meaningless.
14 QUnit
.test( 'testing hooks/triggers', function ( assert
) {
15 var $collapsible
= prepareCollapsible(
16 '<div class="mw-collapsible">' + loremIpsum
+ '</div>'
18 $content
= $collapsible
.find( '.mw-collapsible-content' ),
19 $toggle
= $collapsible
.find( '.mw-collapsible-toggle' );
21 // In one full collapse-expand cycle, each event will be fired once
24 $collapsible
.on( 'beforeCollapse.mw-collapsible', function () {
25 assert
.assertTrue( $content
.is( ':visible' ), 'first beforeCollapseExpand: content is visible' );
27 $collapsible
.on( 'afterCollapse.mw-collapsible', function () {
28 assert
.assertTrue( $content
.is( ':hidden' ), 'first afterCollapseExpand: content is hidden' );
31 $collapsible
.on( 'beforeExpand.mw-collapsible', function () {
32 assert
.assertTrue( $content
.is( ':hidden' ), 'second beforeCollapseExpand: content is hidden' );
34 $collapsible
.on( 'afterExpand.mw-collapsible', function () {
35 assert
.assertTrue( $content
.is( ':visible' ), 'second afterCollapseExpand: content is visible' );
38 // ...expanding happens here
39 $toggle
.trigger( 'click' );
42 // ...collapsing happens here
43 $toggle
.trigger( 'click' );
46 QUnit
.test( 'basic operation (<div>)', function ( assert
) {
47 var $collapsible
= prepareCollapsible(
48 '<div class="mw-collapsible">' + loremIpsum
+ '</div>'
50 $content
= $collapsible
.find( '.mw-collapsible-content' ),
51 $toggle
= $collapsible
.find( '.mw-collapsible-toggle' );
53 assert
.equal( $content
.length
, 1, 'content is present' );
54 assert
.equal( $content
.find( $toggle
).length
, 0, 'toggle is not a descendant of content' );
56 assert
.assertTrue( $content
.is( ':visible' ), 'content is visible' );
58 $collapsible
.on( 'afterCollapse.mw-collapsible', function () {
59 assert
.assertTrue( $content
.is( ':hidden' ), 'after collapsing: content is hidden' );
61 $collapsible
.on( 'afterExpand.mw-collapsible', function () {
62 assert
.assertTrue( $content
.is( ':visible' ), 'after expanding: content is visible' );
65 $toggle
.trigger( 'click' );
68 $toggle
.trigger( 'click' );
71 QUnit
.test( 'basic operation (<table>)', function ( assert
) {
72 var $collapsible
= prepareCollapsible(
73 '<table class="mw-collapsible">' +
74 '<tr><td>' + loremIpsum
+ '</td><td>' + loremIpsum
+ '</td></tr>' +
75 '<tr><td>' + loremIpsum
+ '</td><td>' + loremIpsum
+ '</td></tr>' +
76 '<tr><td>' + loremIpsum
+ '</td><td>' + loremIpsum
+ '</td></tr>' +
79 $headerRow
= $collapsible
.find( 'tr:first' ),
80 $contentRow
= $collapsible
.find( 'tr:last' ),
81 $toggle
= $headerRow
.find( 'td:last .mw-collapsible-toggle' );
83 assert
.equal( $toggle
.length
, 1, 'toggle is added to last cell of first row' );
85 assert
.assertTrue( $headerRow
.is( ':visible' ), 'headerRow is visible' );
86 assert
.assertTrue( $contentRow
.is( ':visible' ), 'contentRow is visible' );
88 $collapsible
.on( 'afterCollapse.mw-collapsible', function () {
89 assert
.assertTrue( $headerRow
.is( ':visible' ), 'after collapsing: headerRow is still visible' );
90 assert
.assertTrue( $contentRow
.is( ':hidden' ), 'after collapsing: contentRow is hidden' );
92 $collapsible
.on( 'afterExpand.mw-collapsible', function () {
93 assert
.assertTrue( $headerRow
.is( ':visible' ), 'after expanding: headerRow is still visible' );
94 assert
.assertTrue( $contentRow
.is( ':visible' ), 'after expanding: contentRow is visible' );
97 $toggle
.trigger( 'click' );
100 $toggle
.trigger( 'click' );
103 function tableWithCaptionTest( $collapsible
, test
, assert
) {
104 var $caption
= $collapsible
.find( 'caption' ),
105 $headerRow
= $collapsible
.find( 'tr:first' ),
106 $contentRow
= $collapsible
.find( 'tr:last' ),
107 $toggle
= $caption
.find( '.mw-collapsible-toggle' );
109 assert
.equal( $toggle
.length
, 1, 'toggle is added to the end of the caption' );
111 assert
.assertTrue( $caption
.is( ':visible' ), 'caption is visible' );
112 assert
.assertTrue( $headerRow
.is( ':visible' ), 'headerRow is visible' );
113 assert
.assertTrue( $contentRow
.is( ':visible' ), 'contentRow is visible' );
115 $collapsible
.on( 'afterCollapse.mw-collapsible', function () {
116 assert
.assertTrue( $caption
.is( ':visible' ), 'after collapsing: caption is still visible' );
117 assert
.assertTrue( $headerRow
.is( ':hidden' ), 'after collapsing: headerRow is hidden' );
118 assert
.assertTrue( $contentRow
.is( ':hidden' ), 'after collapsing: contentRow is hidden' );
120 $collapsible
.on( 'afterExpand.mw-collapsible', function () {
121 assert
.assertTrue( $caption
.is( ':visible' ), 'after expanding: caption is still visible' );
122 assert
.assertTrue( $headerRow
.is( ':visible' ), 'after expanding: headerRow is visible' );
123 assert
.assertTrue( $contentRow
.is( ':visible' ), 'after expanding: contentRow is visible' );
126 $toggle
.trigger( 'click' );
129 $toggle
.trigger( 'click' );
132 QUnit
.test( 'basic operation (<table> with caption)', function ( assert
) {
133 tableWithCaptionTest( prepareCollapsible(
134 '<table class="mw-collapsible">' +
135 '<caption>' + loremIpsum
+ '</caption>' +
136 '<tr><th>' + loremIpsum
+ '</th><th>' + loremIpsum
+ '</th></tr>' +
137 '<tr><td>' + loremIpsum
+ '</td><td>' + loremIpsum
+ '</td></tr>' +
138 '<tr><td>' + loremIpsum
+ '</td><td>' + loremIpsum
+ '</td></tr>' +
143 QUnit
.test( 'basic operation (<table> with caption and <thead>)', function ( assert
) {
144 tableWithCaptionTest( prepareCollapsible(
145 '<table class="mw-collapsible">' +
146 '<caption>' + loremIpsum
+ '</caption>' +
147 '<thead><tr><th>' + loremIpsum
+ '</th><th>' + loremIpsum
+ '</th></tr></thead>' +
148 '<tr><td>' + loremIpsum
+ '</td><td>' + loremIpsum
+ '</td></tr>' +
149 '<tr><td>' + loremIpsum
+ '</td><td>' + loremIpsum
+ '</td></tr>' +
154 function listTest( listType
, test
, assert
) {
155 var $collapsible
= prepareCollapsible(
156 '<' + listType
+ ' class="mw-collapsible">' +
157 '<li>' + loremIpsum
+ '</li>' +
158 '<li>' + loremIpsum
+ '</li>' +
159 '</' + listType
+ '>'
161 $toggleItem
= $collapsible
.find( 'li.mw-collapsible-toggle-li:first-child' ),
162 $contentItem
= $collapsible
.find( 'li:last' ),
163 $toggle
= $toggleItem
.find( '.mw-collapsible-toggle' );
165 assert
.equal( $toggle
.length
, 1, 'toggle is present, added inside new zeroth list item' );
167 assert
.assertTrue( $toggleItem
.is( ':visible' ), 'toggleItem is visible' );
168 assert
.assertTrue( $contentItem
.is( ':visible' ), 'contentItem is visible' );
170 $collapsible
.on( 'afterCollapse.mw-collapsible', function () {
171 assert
.assertTrue( $toggleItem
.is( ':visible' ), 'after collapsing: toggleItem is still visible' );
172 assert
.assertTrue( $contentItem
.is( ':hidden' ), 'after collapsing: contentItem is hidden' );
174 $collapsible
.on( 'afterExpand.mw-collapsible', function () {
175 assert
.assertTrue( $toggleItem
.is( ':visible' ), 'after expanding: toggleItem is still visible' );
176 assert
.assertTrue( $contentItem
.is( ':visible' ), 'after expanding: contentItem is visible' );
179 $toggle
.trigger( 'click' );
182 $toggle
.trigger( 'click' );
185 QUnit
.test( 'basic operation (<ul>)', function ( assert
) {
186 listTest( 'ul', this, assert
);
189 QUnit
.test( 'basic operation (<ol>)', function ( assert
) {
190 listTest( 'ol', this, assert
);
193 QUnit
.test( 'basic operation when synchronous (options.instantHide)', function ( assert
) {
194 var $collapsible
= prepareCollapsible(
195 '<div class="mw-collapsible">' + loremIpsum
+ '</div>',
196 { instantHide
: true }
198 $content
= $collapsible
.find( '.mw-collapsible-content' );
200 assert
.assertTrue( $content
.is( ':visible' ), 'content is visible' );
202 $collapsible
.find( '.mw-collapsible-toggle' ).trigger( 'click' );
204 assert
.assertTrue( $content
.is( ':hidden' ), 'after collapsing: content is hidden' );
207 QUnit
.test( 'mw-made-collapsible data added', function ( assert
) {
208 var $collapsible
= prepareCollapsible(
209 '<div>' + loremIpsum
+ '</div>'
212 assert
.equal( $collapsible
.data( 'mw-made-collapsible' ), true, 'mw-made-collapsible data present' );
215 QUnit
.test( 'mw-collapsible added when missing', function ( assert
) {
216 var $collapsible
= prepareCollapsible(
217 '<div>' + loremIpsum
+ '</div>'
220 assert
.assertTrue( $collapsible
.hasClass( 'mw-collapsible' ), 'mw-collapsible class present' );
223 QUnit
.test( 'mw-collapsed added when missing', function ( assert
) {
224 var $collapsible
= prepareCollapsible(
225 '<div>' + loremIpsum
+ '</div>',
229 assert
.assertTrue( $collapsible
.hasClass( 'mw-collapsed' ), 'mw-collapsed class present' );
232 QUnit
.test( 'initial collapse (mw-collapsed class)', function ( assert
) {
233 var $collapsible
= prepareCollapsible(
234 '<div class="mw-collapsible mw-collapsed">' + loremIpsum
+ '</div>'
236 $content
= $collapsible
.find( '.mw-collapsible-content' );
238 // Synchronous - mw-collapsed should cause instantHide: true to be used on initial collapsing
239 assert
.assertTrue( $content
.is( ':hidden' ), 'content is hidden' );
241 $collapsible
.on( 'afterExpand.mw-collapsible', function () {
242 assert
.assertTrue( $content
.is( ':visible' ), 'after expanding: content is visible' );
245 $collapsible
.find( '.mw-collapsible-toggle' ).trigger( 'click' );
248 QUnit
.test( 'initial collapse (options.collapsed)', function ( assert
) {
249 var $collapsible
= prepareCollapsible(
250 '<div class="mw-collapsible">' + loremIpsum
+ '</div>',
253 $content
= $collapsible
.find( '.mw-collapsible-content' );
255 // Synchronous - collapsed: true should cause instantHide: true to be used on initial collapsing
256 assert
.assertTrue( $content
.is( ':hidden' ), 'content is hidden' );
258 $collapsible
.on( 'afterExpand.mw-collapsible', function () {
259 assert
.assertTrue( $content
.is( ':visible' ), 'after expanding: content is visible' );
262 $collapsible
.find( '.mw-collapsible-toggle' ).trigger( 'click' );
265 QUnit
.test( 'clicks on links inside toggler pass through', function ( assert
) {
266 var $collapsible
= prepareCollapsible(
267 '<div class="mw-collapsible">' +
268 '<div class="mw-collapsible-toggle">' +
269 'Toggle <a href="#">toggle</a> toggle <b>toggle</b>' +
271 '<div class="mw-collapsible-content">' + loremIpsum
+ '</div>' +
273 // Can't do asynchronous because we're testing that the event *doesn't* happen
274 { instantHide
: true }
276 $content
= $collapsible
.find( '.mw-collapsible-content' );
278 $collapsible
.find( '.mw-collapsible-toggle a' ).trigger( 'click' );
279 assert
.assertTrue( $content
.is( ':visible' ), 'click event on link inside toggle passes through (content not toggled)' );
281 $collapsible
.find( '.mw-collapsible-toggle b' ).trigger( 'click' );
282 assert
.assertTrue( $content
.is( ':hidden' ), 'click event on non-link inside toggle toggles content' );
285 QUnit
.test( 'collapse/expand text (data-collapsetext, data-expandtext)', function ( assert
) {
286 var $collapsible
= prepareCollapsible(
287 '<div class="mw-collapsible" data-collapsetext="Collapse me!" data-expandtext="Expand me!">' +
291 $toggleText
= $collapsible
.find( '.mw-collapsible-text' );
293 assert
.equal( $toggleText
.text(), 'Collapse me!', 'data-collapsetext is respected' );
295 $collapsible
.on( 'afterCollapse.mw-collapsible', function () {
296 assert
.equal( $toggleText
.text(), 'Expand me!', 'data-expandtext is respected' );
299 $collapsible
.find( '.mw-collapsible-toggle' ).trigger( 'click' );
302 QUnit
.test( 'collapse/expand text (options.collapseText, options.expandText)', function ( assert
) {
303 var $collapsible
= prepareCollapsible(
304 '<div class="mw-collapsible">' + loremIpsum
+ '</div>',
305 { collapseText
: 'Collapse me!', expandText
: 'Expand me!' }
307 $toggleText
= $collapsible
.find( '.mw-collapsible-text' );
309 assert
.equal( $toggleText
.text(), 'Collapse me!', 'options.collapseText is respected' );
311 $collapsible
.on( 'afterCollapse.mw-collapsible', function () {
312 assert
.equal( $toggleText
.text(), 'Expand me!', 'options.expandText is respected' );
315 $collapsible
.find( '.mw-collapsible-toggle' ).trigger( 'click' );
318 QUnit
.test( 'predefined toggle button and text (.mw-collapsible-toggle/.mw-collapsible-text)', function ( assert
) {
319 var $collapsible
= prepareCollapsible(
320 '<div class="mw-collapsible">' +
321 '<div class="mw-collapsible-toggle">' +
322 '<span>[</span><span class="mw-collapsible-text">Toggle</span><span>]</span>' +
324 '<div class="mw-collapsible-content">' + loremIpsum
+ '</div>' +
326 { collapseText
: 'Hide', expandText
: 'Show' }
328 $toggleText
= $collapsible
.find( '.mw-collapsible-text' );
330 assert
.equal( $toggleText
.text(), 'Toggle', 'predefined text remains' );
332 $collapsible
.on( 'afterCollapse.mw-collapsible', function () {
333 assert
.equal( $toggleText
.text(), 'Show', 'predefined text is toggled' );
335 $collapsible
.on( 'afterExpand.mw-collapsible', function () {
336 assert
.equal( $toggleText
.text(), 'Hide', 'predefined text is toggled back' );
339 $collapsible
.find( '.mw-collapsible-toggle' ).trigger( 'click' );
342 $collapsible
.find( '.mw-collapsible-toggle' ).trigger( 'click' );
345 QUnit
.test( 'cloned collapsibles can be made collapsible again', function ( assert
) {
346 var $collapsible
= prepareCollapsible(
347 '<div class="mw-collapsible">' + loremIpsum
+ '</div>'
349 $clone
= $collapsible
.clone() // clone without data and events
350 .appendTo( '#qunit-fixture' ).makeCollapsible(),
351 $content
= $clone
.find( '.mw-collapsible-content' );
353 assert
.assertTrue( $content
.is( ':visible' ), 'content is visible' );
355 $clone
.on( 'afterCollapse.mw-collapsible', function () {
356 assert
.assertTrue( $content
.is( ':hidden' ), 'after collapsing: content is hidden' );
359 $clone
.find( '.mw-collapsible-toggle a' ).trigger( 'click' );
361 }( mediaWiki
, jQuery
) );