@keenthemes/ktui 1.2.6 → 1.2.7

package/src/components/datatable/__tests__/datatable-public-api.test.ts

@@ -0,0 +1,269 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+
+vi.mock('../../../index', () => ({
+	default: { init: vi.fn() },
+}));
+
+vi.mock('../../helpers/data', () => {
+	const map = new Map();
+	return {
+		default: {
+			set: vi.fn((el: HTMLElement, key: string, val: unknown) => {
+				if (!map.has(el)) map.set(el, new Map());
+				map.get(el).set(key, val);
+			}),
+			get: vi.fn((el: HTMLElement, key: string) => {
+				return map.has(el) ? map.get(el).get(key) ?? null : null;
+			}),
+			has: vi.fn((el: HTMLElement, key: string) => {
+				return map.has(el) && map.get(el).has(key);
+			}),
+			remove: vi.fn((el: HTMLElement, key: string) => {
+				if (map.has(el)) map.get(el).delete(key);
+			}),
+			clear: vi.fn((el: HTMLElement) => {
+				map.delete(el);
+			}),
+		},
+	};
+});
+
+import { KTDataTable, initAllDataTables } from '../datatable';
+
+function createLocalTableHtml(): string {
+	return `
+    <div data-kt-datatable="true">
+      <table data-kt-datatable-table="true">
+        <thead>
+          <tr>
+            <th data-kt-datatable-column="0" data-kt-datatable-column-sort="false">Name</th>
+            <th data-kt-datatable-column="1">Age</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr><td>Alice</td><td>30</td></tr>
+          <tr><td>Bob</td><td>25</td></tr>
+          <tr><td>Charlie</td><td>35</td></tr>
+        </tbody>
+      </table>
+    </div>
+  `;
+}
+
+function createLocalDatatable() {
+	const container = document.createElement('div');
+	container.innerHTML = createLocalTableHtml();
+	document.body.appendChild(container);
+	const table = container.querySelector(
+		'[data-kt-datatable]',
+	) as HTMLElement;
+	return { container, table };
+}
+
+describe('KTDataTable public API', () => {
+	describe('reload and redraw', () => {
+		it('reload() calls _updateData (local mode, synchronous)', () => {
+			const { table } = createLocalDatatable();
+			const dt = new KTDataTable(table);
+			const spy = vi.spyOn(dt as any, '_updateData');
+			dt.reload();
+			expect(spy).toHaveBeenCalled();
+			dt.dispose();
+		});
+
+		it('redraw() calls _paginateData with default page 1', () => {
+			const { table } = createLocalDatatable();
+			const dt = new KTDataTable(table);
+			const spy = vi.spyOn(dt as any, '_paginateData');
+			dt.redraw();
+			expect(spy).toHaveBeenCalledWith(1);
+			dt.dispose();
+		});
+
+		it('redraw(3) calls _paginateData with page 3', () => {
+			const { table } = createLocalDatatable();
+			const dt = new KTDataTable(table);
+			const spy = vi.spyOn(dt as any, '_paginateData');
+			dt.redraw(3);
+			expect(spy).toHaveBeenCalledWith(3);
+			dt.dispose();
+		});
+	});
+
+	describe('Spinner', () => {
+		it('showSpinner() shows loading spinner', () => {
+			const { table } = createLocalDatatable();
+			const dt = new KTDataTable(table);
+			const spinner = (dt as any)._spinner;
+			const spy = vi.spyOn(spinner, 'show');
+			dt.showSpinner();
+			expect(spy).toHaveBeenCalled();
+			dt.dispose();
+		});
+
+		it('hideSpinner() hides loading spinner', () => {
+			const { table } = createLocalDatatable();
+			const dt = new KTDataTable(table);
+			const spinner = (dt as any)._spinner;
+			const spy = vi.spyOn(spinner, 'hide');
+			dt.hideSpinner();
+			expect(spy).toHaveBeenCalled();
+			dt.dispose();
+		});
+	});
+
+	describe('setFilter', () => {
+		it('setFilter() stores filter and returns this (chainable)', () => {
+			const { table } = createLocalDatatable();
+			const dt = new KTDataTable(table);
+			const result = dt.setFilter({
+				column: 'name',
+				type: 'text',
+				value: 'Alice',
+			});
+			expect(result).toBe(dt);
+			const state = dt.getState();
+			expect(state.filters).toContainEqual({
+				column: 'name',
+				type: 'text',
+				value: 'Alice',
+			});
+			dt.dispose();
+		});
+	});
+
+	describe('search', () => {
+		it('search("query") sets search state and reloads', () => {
+			const { table } = createLocalDatatable();
+			const dt = new KTDataTable(table);
+			const reloadSpy = vi.spyOn(dt, 'reload');
+			dt.search('Alice');
+			expect(reloadSpy).toHaveBeenCalled();
+			const state = dt.getState();
+			expect(state.search).toBe('Alice');
+			dt.dispose();
+		});
+	});
+
+	describe('Static methods', () => {
+		it('KTDataTable.getInstance() returns instance for registered element', () => {
+			const { table } = createLocalDatatable();
+			const dt = new KTDataTable(table);
+			const instance = KTDataTable.getInstance(table);
+			expect(instance).toBe(dt);
+			dt.dispose();
+		});
+
+		it('KTDataTable.getInstance() returns undefined for unregistered element', () => {
+			const el = document.createElement('div');
+			expect(KTDataTable.getInstance(el)).toBeUndefined();
+		});
+
+		it('KTDataTable.createInstances() creates instances for [data-kt-datatable] elements', () => {
+			const container = document.createElement('div');
+			container.innerHTML = `
+        <div data-kt-datatable="true">
+          <table data-kt-datatable-table="true">
+            <thead><tr><th>Name</th></tr></thead>
+            <tbody><tr><td>Test</td></tr></tbody>
+          </table>
+        </div>
+      `;
+			document.body.appendChild(container);
+
+			KTDataTable.createInstances();
+			const el = container.querySelector('[data-kt-datatable]') as HTMLElement;
+			const instance = KTDataTable.getInstance(el);
+			expect(instance).toBeDefined();
+			instance?.dispose();
+		});
+	});
+
+	describe('dispose', () => {
+		it('dispose() calls remoteProvider.dispose() if remote mode', () => {
+			const { table } = createLocalDatatable();
+			const dt = new KTDataTable(table);
+			const remoteProvider = (dt as any)._remoteProvider;
+			const spy = vi.spyOn(remoteProvider, 'dispose');
+			dt.dispose();
+			expect(spy).toHaveBeenCalled();
+		});
+
+		it('dispose() calls _dispose() cleanup', () => {
+			const { table } = createLocalDatatable();
+			const dt = new KTDataTable(table);
+			const spy = vi.spyOn(dt as any, '_dispose');
+			dt.dispose();
+			expect(spy).toHaveBeenCalled();
+		});
+	});
+
+	describe('_emit helper', () => {
+		it('_emit dispatches both internal and DOM CustomEvent', () => {
+			const { table } = createLocalDatatable();
+			const dt = new KTDataTable(table);
+
+			const handler = vi.fn();
+			dt.on('test-event', handler);
+
+			table.addEventListener('kt.datatable.test-event', ((e: CustomEvent) => {
+				expect(e.detail).toBeDefined();
+			}) as EventListener);
+
+			(dt as any)._emit('test-event', { foo: 'bar' });
+			expect(handler).toHaveBeenCalledWith({ foo: 'bar' });
+
+			dt.dispose();
+		});
+
+		it('_emit with no listeners does not throw', () => {
+			const { table } = createLocalDatatable();
+			const dt = new KTDataTable(table);
+			expect(() => (dt as any)._emit('nonexistent-event')).not.toThrow();
+			dt.dispose();
+		});
+	});
+
+	describe('sort', () => {
+		it('sort(field, order) applies explicit direction without toggling', () => {
+			const { table } = createLocalDatatable();
+			const dt = new KTDataTable(table);
+
+			dt.sort(1, 'desc');
+			expect(dt.getState().sortField).toBe(1);
+			expect(dt.getState().sortOrder).toBe('desc');
+
+			dt.sort(1, 'asc');
+			expect(dt.getState().sortOrder).toBe('asc');
+
+			dt.sort(1, '');
+			expect(dt.getState().sortOrder).toBe('');
+
+			dt.dispose();
+		});
+	});
+
+	describe('initAllDataTables', () => {
+		it('initAllDataTables creates instances and assigns to window', () => {
+			const container = document.createElement('div');
+			container.innerHTML = `
+        <div data-kt-datatable="true">
+          <table data-kt-datatable-table="true">
+            <thead><tr><th>Name</th></tr></thead>
+            <tbody><tr><td>Test</td></tr></tbody>
+          </table>
+        </div>
+      `;
+			document.body.appendChild(container);
+
+			initAllDataTables();
+
+			const el = container.querySelector('[data-kt-datatable]') as HTMLElement;
+			const instance = KTDataTable.getInstance(el);
+			expect(instance).toBeDefined();
+			expect((window as any).KTDataTable).toBe(KTDataTable);
+
+			instance?.dispose();
+		});
+	});
+});

package/src/components/datatable/__tests__/datatable-registry.test.ts

@@ -0,0 +1,172 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { createDataTableRegistry } from '../datatable-registry';
+import KTData from '../../../helpers/data';
+
+vi.mock('../../../helpers/data', () => ({
+	default: { remove: vi.fn() },
+}));
+
+function createMockInstance() {
+	return {
+		dispose: vi.fn(),
+	};
+}
+
+describe('createDataTableRegistry', () => {
+	let registry: ReturnType<typeof createDataTableRegistry>;
+
+	beforeEach(() => {
+		registry = createDataTableRegistry();
+	});
+
+	describe('register and get', () => {
+		it('register() stores instance in Map, get() retrieves it', () => {
+			const el = document.createElement('div');
+			const instance = createMockInstance();
+			registry.register(el, instance as any);
+			expect(registry.get(el)).toBe(instance);
+		});
+
+		it('get() falls back to element.instance property when Map has no entry', () => {
+			const el = document.createElement('div') as any;
+			const instance = createMockInstance();
+			el.instance = instance;
+			expect(registry.get(el)).toBe(instance);
+		});
+
+		it('get() returns undefined for unregistered element', () => {
+			const el = document.createElement('div');
+			expect(registry.get(el)).toBeUndefined();
+		});
+	});
+
+	describe('remove', () => {
+		it('remove() deletes from Map and removes element.instance property', () => {
+			const el = document.createElement('div') as any;
+			const instance = createMockInstance();
+			registry.register(el, instance as any);
+			expect(el.instance).toBe(instance);
+
+			registry.remove(el);
+
+			expect(registry.get(el)).toBeUndefined();
+			expect(el.instance).toBeUndefined();
+		});
+
+		it('remove() on non-existent element does not throw', () => {
+			const el = document.createElement('div');
+			expect(() => registry.remove(el)).not.toThrow();
+		});
+	});
+
+	describe('clear', () => {
+		it('clear() removes all entries from Map (get falls back to element.instance)', () => {
+			const el1 = document.createElement('div');
+			const el2 = document.createElement('div');
+			const inst1 = createMockInstance();
+			const inst2 = createMockInstance();
+			registry.register(el1, inst1 as any);
+			registry.register(el2, inst2 as any);
+
+			registry.clear();
+
+			// get() falls back to element.instance property set by register()
+			// so we need to also delete that to verify Map was truly cleared
+			delete (el1 as any).instance;
+			delete (el2 as any).instance;
+			expect(registry.get(el1)).toBeUndefined();
+			expect(registry.get(el2)).toBeUndefined();
+		});
+	});
+
+	describe('createAll', () => {
+		it('createAll() finds [data-kt-datatable="true"] elements and creates instances', () => {
+			const table1 = document.createElement('div');
+			table1.setAttribute('data-kt-datatable', 'true');
+			const table2 = document.createElement('div');
+			table2.setAttribute('data-kt-datatable', 'true');
+			document.body.appendChild(table1);
+			document.body.appendChild(table2);
+
+			const factory = vi.fn(() => createMockInstance());
+			registry.createAll(factory);
+
+			expect(factory).toHaveBeenCalledTimes(2);
+			expect(registry.get(table1)).toBeDefined();
+			expect(registry.get(table2)).toBeDefined();
+		});
+
+		it('createAll() skips elements with datatable-initialized class', () => {
+			const table = document.createElement('div');
+			table.setAttribute('data-kt-datatable', 'true');
+			table.classList.add('datatable-initialized');
+			document.body.appendChild(table);
+
+			const factory = vi.fn(() => createMockInstance());
+			registry.createAll(factory);
+
+			// Note: The code checks hasAttribute('data-kt-datatable') AND !classList.contains('datatable-initialized')
+			// But the condition is: if (element.hasAttribute('data-kt-datatable') && !element.classList.contains('datatable-initialized'))
+			// Since the element DOES have the attribute AND does NOT have the class... wait, it DOES have the class.
+			// So it should skip.
+			// Actually re-reading the code: the forEach iterates ALL elements matching [data-kt-datatable="true"]
+			// Then inside: if (element.hasAttribute('data-kt-datatable') && !element.classList.contains('datatable-initialized'))
+			// The element has both the attribute and the class, so the condition is false => skip
+			expect(factory).not.toHaveBeenCalled();
+		});
+
+		it('createAll() does nothing when document is undefined (guard)', () => {
+			const originalDoc = globalThis.document;
+			// @ts-ignore
+			delete globalThis.document;
+			const factory = vi.fn(() => createMockInstance());
+			registry.createAll(factory);
+			expect(factory).not.toHaveBeenCalled();
+			globalThis.document = originalDoc;
+		});
+	});
+
+	describe('reinit', () => {
+		it('reinit() disposes existing instances, removes KTData, clears registry, then createAll', () => {
+			const table = document.createElement('div');
+			table.setAttribute('data-kt-datatable', 'true');
+			document.body.appendChild(table);
+
+			const instance = createMockInstance();
+			registry.register(table, instance as any);
+
+			const factory = vi.fn(() => createMockInstance());
+			registry.reinit(factory);
+
+			expect(instance.dispose).toHaveBeenCalled();
+			expect(KTData.remove).toHaveBeenCalledWith(table, 'datatable');
+			expect(factory).toHaveBeenCalled();
+		});
+
+		it('reinit() handles per-element dispose errors gracefully', () => {
+			const table = document.createElement('div');
+			table.setAttribute('data-kt-datatable', 'true');
+			document.body.appendChild(table);
+
+			const instance = {
+				dispose: vi.fn(() => {
+					throw new Error('dispose error');
+				}),
+			};
+			registry.register(table, instance as any);
+
+			const factory = vi.fn(() => createMockInstance());
+			expect(() => registry.reinit(factory)).not.toThrow();
+		});
+
+		it('reinit() does nothing when document is undefined', () => {
+			const originalDoc = globalThis.document;
+			// @ts-ignore
+			delete globalThis.document;
+			const factory = vi.fn(() => createMockInstance());
+			registry.reinit(factory);
+			expect(factory).not.toHaveBeenCalled();
+			globalThis.document = originalDoc;
+		});
+	});
+});