mirror of
https://github.com/hanzoai/shadcn.git
synced 2026-10-30 18:22:59 +00:00
zeekay
56dec4912c
Implemented comprehensive improvements to builder page: ā Loading States: - Skeleton cards during initial load (8 cards with pulsing animation) - Per-iframe loading spinners with "Loading preview..." text - Error states with retry buttons for failed iframes - Smooth fade-in animations (300ms opacity transition) - Minimum 200ms display time to prevent flashing ā Visual Design: - Rounded corners (rounded-lg) for modern look - Subtle shadows (shadow-sm) with hover increase (shadow-lg) - Smooth hover effects (scale-[1.02], bg-accent/5) - Better typography (text-base font-semibold for block names) - Category badges (outline variant) - Subcategory badges (secondary variant) - Improved spacing (p-4) and layout ā UX Improvements: - Header loading spinner during block fetch - Disabled input during loading - Dynamic count display ("Loading..." vs "X blocks") - Empty state with clear filter button - Proper error handling with retry mechanism ā Technical: - Removed lazy loading for eager iframe loading - Changed from aspect-video to aspect-[4/3] - Added min-h-[400px] for better previews - State management per iframe (loaded, error, showContent) - Proper cleanup with useEffect returns Note: Iframe content still not rendering - needs investigation of /view/[name] route
94 lines
2.9 KiB
TypeScript
94 lines
2.9 KiB
TypeScript
import { test, expect } from '@playwright/test'
|
|
|
|
test('Review builder page with scrolling screenshots', async ({ page }) => {
|
|
console.log('\nš BUILDER PAGE REVIEW TEST')
|
|
console.log('='.repeat(60))
|
|
|
|
// Navigate to builder page
|
|
await page.goto('http://localhost:3333/builder', {
|
|
waitUntil: 'domcontentloaded',
|
|
timeout: 30000
|
|
})
|
|
|
|
// Wait for blocks to load
|
|
await page.waitForSelector('iframe', { timeout: 10000 })
|
|
await page.waitForTimeout(3000) // Let iframes load
|
|
|
|
console.log('\nšø Capturing screenshots at different scroll positions...\n')
|
|
|
|
// 1. Top of page
|
|
await page.screenshot({
|
|
path: 'tests/review-builder-top.png',
|
|
fullPage: false
|
|
})
|
|
console.log('ā Captured: review-builder-top.png')
|
|
|
|
// 2. Scroll down 500px
|
|
await page.evaluate(() => window.scrollBy(0, 500))
|
|
await page.waitForTimeout(500)
|
|
await page.screenshot({
|
|
path: 'tests/review-builder-scroll-500.png',
|
|
fullPage: false
|
|
})
|
|
console.log('ā Captured: review-builder-scroll-500.png')
|
|
|
|
// 3. Scroll down 1000px (total 1500px)
|
|
await page.evaluate(() => window.scrollBy(0, 1000))
|
|
await page.waitForTimeout(500)
|
|
await page.screenshot({
|
|
path: 'tests/review-builder-scroll-1500.png',
|
|
fullPage: false
|
|
})
|
|
console.log('ā Captured: review-builder-scroll-1500.png')
|
|
|
|
// 4. Scroll down another 1000px (total 2500px)
|
|
await page.evaluate(() => window.scrollBy(0, 1000))
|
|
await page.waitForTimeout(500)
|
|
await page.screenshot({
|
|
path: 'tests/review-builder-scroll-2500.png',
|
|
fullPage: false
|
|
})
|
|
console.log('ā Captured: review-builder-scroll-2500.png')
|
|
|
|
// 5. Scroll to middle
|
|
await page.evaluate(() => window.scrollTo(0, document.body.scrollHeight / 2))
|
|
await page.waitForTimeout(500)
|
|
await page.screenshot({
|
|
path: 'tests/review-builder-middle.png',
|
|
fullPage: false
|
|
})
|
|
console.log('ā Captured: review-builder-middle.png')
|
|
|
|
// 6. Scroll to bottom
|
|
await page.evaluate(() => window.scrollTo(0, document.body.scrollHeight))
|
|
await page.waitForTimeout(500)
|
|
await page.screenshot({
|
|
path: 'tests/review-builder-bottom.png',
|
|
fullPage: false
|
|
})
|
|
console.log('ā Captured: review-builder-bottom.png')
|
|
|
|
// 7. Full page screenshot
|
|
await page.screenshot({
|
|
path: 'tests/review-builder-FULL.png',
|
|
fullPage: true
|
|
})
|
|
console.log('ā Captured: review-builder-FULL.png (complete page)')
|
|
|
|
// Get count of blocks
|
|
const blockCount = await page.locator('iframe').count()
|
|
const headerText = await page.locator('h1').textContent()
|
|
const countText = await page.locator('text=/\\d+ blocks/').textContent()
|
|
|
|
console.log('\n' + '='.repeat(60))
|
|
console.log('š PAGE ANALYSIS:')
|
|
console.log('='.repeat(60))
|
|
console.log(`Header: ${headerText}`)
|
|
console.log(`Count Display: ${countText}`)
|
|
console.log(`Actual Iframes: ${blockCount}`)
|
|
console.log('\nā
All screenshots captured in tests/ directory')
|
|
console.log('='.repeat(60))
|
|
|
|
expect(blockCount).toBeGreaterThanOrEqual(80)
|
|
})
|