fix(grid): pPrevent error throw

Make the call of .showcircleFocus() by optional chaining, to prevent possible error. Fix #2310
naver · Sep 10, 2021 · 8fcf61c · 8fcf61c
1 parent 4b5119c
commit 8fcf61c
Show file tree

Hide file tree

Showing 4 changed files with 83 additions and 44 deletions.
diff --git a/src/ChartInternal/internals/grid.ts b/src/ChartInternal/internals/grid.ts
@@ -427,7 +427,7 @@ export default {
 
 		if (inputType === "touch") {
 			if (xgridFocus.empty()) {
-				resizing && $$.showCircleFocus();
+				resizing && $$.showCircleFocus?.();
 			} else {
 				$$.showGridFocus();
 			}

diff --git a/src/module/util.ts b/src/module/util.ts
@@ -437,7 +437,7 @@ const capitalize = (str: string): string => str.charAt(0).toUpperCase() + str.sl
 /**
  * Camelize from kebob style string
  * @param {string} str Kebob string
- * @returns camelized string
+ * @returns {string} camelized string
  */
 function camelize(str: string): string {
 	return str.split("-")

diff --git a/test/assets/util.ts b/test/assets/util.ts
@@ -58,7 +58,7 @@ function generate(args) {
 		initDom(args.bindto);
 
 		// when touch param is set, make to be 'touch' input mode
-		if (args.interaction && args.interaction.inputType && args.interaction.inputType.touch) {
+		if (args.interaction?.inputType?.touch) {
 			inputType = "touch";
 		}
 

diff --git a/test/esm/bar-spec.ts b/test/esm/bar-spec.ts
@@ -7,14 +7,15 @@
 import {expect} from "chai";
 import sinon from "sinon";
 import bb, {bar, zoom} from "../../src/index.esm";
+import util from "../assets/util";
 
 // for ESM test, import helper rather than util
 import {getBBox, fireEvent} from "../assets/helper";
 
 describe("ESM bar", function() {
     let chart;
     const spy = sinon.spy(function() { console.log("clicked!!!")});
-    const args: any = {
+    let args: any = {
         data: {
             columns: [
                 ["data1", 30, 350, 300, 0, 100],
@@ -24,53 +25,91 @@ describe("ESM bar", function() {
             onclick: spy
         }
     };
-
-	beforeEach(() => {
-		chart = bb.generate(args);
-	});
+
+    describe("basic functionalities", () => {
+        beforeEach(() => {
+            chart = bb.generate(args);
+        });
 
-    it("check data.onclick for bar type", () => {
-        const {eventRect} = chart.internal.$el;
-        const bar = chart.$.bar.bars.nodes()[0];
-        const pos = getBBox(bar);
-
-        fireEvent(eventRect.node(), "click", {
-            clientX: pos.x + 10,
-            clientY: pos.y
-        }, chart);
-
-        expect(spy.calledOnce).to.be.true;        
-    });
+        it("check data.onclick for bar type", () => {
+            const {eventRect} = chart.internal.$el;
+            const bar = chart.$.bar.bars.nodes()[0];
+            const pos = getBBox(bar);
 
-    it("set options: tooltip.grouped=false", () => {
-        args.tooltip = {
-            grouped: false
-        };
-    });
+            fireEvent(eventRect.node(), "click", {
+                clientX: pos.x + 10,
+                clientY: pos.y
+            }, chart);
+
+            expect(spy.calledOnce).to.be.true;        
+        });
 
-    it("should not throw error", () => {
-        chart.tooltip.show({x: 1});
+        it("set options: tooltip.grouped=false", () => {
+            args.tooltip = {
+                grouped: false
+            };
+        });
 
-        expect(true).to.be.ok;
-    });
+        it("should not throw error", () => {
+            chart.tooltip.show({x: 1});
 
-    it("check data.onclick for bar type", () => {
-        try {
-            chart.internal.clickHandlerForSingleX(undefined, chart.internal);
-        } catch(e) {
-            expect(false).to.be.true;
-        }
+            expect(true).to.be.ok;
+        });
 
-        expect(true).to.be.true;
-    });
+        it("check data.onclick for bar type", () => {
+            try {
+                chart.internal.clickHandlerForSingleX(undefined, chart.internal);
+            } catch(e) {
+                expect(false).to.be.true;
+            }
 
-    it("set options zoom.enabled=true", () => {
-        args.zoom = {
-            enabled: zoom()
-        };
-    });
+            expect(true).to.be.true;
+        });
 
-    it("shouldn't throw error during zoom", () => {
-        expect(chart.zoom([0,1])).to.not.throw;
+        it("set options zoom.enabled=true", () => {
+            args.zoom = {
+                enabled: zoom()
+            };
+        });
+
+        it("shouldn't throw error during zoom", () => {
+            expect(chart.zoom([0,1])).to.not.throw;
+        });
     });
+
+    describe("Focus grid line: on mobile", () => {
+		before(() => {
+            chart = util.generate({
+                data: {
+                    type: bar(),
+					columns: [
+                        ["data1", 50, 20, 40]
+					]
+				},
+                grid: {
+                    focus: {
+                        show: false
+                    }
+                },
+                interaction: {
+                    inputType: {
+                        touch: true
+                    }
+                }
+			});
+		});
+
+        it("Resized without error?", () => {
+            const proto = Object.getPrototypeOf(chart.internal);
+            const fn = proto.showCircleFocus;
+
+            delete proto.showCircleFocus;
+
+            expect(
+                chart.resize({width:300})
+            ).to.not.throw;
+
+           proto.showCircleFocus = fn;
+        });
+	});
 });