hyprcrd/public/plugins/tests/datepicker.test.js

import { describe, it, afterEach, expect, $, $$, click, sleep, closeAll } from './runner.js?v=3';
import { showDialog } from '../../js/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(() => {});
        }
    });
});