test(interaction): Increase test coverage for interactions (#3360)

- Reinforce test coverage for interaction related codes - Remove unused ‘else’ condition block from .generateTicks() - Remove unused ‘jsonTreemp’ module Ref #3333
naver · Aug 22, 2023 · 6333297 · 6333297
1 parent b897cbb
commit 6333297
Show file tree

Hide file tree

Showing 12 changed files with 442 additions and 59 deletions.
diff --git a/src/ChartInternal/Axis/AxisRendererHelper.ts b/src/ChartInternal/Axis/AxisRendererHelper.ts
@@ -133,14 +133,6 @@ export default class AxisRendererHelper {
 
 					return r;
 				});
-		} else {
-			for (let i = Math.ceil(start); i < end; i++) {
-				ticks.push(i);
-			}
-
-			if (ticks.length > 0 && ticks[0] > 0) {
-				ticks.unshift(ticks[0] - (ticks[1] - ticks[0]));
-			}
 		}
 
 		return ticks;

diff --git a/src/ChartInternal/data/convert.helper.ts b/src/ChartInternal/data/convert.helper.ts
@@ -11,7 +11,7 @@ import {
 	tsvParseRows as d3TsvParseRows,
 } from "d3-dsv";
 
-export {columns, json, jsonTreemap, rows, url, csv, tsv};
+export {columns, json, rows, url, csv, tsv};
 
 /***** Functions to be executed on Web Worker *****
  * NOTE: Don't allowed to use
@@ -146,20 +146,6 @@ function json(json, keysParam) {
     return data;
 }
 
-function jsonTreemap(json) {
-	const convertKey = v => {
-		if (v.children) {
-			v.children.forEach(convertKey);
-		}
-
-		v.name = v.id;
-	}
-
-	json.forEach(convertKey);
-
-	return json;
-}
-
 /***** Functions can't be executed on Web Worker *****/
 /**
  * Convert URL data

diff --git a/src/ChartInternal/interactions/eventrect.ts b/src/ChartInternal/interactions/eventrect.ts
@@ -173,7 +173,6 @@ export default {
 
 		svg.on("touchstart", event => {
 			state.event = event;
-
 			const {target} = event;
 
 			if (target && target !== eventRect.node()) {

diff --git a/src/ChartInternal/interactions/flow.ts b/src/ChartInternal/interactions/flow.ts
@@ -170,10 +170,7 @@ export default {
 					const xFunc = d => cx(d) - config.point_r;
 					const yFunc = d => cy(d) - config.point_r;
 
-					n.attr("x", xFunc)
-						.attr("y", yFunc)
-						.attr("cx", cx) // when pattern is used, it possibly contain 'circle' also.
-						.attr("cy", cy);
+					n.attr("x", xFunc).attr("y", yFunc);
 				}
 			} else if (v === "region.list") {
 				n.select("rect").filter($$.isRegionOnX)

diff --git a/src/ChartInternal/interactions/interaction.ts b/src/ChartInternal/interactions/interaction.ts
@@ -185,9 +185,15 @@ export default {
 			if (hasAxis && !hasRadar && !isMultipleX) {
 				const coords = eventReceiver.coords[index];
 
-				width = coords.w;
-				left += coords.x;
-				top += coords.y;
+				if (coords) {
+					width = coords.w;
+					left += coords.x;
+					top += coords.y;
+				} else {
+					width = 0;
+					left = 0;
+					top = 0;
+				}
 			}
 
 			const x = left + (mouse ? mouse[0] : 0) + (

diff --git a/src/config/Options/data/data.ts b/src/config/Options/data/data.ts
@@ -655,7 +655,11 @@ export default {
 	 *       {name: "www.site4.com", upload: 400, download: 100, total: 500}
 	 *     ],
 	 *     keys: {
-	 *       // x: "name", // it's possible to specify 'x' when category axis
+	 *       // case 1: specify 'x' key for category axis
+	 *       x: "name", // 'name' key will be used as category x axis values
+	 *       value: ["upload", "download"]
+	 *
+	 *       // case 2: without 'x' key for non-category axis
 	 *       value: ["upload", "download"]
 	 *     }
 	 * }
@@ -857,7 +861,11 @@ export default {
 	 *       {name: "www.site4.com", upload: 400, download: 100, total: 500}
 	 *     ],
 	 *     keys: {
-	 *       // x: "name", // it's possible to specify 'x' when category axis
+	 *       // case 1: specify 'x' key for category axis
+	 *       x: "name", // 'name' key will be used as category x axis values
+	 *       value: ["upload", "download"]
+	 *
+	 *       // case 2: without 'x' key for non-category axis
 	 *       value: ["upload", "download"]
 	 *     }
 	 * }

diff --git a/test/api/category-spec.ts b/test/api/category-spec.ts
@@ -10,26 +10,51 @@ import {$AXIS} from "../../src/config/classes";
 
 describe("API category", () => {
 	let chart;
+	let args;
+
+	beforeEach(() => {
+		chart = util.generate(args);
+	});
+
+	afterEach(() => {
+		chart.destroy();
+	});
 
 	before(() => {
-		return new Promise((resolve) => {
-			chart = util.generate({
-				data: {
-					x: "x",
-					columns: [
-						["x", "a", "b", "c", "d", "e"],
-						["data1", 30, 200, 100, 400, 150],
-						["data2", 5000, 2000, 1000, 4000, 1500]
-					]
-				},
-				axis: {
-					x: {
-						type: "category"
-					}
-				},
-				onrendered: resolve
-			});
-		});
+		args = {
+			data: {
+				x: "x",
+				columns: [
+					["x", "a", "b", "c", "d", "e"],
+					["data1", 30, 200, 100, 400, 150],
+					["data2", 5000, 2000, 1000, 4000, 1500]
+				]
+			},
+			axis: {
+				x: {
+					type: "category"
+				}
+			}
+		};
+
+		// return new Promise((resolve) => {
+		// 	chart = util.generate({
+		// 		data: {
+		// 			x: "x",
+		// 			columns: [
+		// 				["x", "a", "b", "c", "d", "e"],
+		// 				["data1", 30, 200, 100, 400, 150],
+		// 				["data2", 5000, 2000, 1000, 4000, 1500]
+		// 			]
+		// 		},
+		// 		axis: {
+		// 			x: {
+		// 				type: "category"
+		// 			}
+		// 		},
+		// 		onrendered: resolve
+		// 	});
+		// });
 	});
 
 	it("should return category names", () => {
@@ -66,4 +91,33 @@ describe("API category", () => {
 			expect(d3Select(this).text()).to.be.equal(name[i]);
 		});
 	});
+
+	it("set options: set categories by axis.x.catgories option", () => {
+		args = {
+			data: {
+				columns: [
+					["download", 30, 200, 100, 400],
+					["loading", 90, 100, 140, 200]
+				],
+				type: "bar"
+			  },
+			axis: {
+				x: {
+					type: "category",
+					categories: ["www.site1.com", "www.site2.com", "www.site3.com", "www.site4.com"],
+				}
+			}
+		};
+	});
+
+	it("should return categories correctly.", () => {
+		const categories = chart.categories();
+
+		expect(categories).to.deep.equal(args.axis.x.categories);
+
+		// when give out of range x axis value
+		chart.tooltip.show({x: 2000});
+
+		expect(chart.$.tooltip.html()).to.be.empty;
+	});
 });
diff --git a/test/api/flow-spec.ts b/test/api/flow-spec.ts
@@ -6,7 +6,7 @@
 import {expect} from "chai";
 import sinon from "sinon";
 import util from "../assets/util";
-import {$AXIS, $LINE} from "../../src/config/classes";
+import {$AXIS, $GRID, $LINE, $TEXT} from "../../src/config/classes";
 import {window} from "../../src/module/browser";
 
 describe("API flow", () => {
@@ -318,13 +318,13 @@ describe("API flow", () => {
 			};
 		});
 
-		it("when flows from indexed x axis empty data", done => {
+		it("indexed axis: when flows from indexed x axis empty data", done => {
 			chart.flow({
 				columns: [
-					["data1", 100, 200]
+					["data1", 100]
 
 				],
-				duration: 700,
+				duration: 500,
 				done() {
 					const tick = this.internal.$el.axis.x.select(".tick");
 
@@ -334,5 +334,103 @@ describe("API flow", () => {
 				}
 			});
 		});
+
+		it("set options", () => {
+			args = {
+				data: {
+					x: "x",
+					columns: [			
+					],
+					type: "line"
+				},
+				axis: {
+					x: {
+						type: "timeseries",
+						tick: {
+							format: "%Y-%m-%d"
+						}
+					}
+				}
+			};
+		});
+
+		it("timeseires axis: when flows from indexed x axis empty data", done => {
+			chart.flow({
+				columns: [
+					["x", "2023-08-25"],
+					["data1", 100]
+
+				],
+				duration: 500,
+				done() {
+					const tick = this.internal.$el.axis.x.select(".tick");
+
+					expect(tick.text()).to.be.equal("2023-08-25");
+
+					done();
+				}
+			});
+		});
+
+		it("set options", () => {
+			args = {
+				data: {
+					columns: [
+						["data1", 10, 12, 11]
+					],
+					type: "line",
+					labels: true
+				},
+				grid: {
+					x: {
+						show: true,
+						lines: [
+							{value: 2, text: "Label on 2"},
+						]
+					}
+				},
+				regions: [
+					{
+						axis: "x",
+						start: 0,
+						end: 1,
+						class: "region-1-4"
+					}
+				]
+			};
+		});
+
+		it("grid & regions should flow", done => {
+			chart.flow({
+				columns: [
+					["data1", 200]
+
+				],
+				duration: 300,
+				done() {
+					const {$el} = this.internal;
+
+					// grids
+					const xgrids = $el.grid.main.selectAll(`.${$GRID.xgrids} line`);
+
+					expect(xgrids.size()).to.be.equal(2);
+
+					// region
+					const regionRect = $el.region.list.select("rect").node().getBoundingClientRect();
+
+					expect(regionRect.x).to.be.below(-240);
+
+					// data label text
+					const text = $el.main.selectAll(`.${$TEXT.chartText} text`);
+
+					text.each(function(d, i) {
+						expect(+this.textContent).to.be.equal(d.value);						
+					});
+
+					done();
+				}
+			});
+
+		});
 	});
 });