Gulum
d116b8d8f1
- BreedingResultView: <table class="genotype-table"> in <div class="genotype-table-scroll"> gewrapped.
- index.css: .genotype-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch }.
.genotype-table td { white-space: nowrap } → Tabelle scrollt statt Zellen umzubrechen.
width: 100% entfernt (Tabelle auto-sized to content).
- index.css: .app-main { overflow-x: hidden } → verhindert, dass breite Inhalte
den Page-Body horizontal überlaufen lassen (document.scrollWidth == clientWidth).
- e2e/genotype-table.spec.ts (4 Tests): Wrapper sichtbar, Wrapper selbst scrollbar
(scrollWidth > clientWidth), keine Page-Overflow auf 390px. Beide Viewports.
- Vitest 78 / e2e 106 grün.
Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
55 lines
2.1 KiB
TypeScript
55 lines
2.1 KiB
TypeScript
/**
|
|
* UX-MOBILE-2: Genotyp-Tabellen-Overflow — die Tabelle scrollt horizontal,
|
|
* die Seite selbst bleibt NICHT breiter als der Viewport (kein horizontaler
|
|
* Page-Overflow auf 390px).
|
|
*/
|
|
import { de, expect, skipUnlessMock, test } from './fixtures'
|
|
|
|
const tl = de.pages.litters
|
|
|
|
test('Phone: Genotyp-Detail-Tabelle scrollt im eigenen Wrapper, kein Page-Overflow', async ({
|
|
page,
|
|
}, testInfo) => {
|
|
skipUnlessMock()
|
|
if (testInfo.project.name !== 'phone') return
|
|
|
|
// Wurf w-kruemel hat beide Eltern mit Genotypen → BreedingResultView rendert.
|
|
await page.goto('/wuerfe/w-kruemel')
|
|
await expect(page.getByRole('heading', { name: 'Wurf K' })).toBeVisible()
|
|
await expect(page.getByText(tl.detail.expectedColors).first()).toBeVisible()
|
|
|
|
// Genotyp-Detail-Tabelle ausklappen.
|
|
await page.getByRole('button', { name: de.pages.genetik.showGenotypes }).click()
|
|
|
|
// Scroll-Wrapper und Tabelle müssen vorhanden und sichtbar sein.
|
|
const wrapper = page.locator('.genotype-table-scroll').first()
|
|
await expect(wrapper).toBeVisible()
|
|
await expect(wrapper.locator('.genotype-table')).toBeVisible()
|
|
|
|
// Wrapper ist selbst scrollbar (Tabelle breiter als der sichtbare Bereich).
|
|
const wrapperScrollable = await wrapper.evaluate(
|
|
(el) => el.scrollWidth > el.clientWidth,
|
|
)
|
|
expect(wrapperScrollable).toBe(true)
|
|
|
|
// Die Seite selbst darf NICHT breiter als der Viewport sein.
|
|
const pageOverflow = await page.evaluate(
|
|
() => document.documentElement.scrollWidth > document.documentElement.clientWidth,
|
|
)
|
|
expect(pageOverflow).toBe(false)
|
|
})
|
|
|
|
test('Desktop: Genotyp-Detail-Tabelle zeigt Wrapper auch auf breitem Viewport', async ({
|
|
page,
|
|
}, testInfo) => {
|
|
skipUnlessMock()
|
|
if (testInfo.project.name !== 'desktop') return
|
|
|
|
await page.goto('/wuerfe/w-kruemel')
|
|
await expect(page.getByText(tl.detail.expectedColors).first()).toBeVisible()
|
|
await page.getByRole('button', { name: de.pages.genetik.showGenotypes }).click()
|
|
|
|
await expect(page.locator('.genotype-table-scroll').first()).toBeVisible()
|
|
await expect(page.locator('.genotype-table').first()).toBeVisible()
|
|
})
|