Add schedule page with block editor and proclamation browser

2026-09-11 18:16:06 -05:00
parent 545fb22910
commit 5f4116b8e8
9 changed files with 1280 additions and 0 deletions
@@ -0,0 +1,110 @@
+import { page } from 'vitest/browser';
+import { describe, it, expect, vi } from 'vitest';
+import { render } from 'vitest-browser-svelte';
+
+const { submitRef } = vi.hoisted(() => ({
+	submitRef: {
+		current: null as unknown as (opts: { formData: FormData; cancel?: () => void }) => unknown
+	}
+}));
+
+vi.mock('$app/forms', () => ({
+	enhance: (_node: unknown, submit: unknown) => {
+		submitRef.current = submit as typeof submitRef.current;
+		return () => {};
+	}
+}));
+
+import BlockModal from './BlockModal.svelte';
+
+const categories = [{ id: 1, name: 'Physical' }];
+const groups = [{ id: 1, name: 'Prayers' }];
+const proclamations = [
+	{ id: 'p1', name: 'Peace', categoryId: 1, groupId: 1 },
+	{ id: 'p2', name: 'Strength', categoryId: 1, groupId: 1 }
+];
+
+function mount(overrides: Record<string, unknown> = {}) {
+	return render(BlockModal, {
+		open: true,
+		mode: 'create',
+		categories,
+		groups,
+		proclamations,
+		existingBlocks: [],
+		initialStartMinutes: 6 * 60,
+		initialEndMinutes: 8 * 60,
+		initialProclamationIds: ['p1'],
+		onClose: () => {},
+		onSaved: () => {},
+		...overrides
+	});
+}
+
+function submit() {
+	const form = document.querySelector('form') as HTMLFormElement;
+	return submitRef.current({ formData: new FormData(form), cancel: () => {} });
+}
+
+describe('BlockModal', () => {
+	it('uses separate hour and minute selects for start and end', async () => {
+		mount();
+
+		await expect.element(page.getByRole('combobox', { name: /^Start hour$/ })).toBeInTheDocument();
+		await expect
+			.element(page.getByRole('combobox', { name: /^Start minute$/ }))
+			.toBeInTheDocument();
+		await expect.element(page.getByRole('combobox', { name: /^End hour$/ })).toBeInTheDocument();
+		await expect.element(page.getByRole('combobox', { name: /^End minute$/ })).toBeInTheDocument();
+	});
+
+	it('pre-fills the selects from the initial times', async () => {
+		mount({ initialStartMinutes: 7 * 60 + 30, initialEndMinutes: 9 * 60 + 15 });
+
+		await expect.element(page.getByRole('combobox', { name: /^Start hour$/ })).toHaveValue('7');
+		await expect.element(page.getByRole('combobox', { name: /^Start minute$/ })).toHaveValue('30');
+		await expect.element(page.getByRole('combobox', { name: /^End hour$/ })).toHaveValue('9');
+		await expect.element(page.getByRole('combobox', { name: /^End minute$/ })).toHaveValue('15');
+	});
+
+	it('shows the review times and selected proclamation titles', async () => {
+		mount();
+
+		await expect.element(page.getByText('6:00 AM – 8:00 AM')).toBeInTheDocument();
+		await expect.element(page.getByText('Peace')).toBeInTheDocument();
+	});
+
+	it('rejects an overlapping time range with the specific error', async () => {
+		mount({
+			existingBlocks: [{ id: 'b1', startMinutes: 6 * 60, endMinutes: 8 * 60 }],
+			initialStartMinutes: 7 * 60,
+			initialEndMinutes: 9 * 60
+		});
+
+		await page.getByRole('combobox', { name: /^Start hour$/ }).element();
+		submit();
+
+		await expect
+			.element(page.getByText(/This overlaps with your 6:00 AM–8:00 AM block\./))
+			.toBeInTheDocument();
+	});
+
+	it('requires at least one proclamation', async () => {
+		mount({ initialProclamationIds: [] });
+
+		await page.getByRole('combobox', { name: /^Start hour$/ }).element();
+		submit();
+
+		await expect.element(page.getByText('Select at least one proclamation.')).toBeInTheDocument();
+	});
+
+	it('does not show an error for a valid selection', async () => {
+		mount();
+
+		await page.getByRole('combobox', { name: /^Start hour$/ }).element();
+		const result = submit();
+
+		expect(typeof result).toBe('function');
+		await expect.element(page.getByRole('alert')).not.toBeInTheDocument();
+	});
+});