@osimatic/helpers-js 1.5.5 → 1.5.6

package/media.js

@@ -1,3 +1,6 @@
+const { FormHelper } = require('./form_helper');
+const { HTTPClient } = require('./http_client');
+
 class AudioMedia {
 
 	static getPlayer(playUrl) {
@@ -6,37 +9,42 @@ class AudioMedia {
 
 	static initPlayLinks(div) {
 		// Affiche un lecteur audio
-		div.find('.play_link').off('click').click(function () {
-			let audio = $(AudioMedia.getPlayer($(this).data('play_url')));
-			audio[0].play();
-			$(this).after(audio);
-			$(this).remove();
-			return false;
+		div.querySelectorAll('.play_link').forEach(link => {
+			link.addEventListener('click', function(e) {
+				e.preventDefault();
+				const template = document.createElement('template');
+				template.innerHTML = AudioMedia.getPlayer(this.dataset.play_url);
+				const audio = template.content.firstChild;
+				audio.play();
+				this.insertAdjacentElement('afterend', audio);
+				this.remove();
+			});
 		});
 
-		div.find('.play_asynchronously_link').off('click').click(function () {
-			//if (FormHelper.buttonLoader($(this), 'loading') != null) {
-			let button = FormHelper.buttonLoader($(this), 'loading');
-			AudioMedia.playAudioUrl($(this).data('url'), () => FormHelper.buttonLoader(button, 'reset'));
-			//} else {
-			//	let button = $(this).attr('disabled', true).button('loading');
-			//	AudioMedia.playAudioUrl($(this).data('url'), () => button.attr('disabled', false).button('reset'));
-			//}
-			return false;
+		div.querySelectorAll('.play_asynchronously_link').forEach(link => {
+			link.addEventListener('click', function(e) {
+				e.preventDefault();
+				let button = FormHelper.buttonLoader(this, 'loading');
+				AudioMedia.playAudioUrl(this.dataset.url, () => FormHelper.buttonLoader(button, 'reset'));
+			});
 		});
 
-		div.find('.modal_play_link').off('click').click(function () {
-			$('#modal_voice_message_play').on('show.bs.modal', function (event) {
-				let button = $(event.relatedTarget);
-				let modal = $(this);
-
-				let player = modal.find('audio');
-				player.prop('src', button.data('play_url'));
-				player.play();
+		div.querySelectorAll('.modal_play_link').forEach(link => {
+			link.addEventListener('click', function(e) {
+				e.preventDefault();
+				const modalEl = document.getElementById('modal_voice_message_play');
+				if (!modalEl) return;
+				const currentLink = this;
+				modalEl.addEventListener('show.bs.modal', function handler(event) {
+					modalEl.removeEventListener('show.bs.modal', handler);
+					const player = modalEl.querySelector('audio');
+					if (player) {
+						player.src = (event.relatedTarget || currentLink).dataset.play_url;
+						player.play();
+					}
+				});
+				bootstrap.Modal.getOrCreateInstance(modalEl).show(this);
 			});
-
-			$('#modal_voice_message_play').modal('show', $(this));
-			return false;
 		});
 	}
 
@@ -117,12 +125,12 @@ class AudioMedia {
 
 class VideoMedia {
 	static initPlayPauseClick(videoElement) {
-		$(videoElement).click(function(e) {
+		videoElement.addEventListener('click', function(e) {
 			// handle click if not Firefox (Firefox supports this feature natively)
 			if (typeof InstallTrigger === 'undefined') {
 				// get click position
-				let clickY = (e.pageY - $(this).offset().top);
-				let height = parseFloat( $(this).height() );
+				let clickY = e.pageY - (this.getBoundingClientRect().top + window.scrollY);
+				let height = this.offsetHeight;
 
 				// avoids interference with controls
 				if (clickY > 0.82*height) return;

package/multi_files_input.js

@@ -1,8 +1,10 @@
 require('./string');
 const { FlashMessage } = require('./flash_message');
+const { toEl } = require('./util');
 
 class MultiFilesInput {
 	static init(fileInput, setFilesList, nbMaxFiles, maxFileSize) {
+		fileInput = toEl(fileInput);
 		let filesList = [];
 		const formGroup = fileInput.closest('.form-group');
 

package/multiple_action_in_table.js

@@ -1,3 +1,4 @@
+const { toEl } = require('./util');
 
 class MultipleActionInTable {
 
@@ -5,6 +6,7 @@ class MultipleActionInTable {
 	// Idempotent : sans effet si les colonnes existent déjà.
 	// Doit être appelé AVANT l'initialisation DataTable.
 	static initCols(table, cellSelector = 'select') {
+		table = toEl(table);
 		if (!table.classList.contains('table-action_multiple')) {
 			return;
 		}
@@ -26,6 +28,7 @@ class MultipleActionInTable {
 	// Initialise les colonnes (via initCols) puis branche les event handlers.
 	// Peut être appelé après l'initialisation DataTable.
 	static init(table, options = {}) {
+		table = toEl(table);
 		const { cellSelector = 'select', imgArrow = '' } = options;
 
 		if (!table.classList.contains('table-action_multiple')) {
@@ -141,6 +144,7 @@ class MultipleActionInTable {
 class MultipleActionInDivList {
 // init checkbox
 	static init(contentDiv, options = {}) {
+		contentDiv = toEl(contentDiv);
 		const { imgArrow = '' } = options;
 
 		let buttonsDiv = MultipleActionInDivList.getButtonsDiv(contentDiv);
@@ -254,115 +258,4 @@ class MultipleActionInDivList {
 	}
 }
 
-module.exports = { MultipleActionInTable, MultipleActionInDivList };
-
-/*
-// init checkbox
-function initTableActionMultiple(table) {
-	if (!table.hasClass('table-action_multiple')) {
-		return;
-	}
-
-	var divBtn = tableActionMultipleGetDivBtn(table);
-	if (divBtn == null) {
-		return;
-	}
-
-	if (table.find('thead tr th[data-key="select"]').length === 0) {
-		table.find('thead tr').prepend($('<th class="select no-sort" data-key="select"></th>'));
-	}
-	table.find('tbody tr:not(.no_items)').each(function(idx, tr) {
-		if ($(tr).find('td.select').length === 0) {
-			$(tr).prepend($('<td class="select"><input type="checkbox" class="action_multiple_checkbox" name="'+$(tr).data('action_multiple_input_name')+'" value="'+$(tr).data('action_multiple_item_id')+'"></td>'));
-		}
-	});
-
-	table.find('input.action_multiple_checkbox').each(function(idx, el) {
-		var th = $(el).closest('table').find('thead tr th').first();
-		if (th.find('input').length === 0) {
-			// console.log(th);
-			th.html('<input type="checkbox" class="action_multiple_check_all" />');
-			// th.html('Coucou');
-		}
-	});
-
-	table.find('input.action_multiple_checkbox').change(function() {
-		majCheckbox(table);
-	});
-
-	table.find('input.action_multiple_check_all').off('click').click(function() {
-		var table = $(this).closest('table');
-		var checkbox = table.find('input.action_multiple_checkbox');
-		var checkboxChecked = table.find('input.action_multiple_checkbox:checked');
-		if (checkbox.length === checkboxChecked.length) {
-			checkbox.prop('checked', false);
-		}
-		else {
-			checkbox.prop('checked', true);
-		}
-		majCheckbox(table);
-	});
-}
-
-function majCheckbox(table) {
-	showButtonsAction(table);
-
-	var allCheckbox = table.find('input.action_multiple_checkbox');
-	var allCheckboxChecked = table.find('input.action_multiple_checkbox:checked');
-	var checkboxSelectAll = table.find('thead tr th input.action_multiple_check_all');
-	if (allCheckbox.length === allCheckboxChecked.length) {
-		checkboxSelectAll.prop('checked', true);
-	}
-	else {
-		checkboxSelectAll.prop('checked', false);
-	}
-}
-
-function tableActionMultipleGetDivBtn(table) {
-	var divTableResponsive = table.parent();
-	var divBtn = divTableResponsive.next();
-	if (divBtn.hasClass('action_multiple_buttons')) {
-		return divBtn;
-	}
-	divBtn = divTableResponsive.parent().parent().parent().next();
-	if (divBtn.hasClass('action_multiple_buttons')) {
-		return divBtn;
-	}
-	return null;
-}
-
-function showButtonsAction(table) {
-	var divBtn = tableActionMultipleGetDivBtn(table);
-	if (divBtn == null) {
-		return;
-	}
-
-	// console.log(divBtn);
-	//var nbItems = $('input[name="' + checkbox.attr('name') + '"]:checked').length;
-	var nbItems = table.find('input.action_multiple_checkbox:checked').length;
-
-	if (nbItems > 0 && divBtn.is(':hidden')) {
-		divBtn.removeClass('hide');
-	}
-	else if (nbItems === 0 && divBtn.is(':visible')) {
-		divBtn.addClass('hide');
-	}
-
-	// affichage aucune action possible si aucun bouton n'est visible
-	if (divBtn.is(':visible')) {
-		divBtn.find('span.no_button').remove();
-		if (divBtn.find('button:visible, a:visible').length === 0) {
-			divBtn.find('img').after('<span class="no_button"><em>aucune action possible</em></span>');
-		}
-	}
-}
-
-$(function() {
-	$('.action_multiple_buttons').prepend($('<img src="'+ROOT_PATH+DOSSIER_IMAGES+'arrow_ltr.png" alt="" /> &nbsp;'));
-	$('.action_multiple_buttons').append($('<br/><br/>'));
-
-	$('table.table-action_multiple').each(function(idx, table) {
-		initTableActionMultiple($(table));
-	});
-});
-*/
+module.exports = { MultipleActionInTable, MultipleActionInDivList };

package/open_street_map.js

@@ -1,4 +1,5 @@
 const L = require('leaflet');
+const { toEl } = require('./util');
 
 /**
  * https://leafletjs.com/
@@ -8,6 +9,7 @@ const L = require('leaflet');
 class OpenStreetMap {
 
 	constructor(mapContainer, options={}) {
+		mapContainer = toEl(mapContainer);
 		/*let [lat, lng] = button.data('coordinates').split(',');
 		let map = L.map('modal_map_canvas2').setView([lat, lng], 17);
 
@@ -27,6 +29,7 @@ class OpenStreetMap {
 	}
 
 	static createMap(mapContainer, options={}) {
+		mapContainer = toEl(mapContainer);
 		if (!mapContainer.length) {
 			return null;
 		}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@osimatic/helpers-js",
-  "version": "1.5.5",
+  "version": "1.5.6",
   "main": "main.js",
   "scripts": {
     "test": "jest",

package/paging.js

@@ -2,17 +2,21 @@
 //Bootstrap class pagination https://getbootstrap.com/docs/3.3/components/#pagination
 
 const { UrlAndQueryString } = require('./network');
+const { toEl } = require('./util');
 
 class Pagination {
 	static paginateCards(div, nbItemsPerPage) {
+		div = toEl(div);
 		Pagination.paginate(div, div.querySelectorAll('.pagination_item'), nbItemsPerPage, null);
 	}
 
 	static paginateTable(table, select=null) {
+		table = toEl(table); select = toEl(select);
 		Pagination.paginate(table, table.querySelectorAll('tbody tr:not(.hide)'), parseInt(table.dataset.max_rows), select);
 	}
 
 	static paginate(div, items, nbItemsPerPage, select=null, labelDisplayAll=null) {
+		div = toEl(div); select = toEl(select);
 		let maxItems = nbItemsPerPage;
 
 		if (!div) {

package/select_all.js

@@ -1,8 +1,11 @@
+const { toEl } = require('./util');
+
 class SelectAll {
 
 	// Dans un form-group
 
 	static initLinkInFormGroup(link) {
+		link = toEl(link);
 		const linkClone = link.cloneNode(true);
 		link.parentElement.replaceChild(linkClone, link);
 		linkClone.addEventListener('click', function(e) {
@@ -43,6 +46,7 @@ class SelectAll {
 	// Dans tableau
 
 	static initInTable(table) {
+		table = toEl(table);
 		const inputCheckAll = table.querySelector('tr input.check_all');
 		if (!inputCheckAll) {
 			return;
@@ -78,6 +82,7 @@ class SelectAll {
 	// Dans un div
 
 	static initDiv(contentDiv) {
+		contentDiv = toEl(contentDiv);
 		contentDiv.querySelectorAll('input.check_all').forEach(inputCheckAll => {
 			const div = inputCheckAll.closest('div.checkbox_with_check_all');
 

package/sortable_list.js

@@ -1,5 +1,8 @@
+const { toEl } = require('./util');
+
 class SortableList {
 	static init(sortableList, clientYOffset=0) {
+		sortableList = toEl(sortableList);
 		sortableList.querySelectorAll('[draggable="true"]').forEach(item => {
 			item.addEventListener('dragstart', () => {
 				// Adding dragging class to an item after a delay

package/tests/chartjs.test.js

@@ -1,5 +1,35 @@
+/**
+ * @jest-environment jsdom
+ */
 const { Chartjs } = require('../chartjs');
 
+// ─── chart creation helpers ──────────────────────────────────────────────────
+
+let mockChartInstance;
+
+beforeEach(() => {
+	mockChartInstance = { data: null, config: null };
+	global.Chart = jest.fn((ctx, config) => {
+		mockChartInstance.config = config;
+		return mockChartInstance;
+	});
+	HTMLCanvasElement.prototype.getContext = jest.fn(() => ({}));
+});
+
+afterEach(() => {
+	delete global.Chart;
+	document.body.innerHTML = '';
+	jest.restoreAllMocks();
+});
+
+function makeCanvas() {
+	const canvas = document.createElement('canvas');
+	document.body.appendChild(canvas);
+	return canvas;
+}
+
+// ─── groupByPeriod ───────────────────────────────────────────────────────────
+
 describe('Chartjs', () => {
 	describe('groupByPeriod', () => {
 		test('should group data by day (default)', () => {
@@ -30,8 +60,8 @@ describe('Chartjs', () => {
 
 			expect(result).toHaveLength(2);
 			expect(result[0].label).toBe('2024-01');
-			expect(result[0].views).toBe(15); // Average of 10 and 20
-			expect(result[0].clicks).toBe(6.5); // Average of 5 and 8
+			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);
@@ -48,9 +78,7 @@ describe('Chartjs', () => {
 
 			const result = Chartjs.groupByPeriod(data, 'week', metrics);
 
-			// Results should be grouped by weeks
 			expect(result.length).toBeGreaterThan(0);
-			// Check that labels contain week format (YYYY-SX)
 			result.forEach(item => {
 				expect(item.label).toMatch(/^\d{4}-S\d+$/);
 			});
@@ -79,20 +107,11 @@ describe('Chartjs', () => {
 			const result = Chartjs.groupByPeriod(data, 'day', metrics);
 
 			expect(result).toHaveLength(1);
-			expect(result[0]).toEqual({
-				label: '2024-01-15',
-				views: 10,
-				clicks: 5,
-				conversions: 2
-			});
+			expect(result[0]).toEqual({ label: '2024-01-15', views: 10, clicks: 5, conversions: 2 });
 		});
 
 		test('should handle empty data', () => {
-			const data = {};
-			const metrics = ['views'];
-
-			const result = Chartjs.groupByPeriod(data, 'day', metrics);
-
+			const result = Chartjs.groupByPeriod({}, 'day', ['views']);
 			expect(result).toEqual([]);
 		});
 
@@ -102,13 +121,11 @@ describe('Chartjs', () => {
 				'2024-01-15': { score: 200 },
 				'2024-01-20': { score: 300 }
 			};
-			const metrics = ['score'];
-
-			const result = Chartjs.groupByPeriod(data, 'month', metrics);
+			const result = Chartjs.groupByPeriod(data, 'month', ['score']);
 
 			expect(result).toHaveLength(1);
 			expect(result[0].label).toBe('2024-01');
-			expect(result[0].score).toBe(200); // Average of 100, 200, 300
+			expect(result[0].score).toBe(200);
 		});
 
 		test('should handle missing metric values', () => {
@@ -116,9 +133,7 @@ describe('Chartjs', () => {
 				'2024-01-15': { views: 10 },
 				'2024-01-16': { views: 20, clicks: 5 }
 			};
-			const metrics = ['views', 'clicks'];
-
-			const result = Chartjs.groupByPeriod(data, 'day', metrics);
+			const result = Chartjs.groupByPeriod(data, 'day', ['views', 'clicks']);
 
 			expect(result).toHaveLength(2);
 			expect(result[0]).toEqual({ label: '2024-01-15', views: 10, clicks: NaN });
@@ -130,9 +145,7 @@ describe('Chartjs', () => {
 				'2023-12-30': { count: 5 },
 				'2024-01-02': { count: 10 }
 			};
-			const metrics = ['count'];
-
-			const result = Chartjs.groupByPeriod(data, 'month', metrics);
+			const result = Chartjs.groupByPeriod(data, 'month', ['count']);
 
 			expect(result).toHaveLength(2);
 			expect(result[0].label).toBe('2023-12');
@@ -142,123 +155,126 @@ describe('Chartjs', () => {
 
 	describe('getAutoGranularity', () => {
 		test('should return day_of_month for data spanning 30 days or less', () => {
-			const data = {
-				'2024-01-01': {},
-				'2024-01-15': {},
-				'2024-01-30': {}
-			};
+			expect(Chartjs.getAutoGranularity({ '2024-01-01': {}, '2024-01-15': {}, '2024-01-30': {} })).toBe('day_of_month');
+		});
 
-			const result = Chartjs.getAutoGranularity(data);
+		test('should return week for data spanning 31-90 days', () => {
+			expect(Chartjs.getAutoGranularity({ '2024-01-01': {}, '2024-03-15': {} })).toBe('week');
+		});
 
-			expect(result).toBe('day_of_month');
+		test('should return month for data spanning more than 90 days', () => {
+			expect(Chartjs.getAutoGranularity({ '2024-01-01': {}, '2024-05-01': {} })).toBe('month');
 		});
 
-		test('should return week for data spanning 31-90 days', () => {
-			const data = {
-				'2024-01-01': {},
-				'2024-03-15': {} // 74 days
-			};
+		test('should return day_of_month for single day', () => {
+			expect(Chartjs.getAutoGranularity({ '2024-01-01': {} })).toBe('day_of_month');
+		});
 
-			const result = Chartjs.getAutoGranularity(data);
+		test('should return week for exactly 31 days', () => {
+			expect(Chartjs.getAutoGranularity({ '2024-01-01': {}, '2024-02-01': {} })).toBe('week');
+		});
 
-			expect(result).toBe('week');
+		test('should return week for exactly 90 days', () => {
+			expect(Chartjs.getAutoGranularity({ '2024-01-01': {}, '2024-03-31': {} })).toBe('week');
 		});
 
-		test('should return month for data spanning more than 90 days', () => {
-			const data = {
-				'2024-01-01': {},
-				'2024-05-01': {} // 121 days
-			};
+		test('should return month for exactly 91 days', () => {
+			expect(Chartjs.getAutoGranularity({ '2024-01-01': {}, '2024-04-01': {} })).toBe('month');
+		});
 
-			const result = Chartjs.getAutoGranularity(data);
+		test('should handle dates in random order', () => {
+			expect(Chartjs.getAutoGranularity({ '2024-03-01': {}, '2024-01-01': {}, '2024-02-01': {} })).toBe('week');
+		});
 
-			expect(result).toBe('month');
+		test('should return month for data spanning a full year', () => {
+			expect(Chartjs.getAutoGranularity({ '2024-01-01': {}, '2024-12-31': {} })).toBe('month');
 		});
+	});
 
-		test('should return day_of_month for single day', () => {
-			const data = {
-				'2024-01-01': {}
-			};
+	describe('chart creation', () => {
+		const chartData = { labels: ['A', 'B'], datasets: [{ label: 'X', data: [1, 2] }] };
 
-			const result = Chartjs.getAutoGranularity(data);
+		test('createStackedChart clears div and calls Chart constructor', () => {
+			const canvas = makeCanvas();
+			canvas.innerHTML = '<span>old</span>';
 
-			expect(result).toBe('day_of_month');
-		});
+			Chartjs.createStackedChart(canvas, chartData);
 
-		test('should return day_of_month for 2 days', () => {
-			const data = {
-				'2024-01-01': {},
-				'2024-01-02': {}
-			};
+			expect(canvas.innerHTML).toBe('');
+			expect(global.Chart).toHaveBeenCalledWith(expect.anything(), expect.objectContaining({ type: 'bar' }));
+		});
 
-			const result = Chartjs.getAutoGranularity(data);
+		test('createStackedChart merges user options', () => {
+			Chartjs.createStackedChart(makeCanvas(), chartData, null, { options: { responsive: false } });
 
-			expect(result).toBe('day_of_month');
+			expect(mockChartInstance.config.options.responsive).toBe(false);
 		});
 
-		test('should return week for exactly 31 days', () => {
-			const data = {
-				'2024-01-01': {},
-				'2024-02-01': {} // 31 days
-			};
+		test('createBarChart clears div and calls Chart constructor', () => {
+			const canvas = makeCanvas();
+			canvas.innerHTML = '<span>old</span>';
 
-			const result = Chartjs.getAutoGranularity(data);
+			Chartjs.createBarChart(canvas, chartData);
 
-			expect(result).toBe('week');
+			expect(canvas.innerHTML).toBe('');
+			expect(global.Chart).toHaveBeenCalledWith(expect.anything(), expect.objectContaining({ type: 'bar' }));
 		});
 
-		test('should return week for exactly 90 days', () => {
-			const data = {
-				'2024-01-01': {},
-				'2024-03-31': {} // 90 days
-			};
-
-			const result = Chartjs.getAutoGranularity(data);
+		test('createBarChart sets title when provided', () => {
+			Chartjs.createBarChart(makeCanvas(), chartData, 'My Title');
 
-			expect(result).toBe('week');
+			expect(mockChartInstance.config.options.plugins.title.display).toBe(true);
+			expect(mockChartInstance.config.options.plugins.title.text).toBe('My Title');
 		});
 
-		test('should return month for exactly 91 days', () => {
-			const data = {
-				'2024-01-01': {},
-				'2024-04-01': {} // 91 days
-			};
+		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' }));
+		});
 
-			const result = Chartjs.getAutoGranularity(data);
+		test('createDoughnutChart clears div and calls Chart constructor', () => {
+			const canvas = makeCanvas();
+			Chartjs.createDoughnutChart(canvas, { labels: ['A'], values: [1], colors: ['#f00'] });
 
-			expect(result).toBe('month');
+			expect(canvas.innerHTML).toBe('');
+			expect(global.Chart).toHaveBeenCalledWith(expect.anything(), expect.objectContaining({ type: 'doughnut' }));
 		});
 
-		test('should handle dates in random order', () => {
-			const data = {
-				'2024-03-01': {},
-				'2024-01-01': {},
-				'2024-02-01': {}
-			};
+		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]);
+		});
 
-			const result = Chartjs.getAutoGranularity(data);
+		test('title not displayed when null', () => {
+			Chartjs.createBarChart(makeCanvas(), chartData, null);
 
-			// Should calculate from first to last date (Jan 1 to Mar 1 = ~59 days)
-			expect(result).toBe('week');
+			expect(mockChartInstance.config.options.plugins.title.display).toBe(false);
 		});
 
-		test('should return month for data spanning a full year', () => {
-			const data = {
-				'2024-01-01': {},
-				'2024-12-31': {} // 365 days
-			};
+		describe('jQuery compatibility (toEl)', () => {
+			test('createStackedChart accepts jQuery-like object', () => {
+				const canvas = makeCanvas();
+				const jq = { jquery: '3.6.0', 0: canvas, length: 1 };
 
-			const result = Chartjs.getAutoGranularity(data);
+				expect(() => Chartjs.createStackedChart(jq, chartData)).not.toThrow();
+				expect(global.Chart).toHaveBeenCalled();
+			});
 
-			expect(result).toBe('month');
-		});
-	});
+			test('createBarChart accepts jQuery-like object', () => {
+				const canvas = makeCanvas();
+				const jq = { jquery: '3.6.0', 0: canvas, length: 1 };
 
-	describe('Chartjs class structure', () => {
-		test('should be a class', () => {
-			expect(typeof Chartjs).toBe('function');
+				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');