Files
vu/tests/ui/shell.test.ts
T
will a5dc6502d7
Deploy / deploy (push) Failing after 1m8s
Milestone 0/1: shell, calendar/psalter/hours scaffold, Prime
Client-side-first PWA (Vite/TS, no backend) per the approved plan: day-
navigable shell listing all 8 hours, Prime fully resolves via the
calendar -> psalter -> ordo pipeline, the other 7 hours are registered
but flagged not-implemented. Sanctoral/temporal calendar data uses a
day -> id indirection layer (saints, easter-offsets, fixed-date-calendar)
so reassigning a feast to a different day is a data edit, not a code
change. Docker (Caddy-serving-static) + Gitea CI workflow scaffolded to
match the eec/drip/bookshop operational pattern.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-08-09 15:20:06 -04:00

75 lines
2.7 KiB
TypeScript

import { beforeEach, describe, expect, it } from 'vitest';
import { mountShell } from '../../src/ui/shell';
import { setDate, setSelectedHour, setLanguages } from '../../src/app-state';
describe('shell', () => {
// app-state is a module-level singleton, so each test must reset every
// field it might have mutated — not just the one it cares about — or
// state leaks across tests in this file.
beforeEach(() => {
document.body.innerHTML = '<div id="app"></div>';
setDate('2026-08-09');
setSelectedHour('prime');
setLanguages(['en']);
window.history.replaceState(null, '', '/vu/2026-08-09/prime');
});
it('renders the day nav, all 8 hours, and Prime content by default', () => {
const root = document.getElementById('app')!;
mountShell(root);
expect(root.querySelector('.day-nav-date')?.textContent).toContain('August 9, 2026');
const hourNames = Array.from(root.querySelectorAll('.hour-name')).map((el) => el.textContent);
expect(hourNames).toEqual([
'Prime',
'Compline',
'Terce',
'Sext',
'None',
'Lauds',
'Vespers',
'Matins',
]);
expect(root.querySelector('.hour-item.is-selected .hour-name')?.textContent).toBe('Prime');
expect(root.querySelector('.hour-view h2')?.textContent).toBe('Prime');
expect(root.querySelectorAll('.ordo-part-psalm').length).toBeGreaterThan(0);
});
it('switches to a not-yet-built hour and shows the pending message', () => {
const root = document.getElementById('app')!;
mountShell(root);
const complineBtn = Array.from(root.querySelectorAll<HTMLButtonElement>('[data-hour]')).find(
(btn) => btn.dataset.hour === 'compline',
);
complineBtn?.click();
expect(root.querySelector('.hour-view h2')?.textContent).toBe('Compline');
expect(root.querySelector('.hour-view-pending')).not.toBeNull();
});
it('moving to the next day updates the displayed date', () => {
const root = document.getElementById('app')!;
mountShell(root);
root.querySelector<HTMLButtonElement>('[data-action="next"]')?.click();
expect(root.querySelector('.day-nav-date')?.textContent).toContain('August 10, 2026');
});
it('switching to two-language mode renders two columns per verse', () => {
const root = document.getElementById('app')!;
mountShell(root);
const bilingualBtn = Array.from(root.querySelectorAll<HTMLButtonElement>('[data-langs]')).find(
(btn) => btn.dataset.langs === 'en,la',
);
bilingualBtn?.click();
const firstVerseColumns = root.querySelector('.psalm-verse .lang-columns');
expect(firstVerseColumns?.classList.contains('lang-columns-2')).toBe(true);
expect(firstVerseColumns?.querySelectorAll('.lang-column').length).toBe(2);
});
});