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
.asyncTest( 'testing hooks/triggers', 4, 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' );
39 // ...expanding happens here
40 $toggle
.trigger( 'click' );
43 // ...collapsing happens here
44 $toggle
.trigger( 'click' );
47 QUnit
.asyncTest( 'basic operation (<div>)', 5, function ( assert
) {
48 var $collapsible
= prepareCollapsible(
49 '<div class="mw-collapsible">' + loremIpsum
+ '</div>'
51 $content
= $collapsible
.find( '.mw-collapsible-content' ),
52 $toggle
= $collapsible
.find( '.mw-collapsible-toggle' );
54 assert
.equal( $content
.length
, 1, 'content is present' );
55 assert
.equal( $content
.find( $toggle
).length
, 0, 'toggle is not a descendant of content' );
57 assert
.assertTrue( $content
.is( ':visible' ), 'content is visible' );
59 $collapsible
.on( 'afterCollapse.mw-collapsible', function () {
60 assert
.assertTrue( $content
.is( ':hidden' ), 'after collapsing: content is hidden' );
62 $collapsible
.on( 'afterExpand.mw-collapsible', function () {
63 assert
.assertTrue( $content
.is( ':visible' ), 'after expanding: content is visible' );
67 $toggle
.trigger( 'click' );
70 $toggle
.trigger( 'click' );
73 QUnit
.asyncTest( 'basic operation (<table>)', 7, function ( assert
) {
74 var $collapsible
= prepareCollapsible(
75 '<table class="mw-collapsible">' +
76 '<tr><td>' + loremIpsum
+ '</td><td>' + loremIpsum
+ '</td></tr>' +
77 '<tr><td>' + loremIpsum
+ '</td><td>' + loremIpsum
+ '</td></tr>' +
78 '<tr><td>' + loremIpsum
+ '</td><td>' + loremIpsum
+ '</td></tr>' +
81 $headerRow
= $collapsible
.find( 'tr:first' ),
82 $contentRow
= $collapsible
.find( 'tr:last' ),
83 $toggle
= $headerRow
.find( 'td:last .mw-collapsible-toggle' );
85 assert
.equal( $toggle
.length
, 1, 'toggle is added to last cell of first row' );
87 assert
.assertTrue( $headerRow
.is( ':visible' ), 'headerRow is visible' );
88 assert
.assertTrue( $contentRow
.is( ':visible' ), 'contentRow is visible' );
90 $collapsible
.on( 'afterCollapse.mw-collapsible', function () {
91 assert
.assertTrue( $headerRow
.is( ':visible' ), 'after collapsing: headerRow is still visible' );
92 assert
.assertTrue( $contentRow
.is( ':hidden' ), 'after collapsing: contentRow is hidden' );
94 $collapsible
.on( 'afterExpand.mw-collapsible', function () {
95 assert
.assertTrue( $headerRow
.is( ':visible' ), 'after expanding: headerRow is still visible' );
96 assert
.assertTrue( $contentRow
.is( ':visible' ), 'after expanding: contentRow is visible' );
100 $toggle
.trigger( 'click' );
103 $toggle
.trigger( 'click' );
106 function tableWithCaptionTest( $collapsible
, assert
) {
107 var $caption
= $collapsible
.find( 'caption' ),
108 $headerRow
= $collapsible
.find( 'tr:first' ),
109 $contentRow
= $collapsible
.find( 'tr:last' ),
110 $toggle
= $caption
.find( '.mw-collapsible-toggle' );
112 assert
.equal( $toggle
.length
, 1, 'toggle is added to the end of the caption' );
114 assert
.assertTrue( $caption
.is( ':visible' ), 'caption is visible' );
115 assert
.assertTrue( $headerRow
.is( ':visible' ), 'headerRow is visible' );
116 assert
.assertTrue( $contentRow
.is( ':visible' ), 'contentRow is visible' );
118 $collapsible
.on( 'afterCollapse.mw-collapsible', function () {
119 assert
.assertTrue( $caption
.is( ':visible' ), 'after collapsing: caption is still visible' );
120 assert
.assertTrue( $headerRow
.is( ':hidden' ), 'after collapsing: headerRow is hidden' );
121 assert
.assertTrue( $contentRow
.is( ':hidden' ), 'after collapsing: contentRow is hidden' );
123 $collapsible
.on( 'afterExpand.mw-collapsible', function () {
124 assert
.assertTrue( $caption
.is( ':visible' ), 'after expanding: caption is still visible' );
125 assert
.assertTrue( $headerRow
.is( ':visible' ), 'after expanding: headerRow is visible' );
126 assert
.assertTrue( $contentRow
.is( ':visible' ), 'after expanding: contentRow is visible' );
130 $toggle
.trigger( 'click' );
133 $toggle
.trigger( 'click' );
136 QUnit
.asyncTest( 'basic operation (<table> with caption)', 10, function ( assert
) {
137 tableWithCaptionTest( prepareCollapsible(
138 '<table class="mw-collapsible">' +
139 '<caption>' + loremIpsum
+ '</caption>' +
140 '<tr><th>' + loremIpsum
+ '</th><th>' + loremIpsum
+ '</th></tr>' +
141 '<tr><td>' + loremIpsum
+ '</td><td>' + loremIpsum
+ '</td></tr>' +
142 '<tr><td>' + loremIpsum
+ '</td><td>' + loremIpsum
+ '</td></tr>' +
147 QUnit
.asyncTest( 'basic operation (<table> with caption and <thead>)', 10, function ( assert
) {
148 tableWithCaptionTest( prepareCollapsible(
149 '<table class="mw-collapsible">' +
150 '<caption>' + loremIpsum
+ '</caption>' +
151 '<thead><tr><th>' + loremIpsum
+ '</th><th>' + loremIpsum
+ '</th></tr></thead>' +
152 '<tr><td>' + loremIpsum
+ '</td><td>' + loremIpsum
+ '</td></tr>' +
153 '<tr><td>' + loremIpsum
+ '</td><td>' + loremIpsum
+ '</td></tr>' +
158 function listTest( listType
, assert
) {
159 var $collapsible
= prepareCollapsible(
160 '<' + listType
+ ' class="mw-collapsible">' +
161 '<li>' + loremIpsum
+ '</li>' +
162 '<li>' + loremIpsum
+ '</li>' +
163 '</' + listType
+ '>'
165 $toggleItem
= $collapsible
.find( 'li.mw-collapsible-toggle-li:first-child' ),
166 $contentItem
= $collapsible
.find( 'li:last' ),
167 $toggle
= $toggleItem
.find( '.mw-collapsible-toggle' );
169 assert
.equal( $toggle
.length
, 1, 'toggle is present, added inside new zeroth list item' );
171 assert
.assertTrue( $toggleItem
.is( ':visible' ), 'toggleItem is visible' );
172 assert
.assertTrue( $contentItem
.is( ':visible' ), 'contentItem is visible' );
174 $collapsible
.on( 'afterCollapse.mw-collapsible', function () {
175 assert
.assertTrue( $toggleItem
.is( ':visible' ), 'after collapsing: toggleItem is still visible' );
176 assert
.assertTrue( $contentItem
.is( ':hidden' ), 'after collapsing: contentItem is hidden' );
178 $collapsible
.on( 'afterExpand.mw-collapsible', function () {
179 assert
.assertTrue( $toggleItem
.is( ':visible' ), 'after expanding: toggleItem is still visible' );
180 assert
.assertTrue( $contentItem
.is( ':visible' ), 'after expanding: contentItem is visible' );
184 $toggle
.trigger( 'click' );
187 $toggle
.trigger( 'click' );
190 QUnit
.asyncTest( 'basic operation (<ul>)', 7, function ( assert
) {
191 listTest( 'ul', assert
);
194 QUnit
.asyncTest( 'basic operation (<ol>)', 7, function ( assert
) {
195 listTest( 'ol', assert
);
198 QUnit
.test( 'basic operation when synchronous (options.instantHide)', 2, function ( assert
) {
199 var $collapsible
= prepareCollapsible(
200 '<div class="mw-collapsible">' + loremIpsum
+ '</div>',
201 { instantHide
: true }
203 $content
= $collapsible
.find( '.mw-collapsible-content' );
205 assert
.assertTrue( $content
.is( ':visible' ), 'content is visible' );
207 $collapsible
.find( '.mw-collapsible-toggle' ).trigger( 'click' );
209 assert
.assertTrue( $content
.is( ':hidden' ), 'after collapsing: content is hidden' );
212 QUnit
.test( 'mw-made-collapsible data added', 1, function ( assert
) {
213 var $collapsible
= prepareCollapsible(
214 '<div>' + loremIpsum
+ '</div>'
217 assert
.equal( $collapsible
.data( 'mw-made-collapsible' ), true, 'mw-made-collapsible data present' );
220 QUnit
.test( 'mw-collapsible added when missing', 1, function ( assert
) {
221 var $collapsible
= prepareCollapsible(
222 '<div>' + loremIpsum
+ '</div>'
225 assert
.assertTrue( $collapsible
.hasClass( 'mw-collapsible' ), 'mw-collapsible class present' );
228 QUnit
.test( 'mw-collapsed added when missing', 1, function ( assert
) {
229 var $collapsible
= prepareCollapsible(
230 '<div>' + loremIpsum
+ '</div>',
234 assert
.assertTrue( $collapsible
.hasClass( 'mw-collapsed' ), 'mw-collapsed class present' );
237 QUnit
.asyncTest( 'initial collapse (mw-collapsed class)', 2, function ( assert
) {
238 var $collapsible
= prepareCollapsible(
239 '<div class="mw-collapsible mw-collapsed">' + loremIpsum
+ '</div>'
241 $content
= $collapsible
.find( '.mw-collapsible-content' );
243 // Synchronous - mw-collapsed should cause instantHide: true to be used on initial collapsing
244 assert
.assertTrue( $content
.is( ':hidden' ), 'content is hidden' );
246 $collapsible
.on( 'afterExpand.mw-collapsible', function () {
247 assert
.assertTrue( $content
.is( ':visible' ), 'after expanding: content is visible' );
251 $collapsible
.find( '.mw-collapsible-toggle' ).trigger( 'click' );
254 QUnit
.asyncTest( 'initial collapse (options.collapsed)', 2, function ( assert
) {
255 var $collapsible
= prepareCollapsible(
256 '<div class="mw-collapsible">' + loremIpsum
+ '</div>',
259 $content
= $collapsible
.find( '.mw-collapsible-content' );
261 // Synchronous - collapsed: true should cause instantHide: true to be used on initial collapsing
262 assert
.assertTrue( $content
.is( ':hidden' ), 'content is hidden' );
264 $collapsible
.on( 'afterExpand.mw-collapsible', function () {
265 assert
.assertTrue( $content
.is( ':visible' ), 'after expanding: content is visible' );
269 $collapsible
.find( '.mw-collapsible-toggle' ).trigger( 'click' );
272 QUnit
.test( 'clicks on links inside toggler pass through (options.linksPassthru)', 2, function ( assert
) {
273 var $collapsible
= prepareCollapsible(
274 '<div class="mw-collapsible">' +
275 '<div class="mw-collapsible-toggle">' +
276 'Toggle <a href="#top">toggle</a> toggle <b>toggle</b>' +
278 '<div class="mw-collapsible-content">' + loremIpsum
+ '</div>' +
280 // Can't do asynchronous because we're testing that the event *doesn't* happen
281 { instantHide
: true }
283 $content
= $collapsible
.find( '.mw-collapsible-content' );
285 $collapsible
.find( '.mw-collapsible-toggle a' ).trigger( 'click' );
286 assert
.assertTrue( $content
.is( ':visible' ), 'click event on link inside toggle passes through (content not toggled)' );
288 $collapsible
.find( '.mw-collapsible-toggle b' ).trigger( 'click' );
289 assert
.assertTrue( $content
.is( ':hidden' ), 'click event on non-link inside toggle toggles content' );
292 QUnit
.asyncTest( 'collapse/expand text (data-collapsetext, data-expandtext)', 2, function ( assert
) {
293 var $collapsible
= prepareCollapsible(
294 '<div class="mw-collapsible" data-collapsetext="Collapse me!" data-expandtext="Expand me!">' +
298 $toggleLink
= $collapsible
.find( '.mw-collapsible-toggle a' );
300 assert
.equal( $toggleLink
.text(), 'Collapse me!', 'data-collapsetext is respected' );
302 $collapsible
.on( 'afterCollapse.mw-collapsible', function () {
303 assert
.equal( $toggleLink
.text(), 'Expand me!', 'data-expandtext is respected' );
307 $collapsible
.find( '.mw-collapsible-toggle' ).trigger( 'click' );
310 QUnit
.asyncTest( 'collapse/expand text (options.collapseText, options.expandText)', 2, function ( assert
) {
311 var $collapsible
= prepareCollapsible(
312 '<div class="mw-collapsible">' + loremIpsum
+ '</div>',
313 { collapseText
: 'Collapse me!', expandText
: 'Expand me!' }
315 $toggleLink
= $collapsible
.find( '.mw-collapsible-toggle a' );
317 assert
.equal( $toggleLink
.text(), 'Collapse me!', 'options.collapseText is respected' );
319 $collapsible
.on( 'afterCollapse.mw-collapsible', function () {
320 assert
.equal( $toggleLink
.text(), 'Expand me!', 'options.expandText is respected' );
324 $collapsible
.find( '.mw-collapsible-toggle' ).trigger( 'click' );
327 }( mediaWiki
, jQuery
) );