Add screenshot tests

2026-05-26 23:26:15 +00:00 · 2026-05-08 20:24:28 +02:00
parent ac26e6c3cb
commit 29ae67427a
23 changed files with 456 additions and 17 deletions
--- a/tests/details_visual.spec.ts
+++ b/tests/details_visual.spec.ts
@@ -0,0 +1,138 @@
+import {expect, test} from '@playwright/test';
+import dedent from 'dedent';
+import * as fs from 'fs';
+import {blockTracking, mockGedcomResponse} from './helpers';
+
+test.describe('Details panel visual validation @visual', () => {
+  test.beforeEach(async ({context}) => {
+    await blockTracking(context);
+  });
+
+  test('Complex Names Test', async ({page, context}) => {
+    const complexNameGedcom = dedent`
+      0 HEAD
+      1 GEDC
+      2 VERS 5.5.1
+      2 FORM Lineage-Linked
+      1 CHAR UTF-8
+      0 @I1@ INDI
+      1 NAME Dr. Bonifacy "Boni" /Gibbs/ III
+      2 NPFX Dr.
+      2 GIVN Bonifacy
+      2 NICK Boni
+      2 SURN Gibbs
+      2 NSFX III
+      2 _RUFNAME Bonifacy
+      1 SEX M
+      1 FAMS @F1@
+      0 @F1@ FAM
+      1 HUSB @I1@
+      0 TRLR
+    `;
+
+    await mockGedcomResponse(context, complexNameGedcom);
+
+    await page.goto('/#/view?url=https://example.org/family.ged');
+    const sidebar = page.locator('#sidebar');
+    await sidebar.waitFor();
+    await expect(sidebar).toHaveScreenshot('details-complex-name.png');
+  });
+
+  test('Image / Photo Rendering Test', async ({page, context}) => {
+    const photoGedcom = dedent`
+      0 HEAD
+      1 GEDC
+      2 VERS 5.5.1
+      2 FORM Lineage-Linked
+      1 CHAR UTF-8
+      0 @I1@ INDI
+      1 NAME Bonifacy /Gibbs/
+      1 SEX M
+      1 FAMS @F1@
+      1 OBJE @O1@
+      0 @O1@ OBJE
+      1 FILE http://example.org/photos/I1.jpg
+      2 FORM jpeg
+      0 @F1@ FAM
+      1 HUSB @I1@
+      0 TRLR
+    `;
+
+    await mockGedcomResponse(context, photoGedcom);
+
+    await context.route('**/photos/I1.jpg', async (route) => {
+      const imageBuffer = fs.readFileSync(
+        'docker/examples/photos/photos/I1.jpg',
+      );
+      await route.fulfill({
+        status: 200,
+        contentType: 'image/jpeg',
+        body: imageBuffer,
+      });
+    });
+
+    await page.goto('/#/view?url=https://example.org/family.ged');
+    const sidebar = page.locator('#sidebar');
+    await sidebar.waitFor();
+
+    // Wait for image loading to complete
+    const img = sidebar.locator('img').first();
+    await img.waitFor({state: 'visible'});
+    await img.evaluate((image) => {
+      return new Promise((resolve, reject) => {
+        if ((image as HTMLImageElement).complete) resolve(true);
+        image.addEventListener('load', () => resolve(true));
+        image.addEventListener('error', () =>
+          reject(new Error('Image failed to load')),
+        );
+      });
+    });
+
+    await expect(sidebar).toHaveScreenshot('details-photo-render.png');
+  });
+
+  test('Custom Facts & Citations Test', async ({page, context}) => {
+    const customFactsGedcom = dedent`
+      0 HEAD
+      1 GEDC
+      2 VERS 5.5.1
+      2 FORM Lineage-Linked
+      1 CHAR UTF-8
+      0 @I1@ INDI
+      1 NAME Bonifacy /Gibbs/
+      1 SEX M
+      1 FAMS @F1@
+      1 FACT Custom fact data
+      2 TYPE Custom Fact Type
+      2 SOUR @S1@
+      3 PAGE 42
+      3 DATA
+      4 DATE 12 JAN 1850
+      2 NOTE This is a note nested under a custom fact.
+      1 BIRT
+      2 DATE 1 JAN 1800
+      2 PLAC Paris, France
+      2 SOUR @S1@
+      3 PAGE 10
+      2 NOTE Birth event note.
+      1 DEAT
+      2 DATE 31 DEC 1880
+      2 PLAC London, UK
+      1 NOTE This is a top-level note for the individual.
+      0 @S1@ SOUR
+      1 TITL Great Genealogy Book
+      1 AUTH John Doe
+      1 PUBL London Publishing, 1890
+      0 @F1@ FAM
+      1 HUSB @I1@
+      0 TRLR
+    `;
+
+    await mockGedcomResponse(context, customFactsGedcom);
+
+    await page.goto('/#/view?url=https://example.org/family.ged');
+    const sidebar = page.locator('#sidebar');
+    await sidebar.waitFor();
+    await expect(sidebar).toHaveScreenshot('details-events-sources.png');
+  });
+});