forked/topola-viewer
1
0
Fork 0
mirror of https://github.com/PeWu/topola-viewer.git synced 2026-05-26 23:26:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add screenshot tests

Browse Source
This commit is contained in:
Przemek Więch
2026-05-08 20:24:28 +02:00
parent ac26e6c3cb
commit 29ae67427a
23 changed files with 456 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
tests/config_visual.spec.ts Normal file
View File

@@ -0,0 +1,59 @@
import {expect, test} from '@playwright/test';
import {setupGedcomRoute} from './helpers';
test.describe('Configurations Integration @visual', () => {
test.beforeEach(async ({page, context}) => {
await setupGedcomRoute(context);
await page.goto('/#/view?url=https://example.org/family.ged');
// Wait for the sidebar and the main content container to be visible.
const sidebar = page.locator('#sidebar');
const mainContent = page.locator('#content');
await sidebar.waitFor();
await mainContent.waitFor();
// Switch to the Settings/Config tab in the side panel
await page.getByText('Settings', {exact: true}).click();
});
test('Default Configuration (State 1)', async ({page}) => {
// Assert the Default Configuration (State 1).
await expect(page).toHaveScreenshot('config-state-default.png');
});
test('Sex Colors & No IDs Configuration (State 2)', async ({page}) => {
// Locate the section containers inside form.details specifically to avoid Info tab ambiguity.
const colorsSection = page
.locator('form.details .item')
.filter({hasText: 'Colors'});
const idsSection = page
.locator('form.details .item')
.filter({hasText: 'IDs'});
// Toggle "by sex" colors and "hide" IDs.
await colorsSection.getByText('by sex').click();
await idsSection.getByText('hide').click();
// Wait a brief moment for SVG rendering to update.
await page.waitForTimeout(300);
await expect(page).toHaveScreenshot('config-state-gender-no-ids.png');
});
test('Minimalist Configuration (State 3)', async ({page}) => {
// Locate the section containers inside form.details specifically to avoid Info tab ambiguity.
const colorsSection = page
.locator('form.details .item')
.filter({hasText: 'Colors'});
const sexSection = page
.locator('form.details .item')
.filter({hasText: 'Sex'});
// Toggle "none" colors and "hide" sex labels.
await colorsSection.getByText('none').click();
await sexSection.getByText('hide').click();
// Wait a brief moment for SVG rendering to update.
await page.waitForTimeout(300);
await expect(page).toHaveScreenshot('config-state-minimalist.png');
});
});