add jasmine test to lock waterfall hover on different types of measures - and improve waterfall textinfo mock with cliponaxis false and axis tick prefix and suffix

Author: archmoj

test/image/baselines/waterfall_profit-loss_2018vs2019_textinfo_base.png

@@ -75,6 +75,7 @@
             ],
             "base": 0,
             "textinfo": "text+delta",
+            "cliponaxis": false,
             "textposition": "outside"
         },
         {
@@ -134,6 +135,7 @@
             ],
             "base": 255,
             "textinfo": "initial+final",
+            "cliponaxis": false,
             "textposition": "outside"
         }
     ],
@@ -143,10 +145,14 @@
         },
         "yaxis": {
             "type": "category",
+            "tickprefix": " \" ",
+            "ticksuffix": " \" ",
             "autorange": "reversed"
         },
         "xaxis": {
-            "type": "linear"
+            "type": "linear",
+            "tickprefix": "$",
+            "ticksuffix": " m"
         },
         "margin": { "l": 150, "r": 50 },
         "height": 1200,

test/image/mocks/waterfall_profit-loss_2018vs2019_textinfo_base.json

@@ -1265,7 +1265,10 @@ describe('waterfall hover', function() {
         return {
             style: [pt.index, pt.color, pt.xLabelVal, pt.yLabelVal],
             pos: [pt.x0, pt.x1, pt.y0, pt.y1],
-            text: pt.text
+            text: pt.text,
+            extraText: pt.extraText,
+            xLabelVal: pt.xLabelVal,
+            yLabelVal: pt.yLabelVal
         };
     }
 
@@ -1371,32 +1374,88 @@ describe('waterfall hover', function() {
             .then(done);
         });
 
-        describe('round hover precision', function() {
-            it('should format numbers', function(done) {
-                gd = createGraphDiv();
-
-                Plotly.plot(gd, {
-                    data: [{
-                        x: ['A', 'B', 'C', 'D', 'E'],
-                        y: [0, -1.1, 2.2, -3.3, 4.4],
-                        type: 'waterfall'
-                    }],
-                    layout: {width: 400, height: 400}
-                })
-                .then(function() {
-                    var evt = { xpx: 200, ypx: 350 };
-                    Fx.hover('graph', evt, 'xy');
-                })
-                .then(function() {
-                    assertHoverLabelContent({
-                        nums: '2.2\n4.4 ▲\nInitial: −2.2',
-                        name: '',
-                        axis: 'E'
-                    });
-                })
-                .catch(failTest)
-                .then(done);
-            });
+        it('should format numbers - round hover precision', function(done) {
+            gd = createGraphDiv();
+
+            Plotly.plot(gd, {
+                data: [{
+                    x: ['A', 'B', 'C', 'D', 'E'],
+                    y: [0, -1.1, 2.2, -3.3, 4.4],
+                    type: 'waterfall'
+                }],
+                layout: {width: 400, height: 400}
+            })
+            .then(function() {
+                var evt = { xpx: 200, ypx: 350 };
+                Fx.hover('graph', evt, 'xy');
+            })
+            .then(function() {
+                assertHoverLabelContent({
+                    nums: '2.2\n4.4 ▲\nInitial: −2.2',
+                    name: '',
+                    axis: 'E'
+                });
+            })
+            .catch(failTest)
+            .then(done);
+        });
+
+        it('hover measure categories with axis prefix and suffix', function(done) {
+            gd = createGraphDiv();
+
+            Plotly.plot(gd, {
+                data: [{
+                    x: ['A', 'B', 'C', 'D', 'E'],
+                    y: [2.2, -1.1, null, 3.3, null],
+                    measure: ['a', 'r', 't', 'r', 't'],
+                    base: 1000.001,
+                    type: 'waterfall'
+                }],
+                layout: {
+                    xaxis: {
+                        tickprefix: '[',
+                        ticksuffix: ']'
+                    },
+                    yaxis: {
+                        tickprefix: '$',
+                        ticksuffix: 'm'
+                    },
+                    width: 400,
+                    height: 400
+                }
+            })
+            .then(function() {
+                var out = _hover(gd, 0, 1000.5, 'closest');
+                expect(out.yLabelVal).toEqual(1002.201);
+                expect(out.extraText).toEqual(undefined);
+                expect(out.style).toEqual([0, '#4499FF', 0, 1002.201]);
+            })
+            .then(function() {
+                var out = _hover(gd, 1, 1000.5, 'closest');
+                expect(out.yLabelVal).toEqual(1001.101);
+                expect(out.extraText).toEqual('($1.1m) ▼<br>Initial: $1,002.201m');
+                expect(out.style).toEqual([1, '#FF4136', 1, 1001.101]);
+            })
+            .then(function() {
+                var out = _hover(gd, 2, 1000.5, 'closest');
+                expect(out.yLabelVal).toEqual(1001.101);
+                expect(out.extraText).toEqual(undefined);
+                expect(out.style).toEqual([2, '#4499FF', 2, 1001.101]);
+            })
+            .then(function() {
+                var out = _hover(gd, 3, 1000.5, 'closest');
+                expect(out.yLabelVal).toEqual(1004.401);
+                expect(out.extraText).toEqual('$3.3m ▲<br>Initial: $1,001.101m');
+                expect(out.style).toEqual([3, '#3D9970', 3, 1004.401]);
+            })
+            .then(function() {
+                var out = _hover(gd, 4, 1000.5, 'closest');
+                expect(out.yLabelVal).toEqual(1004.401);
+                expect(out.extraText).toEqual(undefined);
+                expect(out.style).toEqual([4, '#4499FF', 4, 1004.401]);
+            })
+            .catch(failTest)
+            .then(done);
         });
     });