Tests: add open failure tests, overhaul test framework

* Add tests for open failures
* Refactor tests to avoid tests depending on implied status from
  previous tests:
  1. The viewer is now created and destroyed for each
     test to avoid pollution and simplify error handling: nothing
     starts until you request it.
  2. Some tests like Basic: Homepage depended on the Zoom & Pan tests;
     now this is handled explicitly as part of the test setup
  3. All basic tests are now properly async tests (since they needed
     the viewer to load, they really were in the past except that
     they were relying on the viewer state left behind from previous
     tests)
* All tests now run inside the qunit-fixture to prevent masking
  failures. Util.resetDom() has been refactored to use the
  qunit-fixture and the teardown logic only used in the navigator
  tests has been moved into the navigator test teardown method
* Fixed undeclared mainViewerElement variable in optional path in
  the navigator tests
* JSHint cleanup

test/basic.js

@@ -1,23 +1,29 @@
 /* global module, asyncTest, $, ok, equal, notEqual, start, test, Util */
 
 (function() {
+    var viewer;
 
-    module('Basic');
+    module('Basic', {
+        setup: function () {
+            var example = $('<div id="example"></div>').appendTo("#qunit-fixture");
 
-    // TODO: Test drag
-
-    var viewer = null;
-
-    // ----------
-    asyncTest('Open', function() {
-        $(document).ready(function() {
             viewer = OpenSeadragon({
                 id:            'example',
                 prefixUrl:     '/build/openseadragon/images/',
-                tileSources:   '/test/data/testpattern.dzi',
                 springStiffness: 100 // Faster animation = faster tests
             });
+        },
+        teardown: function () {
+            if (!!viewer && viewer.close) {
+                viewer.close();
+            }
 
+            viewer = null;
+        }
+    });
+
+    // ----------
+    asyncTest('Open', function() {
         ok(viewer, 'Viewer exists');
 
         var openHandler = function(eventSender, eventData) {
@@ -32,12 +38,33 @@
         };
 
         viewer.addHandler('open', openHandler);
+        viewer.open('/test/data/testpattern.dzi');
     });
+
+    asyncTest('Open Error Handling', function() {
+        ok(viewer, 'Viewer exists');
+
+        viewer.addHandler('open', function(eventSender, eventData) {
+            ok(false, "The open event should not fire for failed opens");
+            start();
+        });
+
+        viewer.addHandler('open-failed', function(eventSender, eventData) {
+            ok(true, "The open-failed event should be fired when the source 404s");
+
+            equal($(".openseadragon-message").length, 1, "Open failures should display a message");
+
+            start();
+        });
+
+        viewer.open('/test/data/not-a-real-file');
     });
 
     // ----------
     asyncTest('Zoom', function() {
+        viewer.addHandler("open", function () {
             var viewport = viewer.viewport;
+
             equal(viewport.getZoom(), 1, 'We start out unzoomed');
 
             var zoomHandler = function() {
@@ -49,11 +76,15 @@
             viewer.addHandler('animationfinish', zoomHandler);
             viewport.zoomTo(2);
         });
+        viewer.open('/test/data/testpattern.dzi');
+    });
 
     // ----------
     asyncTest('Pan', function() {
-        var viewport = viewer.viewport;
+        viewer.addHandler("open", function () {
-        var center = viewport.getCenter();
+            var viewport = viewer.viewport,
+                center = viewport.getCenter();
+
             ok(center.x === 0.5 && center.y === 0.5, 'We start out unpanned');
 
             var panHandler = function() {
@@ -67,10 +98,24 @@
             viewport.panTo(new OpenSeadragon.Point(0.1, 0.1));
         });
 
+        viewer.open('/test/data/testpattern.dzi');
+    });
+
     // ----------
     asyncTest('Home', function() {
+        // Test setup:
+        function opener() {
             var viewport = viewer.viewport;
-        var center = viewport.getCenter();
+            viewport.panTo(new OpenSeadragon.Point(0.1, 0.1));
+            viewport.zoomTo(2);
+        }
+
+        function stage1() {
+            var viewport = viewer.viewport,
+                center = viewport.getCenter();
+
+            viewer.removeHandler('animationfinish', stage1);
+
             ok(center.x !== 0.5 && center.y !== 0.5, 'We start out panned');
             notEqual(viewport.getZoom(), 1, 'We start out zoomed');
 
@@ -84,10 +129,17 @@
 
             viewer.addHandler('animationfinish', homeHandler);
             viewport.goHome(true);
+        }
+
+        viewer.addHandler("open", opener);
+        viewer.addHandler("animationfinish", stage1);
+
+        viewer.open('/test/data/testpattern.dzi');
     });
 
     // ----------
     asyncTest('Click', function() {
+        viewer.addHandler("open", function () {
             var viewport = viewer.viewport,
             center = viewport.getCenter();
 
@@ -106,8 +158,12 @@
             Util.simulateViewerClick(viewer, 0.25, 0.25);
         });
 
+        viewer.open('/test/data/testpattern.dzi');
+    });
+
     // ----------
-    test('Fullscreen', function() {
+    asyncTest('Fullscreen', function() {
+        viewer.addHandler("open", function () {
             ok(!viewer.isFullPage(), 'Started out not fullpage');
             ok(!$(viewer.element).hasClass('fullpage'),
                 'No fullpage class on div');
@@ -121,10 +177,15 @@
             ok(!viewer.isFullPage(), 'Disabled fullpage');
             ok(!$(viewer.element).hasClass('fullpage'),
                 'Fullpage class removed from div');
+            start();
+        });
+
+        viewer.open('/test/data/testpattern.dzi');
     });
 
     // ----------
     asyncTest('Close', function() {
+        viewer.addHandler("open", function () {
             var closeHandler = function() {
                 viewer.removeHandler('close', closeHandler);
                 ok(!viewer.source, 'no source');
@@ -140,5 +201,7 @@
             viewer.addHandler('close', closeHandler);
             viewer.close();
         });
+        viewer.open('/test/data/testpattern.dzi');
+    });
 
 })();

test/formats.js

@@ -3,7 +3,13 @@
     // This module tests whether our various file formats can be opened.
     // TODO: Add more file formats (with corresponding test data).
 
-    module('Formats');
+    module('Formats', {
+        setup: function () {
+            var example = document.createElement("div");
+            example.id = "example";
+            document.getElementById("qunit-fixture").appendChild(example);
+        }
+    });
 
     var viewer = null;
 

test/navigator.js

@@ -1,3 +1,5 @@
+/* global QUnit, module, Util, $, console, test, asyncTest, start, ok, equal */
+
 QUnit.config.autostart = false;
 
 (function () {
@@ -15,13 +17,17 @@ QUnit.config.autostart = false;
 
     module("navigator", {
         setup: function () {
-            Util.resetDom();
+            Util.initializeTestDOM();
             resetTestVariables();
             $(document).scrollTop(0);
             $(document).scrollLeft(0);
         },
         teardown: function () {
-            Util.resetDom();
+            // jQuery UI creates its controls outside the normal DOM hierarchy which QUnit cleans up:
+            if ($('#exampleNavigator').is(':ui-dialog')) {
+                $('#exampleNavigator').dialog('destroy');
+            }
+
             resetTestVariables();
         }
     });
@@ -31,7 +37,7 @@ QUnit.config.autostart = false;
     });
 
     var resetTestVariables = function () {
-        if (viewer != null) {
+        if (viewer) {
             viewer.close();
         }
         displayRegion = null;
@@ -125,11 +131,11 @@ QUnit.config.autostart = false;
                 viewerAndNavigatorDisplayReady = viewer.drawer !== null &&
                     !viewer.drawer.needsUpdate() &&
                     currentDisplayWidth > 0 &&
-                    Util.equalsWithVariance(lastDisplayRegionLeft, currentDisplayRegionLeft, .0001) &&
+                    Util.equalsWithVariance(lastDisplayRegionLeft, currentDisplayRegionLeft, 0.0001) &&
-                    Util.equalsWithVariance(lastDisplayWidth, currentDisplayWidth, .0001) &&
+                    Util.equalsWithVariance(lastDisplayWidth, currentDisplayWidth, 0.0001) &&
-                    Util.equalsWithVariance(viewer.viewport.getBounds(true).x, viewer.viewport.getBounds().x, .0001) &&
+                    Util.equalsWithVariance(viewer.viewport.getBounds(true).x, viewer.viewport.getBounds().x, 0.0001) &&
-                    Util.equalsWithVariance(viewer.viewport.getBounds(true).y, viewer.viewport.getBounds().y, .0001) &&
+                    Util.equalsWithVariance(viewer.viewport.getBounds(true).y, viewer.viewport.getBounds().y, 0.0001) &&
-                    Util.equalsWithVariance(viewer.viewport.getBounds(true).width, viewer.viewport.getBounds().width, .0001);
+                    Util.equalsWithVariance(viewer.viewport.getBounds(true).width, viewer.viewport.getBounds().width, 0.0001);
             }
             catch (err) {
                 //Ignore.  Subsequent code will try again shortly
@@ -138,7 +144,7 @@ QUnit.config.autostart = false;
                 count++;
                 setTimeout(function () {
                     waitForViewer(handler, count, currentDisplayRegionLeft, currentDisplayWidth);
-                }, 100)
+                }, 100);
             }
             else {
                 if (count === 40) {
@@ -201,21 +207,21 @@ QUnit.config.autostart = false;
                 expecteYCoordinate = 1 / viewer.source.aspectRatio - viewer.viewport.getBounds().height;
             }
             if (viewer.viewport.getBounds().width < 1) {
-                Util.assessNumericValue(expectedXCoordinate, viewer.viewport.getBounds().x, .04, ' Viewer at ' + theContentCorner + ', x coord');
+                Util.assessNumericValue(expectedXCoordinate, viewer.viewport.getBounds().x, 0.04, ' Viewer at ' + theContentCorner + ', x coord');
             }
             if (viewer.viewport.getBounds().height < 1 / viewer.source.aspectRatio) {
-                Util.assessNumericValue(expecteYCoordinate, viewer.viewport.getBounds().y, .04, ' Viewer at ' + theContentCorner + ', y coord');
+                Util.assessNumericValue(expecteYCoordinate, viewer.viewport.getBounds().y, 0.04, ' Viewer at ' + theContentCorner + ', y coord');
-            }
             }
         };
+    };
 
     var assessViewerInCenter = function () {
-        var yPositionVariance = .04;
+        var yPositionVariance = 0.04;
         if (viewer.source.aspectRatio < 1) {
             yPositionVariance = yPositionVariance / viewer.source.aspectRatio;
         }
         Util.assessNumericValue(1 / viewer.source.aspectRatio / 2, viewer.viewport.getCenter().y, yPositionVariance, ' Viewer at center, y coord');
-        Util.assessNumericValue(.5, viewer.viewport.getCenter().x, .4, ' Viewer at center, x coord');
+        Util.assessNumericValue(0.5, viewer.viewport.getCenter().x, 0.4, ' Viewer at center, x coord');
     };
 
     var clickOnNavigator = function (theContentCorner) {
@@ -239,7 +245,7 @@ QUnit.config.autostart = false;
                 yPos = contentStartFromTop + displayRegionHeight;
             }
             simulateNavigatorClick(viewer.navigator, xPos, yPos);
-        }
+        };
     };
 
     var dragNavigatorBackToCenter = function () {
@@ -354,11 +360,12 @@ QUnit.config.autostart = false;
                      clientX:1,
                      clientY:1
                  };
-                mainViewerElement.simulate('blur', event);
+
+                $("#" + seadragonProperties.id).simulate('blur', event);
+
                 if (testProperties.expectedAutoFade) {
                     setTimeout(assessAutoFadeTriggered,autoFadeWaitTime);
-                }
+                } else {
-                else {
                     setTimeout(assessAutoFadeDisabled,autoFadeWaitTime);
                 }
             }

test/test.html

@@ -10,12 +10,6 @@
 <body>
     <div id="qunit"></div>
     <div id="qunit-fixture"></div>
-    <div>
-        <div id="example"></div>
-        <div id="exampleNavigator"></div>
-    </div>
-    <div id="wideexample"></div>
-    <div id="tallexample"></div>
     <script src="/node_modules/grunt-contrib-qunit/test/libs/qunit.js"></script>
     <script src="/test/lib/jquery-1.9.1.min.js"></script>
     <script src="/test/lib/jquery-ui-1.10.2/js/jquery-ui-1.10.2.min.js"></script>

test/test.js

@@ -1,3 +1,5 @@
+/* global module, asyncTest, $, ok, equal, notEqual, start, test, Util */
+
 (function() {
 
     // ----------
@@ -30,16 +32,11 @@
                 .simulate('mouseup', event);
         },
 
-        resetDom: function () {
+        initializeTestDOM: function () {
-            if ($('#exampleNavigator').is(':ui-dialog')) {
+            $("#qunit-fixture")
-                $('#exampleNavigator').dialog('destroy');
+                .append('<div><div id="example"></div><div id="exampleNavigator"></div></div>')
-            }
+                .append('<div id="wideexample"></div>')
-            $("#exampleNavigator").remove();
+                .append('<div id="tallexample"></div>');
-            $(".navigator").remove();
-            $("#example").empty();
-            $("#tallexample").empty();
-            $("#wideexample").empty();
-            $("#example").parent().append('<div id="exampleNavigator"></div>');
         },
 
         equalsWithVariance: function (value1, value2, variance) {