131 lines
5.0 KiB
JavaScript
131 lines
5.0 KiB
JavaScript
import { describe, it, afterEach, expect, $, $$, click, sleep, closeAll } from './runner.js';
|
|
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(() => {});
|
|
}
|
|
});
|
|
});
|