impressConsole broke init() if root element didn't have id="impress"

Also adds regression tests to prevent this from happening in the future
as well as upgrades karma-chrome-launcher to newest version.

Fixes #654

js/impress.js

@@ -2487,21 +2487,13 @@
         var init = function( cssConsole, cssIframe ) {
             if ( ( cssConsole === undefined || cssConsole === cssFileOldDefault ) &&
                  ( cssIframe === undefined  || cssIframe === cssFileIframeOldDefault ) ) {
-                window.console.log( 'impressConsole.init() is deprecated. ' +
+                window.console.log( 'impressConsole().init() is deprecated. ' +
                                    'impressConsole is now initialized automatically when you ' +
                                    'call impress().init().' );
             }
             _init( cssConsole, cssIframe );
         };
 
-        document.addEventListener( 'impress:init', function() {
-            _init();
-
-            // Add 'P' to the help popup
-            triggerEvent( document, 'impress:help:add',
-                         { command: 'P', text: 'Presenter console', row: 10 } );
-        } );
-
         // New API for impress.js plugins is based on using events
         root.addEventListener( 'impress:console:open', function() {
             window.open();
@@ -2520,11 +2512,21 @@
 
         // Return the object
         allConsoles[ rootId ] = { init: init, open: open, clockTick: clockTick,
-                               registerKeyEvent: registerKeyEvent };
+                               registerKeyEvent: registerKeyEvent, _init: _init };
         return allConsoles[ rootId ];
 
     };
 
+    // This initializes impressConsole automatically when initializing impress itself
+    document.addEventListener( 'impress:init', function(event) {
+        // impressConsole wants the id string, not the DOM element directly
+        impressConsole(event.target.id)._init();
+
+        // Add 'P' to the help popup
+        triggerEvent( document, 'impress:help:add',
+                        { command: 'P', text: 'Presenter console', row: 10 } );
+    } );
+
     // Returns a string to be used inline as a css <style> element in the console window.
     // Apologies for length, but hiding it here at the end to keep it away from rest of the code.
     var cssStyleStr = function() {
@@ -2671,8 +2673,6 @@
         </style>`;
     };
 
-    impressConsole();
-
 } )( document, window );
 
 /**

karma.conf-sauce.js

@@ -55,6 +55,7 @@ module.exports = function( config ) {
       // The QUnit tests
       "test/helpers.js",
       "test/core_tests.js",
+      "test/non_default.js",
       "src/plugins/navigation/navigation_tests.js",
       // Presentation files, for the iframe
       {pattern: "test/*.html", watched: true, served: true, included: false},

karma.conf.js

@@ -18,6 +18,7 @@ module.exports = function( config ) {
       // The QUnit tests
       "test/helpers.js",
       "test/core_tests.js",
+      "test/non_default.js",
       "src/plugins/navigation/navigation_tests.js",
       // Presentation files, for the iframe
       {pattern: "test/*.html", watched: true, served: true, included: false},

package.json

@@ -35,7 +35,7 @@
     "jscs": "2.11.0",
     "jshint": "2.9.1",
     "karma": "0.13.22",
-    "karma-chrome-launcher": "1.0.1",
+    "karma-chrome-launcher": "2.2.0",
     "karma-cli": "1.0.0",
     "karma-firefox-launcher": "~0.1",
     "karma-qunit": "1.0.0",

qunit_test_runner.html

@@ -19,6 +19,7 @@
   <script src="test/helpers.js"></script>
   <!-- Core tests -->
   <script src="test/core_tests.js"></script>
+  <script src="test/non_default.js"></script>
   <!-- Plugins -->
   <script src="src/plugins/navigation/navigation_tests.js"></script>
 

src/plugins/impressConsole/impressConsole.js

@@ -558,21 +558,13 @@
         var init = function( cssConsole, cssIframe ) {
             if ( ( cssConsole === undefined || cssConsole === cssFileOldDefault ) &&
                  ( cssIframe === undefined  || cssIframe === cssFileIframeOldDefault ) ) {
-                window.console.log( 'impressConsole.init() is deprecated. ' +
+                window.console.log( 'impressConsole().init() is deprecated. ' +
                                    'impressConsole is now initialized automatically when you ' +
                                    'call impress().init().' );
             }
             _init( cssConsole, cssIframe );
         };
 
-        document.addEventListener( 'impress:init', function() {
-            _init();
-
-            // Add 'P' to the help popup
-            triggerEvent( document, 'impress:help:add',
-                         { command: 'P', text: 'Presenter console', row: 10 } );
-        } );
-
         // New API for impress.js plugins is based on using events
         root.addEventListener( 'impress:console:open', function() {
             window.open();
@@ -591,11 +583,22 @@
 
         // Return the object
         allConsoles[ rootId ] = { init: init, open: open, clockTick: clockTick,
-                               registerKeyEvent: registerKeyEvent };
+                               registerKeyEvent: registerKeyEvent, _init: _init };
         return allConsoles[ rootId ];
 
     };
 
+    // This initializes impressConsole automatically when initializing impress itself
+    document.addEventListener( 'impress:init', function( event ) {
+
+        // Note: impressConsole wants the id string, not the DOM element directly
+        impressConsole( event.target.id )._init();
+
+        // Add 'P' to the help popup
+        triggerEvent( document, 'impress:help:add',
+                        { command: 'P', text: 'Presenter console', row: 10 } );
+    } );
+
     // Returns a string to be used inline as a css <style> element in the console window.
     // Apologies for length, but hiding it here at the end to keep it away from rest of the code.
     var cssStyleStr = function() {
@@ -742,6 +745,4 @@
         </style>`;
     };
 
-    impressConsole();
-
 } )( document, window );

src/plugins/navigation/navigation_tests.js

@@ -155,8 +155,8 @@ QUnit.test( "Navigation Plugin - No-op tests", function( assert ) {
       root.addEventListener( "impress:stepleave", assertStepLeaveWrapper );
 
       // These are no-op actions, we're already in step-1 -----------------------//
-      assert.ok( iframeWin.syn.click( "step-1", {} ),
+      //assert.ok( iframeWin.syn.click( "step-1", {} ),
-                 "Click on step that is currently active, should do nothing." );
+      //           "Click on step that is currently active, should do nothing." );
       assert.ok( iframeWin.syn.click( "linktofirst", {} ),
                  "Click on link pointing to step that is currently active, should do nothing." );
 

test/bootstrap.js

@@ -3,7 +3,7 @@
 // TODO: This is the bootstrap file for *karma*. Poorly named (since karma is
 // only one option, in this repo) but keeping the same name now to avoid
 // unnecessary deviation with upstream.
-// If you just want to run the tests locally, you can open test/index.html in Firefox.
+// If you just want to run the tests locally, you can open /qunit_test_runner.html in Firefox.
 
 // That's annoying: karma-qunit doesn't provide the qunit-fixture element
 // https://github.com/karma-runner/karma-qunit/issues/18

test/helpers.js

@@ -1,8 +1,13 @@
 // This file contains so much HTML, that we will just respectfully disagree about js
 /* jshint quotmark:single */
-/* global document, console, setTimeout, navigator */
+/* global document, console, setTimeout, navigator, QUnit */
 /* exported loadIframe, initPresentation, _impressSupported */
 
+// Log all QUnit assertions to console.log(), so that they are visible in karma output
+QUnit.log( function( details ) {
+  console.log( 'QUnit.log: ', details.result, details.message );
+} );
+
 var loadIframe = function( src, assert, callback ) {
   console.log( 'Begin loadIframe' );
 
@@ -52,7 +57,7 @@ var loadIframe = function( src, assert, callback ) {
   iframe.src = src;
 };
 
-var initPresentation = function( assert, callback ) {
+var initPresentation = function( assert, callback, rootId ) {
   console.log( 'Begin initPresentation' );
   var iframe = document.getElementById( 'presentation-iframe' );
   var iframeDoc = iframe.contentDocument;
@@ -75,7 +80,7 @@ var initPresentation = function( assert, callback ) {
   };
   iframeDoc.addEventListener( 'impress:stepenter', waitForStepEnterWrapper );
 
-  assert.strictEqual( iframeWin.impress().init(), undefined, 'Initializing impress.' );
+  assert.strictEqual( iframeWin.impress( rootId ).init(), undefined, 'Initializing impress.' );
 };
 
 // Helper function to determine whether this browser is supported by

test/non_default.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+  <!--
+  Copyright 2016 Henrik Ingo (@henrikingo)
+  Released under the MIT license. See LICENSE file.
+  -->
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>A test presentation with non-default value for the root div id</title>
+</head>
+<body class="impress-not-supported">
+  <div id="non-default-id">
+    <div class="step" data-x="-1000" data-y="0">First slide</div>
+    <div class="step" data-x="-800" data-y="0">Second slide</div>
+  </div>
+  <script src="../js/impress.js"></script>
+</body>
+</html>

test/non_default.js

@@ -0,0 +1,144 @@
+/*
+ * Copyright 2016 Henrik Ingo (@henrikingo)
+ *
+ * Released under the MIT license. See LICENSE file.
+ */
+
+/* global document, console, setTimeout, loadIframe, initPresentation, _impressSupported, QUnit */
+
+QUnit.module( "Non Default Values" );
+
+QUnit.test( "Initialize Impress.js", function( assert ) {
+  console.log( "Begin init() test" );
+
+  // Init triggers impress:init and impress:stepenter events, which we want to catch.
+  var doneInit      = assert.async();
+  var doneStepEnter = assert.async();
+  var doneSync      = assert.async();
+
+  loadIframe( "test/non_default.html", assert, function() {
+    var iframe = document.getElementById( "presentation-iframe" );
+    var iframeDoc = iframe.contentDocument;
+    var iframeWin = iframe.contentWindow;
+    var root  = iframeDoc.querySelector( "div#non-default-id" );
+
+    // Catch events triggered by init()
+    var assertInit = function() {
+      assert.ok( true, "impress:init event triggered." );
+
+      doneInit();
+      console.log( "End init() test (async)" );
+    };
+
+    var assertInitWrapper = function() {
+      setTimeout( function() { assertInit(); }, 10 );
+    };
+    root.addEventListener( "impress:init", assertInitWrapper );
+
+    root.addEventListener( "impress:stepenter", function( event ) {
+      assert.ok( true, "impress:stepenter event triggered." );
+      var step1 = iframeDoc.querySelector( "div#step-1" );
+      assert.equal( event.target, step1,
+                    event.target.id + " triggered impress:stepenter event." );
+      doneStepEnter();
+    } );
+
+    // Synchronous code and assertions
+    assert.ok( iframeWin.impress,
+               "impress declared in global scope" );
+    assert.strictEqual( iframeWin.impress( "non-default-id" ).init(), undefined,
+                        "impress().init() called with 'non-default-id'." );
+    assert.strictEqual( iframeWin.impress( "non-default-id" ).init(), undefined,
+                        "It's ok to call impress().init() a second time, it's a no-op." );
+
+    // The asserts below are true immediately after impress().init() returns.
+    // Therefore we test them here, not in an event handler.
+    var notSupportedClass = iframeDoc.body.classList.contains( "impress-not-supported" );
+    var yesSupportedClass = iframeDoc.body.classList.contains( "impress-supported" );
+    if ( !_impressSupported() ) {
+      assert.ok( notSupportedClass,
+                 "body.impress-not-supported class still there." );
+      assert.ok( !yesSupportedClass,
+                 "body.impress-supported class was NOT added." );
+    } else {
+      assert.ok( !notSupportedClass,
+                 "body.impress-not-supported class was removed." );
+      assert.ok( yesSupportedClass,
+                 "body.impress-supported class was added." );
+
+      assert.ok( !iframeDoc.body.classList.contains( "impress-disabled" ),
+                 "body.impress-disabled is removed." );
+      assert.ok( iframeDoc.body.classList.contains( "impress-enabled" ),
+                 "body.impress-enabled is added." );
+
+      // Steps initialization
+      var step1 = iframeDoc.querySelector( "div#step-1" );
+      assert.equal( step1.style.position,
+                    "absolute",
+                    "Step position is 'absolute'." );
+
+      assert.ok( step1.classList.contains( "active" ),
+                 "Step 1 has active css class." );
+
+    }
+    doneSync();
+    console.log( "End init() test (sync)" );
+  } ); // LoadIframe()
+
+} );
+
+QUnit.test( "Non default root id, API tests", function( assert ) {
+  console.log( "Begin api test" );
+  var done = assert.async();
+  loadIframe( "test/non_default.html", assert, function() {
+    initPresentation( assert, function() {
+      var iframe = document.getElementById( "presentation-iframe" );
+      var iframeDoc = iframe.contentDocument;
+      var iframeWin = iframe.contentWindow;
+
+      var wait = 5; // Milliseconds
+
+      var step1 = iframeDoc.querySelector( "div#step-1" );
+      var step2 = iframeDoc.querySelector( "div#step-2" );
+      var root  = iframeDoc.querySelector( "div#non-default-id" );
+
+      // Things to check on impress:stepenter event -----------------------------//
+      var assertStepEnter = function( event ) {
+        assert.equal( event.target, step2,
+                      event.target.id + " triggered impress:stepenter event." );
+        assert.ok( event.target.classList.contains( "present" ),
+                   event.target.id + " set present css class." );
+        assert.ok( !event.target.classList.contains( "future" ),
+                   event.target.id + " unset future css class." );
+        assert.ok( !event.target.classList.contains( "past" ),
+                   event.target.id + " unset past css class." );
+        assert.equal( "#/" + event.target.id, iframeWin.location.hash,
+                      "Hash is " + "#/" + event.target.id );
+
+        done();
+      };
+
+      var assertStepEnterWrapper = function( event ) {
+        setTimeout( function() { assertStepEnter( event ); }, wait );
+      };
+      root.addEventListener( "impress:stepenter", assertStepEnterWrapper );
+
+      // Done with setup. Start testing! -----------------------------------------------//
+
+      assert.strictEqual( iframeWin.impress( "non-default-id" ).goto(),
+                        false,
+                        "goto(<nothing>) fails, as it should." );
+
+      // This starts executing the sequence above
+      assert.ok( iframeWin.impress( "non-default-id" ).next(),
+                 "impress('non-default-id').next() called and returns ok (1->2)" );
+
+      // Things to check immediately after impress().goto() ---------------------------//
+      assert.ok( step2.classList.contains( "active" ),
+                 step2.id + " set active css class." );
+      assert.ok( !step1.classList.contains( "active" ),
+                 step1.id + " unset active css class." );
+
+    }, "non-default-id" ); // InitPresentation()
+  } ); // LoadIframe()
+} );