presentations

Presentations
Log | Files | Refs

test-state.html (3464B)

      1 <!doctype html>
      2 <html lang="en">
      3 
      4 	<head>
      5 		<meta charset="utf-8">
      6 
      7 		<title>reveal.js - Test State</title>
      8 
      9 		<link rel="stylesheet" href="../css/reveal.css">
     10 		<link rel="stylesheet" href="qunit-2.5.0.css">
     11 	</head>
     12 
     13 	<body style="overflow: auto;">
     14 
     15 		<div id="qunit"></div>
     16 		<div id="qunit-fixture"></div>
     17 
     18 		<div class="reveal" style="display: none;">
     19 
     20 			<div class="slides">
     21 
     22 				<section>No state</section>
     23 				<section id="slide2" data-state="state1">State 1</section>
     24 				<section data-state="state1">State 1</section>
     25 				<section data-state="state2">State 2</section>
     26 				<section>
     27 					<section>No state</section>
     28 					<section data-state="state1">State 1</section>
     29 					<section data-state="state3">State 3</section>
     30 					<section>No state</section>
     31 				</section>
     32 				<section>No state</section>
     33 
     34 			</div>
     35 
     36 		</div>
     37 
     38 		<script src="../js/reveal.js"></script>
     39 		<script src="qunit-2.5.0.js"></script>
     40 
     41 		<script>
     42 
     43 
     44 			Reveal.addEventListener( 'ready', function() {
     45 
     46 				QUnit.module( 'State' );
     47 
     48 				QUnit.test( 'Fire events when changing slide', function( assert ) {
     49 					assert.expect( 2 );
     50 					var state1 = assert.async();
     51 					var state2 = assert.async();
     52 
     53 					var _onState1 = function( event ) {
     54 						assert.ok( true, 'state1 fired' );
     55 						state1();
     56 					}
     57 
     58 					var _onState2 = function( event ) {
     59 						assert.ok( true, 'state2 fired' );
     60 						state2();
     61 					}
     62 
     63 					Reveal.addEventListener( 'state1', _onState1 );
     64 					Reveal.addEventListener( 'state2', _onState2 );
     65 
     66 					Reveal.slide( 1 );
     67 					Reveal.slide( 3 );
     68 
     69 					Reveal.removeEventListener( 'state1', _onState1 );
     70 					Reveal.removeEventListener( 'state2', _onState2 );
     71 				});
     72 
     73 				QUnit.test( 'Fire state events for vertical slides', function( assert ) {
     74 					assert.expect( 2 );
     75 					var done = assert.async( 2 );
     76 
     77 					var _onState1 = function( event ) {
     78 						assert.ok( true, 'state1 fired' );
     79 						done();
     80 					}
     81 
     82 					var _onState3 = function( event ) {
     83 						assert.ok( true, 'state3 fired' );
     84 						done();
     85 					}
     86 
     87 					Reveal.addEventListener( 'state1', _onState1 );
     88 					Reveal.addEventListener( 'state3', _onState3 );
     89 
     90 					Reveal.slide( 0 );
     91 					Reveal.slide( 4, 1 );
     92 					Reveal.slide( 4, 2 );
     93 
     94 					Reveal.removeEventListener( 'state1', _onState1 );
     95 					Reveal.removeEventListener( 'state3', _onState3 );
     96 				});
     97 
     98 				QUnit.test( 'No events if state remains unchanged', function( assert ) {
     99 					var stateChanges = 0;
    100 
    101 					var _onEvent = function( event ) {
    102 						stateChanges += 1;
    103 					}
    104 
    105 					Reveal.addEventListener( 'state1', _onEvent );
    106 
    107 					Reveal.slide( 0 );      // no state
    108 					Reveal.slide( 1 );      // state1
    109 					Reveal.slide( 2 );      // state1
    110 					Reveal.prev();          // state1
    111 					Reveal.next();          // state1
    112 					Reveal.slide( 4, 1 );   // state1
    113 					Reveal.slide( 0 );      // no state
    114 
    115 					Reveal.removeEventListener( 'state1', _onEvent );
    116 
    117 					assert.strictEqual( stateChanges, 1, 'no event was fired when going to slide with same state' );
    118 				});
    119 
    120 				QUnit.test( 'Event order', function( assert ) {
    121 					var _onEvent = function( event ) {
    122 						assert.ok( Reveal.getCurrentSlide() == document.querySelector( '#slide2' ), 'correct current slide immediately after state event' );
    123 					}
    124 
    125 					Reveal.addEventListener( 'state1', _onEvent );
    126 
    127 					Reveal.slide( 0 );
    128 					Reveal.slide( 1 );
    129 
    130 					Reveal.removeEventListener( 'state1', _onEvent );
    131 				});
    132 
    133 			} );
    134 
    135 			Reveal.initialize();
    136 		</script>
    137 
    138 	</body>
    139 </html>