43cd73afb7
Berichtstabellen nehmen nur noch den Platz, den ihre Spalten brauchen, und
stehen links; erst bei mehr Inhalt wachsen sie bis zur vollen Breite. Im
Scrollrahmen .breittabelle bleibt es beim bisherigen Verhalten, damit die
zwölf Monatsspalten weiter waagerecht scrollen statt umzubrechen.
Dabei kam heraus, dass die Zahlenspalten gar nicht rechtsbündig standen:
.rechts und .betrag sind nur einfach spezifisch, das weiter oben stehende
"table.liste th, table.liste td { text-align: left }" gewann. Für Berichte
steht die Ausrichtung jetzt ausdrücklich, sodass die letzte Spalte ihre
Beträge an der eigenen Kante ausrichtet.
Nachgezogen: Der E2E-Test der eingeklappten Seitenleiste erwartete
toBeHidden() für die Beschriftungen, die aber mit Absicht nur per clip-path
aus dem Bild geschoben werden – für Playwright bleiben sie sichtbar. Geprüft
wird jetzt, dass sie keinen Platz mehr einnehmen und der Verweis seinen
zugänglichen Namen behält.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
90 lines
3.7 KiB
JavaScript
90 lines
3.7 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(/\/$/)
|
||
}
|
||
|
||
/**
|
||
* Eingeklappt werden die Beschriftungen nur aus dem Bild geschoben (`clip-path`
|
||
* auf 1×1 Pixel), nicht mit `display:none` entfernt – sonst verlören die
|
||
* Verweise ihren Namen für Vorleseprogramme. Für Playwright bleibt ein solches
|
||
* Element „sichtbar“; geprüft wird deshalb, dass es keinen Platz mehr einnimmt.
|
||
*/
|
||
async function istWeggeschoben(beschriftung) {
|
||
await expect.poll(async () => {
|
||
const kasten = await beschriftung.boundingBox()
|
||
return kasten === null ? 0 : Math.max(kasten.width, kasten.height)
|
||
}, { message: 'Beschriftung nimmt keinen Platz mehr ein' }).toBeLessThanOrEqual(1)
|
||
}
|
||
|
||
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
|
||
const hauptbereichOffen = (await page.locator('.hauptbereich').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 istWeggeschoben(beschriftung)
|
||
await expect(page.locator('.seitenleiste .icon').first()).toBeVisible()
|
||
|
||
// Der Verweis behält dabei seinen Namen – nur das Auge verliert ihn.
|
||
await expect(page.locator('.seitenleiste a[href="/konten"]'))
|
||
.toHaveAccessibleName(/Kontenübersicht/)
|
||
|
||
const breitEingeklappt = (await page.locator('.seitenleiste').boundingBox()).width
|
||
expect(breitEingeklappt).toBeLessThan(breitOffen)
|
||
|
||
// Der Hauptbereich bekommt den gewonnenen Platz.
|
||
expect((await page.locator('.hauptbereich').boundingBox()).width)
|
||
.toBeGreaterThan(hauptbereichOffen)
|
||
|
||
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(breitOffen)
|
||
})
|
||
|
||
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 istWeggeschoben(page.locator('.seitenleiste .beschriftung').first())
|
||
|
||
await page.locator('[data-seitenleiste-schalter]').click()
|
||
await expect(page.locator('.rahmen')).not.toHaveClass(/eingeklappt/)
|
||
})
|
||
})
|