diff --git a/e2e/src/screenshots/analyze-deps.ts b/e2e/src/screenshots/analyze-deps.ts index f20fa4bc53..9b5136d488 100644 --- a/e2e/src/screenshots/analyze-deps.ts +++ b/e2e/src/screenshots/analyze-deps.ts @@ -222,8 +222,8 @@ export function analyzeAffectedRoutes(changedFiles: string[]): AnalysisResult { const pages = findAffectedPages(resolvedChanged, reverseGraph); - const affectedPages = [...pages].sort(); - const affectedRoutes = [...new Set(affectedPages.map(pageFileToRoute))].sort(); + const affectedPages = [...pages].toSorted(); + const affectedRoutes = [...new Set(affectedPages.map((f) => pageFileToRoute(f)))].toSorted(); return { affectedPages, affectedRoutes }; } @@ -234,7 +234,7 @@ if (process.argv[1]?.endsWith('analyze-deps.ts') || process.argv[1]?.endsWith('a if (files.length === 0) { console.log('Usage: analyze-deps.ts ...'); console.log('Files should be relative to the repo root (e.g. web/src/lib/components/Button.svelte)'); - process.exit(1); + throw new Error('No files provided'); } const result = analyzeAffectedRoutes(files); diff --git a/e2e/src/screenshots/compare.ts b/e2e/src/screenshots/compare.ts index 6987d02793..ae8fad6b58 100644 --- a/e2e/src/screenshots/compare.ts +++ b/e2e/src/screenshots/compare.ts @@ -15,13 +15,7 @@ import { PNG } from 'pngjs'; // based on the approach from the pixelmatch library to avoid adding a new dependency. // The e2e package already has pngjs. -function pixelMatch( - img1Data: Uint8Array, - img2Data: Uint8Array, - diffData: Uint8Array, - width: number, - height: number, -): number { +function pixelMatch(img1Data: Uint8Array, img2Data: Uint8Array, diffData: Uint8Array): number { let diffCount = 0; for (let i = 0; i < img1Data.length; i += 4) { @@ -79,14 +73,12 @@ export function compareScreenshots(baseDir: string, prDir: string, outputDir: st const baseFiles = existsSync(baseDir) ? new Set(readdirSync(baseDir).filter((f) => f.endsWith('.png'))) : new Set(); - const prFiles = existsSync(prDir) - ? new Set(readdirSync(prDir).filter((f) => f.endsWith('.png'))) - : new Set(); + const prFiles = existsSync(prDir) ? new Set(readdirSync(prDir).filter((f) => f.endsWith('.png'))) : new Set(); const allNames = new Set([...baseFiles, ...prFiles]); const results: ComparisonResult[] = []; - for (const fileName of [...allNames].sort()) { + for (const fileName of [...allNames].toSorted()) { const name = basename(fileName, '.png'); const basePath = join(baseDir, fileName); const prPath = join(prDir, fileName); @@ -123,13 +115,7 @@ export function compareScreenshots(baseDir: string, prDir: string, outputDir: st const diffPng = new PNG({ width, height }); const totalPixels = width * height; - const diffPixels = pixelMatch( - normalizedBase, - normalizedPr, - diffPng.data as unknown as Uint8Array, - width, - height, - ); + const diffPixels = pixelMatch(normalizedBase, normalizedPr, diffPng.data as unknown as Uint8Array); const diffImagePath = join(outputDir, `${name}-diff.png`); writeFileSync(diffImagePath, PNG.sync.write(diffPng)); @@ -194,12 +180,12 @@ export function generateMarkdownReport(results: ComparisonResult[]): string { md += '|------|--------|--------|\n'; for (const result of changed) { - if (!result.baseExists) { - md += `| ${result.name} | New | - |\n`; - } else if (!result.prExists) { - md += `| ${result.name} | Removed | - |\n`; - } else { + if (result.baseExists && result.prExists) { md += `| ${result.name} | Changed | ${result.changePercent.toFixed(1)}% |\n`; + } else if (result.prExists) { + md += `| ${result.name} | New | - |\n`; + } else { + md += `| ${result.name} | Removed | - |\n`; } } @@ -216,19 +202,19 @@ export function generateMarkdownReport(results: ComparisonResult[]): string { return md; } +function imgTag(filePath: string | null, alt: string): string { + if (!filePath || !existsSync(filePath)) { + return `
${alt} not available
`; + } + const data = readFileSync(filePath); + return `${alt}`; +} + /** Generate an HTML report with embedded base64 images for the artifact. */ export function generateHtmlReport(results: ComparisonResult[]): string { const changed = results.filter((r) => r.changePercent > 0.1); const unchanged = results.filter((r) => r.changePercent <= 0.1); - function imgTag(filePath: string | null, alt: string): string { - if (!filePath || !existsSync(filePath)) { - return `
${alt} not available
`; - } - const data = readFileSync(filePath); - return `${alt}`; - } - let html = ` @@ -320,8 +306,7 @@ if (process.argv[1]?.endsWith('compare.ts') || process.argv[1]?.endsWith('compar const [baseDir, prDir, outputDir] = process.argv.slice(2); if (!baseDir || !prDir || !outputDir) { - console.log('Usage: compare.ts '); - process.exit(1); + throw new Error('Usage: compare.ts '); } const resolvedOutputDir = resolve(outputDir); diff --git a/e2e/src/screenshots/run-scenarios.ts b/e2e/src/screenshots/run-scenarios.ts index 5525bb61d2..6e1a849215 100644 --- a/e2e/src/screenshots/run-scenarios.ts +++ b/e2e/src/screenshots/run-scenarios.ts @@ -82,12 +82,17 @@ for (const scenario of allScenarios) { if (scenario.mocks.includes('timeline')) { const testContext = new TimelineTestContext(); testContext.adminId = adminUserId; - await setupTimelineMockApiRoutes(context, timelineData, { - albumAdditions: [], - assetDeletions: [], - assetArchivals: [], - assetFavorites: [], - }, testContext); + await setupTimelineMockApiRoutes( + context, + timelineData, + { + albumAdditions: [], + assetDeletions: [], + assetArchivals: [], + assetFavorites: [], + }, + testContext, + ); } if (scenario.mocks.includes('memory')) { @@ -118,10 +123,9 @@ for (const scenario of allScenarios) { // Wait for loading spinners to disappear await page - .waitForFunction( - () => document.querySelectorAll('[data-testid="loading-spinner"]').length === 0, - { timeout: 10_000 }, - ) + .waitForFunction(() => document.querySelectorAll('[data-testid="loading-spinner"]').length === 0, { + timeout: 10_000, + }) .catch(() => {}); // Wait for animations/transitions to settle diff --git a/web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte b/web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte index 03c81edb5d..2bcf21be95 100644 --- a/web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte +++ b/web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte @@ -50,7 +50,10 @@ -