From cf49d71c68a040694ff7f7d458ea6c9a65da1e98 Mon Sep 17 00:00:00 2001 From: Jae Sung Park Date: Fri, 3 Nov 2017 11:10:43 +0900 Subject: [PATCH] fix(data,interaction): Bar type interaction error on multiple x - Fix erroneous element selector - Update event firing for test cases Fix #178 Close #180 --- spec/assets/util.js | 14 +--- spec/shape.bar-spec.js | 117 ++++++++++++++++++++++---------- src/data/data.js | 2 +- src/interactions/interaction.js | 3 +- 4 files changed, 85 insertions(+), 51 deletions(-) diff --git a/spec/assets/util.js b/spec/assets/util.js index 607991507..710c3bf60 100644 --- a/spec/assets/util.js +++ b/spec/assets/util.js @@ -68,19 +68,7 @@ const fireEvent = (element, name, options = {}, chart) => { "clientX" in options && (options.clientX += paddingLeft); "clientY" in options && (options.clientY += 5); - if (element) { - d3.event = simulant.fire(element, name, options); - - // for legacy tests compatibility - } else { - const event = document.createEvent("MouseEvents"); - - event.initMouseEvent(name, true, true, window, - 0, 0, 0, options.clientX, options.clientY, - false, false, false, false, 0, null); - - d3.event = event; - } + element && simulant.fire(element, name, options); }; /** diff --git a/spec/shape.bar-spec.js b/spec/shape.bar-spec.js index 70031ed15..4f88f39c6 100644 --- a/spec/shape.bar-spec.js +++ b/spec/shape.bar-spec.js @@ -132,52 +132,60 @@ describe("SHAPE BAR", () => { }; }); - it("should not be within bar", () => { + it("should not be within bar", done => { const internal = chart.internal; - const bar = internal.main.select(".bb-target-data1 .bb-bar-0").node(); + const bar = internal.main.select(".bb-target-data1 .bb-bar-0") + .on("click", function() { + expect(internal.isWithinBar(this)).to.not.be.ok; + done(); + }); - util.fireEvent(null, "click", { + util.fireEvent(bar.node(), "click", { clientX: 0, clientY: 0 }, chart); - - expect(chart.internal.isWithinBar(bar)).to.not.be.ok; }); - it("should be within bar", () => { + it("should be within bar", done => { const internal = chart.internal; - const bar = internal.main.select(".bb-target-data1 .bb-bar-0").node(); + const bar = internal.main.select(".bb-target-data1 .bb-bar-0") + .on("click", function() { + expect(internal.isWithinBar(this)).to.be.ok; + done(); + }); - util.fireEvent(null, "click", { + util.fireEvent(bar.node(), "click", { clientX: 31, clientY: 280 }, chart); - - expect(internal.isWithinBar(bar)).to.be.ok; }); - it("should not be within bar of negative value", () => { + it("should not be within bar of negative value", done => { const internal = chart.internal; - const bar = internal.main.select(".bb-target-data3 .bb-bar-0").node(); + const bar = internal.main.select(".bb-target-data3 .bb-bar-0") + .on("click", function() { + expect(internal.isWithinBar(this)).to.not.be.ok; + done(); + }); - util.fireEvent(null, "click", { + util.fireEvent(bar.node(), "click", { clientX: 68, clientY: 280 }, chart); - - expect(internal.isWithinBar(bar)).to.not.be.ok; }); - it("should be within bar of negative value", () => { + it("should be within bar of negative value", done => { const internal = chart.internal; - const bar = internal.main.select(".bb-target-data3 .bb-bar-0").node(); + const bar = internal.main.select(".bb-target-data3 .bb-bar-0") + .on("click", function() { + expect(internal.isWithinBar(this)).to.be.ok; + done(); + }); - util.fireEvent(null, "click", { + util.fireEvent(bar.node(), "click", { clientX: 68, clientY: 350 }, chart); - - expect(internal.isWithinBar(bar)).to.be.ok; }); }); @@ -186,41 +194,80 @@ describe("SHAPE BAR", () => { args.axis.rotated = true; }); - it("should not be within bar", () => { + it("should not be within bar", done => { const internal = chart.internal; - const bar = internal.main.select(".bb-target-data1 .bb-bar-0").node(); + const bar = internal.main.select(".bb-target-data1 .bb-bar-0") + .on("click", function() { + expect(internal.isWithinBar(this)).to.not.be.ok; + done(); + }); - util.fireEvent(null, "click", { + util.fireEvent(bar.node(), "click", { clientX: 0, clientY: 0 }, chart); - - expect(internal.isWithinBar(bar)).to.not.be.ok; }); - it("should be within bar", () => { + it("should be within bar", done => { const internal = chart.internal; - const bar = internal.main.select(".bb-target-data1 .bb-bar-0").node(); + const bar = internal.main.select(".bb-target-data1 .bb-bar-0") + .on("click", function() { + expect(internal.isWithinBar(this)).to.be.ok; + done(); + }); - util.fireEvent(null, "click", { + util.fireEvent(bar.node(), "click", { clientX: 190, clientY: 20 }, chart); - - expect(internal.isWithinBar(bar)).to.be.ok; }); - it("should be within bar of negative value", () => { + it("should be within bar of negative value", done => { const internal = chart.internal; - const bar = internal.main.select(".bb-target-data3 .bb-bar-0").node(); + const bar = internal.main.select(".bb-target-data3 .bb-bar-0") + .on("click", function() { + expect(internal.isWithinBar(this)).to.be.ok; + done(); + }); - util.fireEvent(null, "click", { + util.fireEvent(bar.node(), "click", { clientX: 68, clientY: 50 }, chart); - - expect(internal.isWithinBar(bar)).to.be.ok; }); }); }); + + describe("multiple xs", () => { + before(() => { + args = { + data: { + type: "bar", + xs: { + "data1": "x", + "data2": "x2" + }, + x: "x", + columns: [ + ["x", "a", "b", "c", "d"], + ["x2", "e", "f", "g", "h"], + ["data1", 2407067, 3499561, 2811458, 2766504], + ["data2", 2211645, 2211645, 2200597, 2352318] + ] + }, + axis: { + x: { + type: "category" + } + } + }; + }); + + it("should not throw error on click", () => { + const internal = chart.internal; + const bar = internal.main.select(".bb-event-rects-multiple rect").node(); + + expect(() => util.fireEvent(bar, "click")).to.not.throw(); + }); + }); }); diff --git a/src/data/data.js b/src/data/data.js index 135dd5aa5..8cdbf5779 100644 --- a/src/data/data.js +++ b/src/data/data.js @@ -470,7 +470,7 @@ extend(ChartInternal.prototype, { values .filter(v => v && $$.isBarType(v.id)) .forEach(v => { - const shape = $$.main.select().node(`.${CLASS.bars}${$$.getTargetSelectorSuffix(v.id)}.${CLASS.bar}-${v.index}`); + const shape = $$.main.select(`.${CLASS.bars}${$$.getTargetSelectorSuffix(v.id)} .${CLASS.bar}-${v.index}`).node(); if (!closest && $$.isWithinBar(shape)) { closest = v; diff --git a/src/interactions/interaction.js b/src/interactions/interaction.js index 1163f43ec..57f410b64 100644 --- a/src/interactions/interaction.js +++ b/src/interactions/interaction.js @@ -322,7 +322,7 @@ extend(ChartInternal.prototype, { return; } - const mouse = d3Mouse($$.main.select(`.${CLASS.eventRects} .${CLASS.eventRect}`).node()); + const mouse = d3Mouse(context); const closest = $$.findClosestFromTargets(targetsToShow, mouse); let sameXData; @@ -533,7 +533,6 @@ extend(ChartInternal.prototype, { ) : () => {} ); - if ($$.inputType === "mouse") { rect .on("mouseover", function() {