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
, $content
, $toggle
;
16 $collapsible
= prepareCollapsible(
17 '<div class="mw-collapsible">' + loremIpsum
+ '</div>'
19 $content
= $collapsible
.find( '.mw-collapsible-content' );
20 $toggle
= $collapsible
.find( '.mw-collapsible-toggle' );
22 // In one full collapse-expand cycle, each event will be fired once
25 $collapsible
.on( 'beforeCollapse.mw-collapsible', function () {
26 assert
.assertTrue( $content
.is( ':visible' ), 'first beforeCollapseExpand: content is visible' );
28 $collapsible
.on( 'afterCollapse.mw-collapsible', function () {
29 assert
.assertTrue( $content
.is( ':hidden' ), 'first afterCollapseExpand: content is hidden' );
32 $collapsible
.on( 'beforeExpand.mw-collapsible', function () {
33 assert
.assertTrue( $content
.is( ':hidden' ), 'second beforeCollapseExpand: content is hidden' );
35 $collapsible
.on( 'afterExpand.mw-collapsible', function () {
36 assert
.assertTrue( $content
.is( ':visible' ), 'second afterCollapseExpand: content is visible' );
41 // ...expanding happens here
42 $toggle
.trigger( 'click' );
45 // ...collapsing happens here
46 $toggle
.trigger( 'click' );
49 QUnit
.asyncTest( 'basic operation (<div>)', 5, function ( assert
) {
50 var $collapsible
, $content
, $toggle
;
51 $collapsible
= prepareCollapsible(
52 '<div class="mw-collapsible">' + loremIpsum
+ '</div>'
54 $content
= $collapsible
.find( '.mw-collapsible-content' );
55 $toggle
= $collapsible
.find( '.mw-collapsible-toggle' );
57 assert
.equal( $content
.length
, 1, 'content is present' );
58 assert
.equal( $content
.find( $toggle
).length
, 0, 'toggle is not a descendant of content' );
60 assert
.assertTrue( $content
.is( ':visible' ), 'content is visible' );
62 $collapsible
.on( 'afterCollapse.mw-collapsible', function () {
63 assert
.assertTrue( $content
.is( ':hidden' ), 'after collapsing: content is hidden' );
65 $collapsible
.on( 'afterExpand.mw-collapsible', function () {
66 assert
.assertTrue( $content
.is( ':visible' ), 'after expanding: content is visible' );
70 $toggle
.trigger( 'click' );
73 $toggle
.trigger( 'click' );
76 QUnit
.asyncTest( 'basic operation (<table>)', 7, function ( assert
) {
77 var $collapsible
, $headerRow
, $contentRow
, $toggle
;
78 $collapsible
= prepareCollapsible(
79 '<table class="mw-collapsible">' +
80 '<tr><td>' + loremIpsum
+ '</td><td>' + loremIpsum
+ '</td></tr>' +
81 '<tr><td>' + loremIpsum
+ '</td><td>' + loremIpsum
+ '</td></tr>' +
82 '<tr><td>' + loremIpsum
+ '</td><td>' + loremIpsum
+ '</td></tr>' +
85 $headerRow
= $collapsible
.find( 'tr:first' );
86 $contentRow
= $collapsible
.find( 'tr:last' );
88 $toggle
= $headerRow
.find( 'td:last .mw-collapsible-toggle' );
89 assert
.equal( $toggle
.length
, 1, 'toggle is added to last cell of first row' );
91 assert
.assertTrue( $headerRow
.is( ':visible' ), 'headerRow is visible' );
92 assert
.assertTrue( $contentRow
.is( ':visible' ), 'contentRow is visible' );
94 $collapsible
.on( 'afterCollapse.mw-collapsible', function () {
95 assert
.assertTrue( $headerRow
.is( ':visible' ), 'after collapsing: headerRow is still visible' );
96 assert
.assertTrue( $contentRow
.is( ':hidden' ), 'after collapsing: contentRow is hidden' );
98 $collapsible
.on( 'afterExpand.mw-collapsible', function () {
99 assert
.assertTrue( $headerRow
.is( ':visible' ), 'after expanding: headerRow is still visible' );
100 assert
.assertTrue( $contentRow
.is( ':visible' ), 'after expanding: contentRow is visible' );
104 $toggle
.trigger( 'click' );
107 $toggle
.trigger( 'click' );
110 function listTest( listType
, assert
) {
111 var $collapsible
, $toggleItem
, $contentItem
, $toggle
;
112 $collapsible
= prepareCollapsible(
113 '<' + listType
+ ' class="mw-collapsible">' +
114 '<li>' + loremIpsum
+ '</li>' +
115 '<li>' + loremIpsum
+ '</li>' +
116 '</' + listType
+ '>'
118 $toggleItem
= $collapsible
.find( 'li.mw-collapsible-toggle-li:first-child' );
119 $contentItem
= $collapsible
.find( 'li:last' );
121 $toggle
= $toggleItem
.find( '.mw-collapsible-toggle' );
122 assert
.equal( $toggle
.length
, 1, 'toggle is present, added inside new zeroth list item' );
124 assert
.assertTrue( $toggleItem
.is( ':visible' ), 'toggleItem is visible' );
125 assert
.assertTrue( $contentItem
.is( ':visible' ), 'contentItem is visible' );
127 $collapsible
.on( 'afterCollapse.mw-collapsible', function () {
128 assert
.assertTrue( $toggleItem
.is( ':visible' ), 'after collapsing: toggleItem is still visible' );
129 assert
.assertTrue( $contentItem
.is( ':hidden' ), 'after collapsing: contentItem is hidden' );
131 $collapsible
.on( 'afterExpand.mw-collapsible', function () {
132 assert
.assertTrue( $toggleItem
.is( ':visible' ), 'after expanding: toggleItem is still visible' );
133 assert
.assertTrue( $contentItem
.is( ':visible' ), 'after expanding: contentItem is visible' );
137 $toggle
.trigger( 'click' );
140 $toggle
.trigger( 'click' );
143 QUnit
.asyncTest( 'basic operation (<ul>)', 7, function ( assert
) {
144 listTest( 'ul', assert
);
147 QUnit
.asyncTest( 'basic operation (<ol>)', 7, function ( assert
) {
148 listTest( 'ol', assert
);
151 QUnit
.test( 'basic operation when synchronous (options.instantHide)', 2, function ( assert
) {
152 var $collapsible
, $content
;
153 $collapsible
= prepareCollapsible(
154 '<div class="mw-collapsible">' + loremIpsum
+ '</div>',
155 { instantHide
: true }
157 $content
= $collapsible
.find( '.mw-collapsible-content' );
159 assert
.assertTrue( $content
.is( ':visible' ), 'content is visible' );
161 $collapsible
.find( '.mw-collapsible-toggle' ).trigger( 'click' );
163 assert
.assertTrue( $content
.is( ':hidden' ), 'after collapsing: content is hidden' );
166 QUnit
.test( 'mw-made-collapsible data added', 1, function ( assert
) {
168 $collapsible
= prepareCollapsible(
169 '<div>' + loremIpsum
+ '</div>'
171 assert
.equal( $collapsible
.data( 'mw-made-collapsible' ), true, 'mw-made-collapsible data present' );
174 QUnit
.test( 'mw-collapsible added when missing', 1, function ( assert
) {
176 $collapsible
= prepareCollapsible(
177 '<div>' + loremIpsum
+ '</div>'
179 assert
.assertTrue( $collapsible
.hasClass( 'mw-collapsible' ), 'mw-collapsible class present' );
182 QUnit
.test( 'mw-collapsed added when missing', 1, function ( assert
) {
184 $collapsible
= prepareCollapsible(
185 '<div>' + loremIpsum
+ '</div>',
188 assert
.assertTrue( $collapsible
.hasClass( 'mw-collapsed' ), 'mw-collapsed class present' );
191 QUnit
.asyncTest( 'initial collapse (mw-collapsed class)', 2, function ( assert
) {
192 var $collapsible
, $content
;
193 $collapsible
= prepareCollapsible(
194 '<div class="mw-collapsible mw-collapsed">' + loremIpsum
+ '</div>'
196 $content
= $collapsible
.find( '.mw-collapsible-content' );
198 // Synchronous - mw-collapsed should cause instantHide: true to be used on initial collapsing
199 assert
.assertTrue( $content
.is( ':hidden' ), 'content is hidden' );
201 $collapsible
.on( 'afterExpand.mw-collapsible', function () {
202 assert
.assertTrue( $content
.is( ':visible' ), 'after expanding: content is visible' );
206 $collapsible
.find( '.mw-collapsible-toggle' ).trigger( 'click' );
209 QUnit
.asyncTest( 'initial collapse (options.collapsed)', 2, function ( assert
) {
210 var $collapsible
, $content
;
211 $collapsible
= prepareCollapsible(
212 '<div class="mw-collapsible">' + loremIpsum
+ '</div>',
215 $content
= $collapsible
.find( '.mw-collapsible-content' );
217 // Synchronous - collapsed: true should cause instantHide: true to be used on initial collapsing
218 assert
.assertTrue( $content
.is( ':hidden' ), 'content is hidden' );
220 $collapsible
.on( 'afterExpand.mw-collapsible', function () {
221 assert
.assertTrue( $content
.is( ':visible' ), 'after expanding: content is visible' );
225 $collapsible
.find( '.mw-collapsible-toggle' ).trigger( 'click' );
228 QUnit
.test( 'clicks on links inside toggler pass through (options.linksPassthru)' , 2, function ( assert
) {
229 var $collapsible
, $content
;
231 $collapsible
= prepareCollapsible(
232 '<div class="mw-collapsible">' +
233 '<div class="mw-collapsible-toggle">' +
234 'Toggle <a href="#top">toggle</a> toggle <b>toggle</b>' +
236 '<div class="mw-collapsible-content">' + loremIpsum
+ '</div>' +
238 // Can't do asynchronous because we're testing that the event *doesn't* happen
239 { instantHide
: true }
241 $content
= $collapsible
.find( '.mw-collapsible-content' );
243 $collapsible
.find( '.mw-collapsible-toggle a' ).trigger( 'click' );
244 assert
.assertTrue( $content
.is( ':visible' ), 'click event on link inside toggle passes through (content not toggled)' );
246 $collapsible
.find( '.mw-collapsible-toggle b' ).trigger( 'click' );
247 assert
.assertTrue( $content
.is( ':hidden' ), 'click event on non-link inside toggle toggles content' );
250 QUnit
.asyncTest( 'collapse/expand text (data-collapsetext, data-expandtext)', 2, function ( assert
) {
251 var $collapsible
, $toggleLink
;
252 $collapsible
= prepareCollapsible(
253 '<div class="mw-collapsible" data-collapsetext="Collapse me!" data-expandtext="Expand me!">' +
257 $toggleLink
= $collapsible
.find( '.mw-collapsible-toggle a' );
259 assert
.equal( $toggleLink
.text(), 'Collapse me!', 'data-collapsetext is respected' );
261 $collapsible
.on( 'afterCollapse.mw-collapsible', function () {
262 assert
.equal( $toggleLink
.text(), 'Expand me!', 'data-expandtext is respected' );
266 $collapsible
.find( '.mw-collapsible-toggle' ).trigger( 'click' );
269 QUnit
.asyncTest( 'collapse/expand text (options.collapseText, options.expandText)', 2, function ( assert
) {
270 var $collapsible
, $toggleLink
;
271 $collapsible
= prepareCollapsible(
272 '<div class="mw-collapsible">' + loremIpsum
+ '</div>',
273 { collapseText
: 'Collapse me!', expandText
: 'Expand me!' }
275 $toggleLink
= $collapsible
.find( '.mw-collapsible-toggle a' );
277 assert
.equal( $toggleLink
.text(), 'Collapse me!', 'options.collapseText is respected' );
279 $collapsible
.on( 'afterCollapse.mw-collapsible', function () {
280 assert
.equal( $toggleLink
.text(), 'Expand me!', 'options.expandText is respected' );
284 $collapsible
.find( '.mw-collapsible-toggle' ).trigger( 'click' );
287 }( mediaWiki
, jQuery
) );