Gitiles
Code Review Sign In
korap.ids-mannheim.de / IDS-Mannheim / revealjs / 8afae13d17239edd07e72fd2009094493371d4c3 / . / inst / reveal.js-4.2.1 / test / test.html
blob: d326f01ab75e8c5faf275d54b9d2eba1b329f2cb [file] [log] [blame]
Christophe Dervieuxe1893ae2021-10-07 17:09:02 +0200[diff] [blame]1<!doctype html>
2<html lang="en">
3
4 <head>
5 <meta charset="utf-8">
6
7 <title>reveal.js - Tests</title>
8
9 <link rel="stylesheet" href="../dist/reveal.css">
10 <link rel="stylesheet" href="../node_modules/qunit/qunit/qunit.css">
11 <script src="../node_modules/qunit/qunit/qunit.js"></script>
12 </head>
13
14 <body style="overflow: auto;">
15
16 <div id="qunit"></div>
17 <div id="qunit-fixture"></div>
18
19 <div class="reveal" style="visibility: hidden;">
20
21 <div class="slides">
22
23 <section data-visibility="hidden">
24 This should be remove by reveal.js before our tests run.
25 </section>
26
27 <section data-background-image="examples/assets/image1.png">
28 <h1>1</h1>
29 <img data-src="">
30 <video data-src=""></video>
31 <audio data-src=""></audio>
32 <aside class="notes">speaker notes 1</aside>
33 </section>
34
35 <section>
36 <section data-background="examples/assets/image2.png" data-notes="speaker notes 2">
37 <h1>2.1</h1>
38 </section>
Christophe Dervieux8afae132021-12-06 15:16:42 +0100[diff] [blame^]39 <section data-background-image="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/4gIcSUNDX1BST0ZJTEUAAQEAAAIMbGNtcwIQAABtbnRyUkdCIFhZWiAH3AABABkAAwApADlhY3NwQVBQTAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA9tYAAQAAAADTLWxjbXMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAApkZXNjAAAA/">
Christophe Dervieuxe1893ae2021-10-07 17:09:02 +0200[diff] [blame]40 <h1>2.2</h1>
41 </section>
42 <section>
43 <h1>2.3</h1>
44 </section>
45 </section>
46
47 <section id="fragment-slides">
48 <section>
49 <h1>3.1</h1>
50 <ul>
51 <li class="fragment">4.1</li>
52 <li class="fragment">4.2</li>
53 <li class="fragment">4.3</li>
54 </ul>
55 </section>
56
57 <section>
58 <h1>3.2</h1>
59 <ul>
60 <li class="fragment" data-fragment-index="0">4.1</li>
61 <li class="fragment" data-fragment-index="0">4.2</li>
62 </ul>
63 <iframe data-src="http://example.com"></iframe>
64 </section>
65
66 <section id="fragments3">
67 <h1>3.3</h1>
68 <ul>
69 <li class="fragment" data-fragment-index="1">3.3.1</li>
70 <li class="fragment" data-fragment-index="4">3.3.2</li>
71 <li class="fragment" data-fragment-index="4">3.3.3</li>
72 </ul>
73 </section>
74 </section>
75
76 <section>
77 <h1>4</h1>
78 </section>
79
80 </div>
81
82 </div>
83
84 <script src="../dist/reveal.js"></script>
85 <script>
86 window.location.hash = '';
87
88 Reveal.configure({maxScale: 1.11});
89
90 // These tests expect the DOM to contain a presentation
91 // with the following slide structure:
92 //
93 // 1
94 // 2 - Three sub-slides
95 // 3 - Three fragment elements
96 // 3 - Two fragments with same data-fragment-index
97 // 4
98 Reveal.initialize().then( function() {
99
Christophe Dervieux8afae132021-12-06 15:16:42 +0100[diff] [blame^]100 // Helper methods
101 function triggerKeyboardEvent(config) {
102 document.dispatchEvent( new KeyboardEvent( 'keydown', config ) );
103 }
104
Christophe Dervieuxe1893ae2021-10-07 17:09:02 +0200[diff] [blame]105 // ---------------------------------------------------------------
106 // DOM TESTS
107
108 QUnit.module( 'DOM' );
109
110 QUnit.test( 'Initial slides classes', function( assert ) {
111 var horizontalSlides = document.querySelectorAll( '.reveal .slides>section' )
112
113 assert.strictEqual( document.querySelectorAll( '.reveal .slides section[data-visibility="hidden"]' ).length, 0, 'no data-visibility="hidden" slides' );
114 assert.strictEqual( document.querySelectorAll( '.reveal .slides section.past' ).length, 0, 'no .past slides' );
115 assert.strictEqual( document.querySelectorAll( '.reveal .slides section.present' ).length, 1, 'one .present slide' );
116 assert.strictEqual( document.querySelectorAll( '.reveal .slides>section.future' ).length, horizontalSlides.length - 1, 'remaining horizontal slides are .future' );
117
118 assert.strictEqual( document.querySelectorAll( '.reveal .slides section.stack' ).length, 2, 'two .stacks' );
119
120 assert.ok( document.querySelectorAll( '.reveal .slides section.stack' )[0].querySelectorAll( '.future' ).length > 0, 'vertical slides are given .future' );
121 });
122
123 // ---------------------------------------------------------------
124 // API TESTS
125
126 QUnit.module( 'API' );
127
128 QUnit.test( 'Reveal.configure before initialization', function( assert ) {
129 assert.strictEqual( Reveal.getConfig().maxScale, 1.11 );
130 });
131
132 QUnit.test( 'Reveal.isReady', function( assert ) {
133 assert.strictEqual( Reveal.isReady(), true, 'returns true' );
134 });
135
136 QUnit.test( 'Reveal.isOverview', function( assert ) {
137 assert.strictEqual( Reveal.isOverview(), false, 'false by default' );
138
139 Reveal.toggleOverview();
140 assert.strictEqual( Reveal.isOverview(), true, 'true after toggling on' );
141
142 Reveal.toggleOverview();
143 assert.strictEqual( Reveal.isOverview(), false, 'false after toggling off' );
144 });
145
146 QUnit.test( 'Reveal.isPaused', function( assert ) {
147 assert.strictEqual( Reveal.isPaused(), false, 'false by default' );
148
149 Reveal.togglePause();
150 assert.strictEqual( Reveal.isPaused(), true, 'true after pausing' );
151
152 Reveal.togglePause();
153 assert.strictEqual( Reveal.isPaused(), false, 'false after resuming' );
154 });
155
156 QUnit.test( 'Reveal.isFirstSlide', function( assert ) {
157 Reveal.slide( 0, 0 );
158 assert.strictEqual( Reveal.isFirstSlide(), true, 'true after Reveal.slide( 0, 0 )' );
159
160 Reveal.slide( 1, 0 );
161 assert.strictEqual( Reveal.isFirstSlide(), false, 'false after Reveal.slide( 1, 0 )' );
162
163 Reveal.slide( 0, 0 );
164 assert.strictEqual( Reveal.isFirstSlide(), true, 'true after Reveal.slide( 0, 0 )' );
165 });
166
167 QUnit.test( 'Reveal.isFirstSlide after vertical slide', function( assert ) {
168 Reveal.slide( 1, 1 );
169 Reveal.slide( 0, 0 );
170 assert.strictEqual( Reveal.isFirstSlide(), true, 'true after Reveal.slide( 1, 1 ) and then Reveal.slide( 0, 0 )' );
171 });
172
173 QUnit.test( 'Reveal.isLastSlide', function( assert ) {
174 Reveal.slide( 0, 0 );
175 assert.strictEqual( Reveal.isLastSlide(), false, 'false after Reveal.slide( 0, 0 )' );
176
177 var lastSlideIndex = document.querySelectorAll( '.reveal .slides>section' ).length - 1;
178
179 Reveal.slide( lastSlideIndex, 0 );
180 assert.strictEqual( Reveal.isLastSlide(), true, 'true after Reveal.slide( '+ lastSlideIndex +', 0 )' );
181
182 Reveal.slide( 0, 0 );
183 assert.strictEqual( Reveal.isLastSlide(), false, 'false after Reveal.slide( 0, 0 )' );
184 });
185
186 QUnit.test( 'Reveal.isLastSlide after vertical slide', function( assert ) {
187 var lastSlideIndex = document.querySelectorAll( '.reveal .slides>section' ).length - 1;
188
189 Reveal.slide( 1, 1 );
190 Reveal.slide( lastSlideIndex );
191 assert.strictEqual( Reveal.isLastSlide(), true, 'true after Reveal.slide( 1, 1 ) and then Reveal.slide( '+ lastSlideIndex +', 0 )' );
192 });
193
194 QUnit.test( 'Reveal.getTotalSlides', function( assert ) {
195 assert.strictEqual( Reveal.getTotalSlides(), 8, 'eight slides in total' );
196 });
197
198 QUnit.test( 'Reveal.getIndices', function( assert ) {
199 var indices = Reveal.getIndices();
200
201 assert.ok( indices.hasOwnProperty( 'h' ), 'h exists' );
202 assert.ok( indices.hasOwnProperty( 'v' ), 'v exists' );
203 assert.ok( indices.hasOwnProperty( 'f' ), 'f exists' );
204
205 Reveal.slide( 1, 0 );
206 assert.strictEqual( Reveal.getIndices().h, 1, 'h 1' );
207 assert.strictEqual( Reveal.getIndices().v, 0, 'v 0' );
208
209 Reveal.slide( 1, 2 );
210 assert.strictEqual( Reveal.getIndices().h, 1, 'h 1' );
211 assert.strictEqual( Reveal.getIndices().v, 2, 'v 2' );
212
213 Reveal.slide( 0, 0 );
214 assert.strictEqual( Reveal.getIndices().h, 0, 'h 0' );
215 assert.strictEqual( Reveal.getIndices().v, 0, 'v 0' );
216 });
217
218 QUnit.test( 'Reveal.getSlide', function( assert ) {
219 assert.equal( Reveal.getSlide( 0 ), document.querySelector( '.reveal .slides>section:first-child' ), 'gets correct first slide' );
220 assert.equal( Reveal.getSlide( 1 ), document.querySelector( '.reveal .slides>section:nth-child(2)' ), 'no v index returns stack' );
221 assert.equal( Reveal.getSlide( 1, 0 ), document.querySelector( '.reveal .slides>section:nth-child(2)>section:nth-child(1)' ), 'v index 0 returns first vertical child' );
222 assert.equal( Reveal.getSlide( 1, 1 ), document.querySelector( '.reveal .slides>section:nth-child(2)>section:nth-child(2)' ), 'v index 1 returns second vertical child' );
223
224 assert.strictEqual( Reveal.getSlide( 100 ), undefined, 'undefined when out of horizontal bounds' );
225 assert.strictEqual( Reveal.getSlide( 1, 100 ), undefined, 'undefined when out of vertical bounds' );
226 });
227
228 QUnit.test( 'Reveal.getSlideBackground', function( assert ) {
229 assert.equal( Reveal.getSlideBackground( 0 ), document.querySelector( '.reveal .backgrounds>.slide-background:first-child' ), 'gets correct first background' );
230 assert.equal( Reveal.getSlideBackground( 1 ), document.querySelector( '.reveal .backgrounds>.slide-background:nth-child(2)' ), 'no v index returns stack' );
231 assert.equal( Reveal.getSlideBackground( 1, 0 ), document.querySelector( '.reveal .backgrounds>.slide-background:nth-child(2) .slide-background:nth-child(2)' ), 'v index 0 returns first vertical child' );
232 assert.equal( Reveal.getSlideBackground( 1, 1 ), document.querySelector( '.reveal .backgrounds>.slide-background:nth-child(2) .slide-background:nth-child(3)' ), 'v index 1 returns second vertical child' );
233
234 assert.strictEqual( Reveal.getSlideBackground( 100 ), undefined, 'undefined when out of horizontal bounds' );
235 assert.strictEqual( Reveal.getSlideBackground( 1, 100 ), undefined, 'undefined when out of vertical bounds' );
236 });
237
238 QUnit.test( 'Reveal.getSlideNotes', function( assert ) {
239 Reveal.slide( 0, 0 );
240 assert.ok( Reveal.getSlideNotes() === 'speaker notes 1', 'works with <aside class="notes">' );
241
242 Reveal.slide( 1, 0 );
243 assert.ok( Reveal.getSlideNotes() === 'speaker notes 2', 'works with <section data-notes="">' );
244 });
245
246 QUnit.test( 'Reveal.getPreviousSlide/getCurrentSlide', function( assert ) {
247 Reveal.slide( 0, 0 );
248 Reveal.slide( 1, 0 );
249
250 var firstSlide = document.querySelector( '.reveal .slides>section:first-child' );
251 var secondSlide = document.querySelector( '.reveal .slides>section:nth-child(2)>section' );
252
253 assert.equal( Reveal.getPreviousSlide(), firstSlide, 'previous is slide #0' );
254 assert.equal( Reveal.getCurrentSlide(), secondSlide, 'current is slide #1' );
255 });
256
257 QUnit.test( 'Reveal.getProgress', function( assert ) {
258 Reveal.slide( 0, 0 );
259 assert.strictEqual( Reveal.getProgress(), 0, 'progress is 0 on first slide' );
260
261 var lastSlideIndex = document.querySelectorAll( '.reveal .slides>section' ).length - 1;
262
263 Reveal.slide( lastSlideIndex, 0 );
264 assert.strictEqual( Reveal.getProgress(), 1, 'progress is 1 on last slide' );
265 });
266
267 QUnit.test( 'Reveal.getScale', function( assert ) {
268 assert.ok( typeof Reveal.getScale() === 'number', 'has scale' );
269 });
270
271 QUnit.test( 'Reveal.getConfig', function( assert ) {
272 assert.ok( typeof Reveal.getConfig() === 'object', 'has config' );
273 });
274
275 QUnit.test( 'Reveal.configure', function( assert ) {
276 assert.strictEqual( Reveal.getConfig().loop, false, '"loop" is false to start with' );
277
278 Reveal.configure({ loop: true });
279 assert.strictEqual( Reveal.getConfig().loop, true, '"loop" has changed to true' );
280
281 Reveal.configure({ loop: false, customTestValue: 1 });
282 assert.strictEqual( Reveal.getConfig().customTestValue, 1, 'supports custom values' );
283 });
284
285 QUnit.test( 'Reveal.availableRoutes', function( assert ) {
286 Reveal.slide( 0, 0 );
287 assert.deepEqual( Reveal.availableRoutes(), { left: false, up: false, down: false, right: true }, 'correct for first slide' );
288
289 Reveal.slide( 1, 0 );
290 assert.deepEqual( Reveal.availableRoutes(), { left: true, up: false, down: true, right: true }, 'correct for vertical slide' );
291
292 Reveal.slide( 0, 0 );
293 assert.deepEqual( Reveal.availableRoutes({ includeFragments: true }), { left: false, up: false, down: false, right: true }, 'correct with fragments included' );
294 });
295
296 QUnit.test( 'Reveal.next', function( assert ) {
297 Reveal.slide( 0, 0 );
298
299 // Step through vertical child slides
300 Reveal.next();
301 assert.deepEqual( Reveal.getIndices(), { h: 1, v: 0, f: undefined } );
302
303 Reveal.next();
304 assert.deepEqual( Reveal.getIndices(), { h: 1, v: 1, f: undefined } );
305
306 Reveal.next();
307 assert.deepEqual( Reveal.getIndices(), { h: 1, v: 2, f: undefined } );
308
309 // Step through fragments
310 Reveal.next();
311 assert.deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: -1 } );
312
313 Reveal.next();
314 assert.deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: 0 } );
315
316 Reveal.next();
317 assert.deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: 1 } );
318
319 Reveal.next();
320 assert.deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: 2 } );
321 });
322
323 QUnit.test( 'Reveal.next at end', function( assert ) {
324 Reveal.slide( 3 );
325
326 // We're at the end, this should have no effect
327 Reveal.next();
328 assert.deepEqual( Reveal.getIndices(), { h: 3, v: 0, f: undefined } );
329
330 Reveal.next();
331 assert.deepEqual( Reveal.getIndices(), { h: 3, v: 0, f: undefined } );
332 });
333
334
335 // ---------------------------------------------------------------
336 // URL TESTS
337
338 QUnit.module( 'URL' );
339
340 QUnit.test( 'Write (fragmentInURL: false)', function( assert ) {
341 Reveal.configure({ hash: true, fragmentInURL: false });
342
343 Reveal.slide( 2, 0 );
344 assert.strictEqual( window.location.hash, '#/2' );
345
346 Reveal.slide( 2, 1 );
347 assert.strictEqual( window.location.hash, '#/2/1' );
348
349 Reveal.slide( 2, 0, 1 );
350 assert.strictEqual( window.location.hash, '#/2' );
351
352 Reveal.slide( 2, 2, 0 );
353 assert.strictEqual( window.location.hash, '#/fragments3' );
354
355 Reveal.slide( 2, 2, 1 );
356 assert.strictEqual( window.location.hash, '#/fragments3' );
357 });
358
359 QUnit.test( 'Write (fragmentInURL: true)', function( assert ) {
360 Reveal.configure({ hash: true, fragmentInURL: true });
361
362 Reveal.slide( 2, 0, -1 );
363 assert.strictEqual( window.location.hash, '#/2' );
364
365 Reveal.slide( 2, 1, -1 );
366 assert.strictEqual( window.location.hash, '#/2/1' );
367
368 Reveal.slide( 2, 0, 1 );
369 assert.strictEqual( window.location.hash, '#/2/0/1' );
370
371 Reveal.slide( 2, 2, -1 );
372 assert.strictEqual( window.location.hash, '#/fragments3' );
373
374 Reveal.slide( 2, 2, 1 );
375 assert.strictEqual( window.location.hash, '#/fragments3/1' );
376 });
377
378 QUnit.test( 'Read', async function( assert ) {
379 Reveal.configure({ hash: true, fragmentInURL: true });
380
381 let test = function( hash, indices ) {
382 return new Promise( resolve => {
383 window.onhashchange = () => {
384 assert.deepEqual( Reveal.getIndices(), indices );
385 resolve();
386 };
387 window.location.hash = hash;
388 } );
389 }
390
391 await test( '#/0', { h: 0, v: 0, f: undefined } ); // horizontal
392 await test( '#/1/1', { h: 1, v: 1, f: undefined } ); // vertical
393 await test( '#/0/', { h: 0, v: 0, f: undefined } ); // trailing /
394 await test( '#/1/1/', { h: 1, v: 1, f: undefined } ); // trailing /
395 await test( '#/2/0/1', { h: 2, v: 0, f: 1 } ); // fragment
396 });
397
398 // ---------------------------------------------------------------
399 // KEYBOARD TESTS
400
401 QUnit.module( 'Keyboard' );
402
403 QUnit.test( 'Add key bindings', function( assert ) {
404 var done = assert.async( 1 );
405
406 Reveal.addKeyBinding({keyCode: 88, key: 'X', description: 'X-SHORTCUT-X'}, function() {
407 assert.ok( true, 'callback triggered' );
408 done();
409 } );
410
411 Reveal.toggleHelp( true );
412 assert.ok( /X\-SHORTCUT\-X/.test( document.body.innerHTML ), 'binding is added to help overlay' );
413 Reveal.toggleHelp( false );
414
Christophe Dervieux8afae132021-12-06 15:16:42 +0100[diff] [blame^]415 triggerKeyboardEvent({ keyCode: 88 });
Christophe Dervieuxe1893ae2021-10-07 17:09:02 +0200[diff] [blame]416
417 Reveal.removeKeyBinding( 88 );
418
419 // should do nothing
Christophe Dervieux8afae132021-12-06 15:16:42 +0100[diff] [blame^]420 triggerKeyboardEvent({ keyCode: 88 });
421 });
422
423 QUnit.test( 'Navigation bindings', function( assert ) {
424 Reveal.slide( 0 );
425
426 // right arrow
427 triggerKeyboardEvent({ keyCode: 39 });
428 assert.strictEqual( Reveal.getIndices().h, 1 );
429
430 // down arrow + shift
431 triggerKeyboardEvent({ keyCode: 40, shiftKey: true });
432 assert.strictEqual( Reveal.getIndices().v, 2, 'shift + down arrow goes to last vertical slide' );
433
434 // up arrow
435 triggerKeyboardEvent({ keyCode: 38 });
436 assert.strictEqual( Reveal.getIndices().v, 1 );
437
438 // right arrow + shift
439 triggerKeyboardEvent({ keyCode: 39, shiftKey: true });
440 assert.ok( Reveal.isLastSlide(), 'shift + right arrow goes to last horizontal slide' );
441
442
443 // right arrow on slide with fragments
444 Reveal.slide( 2, 0, -1 );
445 triggerKeyboardEvent({ keyCode: 39 });
446 assert.deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: 0 }, 'right arrow shows fragment' );
447
448 triggerKeyboardEvent({ keyCode: 39, altKey: true });
449 assert.strictEqual( Reveal.getIndices().h, 3, 'right arrow skips fragments when alt key is pressed' );
Christophe Dervieuxe1893ae2021-10-07 17:09:02 +0200[diff] [blame]450 });
451
452 // ---------------------------------------------------------------
453 // FRAGMENT TESTS
454
455 QUnit.module( 'Fragments' );
456
457 QUnit.test( 'Sliding to fragments', function( assert ) {
458 Reveal.slide( 2, 0, -1 );
459 assert.deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: -1 }, 'Reveal.slide( 2, 0, -1 )' );
460
461 Reveal.slide( 2, 0, 0 );
462 assert.deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: 0 }, 'Reveal.slide( 2, 0, 0 )' );
463
464 Reveal.slide( 2, 0, 2 );
465 assert.deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: 2 }, 'Reveal.slide( 2, 0, 2 )' );
466
467 Reveal.slide( 2, 0, 1 );
468 assert.deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: 1 }, 'Reveal.slide( 2, 0, 1 )' );
469 });
470
471 QUnit.test( 'data-fragment is set on slide <section>', function( assert ) {
472 Reveal.slide( 2, 0, -1 );
473 assert.deepEqual( Reveal.getCurrentSlide().getAttribute( 'data-fragment' ), '-1' );
474
475 Reveal.slide( 2, 0, 2 );
476 assert.deepEqual( Reveal.getCurrentSlide().getAttribute( 'data-fragment' ), '2' );
477
478 Reveal.slide( 2, 0, 0 );
479 assert.deepEqual( Reveal.getCurrentSlide().getAttribute( 'data-fragment' ), '0' );
480
481 var fragmentSlide = Reveal.getCurrentSlide();
482
483 Reveal.slide( 3, 0 );
484 assert.deepEqual( fragmentSlide.getAttribute( 'data-fragment' ), '0', 'data-fragment persists when jumping to another slide' );
485 });
486
487 QUnit.test( 'Hiding all fragments', function( assert ) {
488 var fragmentSlide = document.querySelector( '#fragment-slides>section:nth-child(1)' );
489
490 Reveal.slide( 2, 0, 0 );
491 assert.strictEqual( fragmentSlide.querySelectorAll( '.fragment.visible' ).length, 1, 'one fragment visible when index is 0' );
492
493 Reveal.slide( 2, 0, -1 );
494 assert.strictEqual( fragmentSlide.querySelectorAll( '.fragment.visible' ).length, 0, 'no fragments visible when index is -1' );
495 });
496
497 QUnit.test( 'Current fragment', function( assert ) {
498 var fragmentSlide = document.querySelector( '#fragment-slides>section:nth-child(1)' );
499 var lastFragmentIndex = [].slice.call( fragmentSlide.querySelectorAll( '.fragment' ) ).pop().getAttribute( 'data-fragment-index' );
500
501 Reveal.slide( 2, 0 );
502 assert.strictEqual( fragmentSlide.querySelectorAll( '.fragment.current-fragment' ).length, 0, 'no current fragment at index -1' );
503
504 Reveal.slide( 2, 0, 0 );
505 assert.strictEqual( fragmentSlide.querySelectorAll( '.fragment.current-fragment' ).length, 1, 'one current fragment at index 0' );
506
507 Reveal.slide( 1, 0, 0 );
508 assert.strictEqual( fragmentSlide.querySelectorAll( '.fragment.current-fragment' ).length, 0, 'no current fragment when navigating to previous slide' );
509
510 Reveal.slide( 3, 0, 0 );
511 assert.strictEqual( fragmentSlide.querySelectorAll( '.fragment.current-fragment' ).length, 0, 'no current fragment when navigating to next slide' );
512
513 Reveal.slide( 2, 1, -1 );
514 Reveal.prev();
515 assert.strictEqual( fragmentSlide.querySelector( '.fragment.current-fragment' ).getAttribute( 'data-fragment-index' ), lastFragmentIndex, 'last fragment is current fragment when returning from future slide' );
516 });
517
518 QUnit.test( 'Stepping through fragments', function( assert ) {
519 Reveal.slide( 2, 0, -1 );
520
521 // forwards:
522
523 Reveal.next();
524 assert.deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: 0 }, 'next() goes to next fragment' );
525
526 Reveal.right();
527 assert.deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: 1 }, 'right() goes to next fragment' );
528
529 Reveal.down();
530 assert.deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: 2 }, 'down() goes to next fragment' );
531
532 Reveal.down(); // moves to f #3
533
534 // backwards:
535
536 Reveal.prev();
537 assert.deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: 2 }, 'prev() goes to prev fragment' );
538
539 Reveal.left();
540 assert.deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: 1 }, 'left() goes to prev fragment' );
541
542 Reveal.up();
543 assert.deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: 0 }, 'up() goes to prev fragment' );
544 });
545
546 QUnit.test( 'Stepping past fragments', function( assert ) {
547 var fragmentSlide = document.querySelector( '#fragment-slides>section:nth-child(1)' );
548
549 Reveal.slide( 0, 0, 0 );
550 assert.equal( fragmentSlide.querySelectorAll( '.fragment.visible' ).length, 0, 'no fragments visible when on previous slide' );
551
552 Reveal.slide( 3, 0, 0 );
553 assert.equal( fragmentSlide.querySelectorAll( '.fragment.visible' ).length, 3, 'all fragments visible when on future slide' );
554 });
555
556 QUnit.test( 'Fragment indices', function( assert ) {
557 var fragmentSlide = document.querySelector( '#fragment-slides>section:nth-child(2)' );
558
559 Reveal.slide( 3, 0, 0 );
560 assert.equal( fragmentSlide.querySelectorAll( '.fragment.visible' ).length, 2, 'both fragments of same index are shown' );
561
562 // This slide has three fragments, first one is index 0, second and third have index 1
563 Reveal.slide( 2, 2, 0 );
564 assert.equal( Reveal.getIndices().f, 0, 'returns correct index for first fragment' );
565
566 Reveal.slide( 2, 2, 1 );
567 assert.equal( Reveal.getIndices().f, 1, 'returns correct index for two fragments with same index' );
568 });
569
570 QUnit.test( 'Index generation', function( assert ) {
571 var fragmentSlide = document.querySelector( '#fragment-slides>section:nth-child(1)' );
572
573 // These have no indices defined to start with
574 assert.equal( fragmentSlide.querySelectorAll( '.fragment' )[0].getAttribute( 'data-fragment-index' ), '0' );
575 assert.equal( fragmentSlide.querySelectorAll( '.fragment' )[1].getAttribute( 'data-fragment-index' ), '1' );
576 assert.equal( fragmentSlide.querySelectorAll( '.fragment' )[2].getAttribute( 'data-fragment-index' ), '2' );
577 });
578
579 QUnit.test( 'Index normalization', function( assert ) {
580 var fragmentSlide = document.querySelector( '#fragment-slides>section:nth-child(3)' );
581
582 // These start out as 1-4-4 and should normalize to 0-1-1
583 assert.equal( fragmentSlide.querySelectorAll( '.fragment' )[0].getAttribute( 'data-fragment-index' ), '0' );
584 assert.equal( fragmentSlide.querySelectorAll( '.fragment' )[1].getAttribute( 'data-fragment-index' ), '1' );
585 assert.equal( fragmentSlide.querySelectorAll( '.fragment' )[2].getAttribute( 'data-fragment-index' ), '1' );
586 });
587
588 QUnit.test( 'fragmentshown event', function( assert ) {
589 assert.expect( 2 );
590 var done = assert.async( 2 );
591
592 var _onEvent = function( event ) {
593 assert.ok( true, 'event fired' );
594 done();
595 }
596
597 Reveal.on( 'fragmentshown', _onEvent );
598
599 Reveal.slide( 2, 0 );
600 Reveal.slide( 2, 0 ); // should do nothing
601 Reveal.slide( 2, 0, 0 ); // should do nothing
602 Reveal.next();
603 Reveal.next();
604 Reveal.prev(); // shouldn't fire fragmentshown
605
606 Reveal.off( 'fragmentshown', _onEvent );
607 });
608
609 QUnit.test( 'fragmenthidden event', function( assert ) {
610 assert.expect( 2 );
611 var done = assert.async( 2 );
612
613 var _onEvent = function( event ) {
614 assert.ok( true, 'event fired' );
615 done();
616 }
617
618 Reveal.on( 'fragmenthidden', _onEvent );
619
620 Reveal.slide( 2, 0, 2 );
621 Reveal.slide( 2, 0, 2 ); // should do nothing
622 Reveal.prev();
623 Reveal.prev();
624 Reveal.next(); // shouldn't fire fragmenthidden
625
626 Reveal.off( 'fragmenthidden', _onEvent );
627 });
628
629
630 // ---------------------------------------------------------------
631 // AUTO-SLIDE TESTS
632
633 QUnit.module( 'Auto Sliding' );
634
635 QUnit.test( 'Reveal.isAutoSliding', function( assert ) {
636 assert.strictEqual( Reveal.isAutoSliding(), false, 'false by default' );
637
638 Reveal.configure({ autoSlide: 10000 });
639 assert.strictEqual( Reveal.isAutoSliding(), true, 'true after starting' );
640
641 Reveal.configure({ autoSlide: 0 });
642 assert.strictEqual( Reveal.isAutoSliding(), false, 'false after setting to 0' );
643 });
644
645 QUnit.test( 'Reveal.toggleAutoSlide', function( assert ) {
646 Reveal.configure({ autoSlide: 10000 });
647
648 Reveal.toggleAutoSlide();
649 assert.strictEqual( Reveal.isAutoSliding(), false, 'false after first toggle' );
650 Reveal.toggleAutoSlide();
651 assert.strictEqual( Reveal.isAutoSliding(), true, 'true after second toggle' );
652
653 Reveal.configure({ autoSlide: 0 });
654 });
655
656 QUnit.test( 'autoslidepaused', function( assert ) {
657 assert.expect( 1 );
658 var done = assert.async();
659
660 var _onEvent = function( event ) {
661 assert.ok( true, 'event fired' );
662 done();
663 }
664
665 Reveal.on( 'autoslidepaused', _onEvent );
666 Reveal.configure({ autoSlide: 10000 });
667 Reveal.toggleAutoSlide();
668
669 // cleanup
670 Reveal.configure({ autoSlide: 0 });
671 Reveal.off( 'autoslidepaused', _onEvent );
672 });
673
674 QUnit.test( 'autoslideresumed', function( assert ) {
675 assert.expect( 1 );
676 var done = assert.async();
677
678 var _onEvent = function( event ) {
679 assert.ok( true, 'event fired' );
680 done();
681 }
682
683 Reveal.on( 'autoslideresumed', _onEvent );
684 Reveal.configure({ autoSlide: 10000 });
685 Reveal.toggleAutoSlide();
686 Reveal.toggleAutoSlide();
687
688 // cleanup
689 Reveal.configure({ autoSlide: 0 });
690 Reveal.off( 'autoslideresumed', _onEvent );
691 });
692
693
694 // ---------------------------------------------------------------
695 // CONFIGURATION VALUES
696
697 QUnit.module( 'Configuration' );
698
699 QUnit.test( 'Controls', function( assert ) {
700 var controlsElement = document.querySelector( '.reveal>.controls' );
701
702 Reveal.configure({ controls: false });
703 assert.equal( controlsElement.style.display, 'none', 'controls are hidden' );
704
705 Reveal.configure({ controls: true });
706 assert.equal( controlsElement.style.display, 'block', 'controls are visible' );
707 });
708
709 QUnit.test( 'Progress', function( assert ) {
710 var progressElement = document.querySelector( '.reveal>.progress' );
711
712 Reveal.configure({ progress: false });
713 assert.equal( progressElement.style.display, 'none', 'progress are hidden' );
714
715 Reveal.configure({ progress: true });
716 assert.equal( progressElement.style.display, 'block', 'progress are visible' );
717 });
718
719 QUnit.test( 'Loop', function( assert ) {
720 Reveal.configure({ loop: true });
721
722 Reveal.slide( 0, 0 );
723
724 Reveal.left();
725 assert.notEqual( Reveal.getIndices().h, 0, 'looped from start to end' );
726
727 Reveal.right();
728 assert.equal( Reveal.getIndices().h, 0, 'looped from end to start' );
729
Christophe Dervieux8afae132021-12-06 15:16:42 +0100[diff] [blame^]730 Reveal.configure({ navigationMode: 'linear' });
731 Reveal.slide( 0, 0 );
732
733 Reveal.prev();
734 assert.notEqual( Reveal.getIndices().h, 0, 'looped from start to end in linear mode' );
735
736 Reveal.next();
737 assert.equal( Reveal.getIndices().h, 0, 'looped from end to start in linear mode' );
738
739 Reveal.configure({ loop: false, navigationMode: 'default' });
Christophe Dervieuxe1893ae2021-10-07 17:09:02 +0200[diff] [blame]740 });
741
742
743 // ---------------------------------------------------------------
744 // LAZY-LOADING TESTS
745
746 QUnit.module( 'Lazy-Loading' );
747
748 QUnit.test( 'img with data-src', function( assert ) {
749 assert.strictEqual( document.querySelectorAll( '.reveal section img[src]' ).length, 1, 'Image source has been set' );
750 });
751
752 QUnit.test( 'video with data-src', function( assert ) {
753 assert.strictEqual( document.querySelectorAll( '.reveal section video[src]' ).length, 1, 'Video source has been set' );
754 });
755
756 QUnit.test( 'audio with data-src', function( assert ) {
757 assert.strictEqual( document.querySelectorAll( '.reveal section audio[src]' ).length, 1, 'Audio source has been set' );
758 });
759
760 QUnit.test( 'iframe with data-src', function( assert ) {
761 Reveal.slide( 0, 0 );
762 assert.strictEqual( document.querySelectorAll( '.reveal section iframe[src]' ).length, 0, 'Iframe source is not set' );
763 Reveal.slide( 2, 1 );
764 assert.strictEqual( document.querySelectorAll( '.reveal section iframe[src]' ).length, 1, 'Iframe source is set' );
765 Reveal.slide( 2, 2 );
766 assert.strictEqual( document.querySelectorAll( '.reveal section iframe[src]' ).length, 0, 'Iframe source is not set' );
767 });
768
769 QUnit.test( 'background images', function( assert ) {
770 var imageSource1 = Reveal.getSlide( 0 ).getAttribute( 'data-background-image' );
771 var imageSource2 = Reveal.getSlide( 1, 0 ).getAttribute( 'data-background' );
Christophe Dervieux8afae132021-12-06 15:16:42 +0100[diff] [blame^]772 var imageSource3 = Reveal.getSlide( 1, 1 ).getAttribute( 'data-background-image' );
Christophe Dervieuxe1893ae2021-10-07 17:09:02 +0200[diff] [blame]773
774 // check that the images are applied to the background elements
775 assert.ok( Reveal.getSlideBackground( 0 ).querySelector( '.slide-background-content' ).style.backgroundImage.indexOf( imageSource1 ) !== -1, 'data-background-image worked' );
776 assert.ok( Reveal.getSlideBackground( 1, 0 ).querySelector( '.slide-background-content' ).style.backgroundImage.indexOf( imageSource2 ) !== -1, 'data-background worked' );
Christophe Dervieux8afae132021-12-06 15:16:42 +0100[diff] [blame^]777 assert.ok( Reveal.getSlideBackground( 1, 1 ).querySelector( '.slide-background-content' ).style.backgroundImage.indexOf( imageSource3 ) !== -1, 'data-background worked' );
Christophe Dervieuxe1893ae2021-10-07 17:09:02 +0200[diff] [blame]778 });
779
780
781 // ---------------------------------------------------------------
782 // EVENT TESTS
783
784 QUnit.module( 'Events' );
785
Christophe Dervieux8afae132021-12-06 15:16:42 +0100[diff] [blame^]786 QUnit.test( 'beforeslidechange', function( assert ) {
787 var done = assert.async( 2 );
788
789 var normalEvent = function( event ) {
790 assert.ok( true, 'event fired' );
791 done();
792 }
793 var blockingEvent = function( event ) {
794 event.preventDefault();
795 assert.ok( true, 'event fired' );
796 done();
797 }
798
799 Reveal.on( 'beforeslidechange', normalEvent );
800 Reveal.slide( 2, 0 );
801 Reveal.off( 'beforeslidechange', normalEvent );
802
803 Reveal.on( 'beforeslidechange', blockingEvent );
804 Reveal.slide( 3, 0 );
805 Reveal.off( 'beforeslidechange', blockingEvent );
806
807 assert.strictEqual( Reveal.getIndices().h, 2, 'preventing "beforeslidechange" blocks navigation ' );
808
809 });
810
Christophe Dervieuxe1893ae2021-10-07 17:09:02 +0200[diff] [blame]811 QUnit.test( 'slidechanged', function( assert ) {
812 assert.expect( 3 );
813 var done = assert.async( 3 );
814
815 var _onEvent = function( event ) {
816 assert.ok( true, 'event fired' );
817 done();
818 }
819
820 Reveal.on( 'slidechanged', _onEvent );
821
822 Reveal.slide( 1, 0 ); // should trigger
823 Reveal.slide( 1, 0 ); // should do nothing
824 Reveal.next(); // should trigger
825 Reveal.slide( 3, 0 ); // should trigger
826 Reveal.next(); // should do nothing
827
828 Reveal.off( 'slidechanged', _onEvent );
829
830 });
831
832 /* Fails intermittently...
833 QUnit.test( 'slidetransitionend', function( assert ) {
834 assert.expect( 2 );
835 let done = assert.async( 2 );
836 let time = Date.now();
837
838 let horizontalCallback = event => {
839 assert.ok( Date.now() - time > 200, 'horizontal event fired' );
840 done();
841
842 let verticalCallback = event => {
843 assert.ok( true, 'vertical event fired' );
844 done();
845 Reveal.off( 'slidetransitionend', verticalCallback );
846 }
847
848 Reveal.off( 'slidetransitionend', horizontalCallback );
849 Reveal.on( 'slidetransitionend', verticalCallback );
850 Reveal.slide( 1, 1 );
851 }
852
853 Reveal.slide( 0, 0 );
854 Reveal.on( 'slidetransitionend', horizontalCallback );
855 Reveal.slide( 1, 0 );
856
857 });
858 */
859
860 QUnit.test( 'paused', function( assert ) {
861 assert.expect( 1 );
862 var done = assert.async();
863
864 var _onEvent = function( event ) {
865 assert.ok( true, 'event fired' );
866 done();
867 }
868
869 Reveal.on( 'paused', _onEvent );
870
871 Reveal.togglePause();
872 Reveal.togglePause();
873
874 Reveal.off( 'paused', _onEvent );
875 });
876
877 QUnit.test( 'resumed', function( assert ) {
878 assert.expect( 1 );
879 var done = assert.async();
880
881 var _onEvent = function( event ) {
882 assert.ok( true, 'event fired' );
883 done();
884 }
885
886 Reveal.on( 'resumed', _onEvent );
887
888 Reveal.togglePause();
889 Reveal.togglePause();
890
891 Reveal.off( 'resumed', _onEvent );
892 });
893
894 } );
895 </script>
896
897 </body>
898</html>