andras/life-towers
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

.

Browse source
This commit is contained in:
Andras Schmelczer 2026-05-29 08:12:35 +01:00
parent f74ee43cb4
commit e2a60e71a3
30 changed files with 585 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

50
frontend/e2e/visuals.spec.ts
View file

@ -7,8 +7,15 @@ import { test } from '@playwright/test';
test.describe('Life Towers visuals', () => {
test('capture key UI states', async ({ page }) => {
await page.goto('/');
await page.waitForSelector('text=Add a new page to get started!', { timeout: 15000 });
await page.screenshot({ path: 'visuals/01-empty-state.png', fullPage: true });
await page.waitForSelector('text=Welcome to Life Towers', { timeout: 15000 });
await page.waitForTimeout(350); // let the welcome modal finish fade-in
await page.screenshot({ path: 'visuals/01-welcome-modal.png', fullPage: true });
// Dismiss the welcome modal with Start fresh, then continue.
await page.getByRole('button', { name: 'Start fresh' }).click();
await page.waitForSelector('section.modal', { state: 'detached' });
await page.screenshot({ path: 'visuals/01b-empty-state-after-dismiss.png', fullPage: true });
// Open the page dropdown (without creating a page yet).
await page.locator('lt-select-add .top').first().click();
@ -26,7 +33,7 @@ test.describe('Life Towers visuals', () => {
await page.locator('img[alt="Add tower"]').click();
await page.waitForSelector('section.modal.active');
await page.waitForTimeout(350);
await page.locator('input[placeholder="Tower name…"]').fill('Reading');
await page.locator('input[placeholder="New tower"]').fill('Reading');
await page.screenshot({ path: 'visuals/03-new-tower-modal.png', fullPage: true });
await page.locator('lt-tower-settings button[type="submit"]').click();
await page.waitForSelector('section.modal', { state: 'detached' });
@ -100,7 +107,7 @@ test.describe('Life Towers visuals', () => {
await page.locator('img[alt="Add tower"]').click();
await page.waitForSelector('section.modal.active');
await page.waitForTimeout(350);
await page.locator('input[placeholder="Tower name…"]').fill('Side projects');
await page.locator('input[placeholder="New tower"]').fill('Side projects');
await page.locator('lt-tower-settings button[type="submit"]').click();
await page.waitForSelector('section.modal', { state: 'detached' });
await page.waitForTimeout(300);
@ -157,4 +164,39 @@ test.describe('Life Towers visuals', () => {
await page.waitForTimeout(350);
await page.screenshot({ path: 'visuals/11-settings-modal.png', fullPage: true });
});
test('"Try an example" populates a sample page', async ({ page }) => {
await page.goto('/');
await page.waitForSelector('text=Welcome to Life Towers', { timeout: 15000 });
await page.waitForTimeout(350);
await page.getByRole('button', { name: 'Try an example' }).click();
await page.waitForSelector('section.modal', { state: 'detached' });
await page.waitForTimeout(1800);
await page.screenshot({ path: 'visuals/12-example-data.png', fullPage: true });
});
test('Mobile viewport — welcome + example + carousel', async ({ browser }) => {
const ctx = await browser.newContext({ viewport: { width: 390, height: 844 } });
const page = await ctx.newPage();
await page.goto((process.env['PLAYWRIGHT_BASE_URL'] ?? 'http://localhost:8000') + '/');
await page.waitForSelector('text=Welcome to Life Towers', { timeout: 15000 });
await page.waitForTimeout(350);
await page.screenshot({ path: 'visuals/13-mobile-welcome.png', fullPage: true });
await page.getByRole('button', { name: 'Try an example' }).click();
await page.waitForSelector('section.modal', { state: 'detached' });
await page.waitForTimeout(1800);
await page.screenshot({ path: 'visuals/14-mobile-populated.png', fullPage: true });
// Open the block-edit carousel for the first tower's first task.
await page.locator('lt-tasks .container').first().click();
await page.waitForTimeout(400);
await page.locator('lt-tasks .task-container').first().click();
await page.waitForSelector('section.modal.active');
await page.waitForTimeout(400);
await page.screenshot({ path: 'visuals/15-mobile-carousel.png', fullPage: true });
await ctx.close();
});
});