u

tests/screenshot.spec.js

@@ -0,0 +1,51 @@
+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',
+];
+
+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');
+});