Skip to content

Commit 71a0c08

Browse files
gordonwoodhullgordonwoodhull
committed
add d3compat.callHandler; fake events in tests using it
ref #1824: we were using a mixture of d3@5 and d3@6 event call signatures this handler uses the d3@6 signature
1 parent 7e19e18 commit 71a0c08

14 files changed

+83
-72
lines changed

‎spec/bar-chart-spec.js

+7-7
Original file line numberDiff line numberDiff line change
@@ -271,7 +271,7 @@ describe('dc.BarChart', () => {
271271
expect(dimension.top(Infinity).length).toEqual(10);
272272
// fake a click
273273
const abar = chart.selectAll('rect.bar:nth-child(3)');
274-
abar.on('click')(abar.datum());
274+
dc.d3compat.callHandler(abar.on('click'), null, {}, abar.datum());
275275
expect(dimension.top(Infinity).length).toEqual(1);
276276
});
277277
});
@@ -285,7 +285,7 @@ describe('dc.BarChart', () => {
285285
expect(dimension.top(Infinity).length).toEqual(10);
286286
// fake a click
287287
const alabel = chart.select('text.barLabel');
288-
alabel.on('click')(alabel.datum());
288+
dc.d3compat.callHandler(alabel.on('click'), null, {}, alabel.datum());
289289
expect(dimension.top(Infinity).length).toEqual(3);
290290
});
291291
});
@@ -356,14 +356,14 @@ describe('dc.BarChart', () => {
356356
beforeEach(() => {
357357
chart.brushOn(false)
358358
.on('renderlet', _chart => {
359-
_chart.selectAll('rect.bar').on('click', d => _chart.onClick(d));
359+
_chart.selectAll('rect.bar').on('click', dc.d3compat.eventHandler(d => _chart.onClick(d)));
360360
})
361361
.render();
362362
});
363363
it('clicking causes another dimension to be filtered', () => {
364364
expect(dimension.top(Infinity).length).toEqual(10);
365365
const abar = chart.selectAll('rect.bar:nth-child(3)');
366-
abar.on('click')(abar.datum());
366+
dc.d3compat.callHandler(abar.on('click'), null, {}, abar.datum());
367367
expect(dimension.top(Infinity).length).toEqual(3);
368368
});
369369
});
@@ -688,7 +688,7 @@ describe('dc.BarChart', () => {
688688
.render();
689689

690690
firstItem = chart.select('g.dc-legend g.dc-legend-item');
691-
firstItem.on('mouseover')(firstItem.datum());
691+
dc.d3compat.callHandler(firstItem.on('mouseover'), null, {}, firstItem.datum());
692692
});
693693

694694
describe('when a legend item is hovered over', () => {
@@ -707,14 +707,14 @@ describe('dc.BarChart', () => {
707707

708708
describe('when a legend item is hovered out', () => {
709709
it('should remove highlighting from corresponding lines and areas', () => {
710-
firstItem.on('mouseout')(firstItem.datum());
710+
dc.d3compat.callHandler(firstItem.on('mouseout'), null, {}, firstItem.datum());
711711
nthStack(0).forEachBar(bar => {
712712
expect(bar.classed('highlight')).toBeFalsy();
713713
});
714714
});
715715

716716
it('should fade in non-corresponding lines and areas', () => {
717-
firstItem.on('mouseout')(firstItem.datum());
717+
dc.d3compat.callHandler(firstItem.on('mouseout'), null, {}, firstItem.datum());
718718
nthStack(1).forEachBar(bar => {
719719
expect(bar.classed('fadeout')).toBeFalsy();
720720
});

‎spec/box-plot-spec.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -282,7 +282,7 @@ describe('dc.BoxPlot', () => {
282282

283283
describe('clicking on a box', () => {
284284
beforeEach(() => {
285-
box(0).on('click').call(chart, box(0).datum());
285+
dc.d3compat.callHandler(box(0).on('click'), chart, {}, box(0).datum());
286286
});
287287

288288
it('should apply a filter to the chart', () => {

‎spec/bubble-chart-spec.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -678,7 +678,7 @@ describe('dc.bubbleChart', () => {
678678
describe('column filtering with straight crossfilter', () => {
679679
beforeEach(() => {
680680
const axisLabel = d3.select(heatMap.selectAll('.cols.axis text').nodes()[3]);
681-
axisLabel.on('click')(axisLabel.datum());
681+
dc.d3compat.callHandler(axisLabel.on('click'), null, {}, axisLabel.datum());
682682
d3.timerFlush();
683683
});
684684
it('updates bubble radii correctly', () => {
@@ -696,7 +696,7 @@ describe('dc.bubbleChart', () => {
696696
chart.group(clone_group(sepalGroup));
697697
chart.render();
698698
const axisLabel = d3.select(heatMap.selectAll('.cols.axis text').nodes()[3]);
699-
axisLabel.on('click')(axisLabel.datum());
699+
dc.d3compat.callHandler(axisLabel.on('click'), null, {}, axisLabel.datum());
700700
d3.timerFlush();
701701
});
702702
it('updates bubble radii correctly', () => {

‎spec/composite-chart-spec.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -368,18 +368,18 @@ describe('dc.compositeChart', () => {
368368
it('should properly delegate highlighting to its children', () => {
369369
const firstItem = chart.select('g.dc-legend g.dc-legend-item');
370370

371-
firstItem.on('mouseover')(firstItem.datum());
371+
dc.d3compat.callHandler(firstItem.on('mouseover'), null, {}, firstItem.datum());
372372
expect(chart.selectAll('rect.highlight').size()).toBe(6);
373373
expect(chart.selectAll('path.fadeout').size()).toBe(4);
374-
firstItem.on('mouseout')(firstItem.datum());
374+
dc.d3compat.callHandler(firstItem.on('mouseout'), null, {}, firstItem.datum());
375375
expect(chart.selectAll('rect.highlight').size()).toBe(0);
376376
expect(chart.selectAll('path.fadeout').size()).toBe(0);
377377
});
378378

379379
it('should hide hidable child stacks', () => {
380380
const dateValueGroupLine2 = d3.select(chart.selectAll('g.dc-legend g.dc-legend-item').nodes()[3]);
381381

382-
dateValueGroupLine2.on('click')(dateValueGroupLine2.datum());
382+
dc.d3compat.callHandler(dateValueGroupLine2.on('click'), null, {}, dateValueGroupLine2.datum());
383383
expect(dateValueGroupLine2.text()).toBe('Date Value Group Line 2');
384384
expect(d3.select(chart.selectAll('g.dc-legend g.dc-legend-item').nodes()[3]).classed('fadeout')).toBeTruthy();
385385
expect(chart.selectAll('path.line').size()).toEqual(3);

‎spec/heatmap-spec.js

+12-12
Original file line numberDiff line numberDiff line change
@@ -297,7 +297,7 @@ describe('dc.heatmap', () => {
297297

298298
function clickCellOnChart (_chart, x, y) {
299299
const oneCell = _chart.selectAll('.box-group').filter(d => d.key[0] === x && d.key[1] === y);
300-
oneCell.select('rect').on('click')(oneCell.datum());
300+
dc.d3compat.callHandler(oneCell.select('rect').on('click'), null, {}, oneCell.datum());
301301
return oneCell;
302302
}
303303

@@ -339,9 +339,9 @@ describe('dc.heatmap', () => {
339339
it('should toggle a filter for the clicked box', () => {
340340
chart.selectAll('.box-group').each(function (d) {
341341
const cell = d3.select(this).select('rect');
342-
cell.on('click')(d);
342+
dc.d3compat.callHandler(cell.on('click'), null, {}, d);
343343
expect(chart.hasFilter(d.key)).toBeTruthy();
344-
cell.on('click')(d);
344+
dc.d3compat.callHandler(cell.on('click'), null, {}, d);
345345
expect(chart.hasFilter(d.key)).toBeFalsy();
346346
});
347347
});
@@ -360,15 +360,15 @@ describe('dc.heatmap', () => {
360360
it('should filter all cells on that axis', () => {
361361
chart.selectAll('.cols.axis text').each(function (d) {
362362
const axisLabel = d3.select(this);
363-
axisLabel.on('click')(d);
363+
dc.d3compat.callHandler(axisLabel.on('click'), null, {}, d);
364364
assertOnlyThisAxisIsFiltered(chart, 0, d);
365-
axisLabel.on('click')(d);
365+
dc.d3compat.callHandler(axisLabel.on('click'), null, {}, d);
366366
});
367367
chart.selectAll('.rows.axis text').each(function (d) {
368368
const axisLabel = d3.select(this);
369-
axisLabel.on('click')(d);
369+
dc.d3compat.callHandler(axisLabel.on('click'), null, {}, d);
370370
assertOnlyThisAxisIsFiltered(chart, 1, d);
371-
axisLabel.on('click')(d);
371+
dc.d3compat.callHandler(axisLabel.on('click'), null, {}, d);
372372
});
373373
});
374374
});
@@ -377,7 +377,7 @@ describe('dc.heatmap', () => {
377377
const boxNodes = chart.selectAll('.box-group').nodes();
378378
const box = d3.select(boxNodes[Math.floor(Math.random() * boxNodes.length)]);
379379

380-
box.select('rect').on('click')(box.datum());
380+
dc.d3compat.callHandler(box.select('rect').on('click'), null, {}, box.datum());
381381

382382
expect(chart.hasFilter(box.datum().key)).toBeTruthy();
383383

@@ -386,11 +386,11 @@ describe('dc.heatmap', () => {
386386
const columns = chart.selectAll('.cols.axis text');
387387
const column = columns.filter(columnData => columnData === xVal);
388388

389-
column.on('click')(column.datum());
389+
dc.d3compat.callHandler(column.on('click'), null, {}, column.datum());
390390

391391
assertOnlyThisAxisIsFiltered(chart, 0, xVal);
392392

393-
column.on('click')(column.datum());
393+
dc.d3compat.callHandler(column.on('click'), null, {}, column.datum());
394394
});
395395
});
396396
describe('with all cells on that axis already filtered', () => {
@@ -399,7 +399,7 @@ describe('dc.heatmap', () => {
399399
chart.selectAll('.box-group').each(function (d) {
400400
const box = d3.select(this);
401401
if (d.key[0] === xVal) {
402-
box.select('rect').on('click')(box.datum());
402+
dc.d3compat.callHandler(box.select('rect').on('click'), null, {}, box.datum());
403403
}
404404
});
405405

@@ -408,7 +408,7 @@ describe('dc.heatmap', () => {
408408
const columns = chart.selectAll('.cols.axis text');
409409
const column = columns.filter(columnData => columnData === xVal);
410410

411-
column.on('click')(column.datum());
411+
dc.d3compat.callHandler(column.on('click'), null, {}, column.datum());
412412

413413
chart.select('.box-group').each(d => {
414414
expect(chart.hasFilter(d.key)).toBeFalsy();

‎spec/html-legend-spec.js

+3-2
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,8 @@ describe('dc.htmlLegend', () => {
6666
});
6767

6868
it('not allow hiding stacks be default', () => {
69-
legendItem(0, 'vertical').on('click').call(legendItem(0).nodes()[0], legendItem(0, 'vertical').datum());
69+
dc.d3compat.callHandler(legendItem(0, 'vertical').on('click'),
70+
legendItem(0).nodes()[0], {}, legendItem(0, 'vertical').datum());
7071
expect(chart.selectAll('path.line').size()).toBe(3);
7172
});
7273

@@ -100,7 +101,7 @@ describe('dc.htmlLegend', () => {
100101

101102
it('not allow hiding stacks be default', () => {
102103
const firstLegendItem = legendItem(0, 'horizontal');
103-
firstLegendItem.on('click').call(firstLegendItem.nodes()[0], firstLegendItem.datum());
104+
dc.d3compat.callHandler(firstLegendItem.on('click'), firstLegendItem.nodes()[0], {}, firstLegendItem.datum());
104105
expect(chart.selectAll('path.line').size()).toBe(3);
105106
});
106107
});

‎spec/legend-spec.js

+7-7
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@ describe('dc.legend', () => {
6969
});
7070

7171
it('not allow hiding stacks be default', () => {
72-
legendItem(0).on('click').call(legendItem(0).nodes()[0], legendItem(0).datum());
72+
dc.d3compat.callHandler(legendItem(0).on('click'), legendItem(0).nodes()[0], {}, legendItem(0).datum());
7373
expect(chart.selectAll('path.line').size()).toBe(3);
7474
});
7575

@@ -241,7 +241,7 @@ describe('dc.legend', () => {
241241

242242
describe('clicking on a legend item', () => {
243243
beforeEach(() => {
244-
legendItem(0).on('click').call(legendItem(0).nodes()[0], legendItem(0).datum());
244+
dc.d3compat.callHandler(legendItem(0).on('click'), legendItem(0).nodes()[0], {}, legendItem(0).datum());
245245
});
246246

247247
it('should fade out the legend item', () => {
@@ -253,13 +253,13 @@ describe('dc.legend', () => {
253253
});
254254

255255
it('disable hover highlighting for that legend item', () => {
256-
legendItem(0).on('mouseover')(legendItem(0).datum());
256+
dc.d3compat.callHandler(legendItem(0).on('mouseover'), null, {}, legendItem(0).datum());
257257
expect(d3.select(chart.selectAll('path.line').nodes()[1]).classed('fadeout')).toBeFalsy();
258258
});
259259

260260
describe('clicking on a faded out legend item', () => {
261261
beforeEach(() => {
262-
legendItem(0).on('click').call(legendItem(0).nodes()[0], legendItem(0).datum());
262+
dc.d3compat.callHandler(legendItem(0).on('click'), legendItem(0).nodes()[0], {}, legendItem(0).datum());
263263
});
264264

265265
it('should unfade the legend item', () => {
@@ -289,9 +289,9 @@ describe('dc.legend', () => {
289289

290290
it('keyboard focus on legend item should highlight chart item', () => {
291291

292-
chart
293-
.select('g.dc-legend').select('g.dc-legend-item text')
294-
.on('focus').call(legendItem(0).nodes()[0], legendItem(0).datum());
292+
dc.d3compat.callHandler(
293+
chart.select('g.dc-legend').select('g.dc-legend-item text').on('focus'),
294+
legendItem(0).nodes()[0], {}, legendItem(0).datum());
295295

296296
expect(d3.select(chart.selectAll('path.line').nodes()[0]).classed('highlight')).toBeTruthy();
297297
});

‎spec/line-chart-spec.js

+15-15
Original file line numberDiff line numberDiff line change
@@ -64,16 +64,16 @@ describe('dc.lineChart', () => {
6464
it('should change the radius on mousemove', () => {
6565
chart.selectAll('circle.dot').each(function () {
6666
const dot = d3.select(this);
67-
dot.on('mousemove').call(this);
67+
dc.d3compat.callHandler(dot.on('mousemove'), this, {});
6868
expect(dot.attr('r')).toBe('5');
6969
});
7070
});
7171

7272
it('should revert to original radius on mouseout', () => {
7373
chart.selectAll('circle.dot').each(function () {
7474
const dot = d3.select(this);
75-
dot.on('mousemove').call(this);
76-
dot.on('mouseout').call(this);
75+
dc.d3compat.callHandler(dot.on('mousemove'), this, {});
76+
dc.d3compat.callHandler(dot.on('mouseout'), this, {});
7777
expect(dot.attr('r')).toBe('2');
7878
});
7979
});
@@ -93,7 +93,7 @@ describe('dc.lineChart', () => {
9393
it('should not change showing the data point on mousemove', () => {
9494
chart.selectAll('circle.dot').each(function () {
9595
const dot = d3.select(this);
96-
dot.on('mousemove').call(this);
96+
dc.d3compat.callHandler(dot.on('mousemove'), this, {});
9797
expect(dot.style('fill-opacity')).toBeWithinDelta(0.8);
9898
expect(dot.style('stroke-opacity')).toBeWithinDelta(0.8);
9999
});
@@ -102,8 +102,8 @@ describe('dc.lineChart', () => {
102102
it('should not change returning to extremely low opacity on hover out', () => {
103103
chart.selectAll('circle.dot').each(function () {
104104
const dot = d3.select(this);
105-
dot.on('mousemove').call(this);
106-
dot.on('mouseout').call(this);
105+
dc.d3compat.callHandler(dot.on('mousemove'), this, {});
106+
dc.d3compat.callHandler(dot.on('mouseout'), this, {});
107107
expect(dot.style('fill-opacity')).toBeWithinDelta(1e-6);
108108
expect(dot.style('stroke-opacity')).toBeWithinDelta(1e-6);
109109
});
@@ -214,7 +214,7 @@ describe('dc.lineChart', () => {
214214
it('should become visible when hovered over', () => {
215215
chart.selectAll('circle.dot').each(function () {
216216
const dot = d3.select(this);
217-
dot.on('mousemove').call(this);
217+
dc.d3compat.callHandler(dot.on('mousemove'), this, {});
218218
expect(dot.style('fill-opacity')).toBeWithinDelta(0.8);
219219
expect(dot.style('stroke-opacity')).toBeWithinDelta(0.8);
220220
});
@@ -223,8 +223,8 @@ describe('dc.lineChart', () => {
223223
it('should return to extremely low opacity on hover out', () => {
224224
chart.selectAll('circle.dot').each(function () {
225225
const dot = d3.select(this);
226-
dot.on('mousemove').call(this);
227-
dot.on('mouseout').call(this);
226+
dc.d3compat.callHandler(dot.on('mousemove'), this, {});
227+
dc.d3compat.callHandler(dot.on('mouseout'), this, {});
228228
expect(dot.style('fill-opacity')).toBeWithinDelta(1e-6);
229229
expect(dot.style('stroke-opacity')).toBeWithinDelta(1e-6);
230230
});
@@ -252,7 +252,7 @@ describe('dc.lineChart', () => {
252252
let x;
253253
beforeEach(() => {
254254
const dot = chart.select('circle.dot');
255-
dot.on('mousemove').call(dot.nodes()[0]);
255+
dc.d3compat.callHandler(dot.on('mousemove'), dot.nodes()[0], {});
256256
x = dot.attr('cx');
257257
});
258258

@@ -268,7 +268,7 @@ describe('dc.lineChart', () => {
268268
let x;
269269
beforeEach(() => {
270270
const dot = chart.select('circle.dot');
271-
dot.on('mousemove').call(dot.nodes()[0]);
271+
dc.d3compat.callHandler(dot.on('mousemove'), dot.nodes()[0], {});
272272
x = dot.attr('cx');
273273
});
274274

@@ -284,7 +284,7 @@ describe('dc.lineChart', () => {
284284
beforeEach(() => {
285285
chart.useRightYAxis(true).render();
286286
const dot = chart.select('circle.dot');
287-
dot.on('mousemove').call(dot.nodes()[0]);
287+
dc.d3compat.callHandler(dot.on('mousemove'), dot.nodes()[0], {});
288288
x = dot.attr('cx');
289289
});
290290

@@ -617,7 +617,7 @@ describe('dc.lineChart', () => {
617617
.render();
618618

619619
firstItem = chart.select('g.dc-legend g.dc-legend-item');
620-
firstItem.on('mouseover')(firstItem.datum());
620+
dc.d3compat.callHandler(firstItem.on('mouseover'), {}, null, firstItem.datum());
621621
});
622622

623623
describe('when a legend item is hovered over', () => {
@@ -634,13 +634,13 @@ describe('dc.lineChart', () => {
634634

635635
describe('when a legend item is hovered out', () => {
636636
it('should remove highlighting from corresponding lines and areas', () => {
637-
firstItem.on('mouseout')(firstItem.datum());
637+
dc.d3compat.callHandler(firstItem.on('mouseout'), null, {}, firstItem.datum());
638638
expect(nthLine(0).classed('highlight')).toBeFalsy();
639639
expect(nthArea(0).classed('highlight')).toBeFalsy();
640640
});
641641

642642
it('should fade in non-corresponding lines and areas', () => {
643-
firstItem.on('mouseout')(firstItem.datum());
643+
dc.d3compat.callHandler(firstItem.on('mouseout'), null, {}, firstItem.datum());
644644
expect(nthLine(1).classed('fadeout')).toBeFalsy();
645645
expect(nthArea(1).classed('fadeout')).toBeFalsy();
646646
});

0 commit comments

Comments
 (0)