5f676ca43f
Adds a reusable FillSpace component to dashgui that fills the remaining viewport height between an aboveRef and optional belowRef, with a scrollable middle section. Supports an optional measureElement that is repeated top-to-bottom to fill the leftover space below children (rows are rendered first, units fill height - contentHeight). Includes mock page, docs wiring, and screenshot references.
54 lines
1.6 KiB
JavaScript
54 lines
1.6 KiB
JavaScript
import { test, expect } from '@playwright/test';
|
|
|
|
/**
|
|
* Screenshot tests for the GUI variations rendered by the harness
|
|
* (/screenshots.html). Every `data-shot` section becomes one reference image;
|
|
* interactive states (EditablePanelTile editing/dirty) are driven here.
|
|
*
|
|
* First run generates the reference images (and passes). After that the test
|
|
* fails on any visual drift; see the actual/diff images in test-results/.
|
|
* Regenerate intentionally changed references with:
|
|
* npm run test:screenshots:update
|
|
*/
|
|
const STATIC_SECTIONS = [
|
|
'pills',
|
|
'textfields',
|
|
'tiles',
|
|
'panels-basic',
|
|
'panels-busy',
|
|
'lists-ready',
|
|
'lists-empty',
|
|
'lists-loading',
|
|
'lists-failed',
|
|
'lists-no-actions',
|
|
'fillspace',
|
|
'fillspace-measure',
|
|
];
|
|
|
|
test.beforeEach(async ({ page }) => {
|
|
await page.goto('/screenshots.html');
|
|
});
|
|
|
|
for (const id of STATIC_SECTIONS) {
|
|
test(`screenshot ${id}`, async ({ page }) => {
|
|
await expect(page.locator(`[data-shot="${id}"]`)).toHaveScreenshot(
|
|
`${id}.png`,
|
|
);
|
|
});
|
|
}
|
|
|
|
test('editable tile: read, edit, dirty', async ({ page }) => {
|
|
const section = page.locator('[data-shot="editable"]');
|
|
|
|
// Read state — edit button visible, no ring.
|
|
await expect(section).toHaveScreenshot('editable-read.png');
|
|
|
|
// Editing state — clean ring, input focused, save/cancel buttons.
|
|
await section.getByRole('button', { name: 'Bearbeiten' }).click();
|
|
await expect(section).toHaveScreenshot('editable-editing.png');
|
|
|
|
// Dirty state — rose pending ring once the draft differs from the saved value.
|
|
await section.locator('input').fill('ACME GmbH 2');
|
|
await expect(section).toHaveScreenshot('editable-dirty.png');
|
|
});
|