87 lines
3.8 KiB
TypeScript
87 lines
3.8 KiB
TypeScript
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', '');
|
|
});
|