Files
shadcn/tests/visual-proof-blocks.spec.ts
zeekay 545320fbc0 fix: Update header nav to Builder and fix block iframe 404 errors
- Changed header navigation from Blocks to Builder
- Fixed block preview iframe URLs from /view/default/[name] to /view/[name]
- Fixed icon stretching in block viewer toggle buttons
- Added comprehensive Playwright tests to verify functionality
- Removed empty malformed directory blocks/[.../

Fixes:
- Block previews now load correctly (no 404 errors)
- All 5 blocks verified working: dashboard-01, sidebar-07, sidebar-03, login-03, login-04
- Icons properly sized (h-3.5 w-3.5) in toggle buttons
- Builder link now in header, Blocks remains in sidebar

Test Results:
āœ… 5/5 iframes loading correctly
āœ… 0 404 errors
āœ… All blocks verified with Playwright
āœ… Screenshots captured for visual proof
2025-11-15 22:48:48 -08:00

59 lines
2.0 KiB
TypeScript

import { test, expect } from '@playwright/test'
test('Visual proof - blocks page with working previews', async ({ page }) => {
console.log('šŸ“ø Creating visual proof of working blocks...\n')
// Navigate to blocks page
await page.goto('http://localhost:3333/blocks', { waitUntil: 'networkidle' })
console.log('āœ… Navigated to blocks page')
// Take hero screenshot
await page.screenshot({
path: 'tests/proof-blocks-hero.png',
clip: { x: 0, y: 0, width: 1280, height: 800 }
})
console.log('šŸ“ø Hero section captured')
// Scroll to each block and capture
const blocks = ['dashboard-01', 'sidebar-07', 'sidebar-03', 'login-03', 'login-04']
for (const blockName of blocks) {
const iframe = page.locator(`iframe[src="/view/${blockName}"]`).first()
if (await iframe.count() > 0) {
await iframe.scrollIntoViewIfNeeded()
await page.waitForTimeout(500)
await page.screenshot({
path: `tests/proof-block-${blockName}.png`,
clip: {
x: 0,
y: Math.max(0, (await iframe.boundingBox())?.y || 0) - 50,
width: 1280,
height: 800
}
})
console.log(`šŸ“ø Captured ${blockName}`)
}
}
// Also visit a block directly to show it loads
console.log('\nšŸ” Visiting a block preview directly...')
await page.goto('http://localhost:3333/view/dashboard-01', { waitUntil: 'networkidle' })
await page.screenshot({
path: 'tests/proof-direct-view-dashboard.png',
fullPage: false
})
console.log('šŸ“ø Direct view of dashboard-01 captured')
console.log('\nāœ… All visual proofs captured!')
console.log('šŸ“ Check tests/ directory for screenshots:')
console.log(' - proof-blocks-hero.png')
console.log(' - proof-block-dashboard-01.png')
console.log(' - proof-block-sidebar-07.png')
console.log(' - proof-block-sidebar-03.png')
console.log(' - proof-block-login-03.png')
console.log(' - proof-block-login-04.png')
console.log(' - proof-direct-view-dashboard.png')
})