Initial release 0.1.0

tests/ui.e2e.ts

@@ -0,0 +1,86 @@
+import { expect, test } from '@playwright/test';
+
+test('desktop fundus is usable, filterable and keeps its theme', async ({ page }, testInfo) => {
+	await page.setViewportSize({ width: 1440, height: 1000 });
+	await page.goto('/fundus');
+
+	await expect(
+		page.getByRole('heading', { name: 'Gute Stücke, sofort griffbereit.' })
+	).toBeVisible();
+	await expect(page.getByText('Gestaltungsvorschau: Fundus')).toBeVisible();
+	await expect(page.locator('.piece-card')).toHaveCount(4);
+
+	await page.getByRole('searchbox', { name: 'Fundus durchsuchen' }).fill('Pixelart');
+	await expect(page.locator('.piece-card')).toHaveCount(1);
+	await expect(
+		page.getByRole('heading', { name: 'Pixelart, die nicht nostalgisch sein will' })
+	).toBeVisible();
+
+	await page.getByRole('button', { name: 'Darstellung: System' }).click();
+	await expect(page.locator('html')).toHaveAttribute('data-theme-preference', 'light');
+	await page.reload();
+	await expect(page.locator('html')).toHaveAttribute('data-theme-preference', 'light');
+	await expect(page.getByRole('button', { name: 'Darstellung: Hell' })).toBeVisible();
+
+	const dimensions = await page.evaluate(() => ({
+		scrollWidth: document.documentElement.scrollWidth,
+		clientWidth: document.documentElement.clientWidth
+	}));
+	expect(dimensions.scrollWidth).toBeLessThanOrEqual(dimensions.clientWidth);
+	await page.screenshot({ path: testInfo.outputPath('fundus-desktop.png'), fullPage: true });
+});
+
+test('desktop builder shows fundus and run side by side', async ({ page }) => {
+	await page.setViewportSize({ width: 1440, height: 1000 });
+	await page.goto('/sendungen');
+
+	await expect(page.getByText('Gestaltungsvorschau: Sendungsbau')).toBeVisible();
+	await expect(page.locator('.source-pane')).toBeVisible();
+	await expect(page.locator('.run-pane')).toBeVisible();
+	await expect(page.getByRole('heading', { name: 'Herbstsendung: Kleine Welten' })).toBeVisible();
+	await expect(
+		page.locator('.show-summary strong').filter({ hasText: '1 Std. 25 Min.' })
+	).toBeVisible();
+
+	const boxes = await Promise.all([
+		page.locator('.source-pane').boundingBox(),
+		page.locator('.run-pane').boundingBox()
+	]);
+	expect(boxes[0]?.x).toBeLessThan(boxes[1]?.x ?? 0);
+});
+
+test('mobile builder switches panes without horizontal scrolling', async ({ page }, testInfo) => {
+	await page.setViewportSize({ width: 390, height: 844 });
+	await page.goto('/sendungen');
+
+	await expect(page.locator('.run-pane')).toBeVisible();
+	await expect(page.locator('.source-pane')).toBeHidden();
+	await page.getByRole('button', { name: 'Fundus', exact: true }).click();
+	await expect(page.locator('.source-pane')).toBeVisible();
+	await expect(page.locator('.run-pane')).toBeHidden();
+
+	const dimensions = await page.evaluate(() => ({
+		scrollWidth: document.documentElement.scrollWidth,
+		clientWidth: document.documentElement.clientWidth
+	}));
+	expect(dimensions.scrollWidth).toBeLessThanOrEqual(dimensions.clientWidth);
+	await page.screenshot({ path: testInfo.outputPath('sendungen-mobile.png'), fullPage: true });
+});
+
+test('live preview exposes readable prompts and working text controls', async ({ page }) => {
+	await page.setViewportSize({ width: 1280, height: 900 });
+	await page.goto('/live');
+
+	await expect(page.getByText('Gestaltungsvorschau: Live-Modus')).toBeVisible();
+	await expect(page.getByText('Eine Kurbel, ein gelber Knopf und sehr viel Charme')).toBeVisible();
+	const before = await page
+		.locator('.live-current')
+		.evaluate((element) => getComputedStyle(element).getPropertyValue('--prompt-size'));
+	await page.getByRole('button', { name: 'Schrift vergrößern' }).click();
+	const after = await page
+		.locator('.live-current')
+		.evaluate((element) => getComputedStyle(element).getPropertyValue('--prompt-size'));
+	expect(after).not.toBe(before);
+	await page.getByText('Recherche öffnen').click();
+	await expect(page.locator('.research-details')).toHaveAttribute('open', '');
+});