@osimatic/helpers-js 1.5.20 → 1.5.22

package/tests/chartjs.test.js

@@ -3,8 +3,6 @@
  */
 const { Chartjs } = require('../chartjs');
 
-// ─── chart creation helpers ──────────────────────────────────────────────────
-
 let mockChartInstance;
 
 beforeEach(() => {
@@ -13,11 +11,14 @@ beforeEach(() => {
 		mockChartInstance.config = config;
 		return mockChartInstance;
 	});
+	global.Chart.register = jest.fn();
+	Chartjs.initialized = false;
 	HTMLCanvasElement.prototype.getContext = jest.fn(() => ({}));
 });
 
 afterEach(() => {
 	delete global.Chart;
+	Chartjs.initialized = false;
 	document.body.innerHTML = '';
 	jest.restoreAllMocks();
 });
@@ -28,9 +29,150 @@ function makeCanvas() {
 	return canvas;
 }
 
-// ─── groupByPeriod ───────────────────────────────────────────────────────────
-
 describe('Chartjs', () => {
+
+	describe('init', () => {
+		test('registers centerText plugin on first call', () => {
+			Chartjs.init();
+			expect(global.Chart.register).toHaveBeenCalledTimes(1);
+			expect(global.Chart.register).toHaveBeenCalledWith(
+				expect.objectContaining({ id: 'centerText' })
+			);
+		});
+
+		test('does not register plugin on subsequent calls', () => {
+			Chartjs.init();
+			global.Chart.register.mockClear();
+			Chartjs.init();
+			expect(global.Chart.register).not.toHaveBeenCalled();
+		});
+
+		test('sets Chartjs.initialized to true', () => {
+			Chartjs.init();
+			expect(Chartjs.initialized).toBe(true);
+		});
+	});
+
+	describe('createStackedChart', () => {
+		const chartData = { labels: ['A', 'B'], datasets: [{ label: 'X', data: [1, 2] }] };
+
+		test('clears div and calls Chart constructor with type bar', () => {
+			const canvas = makeCanvas();
+			canvas.innerHTML = '<span>old</span>';
+			Chartjs.createStackedChart(canvas, chartData);
+			expect(canvas.innerHTML).toBe('');
+			expect(global.Chart).toHaveBeenCalledWith(expect.anything(), expect.objectContaining({ type: 'bar' }));
+		});
+
+		test('merges user options', () => {
+			Chartjs.createStackedChart(makeCanvas(), chartData, null, { options: { responsive: false } });
+			expect(mockChartInstance.config.options.responsive).toBe(false);
+		});
+
+		test('title displayed when provided', () => {
+			Chartjs.createStackedChart(makeCanvas(), chartData, 'My Title');
+			expect(mockChartInstance.config.options.plugins.title.display).toBe(true);
+			expect(mockChartInstance.config.options.plugins.title.text).toBe('My Title');
+		});
+
+		test('title not displayed when null', () => {
+			Chartjs.createStackedChart(makeCanvas(), chartData, null);
+			expect(mockChartInstance.config.options.plugins.title.display).toBe(false);
+		});
+
+		test('tooltip label callback', () => {
+			Chartjs.createStackedChart(makeCanvas(), chartData);
+			const fn = mockChartInstance.config.options.plugins.tooltip.callbacks.label;
+			expect(fn({ dataset: { label: 'Test' }, parsed: { y: 42 } })).toBe('Test: 42');
+		});
+
+		test('accepts jQuery-like object', () => {
+			const canvas = makeCanvas();
+			const jq = { jquery: '3.6.0', 0: canvas, length: 1 };
+			expect(() => Chartjs.createStackedChart(jq, chartData)).not.toThrow();
+			expect(global.Chart).toHaveBeenCalled();
+		});
+	});
+
+	describe('createBarChart', () => {
+		const chartData = { labels: ['A', 'B'], datasets: [{ label: 'X', data: [1, 2] }] };
+
+		test('clears div and calls Chart constructor with type bar', () => {
+			const canvas = makeCanvas();
+			canvas.innerHTML = '<span>old</span>';
+			Chartjs.createBarChart(canvas, chartData);
+			expect(canvas.innerHTML).toBe('');
+			expect(global.Chart).toHaveBeenCalledWith(expect.anything(), expect.objectContaining({ type: 'bar' }));
+		});
+
+		test('title displayed when provided', () => {
+			Chartjs.createBarChart(makeCanvas(), chartData, 'My Title');
+			expect(mockChartInstance.config.options.plugins.title.display).toBe(true);
+			expect(mockChartInstance.config.options.plugins.title.text).toBe('My Title');
+		});
+
+		test('title not displayed when null', () => {
+			Chartjs.createBarChart(makeCanvas(), chartData, null);
+			expect(mockChartInstance.config.options.plugins.title.display).toBe(false);
+		});
+
+		test('tooltip label callback', () => {
+			Chartjs.createBarChart(makeCanvas(), chartData);
+			const fn = mockChartInstance.config.options.plugins.tooltip.callbacks.label;
+			expect(fn({ dataset: { label: 'Test' }, parsed: { y: 10 } })).toBe('Test : 10');
+		});
+
+		test('accepts jQuery-like object', () => {
+			const canvas = makeCanvas();
+			const jq = { jquery: '3.6.0', 0: canvas, length: 1 };
+			expect(() => Chartjs.createBarChart(jq, chartData)).not.toThrow();
+			expect(global.Chart).toHaveBeenCalled();
+		});
+	});
+
+	describe('createLineChart', () => {
+		const chartData = { labels: ['A', 'B'], datasets: [{ label: 'X', data: [1, 2] }] };
+
+		test('clears div and calls Chart constructor with type line', () => {
+			const canvas = makeCanvas();
+			Chartjs.createLineChart(canvas, chartData);
+			expect(canvas.innerHTML).toBe('');
+			expect(global.Chart).toHaveBeenCalledWith(expect.anything(), expect.objectContaining({ type: 'line' }));
+		});
+
+		test('tooltip label callback', () => {
+			Chartjs.createLineChart(makeCanvas(), chartData);
+			const fn = mockChartInstance.config.options.plugins.tooltip.callbacks.label;
+			expect(fn({ dataset: { label: 'Line' }, parsed: { y: 7 } })).toBe('Line : 7');
+		});
+	});
+
+	describe('createDoughnutChart', () => {
+		test('clears div and calls Chart constructor with type doughnut', () => {
+			const canvas = makeCanvas();
+			Chartjs.createDoughnutChart(canvas, { labels: ['A'], values: [1], colors: ['#f00'] });
+			expect(canvas.innerHTML).toBe('');
+			expect(global.Chart).toHaveBeenCalledWith(expect.anything(), expect.objectContaining({ type: 'doughnut' }));
+		});
+
+		test('uses chartData.values as dataset data', () => {
+			Chartjs.createDoughnutChart(makeCanvas(), { labels: ['A', 'B'], values: [30, 70], colors: ['#f00', '#00f'] });
+			expect(mockChartInstance.config.data.datasets[0].data).toEqual([30, 70]);
+		});
+
+		test('tooltip label shows percentage', () => {
+			Chartjs.createDoughnutChart(makeCanvas(), { labels: ['A', 'B'], values: [30, 70], colors: ['#f00', '#00f'] });
+			const fn = mockChartInstance.config.options.plugins.tooltip.callbacks.label;
+			expect(fn({ label: 'A', raw: 30, dataset: { data: [30, 70] } })).toBe('A: 30 (30.0%)');
+		});
+
+		test('tooltip label for 100%', () => {
+			Chartjs.createDoughnutChart(makeCanvas(), { labels: ['Only'], values: [100], colors: ['#f00'] });
+			const fn = mockChartInstance.config.options.plugins.tooltip.callbacks.label;
+			expect(fn({ label: 'Only', raw: 100, dataset: { data: [100] } })).toBe('Only: 100 (100.0%)');
+		});
+	});
+
 	describe('groupByPeriod', () => {
 		test('should group data by day (default)', () => {
 			const data = {
@@ -38,10 +180,7 @@ describe('Chartjs', () => {
 				'2024-01-16': { views: 20, clicks: 8 },
 				'2024-01-17': { views: 15, clicks: 6 }
 			};
-			const metrics = ['views', 'clicks'];
-
-			const result = Chartjs.groupByPeriod(data, 'day', metrics);
-
+			const result = Chartjs.groupByPeriod(data, 'day', ['views', 'clicks']);
 			expect(result).toHaveLength(3);
 			expect(result[0]).toEqual({ label: '2024-01-15', views: 10, clicks: 5 });
 			expect(result[1]).toEqual({ label: '2024-01-16', views: 20, clicks: 8 });
@@ -54,17 +193,12 @@ describe('Chartjs', () => {
 				'2024-01-20': { views: 20, clicks: 8 },
 				'2024-02-05': { views: 15, clicks: 6 }
 			};
-			const metrics = ['views', 'clicks'];
-
-			const result = Chartjs.groupByPeriod(data, 'month', metrics);
-
+			const result = Chartjs.groupByPeriod(data, 'month', ['views', 'clicks']);
 			expect(result).toHaveLength(2);
 			expect(result[0].label).toBe('2024-01');
 			expect(result[0].views).toBe(15);
 			expect(result[0].clicks).toBe(6.5);
 			expect(result[1].label).toBe('2024-02');
-			expect(result[1].views).toBe(15);
-			expect(result[1].clicks).toBe(6);
 		});
 
 		test('should group data by week', () => {
@@ -74,10 +208,7 @@ describe('Chartjs', () => {
 				'2024-01-08': { views: 15 },
 				'2024-01-09': { views: 25 }
 			};
-			const metrics = ['views'];
-
-			const result = Chartjs.groupByPeriod(data, 'week', metrics);
-
+			const result = Chartjs.groupByPeriod(data, 'week', ['views']);
 			expect(result.length).toBeGreaterThan(0);
 			result.forEach(item => {
 				expect(item.label).toMatch(/^\d{4}-S\d+$/);
@@ -85,34 +216,20 @@ describe('Chartjs', () => {
 		});
 
 		test('should handle single metric', () => {
-			const data = {
-				'2024-01-15': { views: 10 },
-				'2024-01-16': { views: 20 }
-			};
-			const metrics = ['views'];
-
-			const result = Chartjs.groupByPeriod(data, 'day', metrics);
-
+			const data = { '2024-01-15': { views: 10 }, '2024-01-16': { views: 20 } };
+			const result = Chartjs.groupByPeriod(data, 'day', ['views']);
 			expect(result).toHaveLength(2);
 			expect(result[0]).toEqual({ label: '2024-01-15', views: 10 });
-			expect(result[1]).toEqual({ label: '2024-01-16', views: 20 });
 		});
 
 		test('should handle multiple metrics', () => {
-			const data = {
-				'2024-01-15': { views: 10, clicks: 5, conversions: 2 }
-			};
-			const metrics = ['views', 'clicks', 'conversions'];
-
-			const result = Chartjs.groupByPeriod(data, 'day', metrics);
-
-			expect(result).toHaveLength(1);
+			const data = { '2024-01-15': { views: 10, clicks: 5, conversions: 2 } };
+			const result = Chartjs.groupByPeriod(data, 'day', ['views', 'clicks', 'conversions']);
 			expect(result[0]).toEqual({ label: '2024-01-15', views: 10, clicks: 5, conversions: 2 });
 		});
 
 		test('should handle empty data', () => {
-			const result = Chartjs.groupByPeriod({}, 'day', ['views']);
-			expect(result).toEqual([]);
+			expect(Chartjs.groupByPeriod({}, 'day', ['views'])).toEqual([]);
 		});
 
 		test('should average values when grouping by month', () => {
@@ -122,37 +239,42 @@ describe('Chartjs', () => {
 				'2024-01-20': { score: 300 }
 			};
 			const result = Chartjs.groupByPeriod(data, 'month', ['score']);
-
-			expect(result).toHaveLength(1);
-			expect(result[0].label).toBe('2024-01');
 			expect(result[0].score).toBe(200);
 		});
 
 		test('should handle missing metric values', () => {
-			const data = {
-				'2024-01-15': { views: 10 },
-				'2024-01-16': { views: 20, clicks: 5 }
-			};
+			const data = { '2024-01-15': { views: 10 }, '2024-01-16': { views: 20, clicks: 5 } };
 			const result = Chartjs.groupByPeriod(data, 'day', ['views', 'clicks']);
-
-			expect(result).toHaveLength(2);
 			expect(result[0]).toEqual({ label: '2024-01-15', views: 10, clicks: NaN });
 			expect(result[1]).toEqual({ label: '2024-01-16', views: 20, clicks: 5 });
 		});
 
 		test('should handle dates across different years', () => {
-			const data = {
-				'2023-12-30': { count: 5 },
-				'2024-01-02': { count: 10 }
-			};
+			const data = { '2023-12-30': { count: 5 }, '2024-01-02': { count: 10 } };
 			const result = Chartjs.groupByPeriod(data, 'month', ['count']);
-
-			expect(result).toHaveLength(2);
 			expect(result[0].label).toBe('2023-12');
 			expect(result[1].label).toBe('2024-01');
 		});
 	});
 
+	describe('getPeriodLabels', () => {
+		const { DatePeriod } = require('../date_time');
+
+		test('delegates to DatePeriod.getPeriodLabels with default locale/timezone', () => {
+			const spy = jest.spyOn(DatePeriod, 'getPeriodLabels');
+			const data = { '2024-01-01': {}, '2024-02-01': {} };
+			Chartjs.getPeriodLabels(data, 'month');
+			expect(spy).toHaveBeenCalledWith(Object.keys(data), 'month', 'fr-FR', 'Europe/Paris');
+		});
+
+		test('passes custom locale and timezone', () => {
+			const spy = jest.spyOn(DatePeriod, 'getPeriodLabels');
+			const data = { '2024-01-01': {} };
+			Chartjs.getPeriodLabels(data, 'month', 'en-US', 'America/New_York');
+			expect(spy).toHaveBeenCalledWith(Object.keys(data), 'month', 'en-US', 'America/New_York');
+		});
+	});
+
 	describe('getAutoGranularity', () => {
 		test('should return day_of_month for data spanning 30 days or less', () => {
 			expect(Chartjs.getAutoGranularity({ '2024-01-01': {}, '2024-01-15': {}, '2024-01-30': {} })).toBe('day_of_month');
@@ -191,99 +313,4 @@ describe('Chartjs', () => {
 		});
 	});
 
-	describe('chart creation', () => {
-		const chartData = { labels: ['A', 'B'], datasets: [{ label: 'X', data: [1, 2] }] };
-
-		test('createStackedChart clears div and calls Chart constructor', () => {
-			const canvas = makeCanvas();
-			canvas.innerHTML = '<span>old</span>';
-
-			Chartjs.createStackedChart(canvas, chartData);
-
-			expect(canvas.innerHTML).toBe('');
-			expect(global.Chart).toHaveBeenCalledWith(expect.anything(), expect.objectContaining({ type: 'bar' }));
-		});
-
-		test('createStackedChart merges user options', () => {
-			Chartjs.createStackedChart(makeCanvas(), chartData, null, { options: { responsive: false } });
-
-			expect(mockChartInstance.config.options.responsive).toBe(false);
-		});
-
-		test('createBarChart clears div and calls Chart constructor', () => {
-			const canvas = makeCanvas();
-			canvas.innerHTML = '<span>old</span>';
-
-			Chartjs.createBarChart(canvas, chartData);
-
-			expect(canvas.innerHTML).toBe('');
-			expect(global.Chart).toHaveBeenCalledWith(expect.anything(), expect.objectContaining({ type: 'bar' }));
-		});
-
-		test('createBarChart sets title when provided', () => {
-			Chartjs.createBarChart(makeCanvas(), chartData, 'My Title');
-
-			expect(mockChartInstance.config.options.plugins.title.display).toBe(true);
-			expect(mockChartInstance.config.options.plugins.title.text).toBe('My Title');
-		});
-
-		test('createLineChart clears div and calls Chart constructor', () => {
-			const canvas = makeCanvas();
-			Chartjs.createLineChart(canvas, chartData);
-
-			expect(canvas.innerHTML).toBe('');
-			expect(global.Chart).toHaveBeenCalledWith(expect.anything(), expect.objectContaining({ type: 'line' }));
-		});
-
-		test('createDoughnutChart clears div and calls Chart constructor', () => {
-			const canvas = makeCanvas();
-			Chartjs.createDoughnutChart(canvas, { labels: ['A'], values: [1], colors: ['#f00'] });
-
-			expect(canvas.innerHTML).toBe('');
-			expect(global.Chart).toHaveBeenCalledWith(expect.anything(), expect.objectContaining({ type: 'doughnut' }));
-		});
-
-		test('createDoughnutChart uses chartData.values as dataset data', () => {
-			Chartjs.createDoughnutChart(makeCanvas(), { labels: ['A', 'B'], values: [30, 70], colors: ['#f00', '#00f'] });
-
-			expect(mockChartInstance.config.data.datasets[0].data).toEqual([30, 70]);
-		});
-
-		test('title not displayed when null', () => {
-			Chartjs.createBarChart(makeCanvas(), chartData, null);
-
-			expect(mockChartInstance.config.options.plugins.title.display).toBe(false);
-		});
-
-		describe('jQuery compatibility (toEl)', () => {
-			test('createStackedChart accepts jQuery-like object', () => {
-				const canvas = makeCanvas();
-				const jq = { jquery: '3.6.0', 0: canvas, length: 1 };
-
-				expect(() => Chartjs.createStackedChart(jq, chartData)).not.toThrow();
-				expect(global.Chart).toHaveBeenCalled();
-			});
-
-			test('createBarChart accepts jQuery-like object', () => {
-				const canvas = makeCanvas();
-				const jq = { jquery: '3.6.0', 0: canvas, length: 1 };
-
-				expect(() => Chartjs.createBarChart(jq, chartData)).not.toThrow();
-				expect(global.Chart).toHaveBeenCalled();
-			});
-		});
-	});
-
-	describe('class structure', () => {
-		test('should have all expected static methods', () => {
-			expect(typeof Chartjs.init).toBe('function');
-			expect(typeof Chartjs.createStackedChart).toBe('function');
-			expect(typeof Chartjs.createBarChart).toBe('function');
-			expect(typeof Chartjs.createLineChart).toBe('function');
-			expect(typeof Chartjs.createDoughnutChart).toBe('function');
-			expect(typeof Chartjs.groupByPeriod).toBe('function');
-			expect(typeof Chartjs.getPeriodLabels).toBe('function');
-			expect(typeof Chartjs.getAutoGranularity).toBe('function');
-		});
-	});
 });