280664b8a3
Die Marke oben in der Seitenleiste trägt jetzt das Coinstack-Symbol aus den Altdaten und den zweifarbigen Schriftzug Finanz|manager – wie die sidebar-brand im Steuerkram. Sie ist zugleich der Schalter: Ein Klick schiebt die Leiste von 232 px auf 64 px zusammen, ein Klick auf das Symbol klappt sie wieder auf. Die Menüpunkte behalten dabei Ziel und Symbol. Der Zustand steht in einem Cookie und nicht im localStorage: So rendert der Server die Leiste schon in der richtigen Breite, statt sie bei jedem Seitenwechsel kurz breit aufblitzen zu lassen. Die Beschriftungen wandern eingeklappt per clip-path aus dem Bild statt per display:none – sonst verlören die Verweise ihren Namen für Vorleseprogramme. Nebenbei: Die Marke hieß bisher .marke, wie die kleine Statusmarke weiter unten im Stilblatt, deren Regeln sie überschrieben. Sie heißt jetzt .seitenleisten-marke. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
72 lines
2.8 KiB
JavaScript
72 lines
2.8 KiB
JavaScript
// @ts-check
|
||
const { test, expect } = require('@playwright/test')
|
||
|
||
const BENUTZER = process.env.E2E_USER || 'e2e'
|
||
const PASSWORT = process.env.E2E_PASSWORD || 'e2e-testpasswort'
|
||
|
||
async function anmelden(page) {
|
||
await page.goto('/login')
|
||
test.skip(page.url().includes('/einrichtung'), 'Instanz noch nicht eingerichtet')
|
||
|
||
await page.fill('#benutzername', BENUTZER)
|
||
await page.fill('#passwort', PASSWORT)
|
||
await page.click('button[type="submit"]')
|
||
await expect(page).toHaveURL(/\/$/)
|
||
}
|
||
|
||
test.describe('Seitenleiste ein- und ausklappen', () => {
|
||
test('Klick auf die Marke schiebt die Leiste auf Symbolbreite und zurück', async ({ page }) => {
|
||
await anmelden(page)
|
||
|
||
const rahmen = page.locator('.rahmen')
|
||
const marke = page.locator('[data-seitenleiste-schalter]')
|
||
const symbol = page.locator('.marken-symbol')
|
||
const beschriftung = page.locator('.seitenleiste .beschriftung').first()
|
||
|
||
await expect(symbol).toBeVisible()
|
||
await expect(beschriftung).toBeVisible()
|
||
const breitOffen = (await page.locator('.seitenleiste').boundingBox()).width
|
||
|
||
await marke.click()
|
||
|
||
await expect(rahmen).toHaveClass(/eingeklappt/)
|
||
await expect(marke).toHaveAttribute('aria-expanded', 'false')
|
||
// Das Markensymbol und die Symbole der Menüpunkte bleiben stehen,
|
||
// nur die Beschriftungen verschwinden.
|
||
await expect(symbol).toBeVisible()
|
||
await expect(beschriftung).toBeHidden()
|
||
await expect(page.locator('.seitenleiste .icon').first()).toBeVisible()
|
||
|
||
const breitEingeklappt = (await page.locator('.seitenleiste').boundingBox()).width
|
||
expect(breitEingeklappt).toBeLessThan(breitOffen)
|
||
|
||
// Der Hauptbereich bekommt den gewonnenen Platz.
|
||
const hauptOffen = breitOffen
|
||
expect((await page.locator('.hauptbereich').boundingBox()).width).toBeGreaterThan(0)
|
||
|
||
await marke.click()
|
||
await expect(rahmen).not.toHaveClass(/eingeklappt/)
|
||
await expect(marke).toHaveAttribute('aria-expanded', 'true')
|
||
await expect(beschriftung).toBeVisible()
|
||
expect((await page.locator('.seitenleiste').boundingBox()).width).toBe(hauptOffen)
|
||
})
|
||
|
||
test('Die Symbole führen eingeklappt zu denselben Seiten', async ({ page }) => {
|
||
await anmelden(page)
|
||
|
||
await page.locator('[data-seitenleiste-schalter]').click()
|
||
await expect(page.locator('.rahmen')).toHaveClass(/eingeklappt/)
|
||
|
||
await page.locator('.seitenleiste a[href="/konten"]').click()
|
||
await expect(page).toHaveURL(/\/konten/)
|
||
await expect(page.locator('h1')).toContainText('Kontenübersicht')
|
||
|
||
// Der Zustand hält über den Seitenwechsel hinweg – ohne Aufblitzen,
|
||
// weil der Server ihn schon aus dem Cookie kennt.
|
||
await expect(page.locator('.rahmen')).toHaveClass(/eingeklappt/)
|
||
await expect(page.locator('.seitenleiste .beschriftung').first()).toBeHidden()
|
||
|
||
await page.locator('[data-seitenleiste-schalter]').click()
|
||
await expect(page.locator('.rahmen')).not.toHaveClass(/eingeklappt/)
|
||
})
|
||
})
|