test(shape): Reinforce test coverage

Add test cases for shapes to increase test coverage

Ref naver#3333

test/interactions/interaction-touch-spec.ts

@@ -6,12 +6,10 @@
 // @ts-nocheck
 /* global describe, beforeEach, it, expect */
 import {expect} from "chai";
-import sinon from "sinon";
-import {select as d3Select} from "d3-selection";
 import util from "../assets/util";
-import {$ARC, $AXIS, $BAR, $CIRCLE, $COMMON, $FOCUS, $EVENT, $SELECT, $SHAPE} from "../../src/config/classes";
+import {fireEvent} from "../assets/helper";
 
-describe("INTERACTION", () => {
+describe("INTERACTION: touch", () => {
 	let chart;
 	let args;
 
@@ -98,4 +96,38 @@ describe("INTERACTION", () => {
 			expect(+tooltip.select(".value").text()).to.be.equal(data.value)
 		});
 	});
+
+	describe("arc type", () => {
+		const spy = sinon.spy();
+
+		before(() => {
+			args = {
+				data: {
+					columns: [
+						["data1", 50],
+						["data2", 50]
+					],
+					type: "pie",
+					onclick: spy
+				},
+				interaction: {
+					inputType: {
+						touch: true
+					}
+				}
+			};
+		});
+
+		it("should touch event bound to pie", () => {
+			const path =  chart.$.arc.select("path").node();
+			const rect = path.getBoundingClientRect();
+
+			fireEvent(path, "click", {
+				clientX: rect.x + 10,
+				clientY: rect.y
+			}, chart);
+
+			expect(spy.calledOnce).to.be.true;
+		});
+	});
 });

test/internals/rergions-spec.ts

@@ -58,6 +58,10 @@ describe("REGIONS", function() {
 		chart = util.generate(args);
 	});
 
+	afterEach(() => {
+		chart.destroy();
+	});
+
 	describe("regions", () => {
 		before(() => {
 			args = {
@@ -167,4 +171,41 @@ describe("REGIONS", function() {
 			}, 300);
 		});
 	});
+
+	describe("regions", () => {
+		before(() => {
+			args = {
+				data: {
+					x: "x",
+					columns: [
+						["x", "2023-08-25", "2023-08-26", "2023-08-27"],
+						["data1", 50, 20, 10]
+					],
+					regions: {
+						data1: [{
+							start: "2023-08-26",
+							end: "2023-08-27",
+							style: {
+								dasharray: "5 2"
+							}
+						}]
+					}
+				},
+				axis: {
+					x: {
+						type: "timeseries",
+						tick: {
+							format: "%Y-%m-%d",
+						}
+					}
+				}
+			};
+		});
+
+		it("should regions applied for timeseries chart.", () => {
+			const lCnt = chart.$.line.lines.attr("d").split("L").length;
+
+			expect(lCnt).to.be.above(30);
+		});
+	});
 });

test/internals/text-spec.ts

@@ -19,6 +19,10 @@ describe("TEXT", () => {
 		chart = util.generate(args);
 	});
 
+	afterEach(() => {
+		chart.destroy();
+	});
+
     const checkXY = function(x, y, prefix = "c", delta: any = {x: 1, y: 1}) {
 		if (isNumber(delta)) {
 			delta = {x: delta, y: delta};

test/shape/candelstick-spec.ts

@@ -262,4 +262,48 @@ describe("SHAPE CANDLESTICK", () => {
 			})
 		});
 	});
+
+	describe("dynamic load", () => {
+		before(() => {
+			args = {
+				data: {
+					columns: [],
+					labels: true
+				},
+			};
+		});
+
+		it("should generate candlestick from empty chart", done => {
+			const data = [					
+					["data1",
+						{open: 100, high: 130, low: 5, close: 30, volume: 100},
+						[30, 200, 5, 150, 200],
+					]
+				];
+
+			// when
+			chart.load({
+				columns: data,
+				type: "candlestick",
+				done() {
+					const {$el: {candlestick, tooltip}} = this.internal;
+
+					expect(candlestick.size()).to.be.equal(2);
+
+					// when
+					this.tooltip.show({x: 0});
+
+					// check if tooltip content shows correct data
+					const str = JSON.stringify(data[0][1])
+						.replace(/[{}\",]/g, "")
+						.replace(/(\d)(?=[a-z])/g, "$1 ")
+						.replace(/(:)(\d)/g, "$1 $2");
+
+					expect(str).to.be.equal(tooltip.select(".value").text().toLowerCase());
+
+					done();
+				}
+			});
+		});
+	});
 });

test/shape/line-spec.ts

@@ -257,6 +257,34 @@ describe("SHAPE LINE", () => {
 
 			expect(to).to.be.equal(d3CurveStepBefore);
 		});
+
+		it("set options", () => {
+			args = {
+				data: {
+					columns: [
+						["data1", 30, 200, 100]
+					],
+					type: "step"
+				},
+				point: {
+					pattern: [
+						"<polygon points='2.5 0 0 2.5 2.5 5 5 2.5 2.5 0'></polygon>"
+					]
+				},
+				tooltip: {
+					grouped: false
+				}
+			};
+		});
+
+		it("should correctly show tooltip with tooltip.grouped=false.", () => {
+			// when
+			chart.tooltip.show({
+				data: {id:"data1", value: 200, x: 1}
+			});
+
+			expect(+chart.$.tooltip.select(".value").text()).to.be.equal(chart.data.values("data1")[1])
+		});
 	});
 
 	describe("step type: category axis & line.ConnectNull", () => {

test/shape/treemap-spec.ts

@@ -247,5 +247,36 @@ describe("TREEMAP", () => {
 
 			expect(chart.$.tooltip.style("display")).to.be.equal("none");
 		});
+
+		it("set options: set inputType='touch'", () => {
+			args = {
+				data: {
+					rows: [
+						["data1", "data2", "data3", "data4"],
+						[300, 200, 500, 380]
+					],
+					type: "treemap",
+					labels: true
+				},
+				interaction: {
+					inputType: {
+						touch: true
+					}
+				},
+				treemap: {
+					tile: "dice"
+				}
+			}
+		});
+
+		it("should show tooltip with touch input.", () => {
+			const id = "data3";
+			const treemap =  chart.internal.$el.treemap.node();
+
+			// when
+			chart.tooltip.show({data: {id}})
+
+			expect(chart.$.tooltip.select(".name").text()).to.be.equal(id);
+		});
 	});
 });