UI-tests und fixes aus tests

public/js/test/datepicker.test.js

@@ -0,0 +1,130 @@
+import { describe, it, afterEach, expect, $, $$, click, sleep, closeAll } from './runner.js';
+import { showDialog } from '../modules/dialog.js';
+
+describe('Datepicker: Rendering', () => {
+    afterEach(async () => {
+        // Close dialog if open
+        const dialog = $('#dialog');
+        if (dialog?.classList.contains('open')) dialog.classList.remove('open');
+        await sleep(50);
+    });
+
+    it('opens with correct month for default value', async () => {
+        const promise = showDialog({ title: 'test', input: 'date', defaultValue: '2025-03-15', okLabel: 'ok' });
+        await sleep(200);
+        const title = document.querySelector('.dp-title');
+        expect(title).toExist();
+        expect(title.textContent).toContain('Mar');
+        expect(title.textContent).toContain('2025');
+        // Cancel
+        click('#dialog-close');
+        await promise.catch(() => {});
+    });
+
+    it('renders 42 day cells (6 weeks grid)', async () => {
+        const promise = showDialog({ title: 'test', input: 'date', defaultValue: '2025-06-01', okLabel: 'ok' });
+        await sleep(200);
+        const days = $$('.dp-day');
+        expect(days.length).toBe(42);
+        click('#dialog-close');
+        await promise.catch(() => {});
+    });
+
+    it('highlights today', async () => {
+        const promise = showDialog({ title: 'test', input: 'date', okLabel: 'ok' });
+        await sleep(200);
+        const today = document.querySelector('.dp-today');
+        expect(today).toExist();
+        click('#dialog-close');
+        await promise.catch(() => {});
+    });
+
+    it('highlights selected date', async () => {
+        const promise = showDialog({ title: 'test', input: 'date', defaultValue: '2025-06-15', okLabel: 'ok' });
+        await sleep(200);
+        const selected = document.querySelector('.dp-selected');
+        expect(selected).toExist();
+        expect(selected.dataset.dpDate).toBe('2025-06-15');
+        click('#dialog-close');
+        await promise.catch(() => {});
+    });
+
+    it('starts week with Monday', async () => {
+        const promise = showDialog({ title: 'test', input: 'date', okLabel: 'ok' });
+        await sleep(200);
+        const labels = $$('.dp-day-label');
+        expect(labels[0].textContent).toBe('Mo');
+        expect(labels[6].textContent).toBe('Su');
+        click('#dialog-close');
+        await promise.catch(() => {});
+    });
+});
+
+describe('Datepicker: Navigation', () => {
+    afterEach(async () => {
+        const dialog = $('#dialog');
+        if (dialog?.classList.contains('open')) dialog.classList.remove('open');
+        await sleep(50);
+    });
+
+    it('navigates to next month', async () => {
+        const promise = showDialog({ title: 'test', input: 'date', defaultValue: '2025-06-15', okLabel: 'ok' });
+        await sleep(200);
+        click(document.querySelector('[data-dp-nav="1"]'));
+        await sleep(100);
+        expect(document.querySelector('.dp-title').textContent).toContain('Jul');
+        click('#dialog-close');
+        await promise.catch(() => {});
+    });
+
+    it('navigates to previous month', async () => {
+        const promise = showDialog({ title: 'test', input: 'date', defaultValue: '2025-06-15', okLabel: 'ok' });
+        await sleep(200);
+        click(document.querySelector('[data-dp-nav="-1"]'));
+        await sleep(100);
+        expect(document.querySelector('.dp-title').textContent).toContain('May');
+        click('#dialog-close');
+        await promise.catch(() => {});
+    });
+
+    it('wraps year on Dec→Jan', async () => {
+        const promise = showDialog({ title: 'test', input: 'date', defaultValue: '2025-12-15', okLabel: 'ok' });
+        await sleep(200);
+        click(document.querySelector('[data-dp-nav="1"]'));
+        await sleep(100);
+        const title = document.querySelector('.dp-title').textContent;
+        expect(title).toContain('Jan');
+        expect(title).toContain('2026');
+        click('#dialog-close');
+        await promise.catch(() => {});
+    });
+
+    it('click day selects it', async () => {
+        const promise = showDialog({ title: 'test', input: 'date', defaultValue: '2025-06-01', okLabel: 'ok' });
+        await sleep(200);
+        const day15 = $$('.dp-day').find(d => d.dataset.dpDate === '2025-06-15');
+        if (day15) {
+            click(day15);
+            await sleep(100);
+            expect(document.querySelector('.dp-selected')?.dataset.dpDate).toBe('2025-06-15');
+        }
+        click('#dialog-close');
+        await promise.catch(() => {});
+    });
+
+    it('double-click day submits', async () => {
+        let result = null;
+        const promise = showDialog({ title: 'test', input: 'date', defaultValue: '2025-06-01', okLabel: 'ok' });
+        promise.then(r => { result = r; });
+        await sleep(200);
+        const day10 = $$('.dp-day').find(d => d.dataset.dpDate === '2025-06-10');
+        if (day10) {
+            day10.dispatchEvent(new MouseEvent('dblclick', { bubbles: true }));
+            await sleep(200);
+            expect(result).toBe('2025-06-10');
+        } else {
+            click('#dialog-close');
+            await promise.catch(() => {});
+        }
+    });
+});