Patrick Plate
cfb38e8fc6
- Global setup: authenticates as admin, saves storageState for reuse - playwright.config.ts: 3 projects (setup, authenticated, unauthenticated) - authenticated-admin.spec.ts: 16 admin pages tested with real auth session - accessibility.spec.ts: axe-core scans on all admin, public, and portal pages - visual-regression.spec.ts: dark mode baselines for key pages (toHaveScreenshot) - @axe-core/playwright added as devDependency - .gitignore updated: excludes .auth/ and test-results/ Full suite: 262 tests passing (setup:1, authenticated:52, unauthenticated:209)
453 lines
14 KiB
TypeScript
453 lines
14 KiB
TypeScript
import { expect, test } from "@playwright/test"
|
|
|
|
/**
|
|
* Authenticated Admin E2E Tests
|
|
*
|
|
* Tests ALL admin pages with a real authenticated session.
|
|
* Uses storageState from global-setup.ts (admin@test.de / test123).
|
|
*
|
|
* Each test verifies:
|
|
* 1. Page renders without error (no error boundary)
|
|
* 2. Main heading or content area visible
|
|
* 3. Key interactive elements present (buttons, forms, tables)
|
|
* 4. No JS console errors
|
|
* 5. Sidebar navigation is visible
|
|
*/
|
|
|
|
const BASE = process.env.BASE_URL || "http://localhost:3000"
|
|
|
|
test.describe("Admin Dashboard", () => {
|
|
test("renders KPI cards and quick actions", async ({ page }) => {
|
|
const errors: string[] = []
|
|
page.on("console", (msg) => {
|
|
if (msg.type() === "error") errors.push(msg.text())
|
|
})
|
|
|
|
await page.goto(`${BASE}/dashboard`)
|
|
await page.waitForLoadState("domcontentloaded")
|
|
|
|
// Main content area is visible
|
|
const main = page.locator("main")
|
|
await expect(main).toBeVisible({ timeout: 15000 })
|
|
|
|
// KPI cards should be visible (look for card-like elements)
|
|
const cards = page.locator(
|
|
'[class*="card"], [data-testid*="kpi"], [role="article"]'
|
|
)
|
|
await expect(cards.first()).toBeVisible({ timeout: 10000 })
|
|
|
|
// Quick action buttons
|
|
const buttons = page.getByRole("button")
|
|
const buttonCount = await buttons.count()
|
|
expect(buttonCount).toBeGreaterThan(0)
|
|
|
|
// Sidebar navigation is visible
|
|
const nav = page.locator(
|
|
'[data-sidebar], nav, aside, [role="navigation"]'
|
|
)
|
|
await expect(nav.first()).toBeVisible()
|
|
|
|
// Filter non-critical errors
|
|
const critical = errors.filter(
|
|
(e) =>
|
|
!e.includes("favicon") &&
|
|
!e.includes(".map") &&
|
|
!e.includes("hydration") &&
|
|
!e.includes("Failed to load resource") &&
|
|
!e.includes("MISSING_MESSAGE") &&
|
|
!e.includes("WebSocket")
|
|
)
|
|
expect(critical).toHaveLength(0)
|
|
})
|
|
})
|
|
|
|
test.describe("Members", () => {
|
|
test("members list renders table with column headers", async ({ page }) => {
|
|
await page.goto(`${BASE}/members`)
|
|
await page.waitForLoadState("domcontentloaded")
|
|
|
|
const main = page.locator("main")
|
|
await expect(main).toBeVisible({ timeout: 15000 })
|
|
|
|
// Table or list content
|
|
const table = page.locator(
|
|
'table, [role="table"], [data-testid="members-list"]'
|
|
)
|
|
await expect(table.first()).toBeVisible({ timeout: 10000 })
|
|
|
|
// Search input
|
|
const search = page.locator(
|
|
'input[type="search"], input[placeholder*="uch"], input[placeholder*="earch"]'
|
|
)
|
|
if ((await search.count()) > 0) {
|
|
await expect(search.first()).toBeVisible()
|
|
}
|
|
|
|
// Sidebar navigation
|
|
const nav = page.locator(
|
|
'[data-sidebar], nav, aside, [role="navigation"]'
|
|
)
|
|
await expect(nav.first()).toBeVisible()
|
|
})
|
|
|
|
test("new member form renders all fields", async ({ page }) => {
|
|
await page.goto(`${BASE}/members/new`)
|
|
await page.waitForLoadState("domcontentloaded")
|
|
|
|
const main = page.locator("main")
|
|
await expect(main).toBeVisible({ timeout: 15000 })
|
|
|
|
// Form should be present
|
|
const form = page.locator("form")
|
|
await expect(form.first()).toBeVisible({ timeout: 10000 })
|
|
|
|
// Key form fields (check by label or name)
|
|
const firstNameField = page.locator(
|
|
'[name="firstName"], [name="first_name"], input[id*="first"]'
|
|
)
|
|
const lastNameField = page.locator(
|
|
'[name="lastName"], [name="last_name"], input[id*="last"]'
|
|
)
|
|
const emailField = page.locator(
|
|
'[name="email"], input[type="email"]'
|
|
)
|
|
|
|
// At least the email field should be present
|
|
if ((await firstNameField.count()) > 0) {
|
|
await expect(firstNameField.first()).toBeVisible()
|
|
}
|
|
if ((await lastNameField.count()) > 0) {
|
|
await expect(lastNameField.first()).toBeVisible()
|
|
}
|
|
await expect(emailField.first()).toBeVisible()
|
|
})
|
|
})
|
|
|
|
test.describe("Distributions", () => {
|
|
test("distributions list renders with filters", async ({ page }) => {
|
|
await page.goto(`${BASE}/distributions`)
|
|
await page.waitForLoadState("domcontentloaded")
|
|
|
|
const main = page.locator("main")
|
|
await expect(main).toBeVisible({ timeout: 15000 })
|
|
|
|
// Table or list
|
|
const table = page.locator(
|
|
'table, [role="table"], [data-testid="distributions-list"]'
|
|
)
|
|
await expect(table.first()).toBeVisible({ timeout: 10000 })
|
|
|
|
// Sidebar
|
|
const nav = page.locator(
|
|
'[data-sidebar], nav, aside, [role="navigation"]'
|
|
)
|
|
await expect(nav.first()).toBeVisible()
|
|
})
|
|
|
|
test("new distribution wizard renders", async ({ page }) => {
|
|
await page.goto(`${BASE}/distributions/new`)
|
|
await page.waitForLoadState("domcontentloaded")
|
|
|
|
const main = page.locator("main")
|
|
await expect(main).toBeVisible({ timeout: 15000 })
|
|
|
|
// Wizard step content, form, or heading — the page may use different layouts
|
|
const content = page.locator(
|
|
'form, [data-testid*="wizard"], [data-testid*="step"], [role="group"], [class*="card"], h1, h2, h3'
|
|
)
|
|
await expect(content.first()).toBeVisible({ timeout: 10000 })
|
|
})
|
|
})
|
|
|
|
test.describe("Stock", () => {
|
|
test("stock page renders batch table", async ({ page }) => {
|
|
await page.goto(`${BASE}/stock`)
|
|
await page.waitForLoadState("domcontentloaded")
|
|
|
|
const main = page.locator("main")
|
|
await expect(main).toBeVisible({ timeout: 15000 })
|
|
|
|
// Table with batch data
|
|
const table = page.locator(
|
|
'table, [role="table"], [data-testid="stock-list"]'
|
|
)
|
|
await expect(table.first()).toBeVisible({ timeout: 10000 })
|
|
|
|
// Sidebar
|
|
const nav = page.locator(
|
|
'[data-sidebar], nav, aside, [role="navigation"]'
|
|
)
|
|
await expect(nav.first()).toBeVisible()
|
|
})
|
|
|
|
test("new stock form renders", async ({ page }) => {
|
|
await page.goto(`${BASE}/stock/new`)
|
|
await page.waitForLoadState("domcontentloaded")
|
|
|
|
const main = page.locator("main")
|
|
await expect(main).toBeVisible({ timeout: 15000 })
|
|
|
|
// Form
|
|
const form = page.locator("form")
|
|
await expect(form.first()).toBeVisible({ timeout: 10000 })
|
|
})
|
|
})
|
|
|
|
test.describe("Grow", () => {
|
|
test("grow page renders entries or empty state", async ({ page }) => {
|
|
await page.goto(`${BASE}/grow`)
|
|
await page.waitForLoadState("domcontentloaded")
|
|
|
|
const main = page.locator("main")
|
|
await expect(main).toBeVisible({ timeout: 15000 })
|
|
|
|
// Content: either a list/table or empty state text
|
|
const content = page.locator(
|
|
'table, [role="table"], [data-testid*="grow"], [data-testid*="empty"], h1, h2'
|
|
)
|
|
await expect(content.first()).toBeVisible({ timeout: 10000 })
|
|
|
|
// Sidebar
|
|
const nav = page.locator(
|
|
'[data-sidebar], nav, aside, [role="navigation"]'
|
|
)
|
|
await expect(nav.first()).toBeVisible()
|
|
})
|
|
})
|
|
|
|
test.describe("Reports", () => {
|
|
test("reports page shows report cards with download buttons", async ({
|
|
page,
|
|
}) => {
|
|
await page.goto(`${BASE}/reports`)
|
|
await page.waitForLoadState("domcontentloaded")
|
|
|
|
const main = page.locator("main")
|
|
await expect(main).toBeVisible({ timeout: 15000 })
|
|
|
|
// Report cards
|
|
const cards = page.locator('[class*="card"], [role="article"]')
|
|
await expect(cards.first()).toBeVisible({ timeout: 10000 })
|
|
|
|
// Download/generate buttons
|
|
const buttons = page.getByRole("button")
|
|
const count = await buttons.count()
|
|
expect(count).toBeGreaterThan(0)
|
|
|
|
// Sidebar
|
|
const nav = page.locator(
|
|
'[data-sidebar], nav, aside, [role="navigation"]'
|
|
)
|
|
await expect(nav.first()).toBeVisible()
|
|
})
|
|
})
|
|
|
|
test.describe("Audit Log", () => {
|
|
test("audit log page renders table", async ({ page }) => {
|
|
await page.goto(`${BASE}/audit-log`)
|
|
await page.waitForLoadState("domcontentloaded")
|
|
|
|
const main = page.locator("main")
|
|
await expect(main).toBeVisible({ timeout: 15000 })
|
|
|
|
// Table with audit entries
|
|
const table = page.locator(
|
|
'table, [role="table"], [data-testid*="audit"]'
|
|
)
|
|
await expect(table.first()).toBeVisible({ timeout: 10000 })
|
|
|
|
// Sidebar
|
|
const nav = page.locator(
|
|
'[data-sidebar], nav, aside, [role="navigation"]'
|
|
)
|
|
await expect(nav.first()).toBeVisible()
|
|
})
|
|
})
|
|
|
|
test.describe("Settings — Staff", () => {
|
|
test("staff page renders table and invite button", async ({ page }) => {
|
|
await page.goto(`${BASE}/settings/staff`)
|
|
await page.waitForLoadState("domcontentloaded")
|
|
|
|
const main = page.locator("main")
|
|
await expect(main).toBeVisible({ timeout: 15000 })
|
|
|
|
// Content (table or list)
|
|
const content = page.locator(
|
|
'table, [role="table"], [data-testid*="staff"]'
|
|
)
|
|
await expect(content.first()).toBeVisible({ timeout: 10000 })
|
|
|
|
// Invite button
|
|
const inviteBtn = page.locator(
|
|
'button:has-text("Einladen"), button:has-text("Invite"), a:has-text("Einladen")'
|
|
)
|
|
if ((await inviteBtn.count()) > 0) {
|
|
await expect(inviteBtn.first()).toBeVisible()
|
|
}
|
|
})
|
|
})
|
|
|
|
test.describe("Settings — Billing", () => {
|
|
test("billing page renders plan info", async ({ page }) => {
|
|
await page.goto(`${BASE}/settings/billing`)
|
|
await page.waitForLoadState("domcontentloaded")
|
|
|
|
const main = page.locator("main")
|
|
await expect(main).toBeVisible({ timeout: 15000 })
|
|
|
|
// Plan display or subscription info
|
|
const content = page.locator(
|
|
'[class*="card"], [data-testid*="billing"], [data-testid*="plan"], h1, h2, h3'
|
|
)
|
|
await expect(content.first()).toBeVisible({ timeout: 10000 })
|
|
})
|
|
})
|
|
|
|
test.describe("Settings — Privacy/DSGVO", () => {
|
|
test("privacy page renders export and delete buttons", async ({ page }) => {
|
|
await page.goto(`${BASE}/settings/privacy`)
|
|
await page.waitForLoadState("domcontentloaded")
|
|
|
|
const main = page.locator("main")
|
|
await expect(main).toBeVisible({ timeout: 15000 })
|
|
|
|
// Buttons for export/delete
|
|
const buttons = page.getByRole("button")
|
|
const count = await buttons.count()
|
|
expect(count).toBeGreaterThan(0)
|
|
|
|
// Look for export or delete text
|
|
const actionButtons = page.locator(
|
|
'button:has-text("Export"), button:has-text("Löschen"), button:has-text("Delete")'
|
|
)
|
|
if ((await actionButtons.count()) > 0) {
|
|
await expect(actionButtons.first()).toBeVisible()
|
|
}
|
|
})
|
|
})
|
|
|
|
test.describe("Info Board", () => {
|
|
test("info board page renders posts or empty state", async ({ page }) => {
|
|
await page.goto(`${BASE}/info-board`)
|
|
await page.waitForLoadState("domcontentloaded")
|
|
|
|
const main = page.locator("main")
|
|
await expect(main).toBeVisible({ timeout: 15000 })
|
|
|
|
// Content: posts list or empty state
|
|
const content = page.locator(
|
|
'[class*="card"], [data-testid*="info-board"], [data-testid*="post"], [data-testid*="empty"], h1, h2'
|
|
)
|
|
await expect(content.first()).toBeVisible({ timeout: 10000 })
|
|
|
|
// Create button
|
|
const createBtn = page.locator(
|
|
'button:has-text("Erstellen"), button:has-text("Neu"), button:has-text("Create"), a:has-text("Erstellen")'
|
|
)
|
|
if ((await createBtn.count()) > 0) {
|
|
await expect(createBtn.first()).toBeVisible()
|
|
}
|
|
|
|
// Sidebar
|
|
const nav = page.locator(
|
|
'[data-sidebar], nav, aside, [role="navigation"]'
|
|
)
|
|
await expect(nav.first()).toBeVisible()
|
|
})
|
|
})
|
|
|
|
test.describe("Calendar", () => {
|
|
test("calendar page renders month grid", async ({ page }) => {
|
|
await page.goto(`${BASE}/calendar`)
|
|
await page.waitForLoadState("domcontentloaded")
|
|
|
|
const main = page.locator("main")
|
|
await expect(main).toBeVisible({ timeout: 15000 })
|
|
|
|
// Calendar grid or content
|
|
const content = page.locator(
|
|
'[class*="calendar"], [data-testid*="calendar"], [role="grid"], table, h1, h2'
|
|
)
|
|
await expect(content.first()).toBeVisible({ timeout: 10000 })
|
|
|
|
// Create event button
|
|
const createBtn = page.locator(
|
|
'button:has-text("Event"), button:has-text("Termin"), button:has-text("Erstellen")'
|
|
)
|
|
if ((await createBtn.count()) > 0) {
|
|
await expect(createBtn.first()).toBeVisible()
|
|
}
|
|
|
|
// Sidebar
|
|
const nav = page.locator(
|
|
'[data-sidebar], nav, aside, [role="navigation"]'
|
|
)
|
|
await expect(nav.first()).toBeVisible()
|
|
})
|
|
})
|
|
|
|
test.describe("Forum", () => {
|
|
test("forum page renders topics or empty state", async ({ page }) => {
|
|
await page.goto(`${BASE}/forum`)
|
|
await page.waitForLoadState("domcontentloaded")
|
|
|
|
const main = page.locator("main")
|
|
await expect(main).toBeVisible({ timeout: 15000 })
|
|
|
|
// Topics or empty state
|
|
const content = page.locator(
|
|
'[class*="card"], [data-testid*="forum"], [data-testid*="topic"], [data-testid*="empty"], h1, h2'
|
|
)
|
|
await expect(content.first()).toBeVisible({ timeout: 10000 })
|
|
|
|
// Create topic button
|
|
const createBtn = page.locator(
|
|
'button:has-text("Thema"), button:has-text("Topic"), button:has-text("Erstellen"), button:has-text("Neu")'
|
|
)
|
|
if ((await createBtn.count()) > 0) {
|
|
await expect(createBtn.first()).toBeVisible()
|
|
}
|
|
|
|
// Sidebar
|
|
const nav = page.locator(
|
|
'[data-sidebar], nav, aside, [role="navigation"]'
|
|
)
|
|
await expect(nav.first()).toBeVisible()
|
|
})
|
|
})
|
|
|
|
test.describe("Sidebar Navigation", () => {
|
|
test("sidebar contains correct navigation links", async ({ page }) => {
|
|
await page.goto(`${BASE}/dashboard`)
|
|
await page.waitForLoadState("domcontentloaded")
|
|
|
|
const nav = page.locator(
|
|
'[data-sidebar], nav, aside, [role="navigation"]'
|
|
)
|
|
await expect(nav.first()).toBeVisible({ timeout: 15000 })
|
|
|
|
// Check that key nav links exist
|
|
const links = page.locator(
|
|
'[data-sidebar] a, nav a, aside a, [role="navigation"] a'
|
|
)
|
|
const count = await links.count()
|
|
expect(count).toBeGreaterThan(3)
|
|
|
|
// Verify some expected link targets exist in the sidebar
|
|
const allHrefs: string[] = []
|
|
for (let i = 0; i < count; i++) {
|
|
const href = await links.nth(i).getAttribute("href")
|
|
if (href) allHrefs.push(href)
|
|
}
|
|
|
|
// At least dashboard and members should be navigable
|
|
const hasNavLinks =
|
|
allHrefs.some((h) => h.includes("/dashboard")) ||
|
|
allHrefs.some((h) => h.includes("/members")) ||
|
|
allHrefs.some((h) => h.includes("/distribution"))
|
|
|
|
expect(hasNavLinks).toBe(true)
|
|
})
|
|
})
|