1248 lines
53 KiB
TypeScript
1248 lines
53 KiB
TypeScript
import { expect, test, type Page } from '@playwright/test';
|
|
import Database from 'better-sqlite3';
|
|
import { readFileSync, readdirSync } from 'node:fs';
|
|
import path from 'node:path';
|
|
|
|
const adminEmail = 'barkeeper@example.test';
|
|
const adminPassword = 'Nur-fuer-E2E-Admin-1234';
|
|
const crewEmail = 'crew@example.test';
|
|
const crewPassword = 'Nur-fuer-E2E-Crew-1234';
|
|
|
|
const routes = ['/fundus', '/sendungen', '/eingang', '/archiv', '/verwaltung', '/live'];
|
|
const viewports = [
|
|
{ width: 390, height: 844, theme: 'light' },
|
|
{ width: 390, height: 844, theme: 'dark' },
|
|
{ width: 768, height: 900, theme: 'light' },
|
|
{ width: 768, height: 900, theme: 'dark' },
|
|
{ width: 1440, height: 1000, theme: 'dark' },
|
|
{ width: 1440, height: 1000, theme: 'light' }
|
|
] as const;
|
|
|
|
async function expectNoHorizontalOverflow(page: Page) {
|
|
const dimensions = await page.evaluate(() => ({
|
|
scrollWidth: document.documentElement.scrollWidth,
|
|
clientWidth: document.documentElement.clientWidth
|
|
}));
|
|
expect(dimensions.scrollWidth).toBeLessThanOrEqual(dimensions.clientWidth);
|
|
}
|
|
|
|
async function setTheme(page: Page, theme: 'light' | 'dark') {
|
|
await page.evaluate((value) => localStorage.setItem('sendewerk-theme', value), theme);
|
|
}
|
|
|
|
async function openEditorialField(page: Page, heading: string) {
|
|
const field = page.locator('.editorial-field').filter({
|
|
has: page.getByRole('heading', { name: heading, exact: true })
|
|
});
|
|
await field.locator('.editorial-edit-button').click();
|
|
return field;
|
|
}
|
|
|
|
async function login(page: Page, email = adminEmail, password = adminPassword) {
|
|
await page.goto('/login');
|
|
await page.getByLabel('E-Mail').fill(email);
|
|
await page.getByLabel('Passwort', { exact: true }).fill(password);
|
|
await page.getByRole('button', { name: 'Anmelden' }).click();
|
|
await expect(page).toHaveURL(/\/fundus$/);
|
|
}
|
|
|
|
async function openSeededShow(page: Page) {
|
|
await page.goto('/sendungen');
|
|
await page.getByRole('link', { name: /Herbstsendung: Kleine Welten/ }).click();
|
|
await expect(page).toHaveURL(/\/sendungen\/show-october$/);
|
|
}
|
|
|
|
function latestMailLink(subject: string): string {
|
|
const outbox = process.env.SENDEWERK_E2E_OUTBOX_DIR;
|
|
if (!outbox) throw new Error('E2E-Outbox ist nicht konfiguriert.');
|
|
const messages = readdirSync(outbox)
|
|
.sort()
|
|
.map(
|
|
(file) =>
|
|
JSON.parse(readFileSync(path.join(outbox, file), 'utf8')) as {
|
|
subject: string;
|
|
text: string;
|
|
}
|
|
)
|
|
.filter((message) => message.subject === subject);
|
|
const match = messages.at(-1)?.text.match(/https?:\/\/[^\s]+/);
|
|
if (!match) throw new Error(`Keine Testmail mit Betreff ${subject} gefunden.`);
|
|
return match[0];
|
|
}
|
|
|
|
function addSentHistoryFixture(pieceId: string) {
|
|
const dataDirectory = process.env.SENDEWERK_E2E_DATA_DIR;
|
|
if (!dataDirectory) throw new Error('E2E-Datenverzeichnis ist nicht konfiguriert.');
|
|
const database = new Database(path.join(dataDirectory, 'e2e.sqlite'));
|
|
database.pragma('foreign_keys = ON');
|
|
const insertShow = database.prepare(
|
|
`INSERT INTO shows (id, title, starts_at_utc, twitch_title, announcement_text, status,
|
|
revision, created_at_utc, updated_at_utc) VALUES (?, ?, ?, '', '', 'completed', 1, ?, ?)`
|
|
);
|
|
const insertSection = database.prepare(
|
|
`INSERT INTO show_sections (id, show_id, name, category_id, position,
|
|
explicit_duration_seconds, is_reserve_bank) VALUES (?, ?, 'Ablauf', NULL, 0, NULL, 0)`
|
|
);
|
|
const insertUsage = database.prepare(
|
|
`INSERT INTO piece_usages (id, show_section_id, original_piece_id, position, status,
|
|
duration_seconds, title_snapshot, intro_snapshot, research_snapshot, moderation_snapshot,
|
|
transition_snapshot, presentation_snapshot, own_notes, is_reserve)
|
|
VALUES (?, ?, ?, 0, 'done', 300, 'Historische Verwendung', '', '', '', '', '', '', 0)`
|
|
);
|
|
database.transaction(() => {
|
|
for (const [suffix, title, date] of [
|
|
['older', 'Rückblick im September', '2026-09-10T18:00:00.000Z'],
|
|
['latest', 'Rückblick im Oktober', '2026-10-10T18:00:00.000Z']
|
|
] as const) {
|
|
const showId = `e2e-history-${suffix}`;
|
|
const sectionId = `e2e-history-section-${suffix}`;
|
|
insertShow.run(showId, title, date, date, date);
|
|
insertSection.run(sectionId, showId);
|
|
insertUsage.run(`e2e-history-usage-${suffix}`, sectionId, pieceId);
|
|
}
|
|
})();
|
|
database.close();
|
|
}
|
|
|
|
function removeSentHistoryFixture() {
|
|
const dataDirectory = process.env.SENDEWERK_E2E_DATA_DIR;
|
|
if (!dataDirectory) return;
|
|
const database = new Database(path.join(dataDirectory, 'e2e.sqlite'));
|
|
database.pragma('foreign_keys = ON');
|
|
database.prepare("DELETE FROM shows WHERE id LIKE 'e2e-history-%'").run();
|
|
database.close();
|
|
}
|
|
|
|
function addPresentationFixture() {
|
|
const dataDirectory = process.env.SENDEWERK_E2E_DATA_DIR;
|
|
if (!dataDirectory) throw new Error('E2E-Datenverzeichnis ist nicht konfiguriert.');
|
|
const database = new Database(path.join(dataDirectory, 'e2e.sqlite'));
|
|
database.pragma('foreign_keys = ON');
|
|
const now = '2026-10-22T19:00:00.000Z';
|
|
database.transaction(() => {
|
|
database
|
|
.prepare(
|
|
`INSERT INTO shows (id, title, starts_at_utc, twitch_title, announcement_text, status,
|
|
revision, created_at_utc, updated_at_utc)
|
|
VALUES ('e2e-presentation', 'E2E Präsentation', ?, '', '', 'ready', 1, ?, ?)`
|
|
)
|
|
.run(now, now, now);
|
|
database
|
|
.prepare(
|
|
`INSERT INTO show_sections (id, show_id, name, category_id, position,
|
|
explicit_duration_seconds, is_reserve_bank)
|
|
VALUES ('e2e-presentation-section', 'e2e-presentation', 'Player', NULL, 0, NULL, 0),
|
|
('e2e-presentation-reserve', 'e2e-presentation', 'Reservebank', NULL, 1, NULL, 1)`
|
|
)
|
|
.run();
|
|
const insert = database.prepare(
|
|
`INSERT INTO piece_usages (id, show_section_id, original_piece_id, position, status,
|
|
duration_seconds, title_snapshot, intro_snapshot, research_snapshot, moderation_snapshot,
|
|
transition_snapshot, presentation_snapshot, own_notes, is_reserve,
|
|
presentation_mode_snapshot, presentation_source_label_snapshot,
|
|
presentation_source_url_snapshot, presentation_source_timecode_snapshot,
|
|
presentation_title_meta_snapshot, presentation_description_snapshot,
|
|
presentation_image_url_snapshot, presentation_site_name_snapshot,
|
|
presentation_provider_snapshot, presentation_provider_id_snapshot)
|
|
VALUES (?, 'e2e-presentation-section', NULL, ?, 'open', 300, ?, '', ?, ?, '', '', '', 0,
|
|
'video', ?, ?, ?, ?, '', '', ?, ?, ?)`
|
|
);
|
|
insert.run(
|
|
'e2e-youtube',
|
|
0,
|
|
'YouTube Kurzlink',
|
|
'PRIVATE_RESEARCH_YOUTUBE',
|
|
'PRIVATE_MODERATION_YOUTUBE',
|
|
'YouTube',
|
|
'https://youtu.be/dQw4w9WgXcQ',
|
|
75,
|
|
'YouTube Vorschau',
|
|
'YouTube',
|
|
'youtube',
|
|
'dQw4w9WgXcQ'
|
|
);
|
|
insert.run(
|
|
'e2e-tiktok',
|
|
1,
|
|
'TikTok Hochformat',
|
|
'PRIVATE_RESEARCH_TIKTOK',
|
|
'PRIVATE_MODERATION_TIKTOK',
|
|
'TikTok',
|
|
'https://www.tiktok.com/@scout2015/video/6718335390845095173',
|
|
12,
|
|
'TikTok Vorschau',
|
|
'TikTok',
|
|
'tiktok',
|
|
'6718335390845095173'
|
|
);
|
|
})();
|
|
database.close();
|
|
}
|
|
|
|
function removePresentationFixture() {
|
|
const dataDirectory = process.env.SENDEWERK_E2E_DATA_DIR;
|
|
if (!dataDirectory) return;
|
|
const database = new Database(path.join(dataDirectory, 'e2e.sqlite'));
|
|
database.pragma('foreign_keys = ON');
|
|
database.prepare("DELETE FROM shows WHERE id = 'e2e-presentation'").run();
|
|
database.close();
|
|
}
|
|
|
|
test.beforeAll(async ({ browser }) => {
|
|
const page = await browser.newPage();
|
|
await page.goto('/');
|
|
if (await page.getByRole('heading', { name: 'Ersten Barkeeper anlegen' }).isVisible()) {
|
|
await page.getByLabel('Betreiber-Setup-Token').fill('e2e-only-setup-token-32-characters');
|
|
await page.getByLabel('Name').fill('E2E Barkeeper');
|
|
await page.getByLabel('E-Mail').fill(adminEmail);
|
|
await page.getByLabel('Passwort').fill(adminPassword);
|
|
await page.getByRole('button', { name: 'Barkeeper anlegen' }).click();
|
|
} else {
|
|
await page.getByLabel('E-Mail').fill(adminEmail);
|
|
await page.getByLabel('Passwort').fill(adminPassword);
|
|
await page.getByRole('button', { name: 'Anmelden' }).click();
|
|
}
|
|
await expect(page).toHaveURL(/\/fundus$/);
|
|
const sessionCookie = (await page.context().cookies()).find(
|
|
(cookie) => cookie.name === 'sendewerk_session'
|
|
);
|
|
expect(sessionCookie?.httpOnly).toBe(true);
|
|
expect(sessionCookie?.secure).toBe(false);
|
|
expect(sessionCookie?.sameSite).toBe('Lax');
|
|
await page.goto('/setup');
|
|
await expect(page).toHaveURL(/\/fundus$/);
|
|
await page.getByRole('button', { name: 'Abmelden', exact: true }).click();
|
|
await expect(page).toHaveURL(/\/login$/);
|
|
await page.close();
|
|
});
|
|
|
|
test.beforeEach(async ({ page }) => {
|
|
await login(page);
|
|
});
|
|
|
|
test('invitations, direct authorization, locking and password reset work end to end', async ({
|
|
page,
|
|
browser
|
|
}, testInfo) => {
|
|
await page.goto('/verwaltung');
|
|
await page.screenshot({
|
|
path: testInfo.outputPath('verwaltung-konten-desktop.png'),
|
|
fullPage: true
|
|
});
|
|
const crossSite = await page.request.post('/verwaltung?/invite', {
|
|
form: { email: 'cross-site@example.test', role: 'barkeeper' },
|
|
headers: { origin: 'https://example.invalid' }
|
|
});
|
|
expect(crossSite.status()).toBe(403);
|
|
const inviteForm = page.locator('.invite-panel').filter({ hasText: 'Neues Konto einladen' });
|
|
await inviteForm.getByLabel('E-Mail').fill(crewEmail);
|
|
await inviteForm.getByRole('button', { name: 'Einladung erstellen' }).click();
|
|
await expect(
|
|
page.getByText('Einladung wurde in der lokalen Mail-Outbox abgelegt.')
|
|
).toBeVisible();
|
|
|
|
const crewContext = await browser.newContext();
|
|
const crewPage = await crewContext.newPage();
|
|
await crewPage.goto(latestMailLink('Einladung zu Sendewerk'));
|
|
await expect(crewPage).toHaveURL(/\/einladung$/);
|
|
await crewPage.getByLabel('Name').fill('E2E Crew');
|
|
await crewPage.getByLabel('Passwort').fill(crewPassword);
|
|
await crewPage.getByRole('button', { name: 'Konto aktivieren' }).click();
|
|
await expect(crewPage).toHaveURL(/\/fundus$/);
|
|
await expect(crewPage.getByText('Verwaltung', { exact: true })).toHaveCount(0);
|
|
|
|
const forbidden = await crewPage.request.post('/verwaltung?/invite', {
|
|
form: { email: 'verboten@example.test', role: 'barkeeper' },
|
|
headers: { origin: 'http://127.0.0.1:4173' }
|
|
});
|
|
expect(forbidden.status()).toBe(403);
|
|
|
|
await page.reload();
|
|
const crewRow = page.locator('.account-row').filter({ hasText: crewEmail });
|
|
await crewRow.getByRole('button', { name: 'Sperren' }).click();
|
|
await crewPage.goto('/fundus');
|
|
await expect(crewPage).toHaveURL(/\/login$/);
|
|
|
|
await page.reload();
|
|
await page
|
|
.locator('.account-row')
|
|
.filter({ hasText: crewEmail })
|
|
.getByRole('button', { name: 'Entsperren' })
|
|
.click();
|
|
await crewPage.goto('/passwort-vergessen');
|
|
await crewPage.getByLabel('E-Mail').fill(crewEmail);
|
|
await crewPage.getByRole('button', { name: 'Reset-Link anfordern' }).click();
|
|
await expect(crewPage.getByText('Anfrage verarbeitet.')).toBeVisible();
|
|
await crewPage.goto(latestMailLink('Sendewerk-Passwort zurücksetzen'));
|
|
await expect(crewPage).toHaveURL(/\/passwort-zuruecksetzen$/);
|
|
await crewPage.getByLabel('Neues Passwort').fill('Neues-E2E-Crew-Passwort-1234');
|
|
await crewPage.getByRole('button', { name: 'Passwort speichern' }).click();
|
|
await login(crewPage, crewEmail, 'Neues-E2E-Crew-Passwort-1234');
|
|
await crewContext.close();
|
|
|
|
const anonymousContext = await browser.newContext({ viewport: { width: 390, height: 844 } });
|
|
const loginPage = await anonymousContext.newPage();
|
|
await loginPage.goto('/login');
|
|
await setTheme(loginPage, 'dark');
|
|
await loginPage.reload();
|
|
await expectNoHorizontalOverflow(loginPage);
|
|
await loginPage.screenshot({
|
|
path: testInfo.outputPath('login-mobile-dark.png'),
|
|
fullPage: true
|
|
});
|
|
await anonymousContext.close();
|
|
});
|
|
|
|
test('desktop fundus is a compact, filterable list with persistent themes', async ({
|
|
page
|
|
}, testInfo) => {
|
|
await page.setViewportSize({ width: 1440, height: 1000 });
|
|
await page.goto('/fundus');
|
|
|
|
await expect(page.getByRole('heading', { name: 'Fundus', exact: true })).toBeVisible();
|
|
await expect(page.locator('.sidebar')).toBeVisible();
|
|
await expect(page.locator('.mobile-navigation')).toBeHidden();
|
|
await expect(page.locator('.utility-navigation a')).toHaveText('Verwaltung');
|
|
await expect(page.locator('.piece-card')).toHaveCount(1);
|
|
await page.getByLabel('Auch eingeplante Inhalte zeigen').check();
|
|
await expect(page.locator('.piece-card')).toHaveCount(4);
|
|
|
|
const firstRow = await page.locator('.piece-card').nth(0).boundingBox();
|
|
const secondRow = await page.locator('.piece-card').nth(1).boundingBox();
|
|
expect(firstRow?.x).toBe(secondRow?.x);
|
|
expect(firstRow?.y).toBeLessThan(secondRow?.y ?? 0);
|
|
expect(firstRow?.height ?? 999).toBeLessThan(130);
|
|
const searchBox = await page.locator('.search-field').boundingBox();
|
|
const statusBox = await page.getByLabel('Status').boundingBox();
|
|
expect(searchBox?.height).toBe(statusBox?.height);
|
|
|
|
await page.getByRole('searchbox', { name: 'Fundus durchsuchen' }).fill('Pixelart');
|
|
await page.getByRole('button', { name: 'Anwenden' }).click();
|
|
await expect(page.locator('.piece-card')).toHaveCount(1);
|
|
await page.getByLabel('Status').selectOption('preparing');
|
|
await page.getByRole('button', { name: 'Anwenden' }).click();
|
|
await expect(page.getByRole('heading', { name: 'Kein passendes Piece' })).toBeVisible();
|
|
await page.getByRole('button', { name: 'Zurücksetzen' }).click();
|
|
await expect(page.locator('.piece-card')).toHaveCount(1);
|
|
|
|
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();
|
|
await expectNoHorizontalOverflow(page);
|
|
await page.screenshot({ path: testInfo.outputPath('fundus-desktop-light.png'), fullPage: true });
|
|
});
|
|
|
|
test('sent and planned source filters stay independent and removing the last usage offers the piece again', async ({
|
|
page
|
|
}, testInfo) => {
|
|
addSentHistoryFixture('piece-effects');
|
|
try {
|
|
await page.goto('/fundus');
|
|
await expect(
|
|
page.getByRole('heading', { name: 'Warum praktische Effekte wieder auffallen' })
|
|
).toHaveCount(0);
|
|
await page.evaluate(() => (document.body.dataset.filterDocument = 'stable'));
|
|
await page.getByLabel('Auch verwendete Inhalte zeigen').check();
|
|
await expect(
|
|
page.getByRole('heading', { name: 'Warum praktische Effekte wieder auffallen' })
|
|
).toHaveCount(0);
|
|
await page.getByLabel('Auch eingeplante Inhalte zeigen').check();
|
|
const usedPiece = page
|
|
.locator('.piece-card')
|
|
.filter({ hasText: 'Warum praktische Effekte wieder auffallen' });
|
|
await expect(usedPiece).toBeVisible();
|
|
await expect(usedPiece).toContainText('Gesendet am 10.10.2026');
|
|
await expect(usedPiece).toContainText('+ 1 weitere');
|
|
await expect(usedPiece.getByRole('link', { name: 'Rückblick im Oktober' })).toHaveAttribute(
|
|
'href',
|
|
'/sendungen/e2e-history-latest'
|
|
);
|
|
await usedPiece.getByText('Vollständige Verwendungshistorie').click();
|
|
await expect(usedPiece.locator('.piece-usage-history li')).toHaveCount(2);
|
|
await expect(page.locator('body')).toHaveAttribute('data-filter-document', 'stable');
|
|
await page.getByRole('searchbox', { name: 'Fundus durchsuchen' }).fill('praktische Effekte');
|
|
await page.getByRole('button', { name: 'Anwenden' }).click();
|
|
await expect(page.getByLabel('Auch verwendete Inhalte zeigen')).toBeChecked();
|
|
await expect(usedPiece).toBeVisible();
|
|
await page.screenshot({
|
|
path: testInfo.outputPath('fundus-verwendungshistorie-desktop.png'),
|
|
fullPage: true
|
|
});
|
|
|
|
await page.goto('/sendungen');
|
|
await page.getByLabel('Titel').fill('E2E Filterprüfung');
|
|
await page.getByLabel('Ausgangspunkt').selectOption('template-default');
|
|
await page.getByRole('button', { name: 'Sendung anlegen' }).click();
|
|
await page.getByPlaceholder('Fundus durchsuchen').fill('kleine Konsole');
|
|
await page.getByRole('button', { name: 'Filtern' }).click();
|
|
const consolePiece = page
|
|
.locator('.builder-source-card')
|
|
.filter({ hasText: 'Die kleine Konsole mit dem großen Dreh' });
|
|
await consolePiece.getByRole('button', { name: 'Hinzufügen' }).click();
|
|
await expect(consolePiece).toHaveCount(0);
|
|
|
|
await page.getByPlaceholder('Fundus durchsuchen').fill('');
|
|
await page.getByRole('button', { name: 'Filtern' }).click();
|
|
await page.getByLabel('Auch eingeplante Inhalte zeigen').check();
|
|
await expect(
|
|
page
|
|
.locator('.builder-source-card')
|
|
.filter({ hasText: 'Die kleine Konsole mit dem großen Dreh' })
|
|
).toContainText('Eingeplant');
|
|
await expect(
|
|
page
|
|
.locator('.builder-source-card')
|
|
.filter({ hasText: 'Warum praktische Effekte wieder auffallen' })
|
|
).toHaveCount(0);
|
|
await page.getByPlaceholder('Fundus durchsuchen').fill('kleine Konsole');
|
|
await page.getByRole('button', { name: 'Filtern' }).click();
|
|
await expect(page.getByLabel('Auch eingeplante Inhalte zeigen')).toBeChecked();
|
|
await expect(
|
|
page
|
|
.locator('.builder-source-card')
|
|
.filter({ hasText: 'Die kleine Konsole mit dem großen Dreh' })
|
|
).toContainText('Eingeplant');
|
|
await page.getByPlaceholder('Fundus durchsuchen').fill('');
|
|
await page.getByRole('button', { name: 'Filtern' }).click();
|
|
|
|
await page.getByLabel('Auch eingeplante Inhalte zeigen').uncheck();
|
|
await page.getByLabel('Auch verwendete Inhalte zeigen').check();
|
|
await expect(
|
|
page
|
|
.locator('.builder-source-card')
|
|
.filter({ hasText: 'Die kleine Konsole mit dem großen Dreh' })
|
|
).toHaveCount(0);
|
|
await expect(
|
|
page
|
|
.locator('.builder-source-card')
|
|
.filter({ hasText: 'Warum praktische Effekte wieder auffallen' })
|
|
).toContainText('Rückblick im Oktober');
|
|
await page.screenshot({
|
|
path: testInfo.outputPath('sendungsfilter-desktop.png'),
|
|
fullPage: true
|
|
});
|
|
|
|
await page
|
|
.locator('.reserve-usage')
|
|
.getByRole('button', { name: /aus Reserve entfernen/ })
|
|
.click();
|
|
await page.getByLabel('Auch verwendete Inhalte zeigen').uncheck();
|
|
await expect(
|
|
page
|
|
.locator('.builder-source-card')
|
|
.filter({ hasText: 'Die kleine Konsole mit dem großen Dreh' })
|
|
).toBeVisible();
|
|
await page.setViewportSize({ width: 390, height: 844 });
|
|
await page.getByRole('button', { name: 'Fundus', exact: true }).click();
|
|
await expectNoHorizontalOverflow(page);
|
|
await page.screenshot({
|
|
path: testInfo.outputPath('sendungsfilter-mobile.png'),
|
|
fullPage: true
|
|
});
|
|
} finally {
|
|
removeSentHistoryFixture();
|
|
}
|
|
});
|
|
|
|
test('desktop builder keeps the fundus beside the wider run sheet', async ({ page }, testInfo) => {
|
|
await page.setViewportSize({ width: 1280, height: 900 });
|
|
await page.goto('/fundus');
|
|
await setTheme(page, 'dark');
|
|
await openSeededShow(page);
|
|
|
|
await expect(page.locator('html')).toHaveAttribute('data-theme', 'dark');
|
|
await expect(page.getByRole('heading', { name: 'Herbstsendung: Kleine Welten' })).toBeVisible();
|
|
await expect(page.locator('.source-pane')).toBeVisible();
|
|
await expect(page.locator('.run-pane')).toBeVisible();
|
|
await expect(page.locator('.mobile-pane-switch')).toBeHidden();
|
|
await expect(
|
|
page.locator('.show-summary strong').filter({ hasText: '1 Std. 25 Min.' })
|
|
).toBeVisible();
|
|
|
|
const sourceBox = await page.locator('.source-pane').boundingBox();
|
|
const runBox = await page.locator('.run-pane').boundingBox();
|
|
expect(sourceBox?.x).toBeLessThan(runBox?.x ?? 0);
|
|
expect(sourceBox?.width ?? 9999).toBeLessThan(runBox?.width ?? 0);
|
|
await expectNoHorizontalOverflow(page);
|
|
await page.screenshot({
|
|
path: testInfo.outputPath('sendungen-desktop-dark.png'),
|
|
fullPage: true
|
|
});
|
|
});
|
|
|
|
test('narrow desktop retains the sidebar and switches the builder panes', async ({ page }) => {
|
|
await page.setViewportSize({ width: 960, height: 850 });
|
|
await openSeededShow(page);
|
|
|
|
await expect(page.locator('.sidebar')).toBeVisible();
|
|
await expect(page.locator('.mobile-navigation')).toBeHidden();
|
|
await expect(page.locator('.mobile-pane-switch')).toBeVisible();
|
|
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();
|
|
await expectNoHorizontalOverflow(page);
|
|
});
|
|
|
|
test('mobile and tablet navigation do not obscure switchable content', async ({
|
|
page
|
|
}, testInfo) => {
|
|
for (const width of [390, 768]) {
|
|
await page.setViewportSize({ width, height: 900 });
|
|
await openSeededShow(page);
|
|
|
|
await expect(page.locator('.sidebar')).toBeHidden();
|
|
await expect(page.locator('.mobile-navigation')).toBeVisible();
|
|
await expect(page.locator('.run-pane')).toBeVisible();
|
|
await page.getByRole('button', { name: 'Fundus', exact: true }).click();
|
|
await expect(page.locator('.source-pane')).toBeVisible();
|
|
await expect(page.locator('.run-pane')).toBeHidden();
|
|
await expectNoHorizontalOverflow(page);
|
|
|
|
await page.evaluate(() => window.scrollTo(0, document.body.scrollHeight));
|
|
const verticalSpace = await page.evaluate(() => {
|
|
const navigation = document.querySelector('.mobile-navigation')?.getBoundingClientRect();
|
|
const content = document.querySelector('.source-pane')?.getBoundingClientRect();
|
|
return { contentBottom: content?.bottom ?? 0, navigationTop: navigation?.top ?? 0 };
|
|
});
|
|
expect(verticalSpace.contentBottom).toBeLessThanOrEqual(verticalSpace.navigationTop + 1);
|
|
}
|
|
|
|
await page.setViewportSize({ width: 390, height: 844 });
|
|
await openSeededShow(page);
|
|
await page.screenshot({ path: testInfo.outputPath('sendungen-mobile.png'), fullPage: true });
|
|
});
|
|
|
|
test('a show can be planned from a template with independent usages and reserve', async ({
|
|
page
|
|
}, testInfo) => {
|
|
await page.setViewportSize({ width: 1440, height: 1000 });
|
|
await page.goto('/sendungen');
|
|
await page.getByLabel('Titel').fill('E2E Planung Spiele und JC');
|
|
await page.getByLabel('Ausgangspunkt').selectOption('template-default');
|
|
await page.getByRole('button', { name: 'Sendung anlegen' }).click();
|
|
await expect(page).toHaveURL(/\/sendungen\/[a-f0-9-]+$/);
|
|
const showUrl = page.url();
|
|
await expect(page.locator('.run-section')).toHaveCount(5);
|
|
const firstSection = page.locator('.run-section').first();
|
|
const sectionTransfer = await page.evaluateHandle(() => new DataTransfer());
|
|
await firstSection.locator('.section-drag-handle').dispatchEvent('dragstart', {
|
|
dataTransfer: sectionTransfer
|
|
});
|
|
await page.locator('.run-section').nth(1).dispatchEvent('dragover', {
|
|
dataTransfer: sectionTransfer
|
|
});
|
|
await expect(page.locator('[data-drop-preview="section"]')).toContainText('Start');
|
|
await expect(firstSection).toHaveClass(/is-dragging/);
|
|
await firstSection.locator('.section-drag-handle').dispatchEvent('dragend', {
|
|
dataTransfer: sectionTransfer
|
|
});
|
|
await sectionTransfer.dispose();
|
|
await expect(page.locator('[data-drop-preview="section"]')).toHaveCount(0);
|
|
|
|
await page.getByPlaceholder('Fundus durchsuchen').fill('kleine Konsole');
|
|
await page.getByRole('button', { name: 'Filtern' }).click();
|
|
const source = page
|
|
.locator('.builder-source-card')
|
|
.filter({ hasText: 'Die kleine Konsole mit dem großen Dreh' });
|
|
await expect(page.locator('.builder-source-card')).toHaveCount(1);
|
|
const reactionSection = page
|
|
.locator('.run-section')
|
|
.filter({ has: page.getByRole('heading', { name: 'JC / Reaction' }) });
|
|
await page.locator('body').evaluate((body) => (body.dataset.builderDocument = 'stable'));
|
|
const sourceDragHandle = source.locator('.source-drag-copy');
|
|
const emptyReactionTarget = reactionSection.locator('.section-placeholder');
|
|
const dataTransfer = await page.evaluateHandle(() => new DataTransfer());
|
|
await sourceDragHandle.dispatchEvent('dragstart', { dataTransfer });
|
|
await emptyReactionTarget.dispatchEvent('dragover', { dataTransfer });
|
|
const insertionPreview = reactionSection.locator('[data-drop-preview="usage"]');
|
|
await expect(insertionPreview).toContainText('Die kleine Konsole mit dem großen Dreh');
|
|
await expect(source).toHaveClass(/is-dragging/);
|
|
await expect(source).toHaveCSS('opacity', '0.45');
|
|
await emptyReactionTarget.dispatchEvent('drop', { dataTransfer });
|
|
await dataTransfer.dispose();
|
|
await expect(reactionSection.locator('.editable-usage')).toHaveCount(1);
|
|
await expect(page.locator('body')).toHaveAttribute('data-builder-document', 'stable');
|
|
await expect(source).toHaveCount(0);
|
|
await page.getByLabel('Auch eingeplante Inhalte zeigen').check();
|
|
await expect(source).toContainText('Eingeplant');
|
|
await sourceDragHandle.dragTo(reactionSection.locator('.editable-usage'));
|
|
|
|
let usages = page
|
|
.locator('.run-section')
|
|
.filter({ has: page.getByRole('heading', { name: 'JC / Reaction' }) })
|
|
.locator('.editable-usage');
|
|
await expect(usages).toHaveCount(2);
|
|
await usages
|
|
.nth(0)
|
|
.getByRole('button', {
|
|
name: 'Die kleine Konsole mit dem großen Dreh bearbeiten und verschieben'
|
|
})
|
|
.click();
|
|
await expect(page.locator('dialog[open]')).toContainText('Sendungsspezifische Kopie');
|
|
const desktopEditorItems = await page
|
|
.locator('dialog[open] .usage-dialog-editor')
|
|
.evaluate((element) =>
|
|
Array.from(element.children)
|
|
.filter((child) => child.matches('section, button'))
|
|
.map((child) => child.getBoundingClientRect().top)
|
|
);
|
|
expect(Math.abs(desktopEditorItems[0] - desktopEditorItems[1])).toBeLessThan(2);
|
|
expect(desktopEditorItems[2]).toBeGreaterThan(desktopEditorItems[1]);
|
|
await page.screenshot({
|
|
path: testInfo.outputPath('verwendungseditor-desktop.png'),
|
|
fullPage: true
|
|
});
|
|
await page
|
|
.locator('dialog[open]')
|
|
.getByRole('button', { name: 'Aus Fundus aktualisieren' })
|
|
.click();
|
|
await expect(page.locator('dialog[open]')).toHaveCount(0);
|
|
usages = page
|
|
.locator('.run-section')
|
|
.filter({ has: page.getByRole('heading', { name: 'JC / Reaction' }) })
|
|
.locator('.editable-usage');
|
|
await usages
|
|
.nth(0)
|
|
.getByRole('button', {
|
|
name: 'Die kleine Konsole mit dem großen Dreh bearbeiten und verschieben'
|
|
})
|
|
.click();
|
|
await usages.nth(0).getByLabel('Titel').fill('Konsole als Auftakt');
|
|
await usages.nth(0).getByLabel('Dauer in Minuten').fill('5');
|
|
await usages.nth(0).getByLabel('Eigene Notizen').fill('Kurbel zuerst zeigen');
|
|
await usages.nth(0).getByRole('button', { name: 'Verwendung speichern' }).click();
|
|
await expect(reactionSection).toContainText('Konsole als Auftakt');
|
|
|
|
usages = page
|
|
.locator('.run-section')
|
|
.filter({ has: page.getByRole('heading', { name: 'JC / Reaction' }) })
|
|
.locator('.editable-usage');
|
|
await usages
|
|
.nth(1)
|
|
.getByRole('button', {
|
|
name: 'Die kleine Konsole mit dem großen Dreh bearbeiten und verschieben'
|
|
})
|
|
.click();
|
|
await usages.nth(1).getByLabel('Titel').fill('Konsole als Rückblick');
|
|
await usages.nth(1).getByLabel('Dauer in Minuten').fill('15');
|
|
await usages.nth(1).getByLabel('Eigene Notizen').fill('Andere Perspektive');
|
|
await usages.nth(1).getByRole('button', { name: 'Verwendung speichern' }).click();
|
|
await expect(page.locator('.show-summary')).toContainText('2 Std. 25 Min.');
|
|
|
|
usages = page
|
|
.locator('.run-section')
|
|
.filter({ has: page.getByRole('heading', { name: 'JC / Reaction' }) })
|
|
.locator('.editable-usage');
|
|
await usages
|
|
.nth(1)
|
|
.getByRole('button', { name: 'Konsole als Rückblick bearbeiten und verschieben' })
|
|
.click();
|
|
await usages.nth(1).getByRole('button', { name: 'Duplizieren' }).click();
|
|
await expect(reactionSection.locator('.editable-usage')).toHaveCount(3);
|
|
await expect(reactionSection.locator('.editable-usage').nth(2)).toContainText(
|
|
'Konsole als Rückblick'
|
|
);
|
|
await expect(page.locator('.show-summary')).toContainText('2 Std. 40 Min.');
|
|
|
|
const planTimeBeforeReserve = await page.locator('.show-summary').textContent();
|
|
await source.getByLabel(/Ziel für/).selectOption('');
|
|
await source.getByRole('button', { name: 'Hinzufügen' }).click();
|
|
await expect(page.locator('.reserve-usage')).toHaveCount(1);
|
|
expect(await page.locator('.show-summary').textContent()).toBe(planTimeBeforeReserve);
|
|
await page
|
|
.locator('.reserve-usage')
|
|
.getByRole('button', {
|
|
name: 'Die kleine Konsole mit dem großen Dreh bearbeiten und verschieben'
|
|
})
|
|
.click();
|
|
await expect(page.locator('dialog[open]')).toContainText('Sendungsspezifische Kopie');
|
|
await expect(
|
|
page.locator('dialog[open]').getByRole('button', { name: 'Duplizieren' })
|
|
).toBeVisible();
|
|
await page.locator('dialog[open]').getByRole('button', { name: 'Editor schließen' }).click();
|
|
|
|
const moveUp = page.getByRole('button', { name: 'Konsole als Rückblick nach oben' }).first();
|
|
await moveUp.focus();
|
|
await page.keyboard.press('Enter');
|
|
await expect(
|
|
page
|
|
.locator('.run-section')
|
|
.filter({ has: page.getByRole('heading', { name: 'JC / Reaction' }) })
|
|
.locator('.editable-usage strong')
|
|
.first()
|
|
).toHaveText('Konsole als Rückblick');
|
|
|
|
const reserveUsage = page.locator('.reserve-usage');
|
|
const reserveHandle = reserveUsage.locator('.usage-drag-copy');
|
|
const finalSectionTarget = page.locator('.run-section').last().locator('.section-placeholder');
|
|
const reserveTransfer = await page.evaluateHandle(() => new DataTransfer());
|
|
await reserveHandle.dispatchEvent('dragstart', { dataTransfer: reserveTransfer });
|
|
await finalSectionTarget.dispatchEvent('dragover', { dataTransfer: reserveTransfer });
|
|
await expect(page.locator('[data-drop-preview="usage"]')).toContainText(
|
|
'Die kleine Konsole mit dem großen Dreh'
|
|
);
|
|
await expect(reserveUsage).toHaveClass(/is-dragging/);
|
|
await finalSectionTarget.dispatchEvent('drop', { dataTransfer: reserveTransfer });
|
|
await reserveHandle.dispatchEvent('dragend', { dataTransfer: reserveTransfer });
|
|
await reserveTransfer.dispose();
|
|
await expect(page.locator('.reserve-usage')).toHaveCount(0);
|
|
await expect(page.locator('body')).toHaveAttribute('data-builder-document', 'stable');
|
|
await page.reload();
|
|
await expect(page.locator('.editable-usage')).toHaveCount(4);
|
|
const savedUsage = page.locator('.editable-usage').filter({ hasText: 'Konsole als Auftakt' });
|
|
await savedUsage
|
|
.getByRole('button', { name: 'Konsole als Auftakt bearbeiten und verschieben' })
|
|
.click();
|
|
await expect(savedUsage.getByLabel('Eigene Notizen')).toHaveValue('Kurbel zuerst zeigen');
|
|
await page.locator('dialog[open]').getByRole('button', { name: 'Editor schließen' }).click();
|
|
const duplicatedUsage = page
|
|
.locator('.editable-usage')
|
|
.filter({ hasText: 'Konsole als Rückblick' });
|
|
await expect(duplicatedUsage).toHaveCount(2);
|
|
await duplicatedUsage
|
|
.nth(1)
|
|
.getByRole('button', { name: 'Konsole als Rückblick bearbeiten und verschieben' })
|
|
.click();
|
|
await expect(duplicatedUsage.nth(1).getByLabel('Dauer in Minuten')).toHaveValue('15');
|
|
await expect(duplicatedUsage.nth(1).getByLabel('Eigene Notizen')).toHaveValue(
|
|
'Andere Perspektive'
|
|
);
|
|
await page.locator('dialog[open]').getByRole('button', { name: 'Editor schließen' }).click();
|
|
|
|
await page.setViewportSize({ width: 390, height: 844 });
|
|
await savedUsage
|
|
.getByRole('button', { name: 'Konsole als Auftakt bearbeiten und verschieben' })
|
|
.click();
|
|
const mobileEditorItems = await page
|
|
.locator('dialog[open] .usage-dialog-editor')
|
|
.evaluate((element) =>
|
|
Array.from(element.children)
|
|
.filter((child) => child.matches('section, button'))
|
|
.map((child) => child.getBoundingClientRect().top)
|
|
);
|
|
expect(mobileEditorItems[1]).toBeGreaterThan(mobileEditorItems[0]);
|
|
expect(mobileEditorItems[2]).toBeGreaterThan(mobileEditorItems[1]);
|
|
await expectNoHorizontalOverflow(page);
|
|
await page.screenshot({
|
|
path: testInfo.outputPath('verwendungseditor-mobile.png'),
|
|
fullPage: true
|
|
});
|
|
await page
|
|
.locator('dialog[open]')
|
|
.getByRole('button', { name: 'Entfernen' })
|
|
.scrollIntoViewIfNeeded();
|
|
await expect(
|
|
page.locator('dialog[open]').getByRole('button', { name: 'Entfernen' })
|
|
).toBeVisible();
|
|
await page
|
|
.locator('dialog[open] form[action="?/updateUsage"] input[name="revision"]')
|
|
.evaluate((element) => ((element as HTMLInputElement).value = '1'));
|
|
await page.locator('dialog[open]').getByRole('button', { name: 'Verwendung speichern' }).click();
|
|
await expect(page.locator('dialog[open]').getByRole('alert')).toContainText(
|
|
'inzwischen geändert'
|
|
);
|
|
await page.locator('dialog[open]').getByRole('button', { name: 'Editor schließen' }).click();
|
|
await page.getByRole('button', { name: 'Ablauf', exact: true }).click();
|
|
await page.getByPlaceholder('Neuer Abschnitt').fill('Finales Spiel');
|
|
await page.getByRole('button', { name: 'Abschnitt hinzufügen' }).click();
|
|
await expect(page.getByRole('heading', { name: 'Finales Spiel' })).toBeVisible();
|
|
await expectNoHorizontalOverflow(page);
|
|
await page.screenshot({ path: testInfo.outputPath('sendungsbau-mobile.png'), fullPage: true });
|
|
|
|
await page.goto('/fundus?q=kleine+Konsole&includePlanned=1');
|
|
await expect(
|
|
page.getByRole('heading', { name: 'Die kleine Konsole mit dem großen Dreh' })
|
|
).toBeVisible();
|
|
await page.goto(showUrl);
|
|
});
|
|
|
|
test('all work areas fit at required widths in light and dark mode', async ({ page }, testInfo) => {
|
|
for (const viewport of viewports) {
|
|
await page.setViewportSize({ width: viewport.width, height: viewport.height });
|
|
await page.goto('/fundus');
|
|
await setTheme(page, viewport.theme);
|
|
|
|
for (const route of routes) {
|
|
await page.goto(route);
|
|
await expect(page.locator('html')).toHaveAttribute('data-theme', viewport.theme);
|
|
await expectNoHorizontalOverflow(page);
|
|
}
|
|
}
|
|
|
|
await page.setViewportSize({ width: 768, height: 900 });
|
|
await page.goto('/fundus');
|
|
await setTheme(page, 'dark');
|
|
await page.goto('/verwaltung');
|
|
await page.screenshot({
|
|
path: testInfo.outputPath('verwaltung-tablet-dark.png'),
|
|
fullPage: true
|
|
});
|
|
});
|
|
|
|
test('long titles and longer fundus lists reflow without overflow', async ({ page }, testInfo) => {
|
|
await page.setViewportSize({ width: 1280, height: 900 });
|
|
await page.goto('/fundus');
|
|
await expect(page.locator('.piece-card')).toHaveCount(1);
|
|
await page.evaluate(() => {
|
|
const list = document.querySelector('.piece-grid');
|
|
const rows = Array.from(document.querySelectorAll('.piece-card'));
|
|
const title = rows[0]?.querySelector('h2');
|
|
if (title) {
|
|
title.textContent =
|
|
'Ein außergewöhnlich langer redaktioneller Titel über kleine Konsolen, große Ideen und unerwartete Wendungen';
|
|
}
|
|
for (let repetition = 0; repetition < 3; repetition += 1) {
|
|
for (const row of rows) list?.append(row.cloneNode(true));
|
|
}
|
|
});
|
|
|
|
await expect(page.locator('.piece-card')).toHaveCount(4);
|
|
await expectNoHorizontalOverflow(page);
|
|
await page.setViewportSize({ width: 390, height: 844 });
|
|
await expectNoHorizontalOverflow(page);
|
|
await expect(page.locator('.piece-card').first()).toHaveCSS('flex-direction', 'column');
|
|
const mobileCard = await page.locator('.piece-card').first().boundingBox();
|
|
const mobilePrimary = await page.locator('.piece-primary').first().boundingBox();
|
|
expect(mobilePrimary?.width ?? 0).toBeGreaterThan((mobileCard?.width ?? 0) - 40);
|
|
await expect(page.locator('.piece-card').first().getByRole('heading')).toContainText(
|
|
'Ein außergewöhnlich langer redaktioneller Titel'
|
|
);
|
|
await page.screenshot({
|
|
path: testInfo.outputPath('fundus-mobile-long-content.png'),
|
|
fullPage: true
|
|
});
|
|
});
|
|
|
|
test('inbox, archive and administration stay concise', async ({ page }) => {
|
|
for (const width of [390, 1280]) {
|
|
await page.setViewportSize({ width, height: 900 });
|
|
await page.goto('/eingang');
|
|
await expect(page.locator('.capture-panel')).toBeVisible();
|
|
await expect(page.locator('.inbox-item')).toHaveCount(1);
|
|
await expectNoHorizontalOverflow(page);
|
|
await page.goto('/archiv');
|
|
await expect(page.locator('.archive-list article')).toHaveCount(1);
|
|
await expectNoHorizontalOverflow(page);
|
|
}
|
|
|
|
await page.setViewportSize({ width: 1280, height: 900 });
|
|
await page.goto('/verwaltung');
|
|
const panels = page.locator('.taxonomy-panel');
|
|
await expect(panels).toHaveCount(3);
|
|
const boxes = await Promise.all([
|
|
panels.nth(0).boundingBox(),
|
|
panels.nth(1).boundingBox(),
|
|
panels.nth(2).boundingBox()
|
|
]);
|
|
expect(boxes[0]?.y).toBe(boxes[1]?.y);
|
|
expect(boxes[1]?.y).toBe(boxes[2]?.y);
|
|
});
|
|
|
|
test('validated YouTube and TikTok players switch without exposing private fields', async ({
|
|
page
|
|
}, testInfo) => {
|
|
addPresentationFixture();
|
|
try {
|
|
await page.context().route('https://www.youtube-nocookie.com/**', (route) =>
|
|
route.fulfill({
|
|
contentType: 'text/html',
|
|
body: '<!doctype html><title>YouTube Test</title>'
|
|
})
|
|
);
|
|
await page.context().route('https://www.tiktok.com/player/**', (route) =>
|
|
route.fulfill({
|
|
contentType: 'text/html',
|
|
body: '<!doctype html><title>TikTok Test</title>'
|
|
})
|
|
);
|
|
await page.goto('/live?show=e2e-presentation');
|
|
const popupPromise = page.waitForEvent('popup');
|
|
await page.getByRole('button', { name: 'Präsentationsfenster öffnen' }).click();
|
|
const output = await popupPromise;
|
|
await output.waitForLoadState('networkidle');
|
|
await expect(output.getByText('Bereit für den nächsten Inhalt')).toBeVisible();
|
|
|
|
await page.getByRole('button', { name: 'YouTube Kurzlink präsentieren' }).click();
|
|
const youtube = output.locator('iframe[title="YouTube Vorschau"]');
|
|
await expect(youtube).toHaveAttribute(
|
|
'src',
|
|
'https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ?start=75'
|
|
);
|
|
await expect(output.locator('.output-connection')).toHaveClass(/sr-only/);
|
|
const publicState = await output.evaluate(async () =>
|
|
JSON.stringify(await fetch(`${location.pathname}/state`).then((response) => response.json()))
|
|
);
|
|
expect(publicState).not.toContain('PRIVATE_RESEARCH');
|
|
expect(publicState).not.toContain('PRIVATE_MODERATION');
|
|
|
|
await page.getByRole('button', { name: 'TikTok Hochformat präsentieren' }).click();
|
|
await expect(youtube).toHaveCount(0);
|
|
await expect(output.locator('iframe[title="TikTok Vorschau"]')).toHaveAttribute(
|
|
'src',
|
|
'https://www.tiktok.com/player/v1/6718335390845095173?autoplay=0&controls=1'
|
|
);
|
|
await expect(output.getByRole('link', { name: 'Original öffnen' })).toHaveAttribute(
|
|
'href',
|
|
'https://www.tiktok.com/@scout2015/video/6718335390845095173'
|
|
);
|
|
await output.setViewportSize({ width: 390, height: 844 });
|
|
await expectNoHorizontalOverflow(output);
|
|
await output.screenshot({
|
|
path: testInfo.outputPath('heinzlive-video-mobile.png'),
|
|
fullPage: true
|
|
});
|
|
await output.close();
|
|
} finally {
|
|
removePresentationFixture();
|
|
}
|
|
});
|
|
|
|
test('live control persists state and exposes only explicit presentation data', async ({
|
|
page,
|
|
browser
|
|
}, testInfo) => {
|
|
await page.setViewportSize({ width: 1280, height: 900 });
|
|
await page.goto('/fundus?q=kleine+Konsole&includePlanned=1');
|
|
await page.getByRole('heading', { name: 'Die kleine Konsole mit dem großen Dreh' }).click();
|
|
const png = Buffer.from(
|
|
'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=',
|
|
'base64'
|
|
);
|
|
await page.getByLabel('Bild', { exact: true }).setInputFiles({
|
|
name: 'live-konsole.png',
|
|
mimeType: 'image/png',
|
|
buffer: png
|
|
});
|
|
await page.getByLabel('Alternativtext').fill('Kleine Konsole im Live-Bild');
|
|
await page.getByRole('button', { name: 'Bild hochladen' }).click();
|
|
|
|
await page.goto('/live?show=show-october');
|
|
await expect(page.getByText('Noch nicht gestartet.')).toBeVisible();
|
|
await page.getByRole('button', { name: 'Sendung starten' }).click();
|
|
await expect(page.locator('#current-title')).toHaveText('Die kleine Konsole mit dem großen Dreh');
|
|
await expect(
|
|
page.getByText('Herstellerangaben gegen unabhängige Tests prüfen')
|
|
).not.toBeVisible();
|
|
|
|
const before = await page
|
|
.locator('.live-current')
|
|
.evaluate((element) => getComputedStyle(element).getPropertyValue('--prompt-size'));
|
|
await page.getByRole('button', { name: 'Schrift vergrößern' }).click();
|
|
await page.reload();
|
|
const restored = await page
|
|
.locator('.live-current')
|
|
.evaluate((element) => getComputedStyle(element).getPropertyValue('--prompt-size'));
|
|
expect(restored).not.toBe(before);
|
|
await page.getByText('Manuelle Recherche öffnen').click();
|
|
await expect(page.locator('.research-details')).toHaveAttribute('open', '');
|
|
|
|
const [popup] = await Promise.all([
|
|
page.waitForEvent('popup'),
|
|
page.getByRole('button', { name: 'Präsentationsfenster öffnen' }).click()
|
|
]);
|
|
await popup.waitForURL(/\/heinzlive\/[A-Za-z0-9_-]+$/);
|
|
const outputUrl = popup.url();
|
|
const anonymous = await browser.newContext();
|
|
const output = await anonymous.newPage();
|
|
await output.goto(outputUrl);
|
|
await expect(
|
|
output.getByRole('heading', { name: 'Bereit für den nächsten Inhalt' })
|
|
).toBeVisible();
|
|
|
|
await page.getByRole('button', { name: 'Präsentieren', exact: true }).click();
|
|
await expect(
|
|
output.getByRole('heading', { name: 'Die kleine Konsole mit dem großen Dreh' })
|
|
).toBeVisible({
|
|
timeout: 10_000
|
|
});
|
|
await expect(output.getByText('Weniger Leistung, mehr Idee.')).toBeVisible();
|
|
await expect(output.getByAltText('Kleine Konsole im Live-Bild')).toBeVisible();
|
|
await output.screenshot({ path: testInfo.outputPath('heinzlive-output.png'), fullPage: true });
|
|
const outputHtml = await output.content();
|
|
expect(outputHtml).not.toContain('Herstellerangaben');
|
|
expect(outputHtml).not.toContain('Erst Formfaktor zeigen');
|
|
expect(outputHtml).not.toContain(adminEmail);
|
|
expect(outputHtml).not.toContain('live-konsole.png');
|
|
const outputState = await anonymous.request.get(`${outputUrl}/state`);
|
|
expect(outputState.status()).toBe(200);
|
|
const outputJson = await outputState.text();
|
|
expect(outputJson).toContain('Weniger Leistung');
|
|
expect(outputJson).not.toContain('Herstellerangaben');
|
|
expect(outputJson).not.toContain('Moderationsstichpunkte');
|
|
expect(outputJson).not.toContain('live-konsole.png');
|
|
|
|
await page.getByRole('button', { name: 'Als Nächstes' }).click();
|
|
await expect(page.locator('.next-card')).toContainText('Pixelart');
|
|
await page.getByRole('button', { name: 'Erledigen und weiter' }).click();
|
|
await expect(page.locator('.live-current')).toContainText('Pixelart');
|
|
await page.getByRole('button', { name: 'Überspringen' }).click();
|
|
await page.getByRole('button', { name: 'Zurück' }).click();
|
|
await expect(page.locator('.live-current')).toContainText('Pixelart');
|
|
await output.route('**/state', (route) => route.abort());
|
|
await expect(output.getByText('Verbindung unterbrochen')).toBeVisible({ timeout: 5_000 });
|
|
await output.unroute('**/state');
|
|
await expect(output.getByText('Verbunden')).toBeVisible({ timeout: 5_000 });
|
|
await page.setViewportSize({ width: 390, height: 844 });
|
|
await expectNoHorizontalOverflow(page);
|
|
await page.screenshot({
|
|
path: testInfo.outputPath('live-controller-mobile.png'),
|
|
fullPage: true
|
|
});
|
|
await page.setViewportSize({ width: 1280, height: 900 });
|
|
|
|
await page.evaluate(() => {
|
|
window.open = () => null;
|
|
});
|
|
await page.getByRole('button', { name: 'Präsentationsfenster öffnen' }).click();
|
|
await expect(
|
|
page.getByText('Popup blockiert. Bitte Popups erlauben und erneut öffnen.')
|
|
).toBeVisible();
|
|
await anonymous.close();
|
|
await popup.close();
|
|
await expectNoHorizontalOverflow(page);
|
|
});
|
|
|
|
test('pieces autosave safely, detect conflicts and protect uploaded images', async ({
|
|
page,
|
|
browser
|
|
}, testInfo) => {
|
|
await page.setViewportSize({ width: 1280, height: 1000 });
|
|
await page.goto('/fundus');
|
|
await page.getByText('Neues Piece anlegen').click();
|
|
await page.getByRole('button', { name: /Reaction \/ Fundstück/ }).click();
|
|
await expect(page).toHaveURL(/\/fundus\/[a-f0-9-]+$/);
|
|
const pieceUrl = page.url();
|
|
|
|
await page.getByLabel('Titel').fill('E2E Fundstück mit Markdown');
|
|
await page.getByRole('link', { name: '← Fundus', exact: true }).click();
|
|
await expect(page).toHaveURL(/\/fundus$/);
|
|
await page.getByRole('heading', { name: 'E2E Fundstück mit Markdown' }).click();
|
|
await expect(page).toHaveURL(pieceUrl);
|
|
await page.getByRole('button', { name: 'Einordnung bearbeiten' }).click();
|
|
await page
|
|
.getByLabel('Kurzbeschreibung')
|
|
.fill('Persistiert nach Neuladen und ist gezielt suchbar.');
|
|
await page.getByLabel('Status').selectOption('ready');
|
|
await page.getByLabel('Dauer in Minuten').fill('10.25');
|
|
await page.getByLabel('Gaming').check();
|
|
await openEditorialField(page, 'Eigene Gedanken & Recherche');
|
|
await page.getByLabel('Private Recherche').fill('Nur intern: **Hintergrund prüfen**.');
|
|
await openEditorialField(page, 'Moderationsstichpunkte');
|
|
await page.getByLabel('Moderationsstichpunkte').fill('Den Kern in zwei Sätzen erklären.');
|
|
await expect(page.getByLabel('Private Recherche')).toBeVisible();
|
|
await page.getByRole('button', { name: 'Präsentation bearbeiten' }).click();
|
|
await openEditorialField(page, 'Präsentationstext');
|
|
await page
|
|
.getByLabel('Präsentationstext')
|
|
.fill('## Sichere Vorschau\n\n<script>globalThis.e2eXss = true</script> **sichtbar**');
|
|
await page.getByRole('button', { name: 'Quelle hinzufügen' }).click();
|
|
const source = page.locator('.source-row').last();
|
|
await source.getByLabel('Name').fill('Originalbeitrag');
|
|
await source.getByLabel('URL').fill('https://example.com/e2e-fundstueck');
|
|
await source.getByLabel('Zeitmarke in Sekunden').fill('42');
|
|
await expect(page.locator('.save-indicator')).toContainText('Gespeichert', { timeout: 10_000 });
|
|
await page.waitForTimeout(1_200);
|
|
await expect(page.locator('.save-indicator')).toContainText('Gespeichert');
|
|
await page
|
|
.locator('.editorial-field')
|
|
.filter({ has: page.getByRole('heading', { name: 'Präsentationstext', exact: true }) })
|
|
.getByRole('button', { name: 'Lesen' })
|
|
.click();
|
|
await expect(page.locator('.markdown-preview script')).toHaveCount(0);
|
|
await expect(page.locator('.markdown-preview').last()).toContainText('Sichere Vorschau');
|
|
await page.reload();
|
|
await expect(page.getByLabel('Titel')).toHaveValue('E2E Fundstück mit Markdown');
|
|
await page.getByRole('button', { name: 'Einordnung bearbeiten' }).click();
|
|
await expect(page.getByLabel('Dauer in Minuten')).toHaveValue('10.25');
|
|
await openEditorialField(page, 'Eigene Gedanken & Recherche');
|
|
await expect(page.getByLabel('Private Recherche')).toHaveValue(
|
|
'Nur intern: **Hintergrund prüfen**.'
|
|
);
|
|
|
|
const png = Buffer.from(
|
|
'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=',
|
|
'base64'
|
|
);
|
|
await page.getByLabel('Bild', { exact: true }).setInputFiles({
|
|
name: 'redaktionsbild.png',
|
|
mimeType: 'image/png',
|
|
buffer: png
|
|
});
|
|
await page.getByLabel('Alternativtext').fill('Ein Testpixel');
|
|
await page.getByRole('button', { name: 'Bild hochladen' }).click();
|
|
const image = page.locator('.media-grid img');
|
|
await expect(image).toHaveCount(1);
|
|
await expect(image).toHaveAttribute('alt', 'Ein Testpixel');
|
|
const mediaUrl = await image.getAttribute('src');
|
|
const anonymous = await browser.newContext();
|
|
const anonymousResponse = await anonymous.request.get(new URL(mediaUrl!, page.url()).toString(), {
|
|
maxRedirects: 0
|
|
});
|
|
expect(anonymousResponse.status()).toBe(303);
|
|
await anonymous.close();
|
|
|
|
const concurrent = await page.context().newPage();
|
|
await concurrent.goto(pieceUrl);
|
|
await page.getByLabel('Titel').fill('E2E Fundstück, extern aktualisiert');
|
|
await expect(page.locator('.save-indicator')).toContainText('Gespeichert', { timeout: 10_000 });
|
|
await concurrent.getByRole('button', { name: 'Einordnung bearbeiten' }).click();
|
|
await concurrent
|
|
.getByLabel('Kurzbeschreibung')
|
|
.fill('Diese veraltete Änderung darf nicht gewinnen.');
|
|
await expect(concurrent.locator('.save-indicator')).toContainText('neuere Änderung', {
|
|
timeout: 10_000
|
|
});
|
|
await concurrent.reload();
|
|
await expect(concurrent.getByLabel('Titel')).toHaveValue('E2E Fundstück, extern aktualisiert');
|
|
await concurrent.getByRole('button', { name: 'Einordnung bearbeiten' }).click();
|
|
await expect(concurrent.getByLabel('Kurzbeschreibung')).not.toHaveValue(
|
|
'Diese veraltete Änderung darf nicht gewinnen.'
|
|
);
|
|
await concurrent.close();
|
|
|
|
await page.goto('/fundus?q=extern+aktualisiert');
|
|
await expect(page.locator('.piece-card')).toHaveCount(1);
|
|
await expect(
|
|
page.getByRole('heading', { name: 'E2E Fundstück, extern aktualisiert' })
|
|
).toBeVisible();
|
|
await page.getByRole('link', { name: 'Bearbeiten' }).click();
|
|
await page.getByRole('button', { name: 'Piece archivieren' }).click();
|
|
await expect(page).toHaveURL(/\/archiv$/);
|
|
const archived = page.locator('.archive-list article').filter({ hasText: 'extern aktualisiert' });
|
|
await expect(archived).toBeVisible();
|
|
await archived.getByRole('button', { name: 'Wiederherstellen' }).click();
|
|
await expect(archived).toHaveCount(0);
|
|
await page.goto('/fundus?q=extern+aktualisiert');
|
|
await expect(page.locator('.piece-card')).toHaveCount(1);
|
|
await page.locator('.piece-card').getByRole('button', { name: 'Duplizieren' }).click();
|
|
await expect(page.getByLabel('Titel')).toHaveValue(
|
|
'Kopie von E2E Fundstück, extern aktualisiert'
|
|
);
|
|
|
|
await page.context().setOffline(true);
|
|
await page.getByLabel('Titel').fill('Kopie mit unterbrochener Verbindung');
|
|
await expect(page.locator('.save-indicator')).toContainText('Speichern fehlgeschlagen', {
|
|
timeout: 10_000
|
|
});
|
|
await page.context().setOffline(false);
|
|
await page.getByRole('button', { name: 'Jetzt speichern' }).click();
|
|
await expect(page.locator('.save-indicator')).toContainText('Gespeichert', { timeout: 10_000 });
|
|
|
|
await page.setViewportSize({ width: 390, height: 844 });
|
|
await setTheme(page, 'dark');
|
|
await page.reload();
|
|
await page.getByRole('button', { name: 'Quellen', exact: true }).click();
|
|
await expect(page.getByRole('heading', { name: 'Quellen', exact: true })).toBeVisible();
|
|
await page.getByRole('button', { name: 'Quellen schließen' }).click();
|
|
await expectNoHorizontalOverflow(page);
|
|
await page.screenshot({
|
|
path: testInfo.outputPath('piece-editor-mobile-dark.png'),
|
|
fullPage: true
|
|
});
|
|
});
|
|
|
|
test('a quickly captured video can be written and previewed before classification', async ({
|
|
page
|
|
}) => {
|
|
await page.context().route('https://www.youtube-nocookie.com/**', (route) =>
|
|
route.fulfill({
|
|
contentType: 'text/html',
|
|
body: '<!doctype html><title>YouTube Test</title>'
|
|
})
|
|
);
|
|
await page.goto('/eingang');
|
|
await page.getByLabel('Titel oder Gedanke').fill('Schnelles Video-Fundstück');
|
|
await page.getByLabel('Link').fill('https://youtu.be/dQw4w9WgXcQ');
|
|
await page.getByRole('button', { name: 'Aufnehmen und öffnen' }).click();
|
|
await expect(page).toHaveURL(/\/fundus\/[a-f0-9-]+$/);
|
|
await expect(page.getByRole('link', { name: 'Original öffnen' })).toHaveAttribute(
|
|
'href',
|
|
'https://youtu.be/dQw4w9WgXcQ'
|
|
);
|
|
await expect(page.getByLabel('Status')).toBeHidden();
|
|
|
|
await openEditorialField(page, 'Eigene Gedanken & Recherche');
|
|
await page
|
|
.getByLabel('Private Recherche')
|
|
.fill('Warum funktioniert der Einstieg so unmittelbar?');
|
|
await openEditorialField(page, 'Moderationsstichpunkte');
|
|
await page
|
|
.getByLabel('Moderationsstichpunkte')
|
|
.fill('Erst Clip zeigen, dann die Beobachtung öffnen.');
|
|
await expect(page.getByLabel('Private Recherche')).toBeVisible();
|
|
|
|
await page.getByRole('button', { name: 'Präsentation bearbeiten' }).click();
|
|
await page.getByLabel('Video').check();
|
|
await page.getByRole('combobox', { name: 'Quelle', exact: true }).selectOption('0');
|
|
await expect(page.locator('.save-indicator')).toContainText('Gespeichert', { timeout: 10_000 });
|
|
|
|
const previewPromise = page.waitForEvent('popup');
|
|
await page.getByRole('link', { name: 'Präsentation testen' }).click();
|
|
const preview = await previewPromise;
|
|
await expect(preview.locator('iframe[title="Schnelles Video-Fundstück"]')).toHaveAttribute(
|
|
'src',
|
|
'https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ'
|
|
);
|
|
await preview.close();
|
|
|
|
await page.setViewportSize({ width: 390, height: 844 });
|
|
await page.getByRole('button', { name: 'Präsentation', exact: true }).click();
|
|
await expect(page.getByLabel('Video')).toBeVisible();
|
|
await page.getByRole('button', { name: 'Präsentation schließen' }).click();
|
|
await expect(page.getByLabel('Private Recherche')).toBeVisible();
|
|
await expectNoHorizontalOverflow(page);
|
|
});
|
|
|
|
test('link preview uses one existing source, persists manual fields and isolates its test view', async ({
|
|
page
|
|
}, testInfo) => {
|
|
await page.goto('/fundus/piece-console');
|
|
await page.getByRole('button', { name: 'Präsentation bearbeiten' }).click();
|
|
await page.getByLabel('Linkvorschau').check();
|
|
await page.getByRole('combobox', { name: 'Quelle', exact: true }).selectOption('0');
|
|
await page.getByLabel('Titel', { exact: true }).last().fill('Manuell korrigierte Linkvorschau');
|
|
await page.getByLabel('Anreißer').fill('Ein kurzer manueller Anreißer ohne Vorschaubild.');
|
|
await expect(page.locator('.save-indicator')).toContainText('Gespeichert', { timeout: 10_000 });
|
|
await page.reload();
|
|
await page.getByRole('button', { name: 'Präsentation bearbeiten' }).click();
|
|
await expect(page.getByLabel('Linkvorschau')).toBeChecked();
|
|
await expect(page.getByLabel('Titel', { exact: true }).last()).toHaveValue(
|
|
'Manuell korrigierte Linkvorschau'
|
|
);
|
|
|
|
const previewPromise = page.waitForEvent('popup');
|
|
await page.getByRole('link', { name: 'Präsentation testen' }).click();
|
|
const preview = await previewPromise;
|
|
await preview.waitForLoadState('networkidle');
|
|
await expect(preview.getByText('Isolierte Testansicht')).toBeVisible();
|
|
await expect(
|
|
preview.getByRole('heading', { name: 'Manuell korrigierte Linkvorschau' })
|
|
).toBeVisible();
|
|
await expect(preview.getByText('Ein kurzer manueller Anreißer ohne Vorschaubild.')).toBeVisible();
|
|
await expect(preview.locator('.output-link-image')).toHaveCount(0);
|
|
await preview.screenshot({
|
|
path: testInfo.outputPath('linkvorschau-desktop.png'),
|
|
fullPage: true
|
|
});
|
|
await preview.setViewportSize({ width: 390, height: 844 });
|
|
await expectNoHorizontalOverflow(preview);
|
|
await preview.screenshot({
|
|
path: testInfo.outputPath('linkvorschau-mobile.png'),
|
|
fullPage: true
|
|
});
|
|
await preview.close();
|
|
|
|
await page.locator('.source-row').first().getByLabel('URL').fill('http://127.0.0.1/private');
|
|
await expect(page.locator('.save-indicator')).toContainText('Gespeichert', { timeout: 10_000 });
|
|
const blockedPreview = page.waitForResponse((response) =>
|
|
response.url().includes('?/loadPreview')
|
|
);
|
|
await page.getByRole('button', { name: 'Vorschau laden' }).click();
|
|
expect((await blockedPreview).status()).toBe(400);
|
|
await expect(page.getByRole('alert')).toContainText('Interne oder private Netzwerkziele');
|
|
});
|