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>)', 3, function ( assert
) {
50 var $collapsible
, $content
;
51 $collapsible
= prepareCollapsible(
52 '<div class="mw-collapsible">' + loremIpsum
+ '</div>'
54 $content
= $collapsible
.find( '.mw-collapsible-content' );
56 assert
.equal( $content
.length
, 1, 'content is present' );
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' );
64 $collapsible
.find( '.mw-collapsible-toggle' ).trigger( 'click' );
67 QUnit
.test( 'basic operation when synchronous (options.instantHide)', 2, function ( assert
) {
68 var $collapsible
, $content
;
69 $collapsible
= prepareCollapsible(
70 '<div class="mw-collapsible">' + loremIpsum
+ '</div>',
73 $content
= $collapsible
.find( '.mw-collapsible-content' );
75 assert
.assertTrue( $content
.is( ':visible' ), 'content is visible' );
77 $collapsible
.find( '.mw-collapsible-toggle' ).trigger( 'click' );
79 assert
.assertTrue( $content
.is( ':hidden' ), 'after collapsing: content is hidden' );
82 QUnit
.test( 'mw-made-collapsible data added', 1, function ( assert
) {
84 $collapsible
= prepareCollapsible(
85 '<div>' + loremIpsum
+ '</div>'
87 assert
.equal( $collapsible
.data( 'mw-made-collapsible' ), true, 'mw-made-collapsible data present' );
90 QUnit
.test( 'mw-collapsible added when missing', 1, function ( assert
) {
92 $collapsible
= prepareCollapsible(
93 '<div>' + loremIpsum
+ '</div>'
95 assert
.assertTrue( $collapsible
.hasClass( 'mw-collapsible' ), 'mw-collapsible class present' );
98 QUnit
.test( 'mw-collapsed added when missing', 1, function ( assert
) {
100 $collapsible
= prepareCollapsible(
101 '<div>' + loremIpsum
+ '</div>',
104 assert
.assertTrue( $collapsible
.hasClass( 'mw-collapsed' ), 'mw-collapsed class present' );
107 QUnit
.asyncTest( 'initial collapse (mw-collapsed class)', 2, function ( assert
) {
108 var $collapsible
, $content
;
109 $collapsible
= prepareCollapsible(
110 '<div class="mw-collapsible mw-collapsed">' + loremIpsum
+ '</div>'
112 $content
= $collapsible
.find( '.mw-collapsible-content' );
114 // Synchronous - mw-collapsed should cause instantHide: true to be used on initial collapsing
115 assert
.assertTrue( $content
.is( ':hidden' ), 'content is hidden' );
117 $collapsible
.on( 'afterExpand.mw-collapsible', function () {
118 assert
.assertTrue( $content
.is( ':visible' ), 'after expanding: content is visible' );
122 $collapsible
.find( '.mw-collapsible-toggle' ).trigger( 'click' );
125 QUnit
.asyncTest( 'initial collapse (options.collapsed)', 2, function ( assert
) {
126 var $collapsible
, $content
;
127 $collapsible
= prepareCollapsible(
128 '<div class="mw-collapsible">' + loremIpsum
+ '</div>',
131 $content
= $collapsible
.find( '.mw-collapsible-content' );
133 // Synchronous - collapsed: true should cause instantHide: true to be used on initial collapsing
134 assert
.assertTrue( $content
.is( ':hidden' ), 'content is hidden' );
136 $collapsible
.on( 'afterExpand.mw-collapsible', function () {
137 assert
.assertTrue( $content
.is( ':visible' ), 'after expanding: content is visible' );
141 $collapsible
.find( '.mw-collapsible-toggle' ).trigger( 'click' );
144 QUnit
.test( 'clicks on links inside toggler pass through (options.linksPassthru)' , 2, function ( assert
) {
145 var $collapsible
, $content
;
147 $collapsible
= prepareCollapsible(
148 '<div class="mw-collapsible">' +
149 '<div class="mw-collapsible-toggle">' +
150 'Toggle <a href="#top">toggle</a> toggle <b>toggle</b>' +
152 '<div class="mw-collapsible-content">' + loremIpsum
+ '</div>' +
154 // Can't do asynchronous because we're testing that the event *doesn't* happen
155 { instantHide
: true }
157 $content
= $collapsible
.find( '.mw-collapsible-content' );
159 $collapsible
.find( '.mw-collapsible-toggle a' ).trigger( 'click' );
160 assert
.assertTrue( $content
.is( ':visible' ), 'click event on link inside toggle passes through (content not toggled)' );
162 $collapsible
.find( '.mw-collapsible-toggle b' ).trigger( 'click' );
163 assert
.assertTrue( $content
.is( ':hidden' ), 'click event on non-link inside toggle toggles content' );
166 QUnit
.asyncTest( 'collapse/expand text (data-collapsetext, data-expandtext)', 2, function ( assert
) {
167 var $collapsible
, $toggleLink
;
168 $collapsible
= prepareCollapsible(
169 '<div class="mw-collapsible" data-collapsetext="Collapse me!" data-expandtext="Expand me!">' +
173 $toggleLink
= $collapsible
.find( '.mw-collapsible-toggle a' );
175 assert
.equal( $toggleLink
.text(), 'Collapse me!', 'data-collapsetext is respected' );
177 $collapsible
.on( 'afterCollapse.mw-collapsible', function () {
178 assert
.equal( $toggleLink
.text(), 'Expand me!', 'data-expandtext is respected' );
182 $collapsible
.find( '.mw-collapsible-toggle' ).trigger( 'click' );
185 QUnit
.asyncTest( 'collapse/expand text (options.collapseText, options.expandText)', 2, function ( assert
) {
186 var $collapsible
, $toggleLink
;
187 $collapsible
= prepareCollapsible(
188 '<div class="mw-collapsible">' + loremIpsum
+ '</div>',
189 { collapseText
: 'Collapse me!', expandText
: 'Expand me!' }
191 $toggleLink
= $collapsible
.find( '.mw-collapsible-toggle a' );
193 assert
.equal( $toggleLink
.text(), 'Collapse me!', 'options.collapseText is respected' );
195 $collapsible
.on( 'afterCollapse.mw-collapsible', function () {
196 assert
.equal( $toggleLink
.text(), 'Expand me!', 'options.expandText is respected' );
200 $collapsible
.find( '.mw-collapsible-toggle' ).trigger( 'click' );
203 }( mediaWiki
, jQuery
) );