clearer contour heatmap ordering test

and add assertNodeOrder as a custom assertion

Author: alexcjohnson

test/jasmine/assets/custom_assertions.js

@@ -247,3 +247,66 @@ exports.assertPlotSize = function(opts, msg) {
     if(widthLessThan) expect(actualWidth).toBeLessThan(widthLessThan - 1, 'widthLessThan' + msgPlus);
     if(heightLessThan) expect(actualHeight).toBeLessThan(heightLessThan - 1, 'heightLessThan' + msgPlus);
 };
+
+/**
+ * Ordering test - since SVG layering is purely dependent on ordering in the
+ * node tree, this tells you if the items are layered correctly.
+ * Note that we only take the first matching node for each selector, and it's
+ * not necessary that the nodes be siblings or at the same level of nesting.
+ *
+ * @param {string} selectorBehind: css selector for the node that should be behind
+ * @param {string} selectorInFront: css selector for the node that should be in front
+ * @param {string} msg: context for debugging
+ */
+exports.assertNodeOrder = function(selectorBehind, selectorInFront, msg) {
+    var nodeBehind = document.querySelector(selectorBehind);
+    var nodeInFront = document.querySelector(selectorInFront);
+    if(!nodeBehind) {
+        fail(selectorBehind + ' not found (' + msg + ')');
+    }
+    else if(!nodeInFront) {
+        fail(selectorInFront + ' not found (' + msg + ')');
+    }
+    else {
+        var parentsBehind = getParents(nodeBehind);
+        var parentsInFront = getParents(nodeInFront);
+
+        var commonParent = null;
+        var siblingBehind = null;
+        var siblingInFront = null;
+        for(var i = 0; i < parentsBehind.length; i++) {
+            if(parentsBehind[i] === parentsInFront[i]) {
+                commonParent = parentsBehind[i];
+            }
+            else {
+                siblingBehind = parentsBehind[i];
+                siblingInFront = parentsInFront[i];
+                break;
+            }
+        }
+        var allSiblings = collectionToArray(commonParent.children);
+        var behindIndex = allSiblings.indexOf(siblingBehind);
+        var frontIndex = allSiblings.indexOf(siblingInFront);
+
+        // sanity check - if these fail there's just something wrong in this routine
+        expect(behindIndex).toBeGreaterThan(-1, 'error in assertNodeOrder: ' + msg);
+        expect(frontIndex).toBeGreaterThan(-1, 'error in assertNodeOrder: ' + msg);
+
+        // the real test
+        expect(frontIndex).toBeGreaterThan(behindIndex,
+            '"' + selectorBehind + '" is not behind "' + selectorInFront + '": ' + msg);
+    }
+};
+
+function getParents(node) {
+    var parent = node.parentNode;
+    if(parent) return getParents(parent).concat(node);
+    return [node];
+}
+
+function collectionToArray(collection) {
+    var len = collection.length;
+    var a = new Array(len);
+    for(var i = 0; i < len; i++) a[i] = collection[i];
+    return a;
+}

test/jasmine/tests/contour_test.js

@@ -11,7 +11,9 @@ var colorScales = require('@src/components/colorscale/scales');
 var failTest = require('../assets/fail_test');
 var createGraphDiv = require('../assets/create_graph_div');
 var destroyGraphDiv = require('../assets/destroy_graph_div');
-var checkTicks = require('../assets/custom_assertions').checkTicks;
+var customAssertions = require('../assets/custom_assertions');
+var checkTicks = customAssertions.checkTicks;
+var assertNodeOrder = customAssertions.assertNodeOrder;
 var supplyAllDefaults = require('../assets/supply_defaults');
 
 
@@ -412,25 +414,12 @@ describe('contour plotting and editing', function() {
     });
 
     it('should always draw heatmap coloring layer below contour lines', function(done) {
-        var cnt = 0;
-
-        function _assert(exp) {
-            var msg = ' index in <g.contourlayer> (call #' + cnt + ')';
-            var contourPlot = gd.querySelector('.xy > .plot > .contourlayer > .contour');
-            var hmIndex = -1;
-            var contoursIndex = -1;
-
-            for(var i in contourPlot.children) {
-                var child = contourPlot.children[i];
-                if(child.querySelector) {
-                    if(child.querySelector('.hm')) hmIndex = +i;
-                    else if(child.querySelector('.contourlevel')) contoursIndex = +i;
-                }
-            }
-
-            expect(hmIndex).toBe(exp.hmIndex, 'heatmap' + msg);
-            expect(contoursIndex).toBe(exp.contoursIndex, 'contours' + msg);
-            cnt++;
+        function _assertNoHeatmap(msg) {
+            msg = ' (' + msg + ')';
+            // all we care about here *really* is that there are contour levels
+            // *somewhere* on the plot, and there is no heatmap anywhere.
+            expect(gd.querySelector('.hm')).toBe(null, 'heatmap exists' + msg);
+            expect(gd.querySelector('.contourlevel')).not.toBe(null, 'missing contours' + msg);
         }
 
         Plotly.newPlot(gd, [{
@@ -439,24 +428,15 @@ describe('contour plotting and editing', function() {
             contours: {coloring: 'heatmap'}
         }])
         .then(function() {
-            _assert({
-                hmIndex: 0,
-                contoursIndex: 3
-            });
+            assertNodeOrder('.hm', '.contourlevel', 'initial heatmap coloring');
             return Plotly.restyle(gd, 'contours.coloring', 'lines');
         })
         .then(function() {
-            _assert({
-                hmIndex: -1,
-                contoursIndex: 3
-            });
+            _assertNoHeatmap('line coloring');
             return Plotly.restyle(gd, 'contours.coloring', 'heatmap');
         })
         .then(function() {
-            _assert({
-                hmIndex: 0,
-                contoursIndex: 3
-            });
+            assertNodeOrder('.hm', '.contourlevel', 'back to heatmap coloring');
         })
         .catch(failTest)
         .then(done);