Add hovel label color tests

Author: camdecoster

test/jasmine/tests/gl2d_click_test.js

@@ -292,6 +292,53 @@ describe('Test hover and click interactions', function() {
         .then(done, done.fail);
     });
 
+    it('@gl should use the per-point marker color for the hover label', async () => {
+        await Plotly.newPlot(
+            gd,
+            [
+                {
+                    type: 'scattergl',
+                    mode: 'markers',
+                    x: [1, 2, 3],
+                    y: [1, 2, 3],
+                    marker: {
+                        color: ['#1767C2', '#FF4136', '#2ECC40'],
+                        size: 20
+                    }
+                }
+            ],
+            {
+                hovermode: 'closest',
+                width: 400,
+                height: 400,
+                xaxis: { showspikes: true },
+                yaxis: { showspikes: true }
+            }
+        );
+
+        Plotly.Fx.hover(gd, { xval: 2, yval: 2 }, 'xy');
+        Lib.clearThrottle();
+
+        const withArray = d3Select('g.hovertext path').node();
+        expect(window.getComputedStyle(withArray).fill).toBe('rgb(255, 65, 54)', 'color array');
+
+        const spikeStrokes = Array.from(document.querySelectorAll('line.spikeline')).map(
+            (line) => window.getComputedStyle(line).stroke
+        );
+        expect(spikeStrokes.filter((stroke) => stroke === 'rgb(255, 65, 54)').length).toBe(2, 'spikelines');
+
+        await Plotly.restyle(gd, {
+            'marker.color': [[0, 5, 10]],
+            'marker.colorscale': 'Viridis'
+        });
+
+        Plotly.Fx.hover(gd, { xval: 2, yval: 2 }, 'xy');
+        Lib.clearThrottle();
+
+        const withColorscale = d3Select('g.hovertext path').node();
+        expect(window.getComputedStyle(withColorscale).fill).toBe('rgb(33, 145, 140)', 'colorscale');
+    });
+
     it('@gl should show correct label for scattergl when hovertext is set', function(done) {
         var _mock = Lib.extendDeep({}, mock1);
         _mock.data[0].hovertext = 'text';

test/jasmine/tests/quiver_test.js

@@ -270,6 +270,41 @@ describe('Test quiver interactions', function() {
         .then(done, done.fail);
     });
 
+    it('should use the per-point arrow color for the hover label', async () => {
+        const fig = {
+            data: [
+                {
+                    type: 'quiver',
+                    x: [1, 2, 3],
+                    y: [1, 2, 3],
+                    u: [1, 0, -1],
+                    v: [0, 1, 0],
+                    marker: {
+                        color: [0, 5, 10],
+                        colorscale: 'Viridis',
+                        showscale: false
+                    }
+                }
+            ],
+            layout: {
+                margin: { l: 0, t: 0, r: 0, b: 0 },
+                width: 400,
+                height: 400
+            }
+        };
+
+        await Plotly.newPlot(gd, fig);
+
+        mouseEvent('mousemove', 200, 200);
+        await delay(20)();
+
+        const label = document.querySelector('g.hovertext path');
+        const arrow = gd.querySelectorAll('g.trace.quiver path.js-line')[1];
+
+        expect(window.getComputedStyle(label).fill).toBe('rgb(33, 145, 140)', 'hover label');
+        expect(window.getComputedStyle(arrow).stroke).toBe('rgb(33, 145, 140)', 'arrow');
+    });
+
     it('should render multiple quiver traces', function(done) {
         Plotly.newPlot(gd, [{
             type: 'quiver',
@@ -344,4 +379,3 @@ describe('Test quiver interactions', function() {
         .then(done, done.fail);
     });
 });
-