|
1 |
| -var Plotly = require('@src/plotly'); |
| 1 | +var d3 = require('d3'); |
2 | 2 |
|
3 |
| -describe('Test Modebar', function() { |
| 3 | +var createModebar = require('@src/components/modebar'); |
| 4 | +var manageModebar = require('@src/components/modebar/manage'); |
| 5 | + |
| 6 | + |
| 7 | +describe('Modebar', function() { |
4 | 8 | 'use strict';
|
5 | 9 |
|
6 |
| - var getMockGraphInfo = function() { |
7 |
| - var graphInfo = { |
| 10 | + function getMockContainerTree() { |
| 11 | + var root = document.createElement('div'); |
| 12 | + root.className = 'plot-container'; |
| 13 | + var parent = document.createElement('div'); |
| 14 | + parent.className = 'svg-container'; |
| 15 | + root.appendChild(parent); |
| 16 | + |
| 17 | + return parent; |
| 18 | + } |
| 19 | + |
| 20 | + function getMockGraphInfo() { |
| 21 | + return { |
8 | 22 | _fullLayout: {
|
9 |
| - dragmode: 'zoom' |
| 23 | + dragmode: 'zoom', |
| 24 | + _paperdiv: d3.select(getMockContainerTree()) |
10 | 25 | },
|
11 | 26 | _context: {
|
| 27 | + displaylogo: true, |
12 | 28 | displayModeBar: true,
|
13 |
| - displaylogo: true |
| 29 | + modebarButtonsToRemove: [] |
14 | 30 | }
|
15 | 31 | };
|
16 |
| - return graphInfo; |
17 |
| - }; |
| 32 | + } |
18 | 33 |
|
19 |
| - var getMockContainerTree = function() { |
20 |
| - var root = document.createElement('div'); |
21 |
| - root.className = 'plot-container'; |
22 |
| - var parent = document.createElement('div'); |
23 |
| - parent.className = 'svg-container'; |
24 |
| - root.appendChild(parent); |
25 |
| - return parent; |
26 |
| - }; |
| 34 | + function countGroups(modebar) { |
| 35 | + return d3.select(modebar.element).selectAll('div.modebar-group')[0].length; |
| 36 | + } |
| 37 | + |
| 38 | + function countButtons(modebar) { |
| 39 | + return d3.select(modebar.element).selectAll('a.modebar-btn')[0].length; |
| 40 | + } |
| 41 | + |
| 42 | + function countLogo(modebar) { |
| 43 | + return d3.select(modebar.element).selectAll('a.plotlyjsicon')[0].length; |
| 44 | + } |
27 | 45 |
|
28 |
| - var createModebar = function(buttons) { |
29 | 46 |
|
30 |
| - var container = getMockContainerTree(), |
31 |
| - graphInfo = getMockGraphInfo(); |
| 47 | + var buttons = [['toImage', 'sendDataToCloud']]; |
| 48 | + var modebar = createModebar(getMockGraphInfo(), buttons); |
32 | 49 |
|
33 |
| - var modebar = new Plotly.ModeBar({ |
34 |
| - buttons: buttons, |
35 |
| - container: container, |
36 |
| - Plotly: Plotly, |
37 |
| - graphInfo: graphInfo |
| 50 | + describe('createModebar', function() { |
| 51 | + it('creates a modebar', function() { |
| 52 | + expect(countGroups(modebar)).toEqual(2); |
| 53 | + expect(countButtons(modebar)).toEqual(3); |
| 54 | + expect(countLogo(modebar)).toEqual(1); |
38 | 55 | });
|
39 |
| - return modebar; |
40 |
| - }; |
| 56 | + }); |
41 | 57 |
|
42 |
| - describe('Test modebarCleanup:', function() { |
| 58 | + describe('modebar.removeAllButtons', function() { |
| 59 | + it('removes all modebar buttons', function() { |
| 60 | + modebar.removeAllButtons(); |
43 | 61 |
|
44 |
| - it('should make a cleanup.', function() { |
45 |
| - var buttons = [['zoom2d']]; |
46 |
| - var modebar = createModebar(buttons); |
47 |
| - var modebarParent = modebar.element.parentNode; |
48 |
| - modebar.cleanup(); |
49 | 62 | expect(modebar.element.innerHTML).toEqual('');
|
50 |
| - expect(modebarParent.querySelector('.modebar')) |
51 |
| - .toBeNull(); |
| 63 | + expect(modebar.hasLogo).toBe(false); |
52 | 64 | });
|
53 | 65 | });
|
54 | 66 |
|
55 |
| - describe('Test modebarHasButtons:', function() { |
| 67 | + describe('modebar.destroy', function() { |
| 68 | + it('removes the modebar entirely', function() { |
| 69 | + var modebarParent = modebar.element.parentNode; |
56 | 70 |
|
57 |
| - var modeButtons2d, |
58 |
| - modeButtons3d; |
| 71 | + modebar.destroy(); |
59 | 72 |
|
60 |
| - // Same as in ../graph_interact.js |
61 |
| - beforeEach( function() { |
62 |
| - modeButtons2d = [ |
63 |
| - ['toImage'], |
| 73 | + expect(modebarParent.querySelector('.modebar')).toBeNull(); |
| 74 | + }); |
| 75 | + }); |
| 76 | + |
| 77 | + describe('manageModebar', function() { |
| 78 | + |
| 79 | + it('creates modebar (cartesian version)', function() { |
| 80 | + var buttons = [ |
| 81 | + ['toImage', 'sendDataToCloud'], |
64 | 82 | ['zoom2d', 'pan2d'],
|
65 |
| - ['zoomIn2d', 'zoomOut2d', 'resetScale2d', 'autoScale2d'], |
| 83 | + ['zoomIn2d', 'zoomOut2d', 'autoScale2d', 'resetScale2d'], |
66 | 84 | ['hoverClosest2d', 'hoverCompare2d']
|
67 | 85 | ];
|
68 | 86 |
|
69 |
| - modeButtons3d = [ |
70 |
| - ['toImage'], |
71 |
| - ['orbitRotation', 'tableRotation', 'zoom3d', 'pan3d'], |
| 87 | + var gd = getMockGraphInfo(); |
| 88 | + gd._fullLayout._hasCartesian = true; |
| 89 | + gd._fullLayout.xaxis = {fixedrange: false}; |
| 90 | + |
| 91 | + manageModebar(gd); |
| 92 | + var modebar = gd._fullLayout._modebar; |
| 93 | + |
| 94 | + expect(modebar.hasButtons(buttons)).toBe(true); |
| 95 | + expect(countGroups(modebar)).toEqual(5); |
| 96 | + expect(countButtons(modebar)).toEqual(11); |
| 97 | + expect(countLogo(modebar)).toEqual(1); |
| 98 | + }); |
| 99 | + |
| 100 | + it('creates modebar (cartesian fixed-axes version)', function() { |
| 101 | + var buttons = [ |
| 102 | + ['toImage', 'sendDataToCloud'], |
| 103 | + ['hoverClosest2d', 'hoverCompare2d'] |
| 104 | + ]; |
| 105 | + |
| 106 | + var gd = getMockGraphInfo(); |
| 107 | + gd._fullLayout._hasCartesian = true; |
| 108 | + |
| 109 | + manageModebar(gd); |
| 110 | + var modebar = gd._fullLayout._modebar; |
| 111 | + |
| 112 | + expect(modebar.hasButtons(buttons)).toBe(true); |
| 113 | + expect(countGroups(modebar)).toEqual(3); |
| 114 | + expect(countButtons(modebar)).toEqual(5); |
| 115 | + expect(countLogo(modebar)).toEqual(1); |
| 116 | + }); |
| 117 | + |
| 118 | + it('creates modebar (gl3d version)', function() { |
| 119 | + var buttons = [ |
| 120 | + ['toImage', 'sendDataToCloud'], |
| 121 | + ['zoom3d', 'pan3d', 'orbitRotation', 'tableRotation'], |
72 | 122 | ['resetCameraDefault3d', 'resetCameraLastSave3d'],
|
73 | 123 | ['hoverClosest3d']
|
74 | 124 | ];
|
| 125 | + |
| 126 | + var gd = getMockGraphInfo(); |
| 127 | + gd._fullLayout._hasGL3D = true; |
| 128 | + |
| 129 | + manageModebar(gd); |
| 130 | + var modebar = gd._fullLayout._modebar; |
| 131 | + |
| 132 | + expect(modebar.hasButtons(buttons)).toBe(true); |
| 133 | + expect(countGroups(modebar)).toEqual(5); |
| 134 | + expect(countButtons(modebar)).toEqual(10); |
| 135 | + expect(countLogo(modebar)).toEqual(1); |
| 136 | + }); |
| 137 | + |
| 138 | + it('creates modebar (geo version)', function() { |
| 139 | + var buttons = [ |
| 140 | + ['toImage', 'sendDataToCloud'], |
| 141 | + ['zoomInGeo', 'zoomOutGeo', 'resetGeo'], |
| 142 | + ['hoverClosestGeo'] |
| 143 | + ]; |
| 144 | + |
| 145 | + var gd = getMockGraphInfo(); |
| 146 | + gd._fullLayout._hasGeo = true; |
| 147 | + |
| 148 | + manageModebar(gd); |
| 149 | + var modebar = gd._fullLayout._modebar; |
| 150 | + |
| 151 | + expect(modebar.hasButtons(buttons)).toBe(true); |
| 152 | + expect(countGroups(modebar)).toEqual(4); |
| 153 | + expect(countButtons(modebar)).toEqual(7); |
| 154 | + expect(countLogo(modebar)).toEqual(1); |
| 155 | + }); |
| 156 | + |
| 157 | + it('creates modebar (gl2d version)', function() { |
| 158 | + var buttons = [ |
| 159 | + ['toImage', 'sendDataToCloud'], |
| 160 | + ['zoom2d', 'pan2d'], |
| 161 | + ['zoomIn2d', 'zoomOut2d', 'autoScale2d', 'resetScale2d'], |
| 162 | + ['hoverClosestGl2d'] |
| 163 | + ]; |
| 164 | + |
| 165 | + var gd = getMockGraphInfo(); |
| 166 | + gd._fullLayout._hasGL2D = true; |
| 167 | + |
| 168 | + manageModebar(gd); |
| 169 | + var modebar = gd._fullLayout._modebar; |
| 170 | + |
| 171 | + expect(modebar.hasButtons(buttons)).toBe(true); |
| 172 | + expect(countGroups(modebar)).toEqual(5); |
| 173 | + expect(countButtons(modebar)).toEqual(10); |
| 174 | + expect(countLogo(modebar)).toEqual(1); |
| 175 | + }); |
| 176 | + |
| 177 | + it('creates modebar (pie version)', function() { |
| 178 | + var buttons = [ |
| 179 | + ['toImage', 'sendDataToCloud'], |
| 180 | + ['hoverClosestPie'] |
| 181 | + ]; |
| 182 | + |
| 183 | + var gd = getMockGraphInfo(); |
| 184 | + gd._fullLayout._hasPie = true; |
| 185 | + |
| 186 | + manageModebar(gd); |
| 187 | + var modebar = gd._fullLayout._modebar; |
| 188 | + |
| 189 | + expect(modebar.hasButtons(buttons)).toBe(true); |
| 190 | + expect(countGroups(modebar)).toEqual(3); |
| 191 | + expect(countButtons(modebar)).toEqual(4); |
| 192 | + expect(countLogo(modebar)).toEqual(1); |
75 | 193 | });
|
76 | 194 |
|
77 |
| - it('should return true going from 3D -> 3D buttons.', function() { |
78 |
| - var modebar = createModebar(modeButtons3d); |
79 |
| - expect(modebar.hasButtons(modeButtons3d)).toBe(true); |
| 195 | + it('throws an error if modebarButtonsToRemove isn\'t an array', function() { |
| 196 | + var gd = getMockGraphInfo(); |
| 197 | + gd._context.modebarButtonsToRemove = 'not gonna work'; |
| 198 | + |
| 199 | + expect(function() { manageModebar(gd); }).toThrowError(); |
80 | 200 | });
|
81 | 201 |
|
82 |
| - it('should return true going from 2D -> 2D buttons.', function() { |
83 |
| - var modebar = createModebar(modeButtons2d); |
84 |
| - expect(modebar.hasButtons(modeButtons2d)).toBe(true); |
| 202 | + it('displays or not modebar according to displayModeBar config arg', function() { |
| 203 | + var gd = getMockGraphInfo(); |
| 204 | + manageModebar(gd); |
| 205 | + expect(gd._fullLayout._modebar).toBeDefined(); |
| 206 | + |
| 207 | + gd._context.displayModeBar = false; |
| 208 | + manageModebar(gd); |
| 209 | + expect(gd._fullLayout._modebar).not.toBeDefined(); |
85 | 210 | });
|
86 | 211 |
|
87 |
| - it('should return false going from 2D -> 3D buttons.', function() { |
88 |
| - var modebar = createModebar(modeButtons2d); |
89 |
| - expect(modebar.hasButtons(modeButtons3d)).toBe(false); |
| 212 | + it('displays or not logo according to displaylogo config arg', function() { |
| 213 | + var gd = getMockGraphInfo(); |
| 214 | + manageModebar(gd); |
| 215 | + expect(countLogo(gd._fullLayout._modebar)).toEqual(1); |
| 216 | + |
| 217 | + gd._context.displaylogo = false; |
| 218 | + manageModebar(gd); |
| 219 | + expect(countLogo(gd._fullLayout._modebar)).toEqual(0); |
90 | 220 | });
|
91 | 221 |
|
92 |
| - it('should return false going from 3D -> 2D buttons.', function() { |
93 |
| - var modebar = createModebar(modeButtons3d); |
94 |
| - expect(modebar.hasButtons(modeButtons2d)).toBe(false); |
| 222 | + it('updates modebar buttons if plot type changes', function() { |
| 223 | + var gd = getMockGraphInfo(); |
| 224 | + gd._fullLayout._hasCartesian = true; |
| 225 | + gd._fullLayout.xaxis = {fixedrange: false}; |
| 226 | + |
| 227 | + manageModebar(gd); // gives 11 buttons |
| 228 | + gd._fullLayout._hasCartesian = false; |
| 229 | + gd._fullLayout._hasGL3D = true; |
| 230 | + manageModebar(gd); |
| 231 | + |
| 232 | + expect(countButtons(gd._fullLayout._modebar)).toEqual(10); |
| 233 | + }); |
| 234 | + |
| 235 | + it('updates modebar buttons if plot type changes', function() { |
| 236 | + var gd = getMockGraphInfo(); |
| 237 | + gd._fullLayout._hasCartesian = true; |
| 238 | + gd._fullLayout.xaxis = {fixedrange: false}; |
| 239 | + |
| 240 | + manageModebar(gd); // gives 11 buttons |
| 241 | + gd._context.modebarButtonsToRemove = ['toImage', 'sendDataToCloud']; |
| 242 | + manageModebar(gd); |
| 243 | + |
| 244 | + expect(countButtons(gd._fullLayout._modebar)).toEqual(9); |
95 | 245 | });
|
| 246 | + |
96 | 247 | });
|
| 248 | + |
97 | 249 | });
|
0 commit comments