fix(bar): Fix not firing data.onclick

- Add conditional to check when only 'bar' named binding is imported.
- Add test codes for ESM

Fix #1619
Ref #1620

src/ChartInternal/interactions/eventrect.ts

@@ -411,7 +411,7 @@ export default {
 		const $$ = ctx;
 		const {config, state, $el: {main}} = $$;
 
-		if ($$.hasArcType() || !$$.toggleShape || state.cancelClick) {
+		if ($$.hasArcType() || state.cancelClick) {
 			state.cancelClick && (state.cancelClick = false);
 
 			return;
@@ -422,7 +422,7 @@ export default {
 		main.selectAll(`.${CLASS.shape}-${index}`)
 			.each(function(d2) {
 				if (config.data_selection_grouped || $$.isWithinShape(this, d2)) {
-					$$.toggleShape(this, d2, index);
+					$$.toggleShape && $$.toggleShape(this, d2, index);
 					config.data_onclick.bind($$.api)(d2, this);
 				}
 			});

src/ChartInternal/shape/shape.ts

@@ -306,7 +306,7 @@ export default {
 
 		if (!$$.isTargetToShow(d.id)) {
 			isWithin = false;
-		} else if ($$.hasValidPointType(that.nodeName)) {
+		} else if ($$.hasValidPointType && $$.hasValidPointType(that.nodeName)) {
 			isWithin = $$.isStepType(d) ?
 				$$.isWithinStep(that, $$.getYScaleById(d.id)(d.value)) :
 				$$.isWithinCircle(that, $$.isBubbleType(d) ? $$.pointSelectR(d) * 1.5 : 0);

test/esm/bar-spec.ts

@@ -0,0 +1,43 @@
+/**
+ * Copyright (c) 2017 ~ present NAVER Corp.
+ * billboard.js project is licensed under the MIT license
+ */
+/* eslint-disable */
+/* global describe, beforeEach, it, expect */
+import {expect} from "chai";
+import sinon from "sinon";
+import bb, {bar} from "../../src/index.esm";
+import util from "../assets/util";
+import CLASS from "../../src/config/classes";
+
+describe("ESM bar", function() {
+    let chart;
+    const spy = sinon.spy();
+    const args: any = {
+        data: {
+            columns: [
+                ["data1", 300, 350, 300, 0, 100],
+                ["data2", 130, 100, 140, 200, 150]
+            ],
+            type: bar(),
+            onclick: spy
+        }
+    };
+
+	beforeEach(() => {
+		chart = bb.generate(args);
+	});
+
+    it("check data.onclick for bar type", () => {
+        const rect = chart.$.main.select(`.${CLASS.eventRect}.${CLASS.eventRect}-0`).node();
+        const bar = chart.$.bar.bars.nodes()[0];
+        const pos = util.getBBox(bar);
+
+        util.fireEvent(rect, "click", {
+            clientX: pos.x + 20,
+            clientY: pos.y + 50
+        }, chart);
+
+        expect(spy.calledOnce).to.be.true;
+    });
+});

test/esm/esm-spec.ts

@@ -0,0 +1,75 @@
+/**
+ * Copyright (c) 2017 ~ present NAVER Corp.
+ * billboard.js project is licensed under the MIT license
+ */
+/* eslint-disable */
+/* global describe, beforeEach, it, expect */
+import {expect} from "chai";
+import * as bb from "../../src/index.esm";
+import CLASS from "../../src/config/classes";
+
+describe("ESM build", function() {
+    let chart;
+
+    const data = [
+        ["data1", 300, 350, 300, 0, 100],
+        ["data2", 130, 100, 140, 200, 150]
+    ];
+
+    const rangeData = [
+        ["data1",
+            [150, 140, 110],
+            [155, 130, 115],
+            [160, 135, 120],
+            [135, 120, 110],
+            [180, 150, 130]
+        ]
+    ];
+
+    let args: any = {
+        data: {
+            columns: data
+        }
+    };
+
+    it("should generate each chart types", () => {
+        Object.keys(bb)
+            .filter(v => !/(bb|default|selection|subchart|zoom)/.test(v))
+            .forEach(v => {
+                let path;
+
+                // initialize type
+                args.data.type = bb[v]();
+
+                if (/(area|line|step)/.test(v)) {
+                    args.data.columns = /Range/.test(v) ? rangeData: data;
+
+                    chart = bb.bb.generate(args);
+                    path = chart.$.line.lines.attr("d");
+
+                } else {
+                    chart = bb.bb.generate(args);
+
+                    if (v === "bar") {
+                        path = chart.$.bar.bars.attr("d");
+
+                    } else if (v === "radar") {
+                        path = chart.$.main
+                            .select(`.${CLASS.chartRadar} polygon`)
+                            .attr("points");
+
+                    } else if (v === "scatter") {
+                        const dataLength: any = data.reduce((a: any, r: any) => a.length + r.length);
+
+                        expect(chart.$.circles.nodes().length).to.be.equal(dataLength - 2);
+
+                    } else {
+                        // donut, gauge, pie
+                        path = chart.$.arc.selectAll("path").attr("d");
+                    }
+                }
+
+                path && expect(/NaN/.test(path)).to.be.false;
+            });
+    });
+});