@osimatic/helpers-js 1.5.2 → 1.5.4

package/tests/details_sub_array.test.js

@@ -2,278 +2,219 @@
  * @jest-environment jsdom
  */
 const { DetailsSubArray } = require('../details_sub_array');
-
-// Mock HTTPClient
-jest.mock('../http_client', () => ({
-	HTTPClient: {
-		request: jest.fn()
-	}
-}));
-
 const { HTTPClient } = require('../http_client');
 
-describe('DetailsSubArray', () => {
-	let mockTable;
-	let mockLink;
-	let mockTr;
-	let mockThead;
+function setupTable(nbLinks = 1) {
+	document.body.innerHTML = `
+		<table>
+			<thead>
+				<tr>
+					<th>Col1</th><th>Col2</th><th>Col3</th><th>Col4</th><th>Col5</th>
+				</tr>
+			</thead>
+			<tbody>
+				${Array.from({ length: nbLinks }, (_, i) => `
+				<tr id="tr${i}">
+					<td><a class="details_link hide" data-url_details="http://example.com/details/${i}">Details</a></td>
+				</tr>`).join('')}
+			</tbody>
+		</table>
+	`;
+	return document.querySelector('table');
+}
 
+describe('DetailsSubArray', () => {
 	beforeEach(() => {
-		// Clear all mocks
-		jest.clearAllMocks();
-
-		// Define global labels used by the code
-		global.showDetailsLabel = 'Show details';
-		global.hideDetailsLabel = 'Hide details';
-		global.labelErrorOccured = 'An error occurred';
-
-		// Make HTTPClient available globally
-		global.HTTPClient = HTTPClient;
-
-		// Create mock DOM structure
-		mockThead = {
-			find: jest.fn((selector) => {
-				if (selector === 'thead tr') {
-					return {
-						children: jest.fn(() => ({ length: 5 }))
-					};
-				}
-				return {
-					children: jest.fn(() => ({ length: 5 }))
-				};
-			})
-		};
-
-		mockTr = {
-			closest: jest.fn((selector) => {
-				if (selector === 'table') {
-					return {
-						find: jest.fn((sel) => {
-							if (sel === 'thead tr') {
-								return {
-									children: jest.fn(() => ({ length: 5 }))
-								};
-							}
-							return mockThead;
-						})
-					};
-				}
-				return mockTr;
-			}),
-			after: jest.fn(),
-			addClass: jest.fn().mockReturnThis(),
-			next: jest.fn(() => ({
-				hasClass: jest.fn(() => false),
-				remove: jest.fn()
-			}))
-		};
-
-		mockLink = {
-			data: jest.fn((key) => {
-				if (key === 'url_details') return 'http://example.com/details';
-				return null;
-			}),
-			closest: jest.fn(() => mockTr),
-			prop: jest.fn().mockReturnThis(),
-			attr: jest.fn().mockReturnThis(),
-			html: jest.fn().mockReturnThis(),
-			click: jest.fn().mockReturnThis(),
-			stop: jest.fn().mockReturnThis(),
-			off: jest.fn().mockReturnThis(),
-			removeClass: jest.fn().mockReturnThis()
-		};
-
-		mockTable = {
-			find: jest.fn(() => ({
-				each: jest.fn((callback) => {
-					// Simulate one link found
-					callback(0, mockLink);
-				})
-			}))
-		};
-
-		// Mock jQuery
-		global.$ = jest.fn((selector) => {
-			if (typeof selector === 'string') {
-				if (selector.includes('<tr')) {
-					return {
-						find: jest.fn().mockReturnThis(),
-						append: jest.fn().mockReturnThis(),
-						after: jest.fn().mockReturnThis()
-					};
-				}
-				if (selector.includes('<span')) {
-					return selector; // Return the HTML string for glyphicon
-				}
-				if (selector.includes('<i')) {
-					return selector; // Return the HTML string for fa icons
-				}
-				return {
-					length: 0,
-					remove: jest.fn()
-				};
-			}
-			// Wrap element
-			return selector;
-		});
+		jest.spyOn(HTTPClient, 'request').mockImplementation(() => {});
 	});
 
 	afterEach(() => {
-		delete global.$;
-		delete global.showDetailsLabel;
-		delete global.hideDetailsLabel;
-		delete global.labelErrorOccured;
-		delete global.HTTPClient;
+		jest.restoreAllMocks();
+		document.body.innerHTML = '';
 	});
 
 	describe('initDetailsLink', () => {
-		test('should initialize details links', () => {
-			DetailsSubArray.initDetailsLink(mockTable);
+		test('should initialize details links and remove hide class', () => {
+			const table = setupTable();
+			DetailsSubArray.initDetailsLink(table);
 
-			expect(mockTable.find).toHaveBeenCalledWith('a.details_link');
-			expect(mockLink.removeClass).toHaveBeenCalledWith('hide');
+			const link = table.querySelector('a.details_link');
+			expect(link.classList.contains('hide')).toBe(false);
 		});
 
-		test('should set up click handlers on links', () => {
-			DetailsSubArray.initDetailsLink(mockTable);
+		test('should show plus button initially', () => {
+			const table = setupTable();
+			DetailsSubArray.initDetailsLink(table);
 
-			expect(mockLink.click).toHaveBeenCalled();
+			const link = table.querySelector('a.details_link');
+			expect(link.innerHTML).toContain('glyphicon-plus');
 		});
 
-		test('should show plus button initially', () => {
-			DetailsSubArray.initDetailsLink(mockTable);
+		test('should set showDetailsLabel as title initially', () => {
+			const table = setupTable();
+			DetailsSubArray.initDetailsLink(table, { showDetailsLabel: 'Show details' });
+
+			const link = table.querySelector('a.details_link');
+			expect(link.title).toBe('Show details');
+		});
+
+		test('should make HTTP request when link is clicked', () => {
+			const table = setupTable();
+			DetailsSubArray.initDetailsLink(table);
 
-			expect(mockLink.html).toHaveBeenCalled();
+			const link = table.querySelector('a.details_link');
+			link.click();
+
+			expect(HTTPClient.request).toHaveBeenCalledWith(
+				'GET',
+				'http://example.com/details/0',
+				null,
+				expect.any(Function),
+				expect.any(Function)
+			);
 		});
 
-		test('should handle callback before send', () => {
-			const beforeSendCallback = jest.fn(() => '<div>Custom content</div>');
+		test('should disable link while loading', () => {
+			HTTPClient.request.mockImplementation(() => {
+				// Don't call callbacks — simulate loading state
+			});
 
-			DetailsSubArray.initDetailsLink(mockTable, null, null, beforeSendCallback);
+			const table = setupTable();
+			DetailsSubArray.initDetailsLink(table);
 
-			// Trigger the click
-			const clickHandler = mockLink.click.mock.calls[0][0];
-			if (clickHandler) {
-				clickHandler.call(mockLink);
-			}
+			const link = table.querySelector('a.details_link');
+			link.click();
 
-			// beforeSendCallback should be called when clicking
-			// (This tests that the callback is properly wired up)
+			expect(link.disabled).toBe(true);
 		});
 
-		test('should handle success callback', () => {
-			const successCallback = jest.fn((jsonObj, link) => '<div>Success</div>');
+		test('should show loading row while request is pending', () => {
+			HTTPClient.request.mockImplementation(() => {});
+
+			const table = setupTable();
+			DetailsSubArray.initDetailsLink(table);
 
-			DetailsSubArray.initDetailsLink(mockTable, successCallback);
+			const link = table.querySelector('a.details_link');
+			const tr = link.closest('tr');
+			link.click();
 
-			// Verify the callback is passed through
-			expect(mockTable.find).toHaveBeenCalled();
+			const loadingRow = tr.nextElementSibling;
+			expect(loadingRow).not.toBeNull();
+			expect(loadingRow.classList.contains('waiting_icon')).toBe(true);
 		});
 
-		test('should handle error callback', () => {
-			const errorCallback = jest.fn();
+		test('should call success callback with JSON response', () => {
+			const jsonResponse = { items: ['item1', 'item2'] };
+			const successCallback = jest.fn(() => '<div>Details</div>');
 
-			DetailsSubArray.initDetailsLink(mockTable, null, errorCallback);
+			HTTPClient.request.mockImplementation((method, url, data, successCb) => {
+				successCb(jsonResponse);
+			});
+
+			const table = setupTable();
+			DetailsSubArray.initDetailsLink(table, { onSuccess: successCallback });
+
+			const link = table.querySelector('a.details_link');
+			link.click();
 
-			// Verify the callback is passed through
-			expect(mockTable.find).toHaveBeenCalled();
+			expect(successCallback).toHaveBeenCalledWith(jsonResponse, link);
 		});
 
-		test('should make HTTP request when link is clicked', () => {
-			HTTPClient.request.mockImplementation((method, url, data, successCb, errorCb) => {
+		test('should show details row after successful request', () => {
+			HTTPClient.request.mockImplementation((method, url, data, successCb) => {
 				successCb({ data: 'test' });
 			});
 
-			const successCallback = jest.fn(() => '<div>Details</div>');
-			DetailsSubArray.initDetailsLink(mockTable, successCallback);
+			const table = setupTable();
+			DetailsSubArray.initDetailsLink(table, { onSuccess: jest.fn(() => '<div class="content">Details</div>') });
 
-			// Simulate click
-			const clickHandler = mockLink.click.mock.calls[0][0];
-			if (clickHandler) {
-				clickHandler.call(mockLink);
-			}
+			const link = table.querySelector('a.details_link');
+			const tr = link.closest('tr');
+			link.click();
 
-			// HTTPClient.request should be called
-			expect(HTTPClient.request).toHaveBeenCalledWith(
-				'GET',
-				'http://example.com/details',
-				null,
-				expect.any(Function),
-				expect.any(Function)
-			);
+			const detailsRow = tr.nextElementSibling;
+			expect(detailsRow).not.toBeNull();
+			expect(detailsRow.classList.contains('participants')).toBe(true);
 		});
 
-		test('should handle HTTP request success with null response', () => {
+		test('should show minus button after successful request', () => {
 			HTTPClient.request.mockImplementation((method, url, data, successCb) => {
-				successCb(null);
+				successCb({ data: 'test' });
 			});
 
-			DetailsSubArray.initDetailsLink(mockTable);
+			const table = setupTable();
+			DetailsSubArray.initDetailsLink(table, { onSuccess: jest.fn(() => '') });
 
-			// Simulate click
-			const clickHandler = mockLink.click.mock.calls[0][0];
-			if (clickHandler) {
-				clickHandler.call(mockLink);
-			}
+			const link = table.querySelector('a.details_link');
+			link.click();
 
-			// Should display error row
-			expect(mockTr.after).toHaveBeenCalled();
+			expect(link.innerHTML).toContain('glyphicon-minus');
 		});
 
-		test('should handle HTTP request error', () => {
-			HTTPClient.request.mockImplementation((method, url, data, successCb, errorCb) => {
-				errorCb();
+		test('should set hideDetailsLabel as title after loading', () => {
+			HTTPClient.request.mockImplementation((method, url, data, successCb) => {
+				successCb({ data: 'test' });
 			});
 
-			DetailsSubArray.initDetailsLink(mockTable);
+			const table = setupTable();
+			DetailsSubArray.initDetailsLink(table, {
+				onSuccess: jest.fn(() => ''),
+				hideDetailsLabel: 'Hide details',
+			});
 
-			// Simulate click
-			const clickHandler = mockLink.click.mock.calls[0][0];
-			if (clickHandler) {
-				clickHandler.call(mockLink);
-			}
+			const link = table.querySelector('a.details_link');
+			link.click();
 
-			// Should display error row
-			expect(mockTr.after).toHaveBeenCalled();
+			expect(link.title).toBe('Hide details');
 		});
 
-		test('should call success callback with JSON response', () => {
-			const jsonResponse = { items: ['item1', 'item2'] };
-			const successCallback = jest.fn(() => '<div>Details</div>');
-
+		test('should hide details row when clicking minus button', () => {
 			HTTPClient.request.mockImplementation((method, url, data, successCb) => {
-				successCb(jsonResponse);
+				successCb({ data: 'test' });
 			});
 
-			DetailsSubArray.initDetailsLink(mockTable, successCallback);
+			const table = setupTable();
+			DetailsSubArray.initDetailsLink(table, { onSuccess: jest.fn(() => '<div>Details</div>') });
 
-			// Simulate click
-			const clickHandler = mockLink.click.mock.calls[0][0];
-			if (clickHandler) {
-				clickHandler.call(mockLink);
-			}
+			const link = table.querySelector('a.details_link');
+			const tr = link.closest('tr');
+			link.click(); // open
+			expect(tr.nextElementSibling?.classList.contains('participants')).toBe(true);
 
-			// Success callback should be called with JSON response
-			expect(successCallback).toHaveBeenCalledWith(jsonResponse, mockLink);
+			link.click(); // close
+			expect(tr.nextElementSibling?.classList.contains('participants')).toBeFalsy();
 		});
 
-		test('should call error callback on HTTP error', () => {
-			const errorCallback = jest.fn();
+		test('should display error row when response is null with no error callback', () => {
+			HTTPClient.request.mockImplementation((method, url, data, successCb) => {
+				successCb(null);
+			});
 
+			const table = setupTable();
+			DetailsSubArray.initDetailsLink(table);
+
+			const link = table.querySelector('a.details_link');
+			const tr = link.closest('tr');
+			link.click();
+
+			expect(tr.nextElementSibling).not.toBeNull();
+			expect(tr.nextElementSibling.classList.contains('text-error')).toBe(true);
+		});
+
+		test('should display error row when HTTP request fails with no error callback', () => {
 			HTTPClient.request.mockImplementation((method, url, data, successCb, errorCb) => {
 				errorCb();
 			});
 
-			DetailsSubArray.initDetailsLink(mockTable, null, errorCallback);
+			const table = setupTable();
+			DetailsSubArray.initDetailsLink(table);
 
-			// Simulate click
-			const clickHandler = mockLink.click.mock.calls[0][0];
-			if (clickHandler) {
-				clickHandler.call(mockLink);
-			}
+			const link = table.querySelector('a.details_link');
+			const tr = link.closest('tr');
+			link.click();
 
-			// Error callback should be called
-			expect(errorCallback).toHaveBeenCalledWith(mockLink);
+			expect(tr.nextElementSibling).not.toBeNull();
+			expect(tr.nextElementSibling.classList.contains('error')).toBe(true);
 		});
 
 		test('should call error callback when response is null', () => {
@@ -283,85 +224,99 @@ describe('DetailsSubArray', () => {
 				successCb(null);
 			});
 
-			DetailsSubArray.initDetailsLink(mockTable, null, errorCallback);
+			const table = setupTable();
+			DetailsSubArray.initDetailsLink(table, { onError: errorCallback });
+
+			const link = table.querySelector('a.details_link');
+			link.click();
+
+			expect(errorCallback).toHaveBeenCalledWith(link);
+		});
+
+		test('should call error callback on HTTP error', () => {
+			const errorCallback = jest.fn();
+
+			HTTPClient.request.mockImplementation((method, url, data, successCb, errorCb) => {
+				errorCb();
+			});
+
+			const table = setupTable();
+			DetailsSubArray.initDetailsLink(table, { onError: errorCallback });
 
-			// Simulate click
-			const clickHandler = mockLink.click.mock.calls[0][0];
-			if (clickHandler) {
-				clickHandler.call(mockLink);
-			}
+			const link = table.querySelector('a.details_link');
+			link.click();
 
-			// Error callback should be called
-			expect(errorCallback).toHaveBeenCalledWith(mockLink);
+			expect(errorCallback).toHaveBeenCalledWith(link);
 		});
 
 		test('should use before send callback instead of HTTP request', () => {
 			const beforeSendCallback = jest.fn(() => '<div>Immediate content</div>');
 
-			DetailsSubArray.initDetailsLink(mockTable, null, null, beforeSendCallback);
-
-			// Simulate click
-			const clickHandler = mockLink.click.mock.calls[0][0];
-			if (clickHandler) {
-				clickHandler.call(mockLink);
-			}
+			const table = setupTable();
+			DetailsSubArray.initDetailsLink(table, { onBeforeSend: beforeSendCallback });
 
-			// Before send callback should be called
-			expect(beforeSendCallback).toHaveBeenCalledWith(mockLink);
+			const link = table.querySelector('a.details_link');
+			link.click();
 
-			// HTTP request should NOT be made
+			expect(beforeSendCallback).toHaveBeenCalledWith(link);
 			expect(HTTPClient.request).not.toHaveBeenCalled();
 		});
 
-		test('should handle multiple links', () => {
-			const mockLink2 = { ...mockLink };
+		test('should show details row when using before send callback', () => {
+			const table = setupTable();
+			DetailsSubArray.initDetailsLink(table, { onBeforeSend: jest.fn(() => '<div>Immediate</div>') });
 
-			mockTable.find = jest.fn(() => ({
-				each: jest.fn((callback) => {
-					callback(0, mockLink);
-					callback(1, mockLink2);
-				})
-			}));
+			const link = table.querySelector('a.details_link');
+			const tr = link.closest('tr');
+			link.click();
 
-			DetailsSubArray.initDetailsLink(mockTable);
+			const detailsRow = tr.nextElementSibling;
+			expect(detailsRow).not.toBeNull();
+			expect(detailsRow.classList.contains('participants')).toBe(true);
+		});
+
+		test('should handle multiple links independently', () => {
+			const table = setupTable(2);
+			DetailsSubArray.initDetailsLink(table);
 
-			// Both links should be initialized
-			expect(mockLink.removeClass).toHaveBeenCalled();
+			const links = table.querySelectorAll('a.details_link');
+			expect(links.length).toBe(2);
+			links.forEach(link => {
+				expect(link.innerHTML).toContain('glyphicon-plus');
+				expect(link.classList.contains('hide')).toBe(false);
+			});
 		});
 
-		test('should disable link while loading', () => {
-			HTTPClient.request.mockImplementation(() => {
-				// Don't call callbacks, simulate loading state
+		test('should use colspan matching number of columns', () => {
+			HTTPClient.request.mockImplementation((method, url, data, successCb) => {
+				successCb(null);
 			});
 
-			DetailsSubArray.initDetailsLink(mockTable);
+			const table = setupTable();
+			DetailsSubArray.initDetailsLink(table);
 
-			// Simulate click
-			const clickHandler = mockLink.click.mock.calls[0][0];
-			if (clickHandler) {
-				clickHandler.call(mockLink);
-			}
+			const link = table.querySelector('a.details_link');
+			const tr = link.closest('tr');
+			link.click();
 
-			// Link should be disabled during loading
-			expect(mockLink.attr).toHaveBeenCalledWith('disabled', true);
+			const errorRow = tr.nextElementSibling;
+			expect(errorRow.querySelector('td').getAttribute('colspan')).toBe('5');
 		});
 
-		test('should show loading icon', () => {
-			HTTPClient.request.mockImplementation(() => {
-				// Loading state
+		test('should use custom error label', () => {
+			HTTPClient.request.mockImplementation((method, url, data, successCb) => {
+				successCb(null);
 			});
 
-			DetailsSubArray.initDetailsLink(mockTable);
+			const table = setupTable();
+			DetailsSubArray.initDetailsLink(table, { labelErrorOccurred: 'Custom error' });
 
-			// Simulate click
-			const clickHandler = mockLink.click.mock.calls[0][0];
-			if (clickHandler) {
-				clickHandler.call(mockLink);
-			}
+			const link = table.querySelector('a.details_link');
+			const tr = link.closest('tr');
+			link.click();
 
-			// Should display loading icon
-			expect(mockLink.html).toHaveBeenCalled();
-			expect(mockTr.after).toHaveBeenCalled();
+			const errorRow = tr.nextElementSibling;
+			expect(errorRow.textContent).toContain('Custom error');
 		});
 	});
 });