test(plugin): boost test coverage (#3333)

- Exclude d3 modules to be transpiled for test build (some d3 code block scope, transpile wrongly and throws error) - Add test codes for plugins - Include again textoverlap plugin test(fixed and happened due to the transpile issue)
naver · Aug 10, 2023 · 32d6d01 · 32d6d01
1 parent b7ba810
commit 32d6d01
Show file tree

Hide file tree

Showing 9 changed files with 259 additions and 98 deletions.
diff --git a/babel.config.cjs b/babel.config.cjs
@@ -4,7 +4,7 @@ module.exports = function(api) {
 	const presets = [
 		"@babel/typescript",
 		[
-			"@babel/env", {
+			"@babel/preset-env", {
 				"targets": {
 					"browsers": [
 						"last 2 versions",
@@ -20,11 +20,8 @@ module.exports = function(api) {
 	];
 
 	const plugins = [
+		["@babel/plugin-transform-runtime"],
 		[
-			"@babel/plugin-transform-runtime", {
-				"useESModules": true
-			}
-		], [
 			"@babel/plugin-proposal-class-properties", {
 				"loose": true
 			}

diff --git a/karma.conf.cjs b/karma.conf.cjs
@@ -51,8 +51,7 @@ module.exports = function(config) {
 						test: /(\.[jt]s)$/,
 						loader: "babel-loader",
 						exclude: {
-							and: [/node_modules/],
-							not: [/(d3\-.*)$/]
+							and: [/node_modules/]
 						}
 					}
 				]

diff --git a/src/ChartInternal/interactions/interaction.ts b/src/ChartInternal/interactions/interaction.ts
@@ -166,7 +166,7 @@ export default {
 	 * @param {number} index Index of eventRect
 	 * @param {Array} mouse x and y coordinate value
 	 */
-	dispatchEvent(type: string, index: number, mouse): void {
+	dispatchEvent(type: string, index: number, mouse: [number, number]): void {
 		const $$ = this;
 		const {config, state: {
 			eventReceiver, hasAxis, hasRadar, hasTreemap

diff --git a/src/Plugin/bubblecompare/index.ts b/src/Plugin/bubblecompare/index.ts
@@ -76,7 +76,7 @@ export default class BubbleCompare extends Plugin {
 	}
 
 	changeCursorPoint(): void {
-		this.$$.$el.svg.select(`.bb-event-rect`).style("cursor", "pointer");
+		this.$$.$el.eventRect.style("cursor", "pointer");
 	}
 
 	findClosest(values, pos): number {

diff --git a/src/Plugin/tableview/index.ts b/src/Plugin/tableview/index.ts
@@ -158,7 +158,7 @@ export default class TableView extends Plugin {
 	}
 
 	$willDestroy(): void {
-		this.element.parentNode.removeChild(this.element);
+		this.element.parentNode?.removeChild(this.element);
 
 		// remove default css style when left one chart instance
 		if (this.$$.charts.length === 1) {

diff --git a/test/assets/helper.ts b/test/assets/helper.ts
@@ -62,7 +62,7 @@ const simulator = (el, option = {}, callback) => {
  * @param {Object} [pos={clientX: 100, clientY: 100}]
  * @param {Number} [dataIndex=2]
  */
-const hoverChart = (hoverChart, eventName = "mousemove", pos = {clientX: 100, clientY: 100}, target) => {
+const hoverChart = (hoverChart, eventName = "mousemove", pos = {clientX: 100, clientY: 100}, target?: SVGElement) => {
 	const {eventRect} = hoverChart.internal.$el;
 
 	fireEvent(target ?? eventRect?.node(), eventName, pos, hoverChart);

diff --git a/test/plugin/bubble-compare/bubble-compare-spec.ts b/test/plugin/bubble-compare/bubble-compare-spec.ts
@@ -36,20 +36,51 @@ describe("PLUGIN: BUBBLE-COMPARE", () => {
 				["Andorra", {"y": 464, "z": 76177}],
 			]
 		},
-		plugins: [new BubbleCompare({minR: 11, maxR: 74, expandScale: 1.1})]
+		plugins: [
+			new BubbleCompare({
+				minR: 11,
+				maxR: 74,
+				expandScale: 1.1
+			})
+		]
 	};
 
 	beforeEach(() => {
 		chart = util.generate(args);
 	});
 
 	it("Every bubble radius should be in given radius range", () => {
-		chart.$.main.selectAll("circle").each(function() {
+		chart.$.circles.each(function() {
 			const circle = d3Select(this);
 			const {minR, maxR} = chart.plugins[0].options;
 			const circleRadius = parseInt(circle.attr("r"), 10);
 
 			expect(circleRadius).to.be.within(minR, maxR);
 		});
 	});
+
+	it("check min and max radius", () => {
+		const {circles} = chart.$;
+		const {minR, maxR} = chart.plugins[0].options;
+
+		const max = Math.floor(circles.filter(d => d.id === "United States").attr("r"));
+		const min = Math.floor(circles.filter(d => d.id === "Andorra").attr("r"));
+
+		expect(max).to.be.equal(maxR);
+		expect(min).to.be.equal(minR);
+	});
+
+	it("check when bubble is expanded", () => {
+		const {$: {circles}, internal: {$el}} = chart;
+		const {expandScale} = chart.plugins[0].options;
+
+		// when	
+		util.hoverChart(chart, "mousemove", {clientX: 50, clientY: 70});
+
+		const r = circles.filter(d => d.id === "United States").attr("r");
+
+		// bubble radius should be expanded
+		expect(+r).to.be.equal(74 * expandScale);
+		expect($el.eventRect.style("cursor")).to.be.equal("pointer");
+	});
 });