revamp hover spike tests

- assert number of spike line visible as well as
  their position attributes

Author: etpinard

test/jasmine/tests/hover_spikeline_test.js

@@ -7,55 +7,106 @@ var Lib = require('@src/lib');
 var fail = require('../assets/fail_test');
 var createGraphDiv = require('../assets/create_graph_div');
 var destroyGraphDiv = require('../assets/destroy_graph_div');
+var customMatchers = require('../assets/custom_matchers');
 
 describe('spikeline', function() {
     'use strict';
 
-    var mock = require('@mocks/19.json');
+    beforeAll(function() {
+        jasmine.addMatchers(customMatchers);
+    });
 
     afterEach(destroyGraphDiv);
 
     describe('hover', function() {
-        var mockCopy = Lib.extendDeep({}, mock);
         var gd;
 
-        mockCopy.layout.xaxis.showspikes = true;
-        mockCopy.layout.xaxis.spikemode = 'toaxis';
-        mockCopy.layout.yaxis.showspikes = true;
-        mockCopy.layout.yaxis.spikemode = 'toaxis+marker';
-        mockCopy.layout.xaxis2.showspikes = true;
-        mockCopy.layout.xaxis2.spikemode = 'toaxis';
-        mockCopy.layout.hovermode = 'closest';
+        function makeMock() {
+            var _mock = Lib.extendDeep({}, require('@mocks/19.json'));
+            _mock.layout.xaxis.showspikes = true;
+            _mock.layout.xaxis.spikemode = 'toaxis';
+            _mock.layout.yaxis.showspikes = true;
+            _mock.layout.yaxis.spikemode = 'toaxis+marker';
+            _mock.layout.xaxis2.showspikes = true;
+            _mock.layout.xaxis2.spikemode = 'toaxis';
+            _mock.layout.hovermode = 'closest';
+            return _mock;
+        }
+
+        function _hover(evt, subplot) {
+            Fx.hover(gd, evt, subplot);
+            delete gd._lastHoverTime;
+        }
+
+        function _assert(lineExpect, circleExpect) {
+            var lines = d3.selectAll('line.spikeline');
+            var circles = d3.selectAll('circle.spikeline');
+
+            expect(lines.size()).toBe(lineExpect.length, '# of line nodes');
+            expect(circles.size()).toBe(circleExpect.length, '# of circle nodes');
+
+            lines.each(function(_, i) {
+                var sel = d3.select(this);
+                ['x1', 'y1', 'x2', 'y2'].forEach(function(d, j) {
+                    expect(sel.attr(d))
+                        .toBeWithin(lineExpect[i][j], 1, 'line ' + i + ' attr ' + d);
+                });
+            });
 
-        beforeEach(function(done) {
+            circles.each(function(_, i) {
+                var sel = d3.select(this);
+                ['cx', 'cy'].forEach(function(d, j) {
+                    expect(sel.attr(d))
+                        .toBeWithin(circleExpect[i][j], 1, 'circle ' + i + ' attr ' + d);
+                });
+            });
+        }
+
+        it('draws lines and markers on enabled axes', function(done) {
             gd = createGraphDiv();
-            Plotly.plot(gd, mockCopy.data, mockCopy.layout).then(done);
-        });
+            var _mock = makeMock();
 
-        it('draws lines and markers on enabled axes', function() {
-            Fx.hover('graph', {xval: 2, yval: 3}, 'xy');
-            expect(d3.selectAll('line.spikeline').size()).toEqual(4);
-            expect(d3.selectAll('circle.spikeline').size()).toEqual(1);
+            Plotly.plot(gd, _mock).then(function() {
+                _hover({xval: 2, yval: 3}, 'xy');
+                _assert(
+                    [[80, 250, 557, 250], [80, 250, 557, 250], [557, 401, 557, 250], [557, 401, 557, 250]],
+                    [[83, 250]]
+                );
+            })
+            .then(function() {
+                _hover({xval: 30, yval: 40}, 'x2y2');
+                _assert(
+                    [[820, 220, 820, 167], [820, 220, 820, 167]],
+                    []
+                );
+            })
+            .catch(fail)
+            .then(done);
         });
 
         it('draws lines and markers on enabled axes w/o tick labels', function(done) {
-            Plotly.relayout(gd, {
-                'xaxis.showticklabels': false,
-                'yaxis.showticklabels': false
+            gd = createGraphDiv();
+            var _mock = makeMock();
+
+            _mock.layout.xaxis.showticklabels = false;
+            _mock.layout.yaxis.showticklabels = false;
+
+            Plotly.plot(gd, _mock).then(function() {
+                _hover({xval: 2, yval: 3}, 'xy');
+                _assert(
+                    [[80, 250, 557, 250], [80, 250, 557, 250], [557, 401, 557, 250], [557, 401, 557, 250]],
+                    [[83, 250]]
+                );
             })
             .then(function() {
-                Fx.hover('graph', {xval: 2, yval: 3}, 'xy');
-                expect(d3.selectAll('line.spikeline').size()).toEqual(4);
-                expect(d3.selectAll('circle.spikeline').size()).toEqual(1);
+                _hover({xval: 30, yval: 40}, 'x2y2');
+                _assert(
+                    [[820, 220, 820, 167], [820, 220, 820, 167]],
+                    []
+                );
             })
             .catch(fail)
             .then(done);
         });
-
-        it('doesn\'t draw lines and markers on disabled axes', function() {
-            Fx.hover('graph', {xval: 30, yval: 40}, 'x2y2');
-            expect(d3.selectAll('line.spikeline').size()).toEqual(2);
-            expect(d3.selectAll('circle.spikeline').size()).toEqual(0);
-        });
     });
 });