Skip to content

Commit b412398

Browse files
etpinardetpinard
committed
test: modif update menu test suite to pass on CircleCI
- For some reason, ../assets/mouse_event.js fails to detect the button elements in FF38 (like on CircleCI 2016/08/02), so dispatch the mouse event directly about the nodes instead - must compare item width with a tolerance as the exact result is browser/font dependent (via getBBox)
1 parent 56a3703 commit b412398

File tree

1 file changed

+51
-51
lines changed

1 file changed

+51
-51
lines changed

‎test/jasmine/tests/updatemenus_test.js‎

Lines changed: 51 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,6 @@ var Plotly = require('@lib');
66
var Lib = require('@src/lib');
77
var createGraphDiv = require('../assets/create_graph_div');
88
var destroyGraphDiv = require('../assets/destroy_graph_div');
9-
var getRectCenter = require('../assets/get_rect_center');
10-
var mouseEvent = require('../assets/mouse_event');
119
var TRANSITION_DELAY = 100;
1210

1311
describe('update menus defaults', function() {
@@ -201,51 +199,51 @@ describe('update menus interactions', function() {
201199
});
202200

203201
it('should drop/fold buttons when clicking on header', function(done) {
204-
var pos0 = getHeaderPos(0),
205-
pos1 = getHeaderPos(1);
202+
var header0 = selectHeader(0),
203+
header1 = selectHeader(1);
206204

207-
click(pos0).then(function() {
205+
click(header0).then(function() {
208206
assertMenus([3, 0]);
209-
return click(pos0);
207+
return click(header0);
210208
}).then(function() {
211209
assertMenus([0, 0]);
212-
return click(pos1);
210+
return click(header1);
213211
}).then(function() {
214212
assertMenus([0, 4]);
215-
return click(pos1);
213+
return click(header1);
216214
}).then(function() {
217215
assertMenus([0, 0]);
218-
return click(pos0);
216+
return click(header0);
219217
}).then(function() {
220218
assertMenus([3, 0]);
221-
return click(pos1);
219+
return click(header1);
222220
}).then(function() {
223221
assertMenus([0, 4]);
224-
return click(pos0);
222+
return click(header0);
225223
}).then(function() {
226224
assertMenus([3, 0]);
227225
done();
228226
});
229227
});
230228

231229
it('should apply update on button click', function(done) {
232-
var pos0 = getHeaderPos(0),
233-
pos1 = getHeaderPos(1);
230+
var header0 = selectHeader(0),
231+
header1 = selectHeader(1);
234232

235233
assertActive(gd, [1, 2]);
236234

237-
click(pos0).then(function() {
235+
click(header0).then(function() {
238236
assertItemColor(selectButton(1), activeColor);
239237

240-
return click(getButtonPos(0));
238+
return click(selectButton(0));
241239
}).then(function() {
242240
assertActive(gd, [0, 2]);
243241

244-
return click(pos1);
242+
return click(header1);
245243
}).then(function() {
246244
assertItemColor(selectButton(2), activeColor);
247245

248-
return click(getButtonPos(0));
246+
return click(selectButton(0));
249247
}).then(function() {
250248
assertActive(gd, [0, 0]);
251249

@@ -254,37 +252,34 @@ describe('update menus interactions', function() {
254252
});
255253

256254
it('should change color on mouse over', function(done) {
257-
var header0 = selectHeader(0),
258-
pos0 = getHeaderPos(0);
255+
var INDEX_0 = 2,
256+
INDEX_1 = gd.layout.updatemenus[1].active;
257+
258+
var header0 = selectHeader(0);
259259

260260
assertItemColor(header0, bgColor);
261-
mouseEvent('mouseover', pos0[0], pos0[1]);
261+
mouseEvent('mouseover', header0);
262262
assertItemColor(header0, activeColor);
263-
mouseEvent('mouseout', pos0[0], pos0[1]);
263+
mouseEvent('mouseout', header0);
264264
assertItemColor(header0, bgColor);
265265

266-
click(pos0).then(function() {
267-
var index = 2,
268-
button = selectButton(index),
269-
pos = getButtonPos(index);
266+
click(header0).then(function() {
267+
var button = selectButton(INDEX_0);
270268

271269
assertItemColor(button, bgColor);
272-
mouseEvent('mouseover', pos[0], pos[1]);
270+
mouseEvent('mouseover', button);
273271
assertItemColor(button, activeColor);
274-
mouseEvent('mouseout', pos[0], pos[1]);
272+
mouseEvent('mouseout', button);
275273
assertItemColor(button, bgColor);
276274

277-
var pos1 = getHeaderPos(1);
278-
return click(pos1);
275+
return click(selectHeader(1));
279276
}).then(function() {
280-
var index = gd.layout.updatemenus[1].active,
281-
button = selectButton(index),
282-
pos = getButtonPos(index);
277+
var button = selectButton(INDEX_1);
283278

284279
assertItemColor(button, activeColor);
285-
mouseEvent('mouseover', pos[0], pos[1]);
280+
mouseEvent('mouseover', button);
286281
assertItemColor(button, activeColor);
287-
mouseEvent('mouseout', pos[0], pos[1]);
282+
mouseEvent('mouseout', button);
288283
assertItemColor(button, activeColor);
289284

290285
done();
@@ -298,7 +293,7 @@ describe('update menus interactions', function() {
298293
Plotly.relayout(gd, 'updatemenus[0].bgcolor', 'red').then(function() {
299294
assertItemColor(selectHeader(0), 'rgb(255, 0, 0)');
300295

301-
return click(getHeaderPos(0));
296+
return click(selectHeader(0));
302297
}).then(function() {
303298
assertMenus([3, 0]);
304299

@@ -312,7 +307,7 @@ describe('update menus interactions', function() {
312307
}).then(function() {
313308
assertItemDims(selectHeader(1), 179, 34.2);
314309

315-
return click(getHeaderPos(1));
310+
return click(selectHeader(1));
316311
}).then(function() {
317312
assertMenus([0, 4]);
318313

@@ -321,7 +316,7 @@ describe('update menus interactions', function() {
321316
// and delete buttons
322317
assertMenus([0]);
323318

324-
return click(getHeaderPos(0));
319+
return click(selectHeader(0));
325320
}).then(function() {
326321
assertMenus([3]);
327322

@@ -375,39 +370,44 @@ describe('update menus interactions', function() {
375370
}
376371

377372
function assertItemDims(node, width, height) {
378-
var rect = node.select('rect');
379-
expect(+rect.attr('width')).toEqual(width);
373+
var rect = node.select('rect'),
374+
actualWidth = +rect.attr('width');
375+
376+
// must compare with a tolerance as the exact result
377+
// is browser/font dependent (via getBBox)
378+
expect(Math.abs(actualWidth - width)).toBeLessThan(11);
379+
380+
// height is determined by 'fontsize',
381+
// so no such tolerance is needed
380382
expect(+rect.attr('height')).toEqual(height);
381383
}
382384

383-
function click(pos) {
385+
function click(selection) {
384386
return new Promise(function(resolve) {
385387
setTimeout(function() {
386-
mouseEvent('click', pos[0], pos[1]);
388+
mouseEvent('click', selection);
387389
resolve();
388390
}, TRANSITION_DELAY);
389391
});
390392
}
391393

394+
// For some reason, ../assets/mouse_event.js fails
395+
// to detect the button elements in FF38 (like on CircleCI 2016/08/02),
396+
// so dispatch the mouse event directly about the nodes instead.
397+
function mouseEvent(type, selection) {
398+
var ev = new window.MouseEvent(type, { bubbles: true });
399+
selection.node().dispatchEvent(ev);
400+
}
401+
392402
function selectHeader(menuIndex) {
393403
var headers = d3.selectAll('.' + constants.headerClassName),
394404
header = d3.select(headers[0][menuIndex]);
395405
return header;
396406
}
397407

398-
function getHeaderPos(menuIndex) {
399-
var header = selectHeader(menuIndex);
400-
return getRectCenter(header.select('rect').node());
401-
}
402-
403408
function selectButton(buttonIndex) {
404409
var buttons = d3.selectAll('.' + constants.buttonClassName),
405410
button = d3.select(buttons[0][buttonIndex]);
406411
return button;
407412
}
408-
409-
function getButtonPos(buttonIndex) {
410-
var button = selectButton(buttonIndex);
411-
return getRectCenter(button.select('rect').node());
412-
}
413413
});

0 commit comments

Comments
 (0)