import { readFileSync } from 'node:fs' import { fileURLToPath } from 'node:url' import { describe, expect, it } from 'vitest' const source = readFileSync( fileURLToPath(new URL('./AppStoreDetail.vue', import.meta.url)), 'utf8', ) const previewSource = readFileSync( fileURLToPath(new URL('./AppStorePreviewCard.vue', import.meta.url)), 'utf8', ) describe('AppStoreDetail contract', () => { it('renders an Apple-style product page with metadata and direct action', () => { expect(source).toContain('class="store-detail__toolbar"') expect(source).toContain('class="store-detail__hero"') expect(source).toContain('class="store-detail__facts"') expect(source).toContain('class="store-detail__whats-new"') expect(source).toContain("emit('action')") expect(source).toContain("emit('back')") expect(source).toContain("emit('share')") expect(source).toContain('') expect(source).toContain( "'store-detail__action--icon': action === 'installing'", ) expect(source).toContain("'store-detail__action--get': action === 'get'") expect(source).toMatch( /\.store-detail__hero \.store-detail__action--get\s*\{[^}]*min-width:\s*54px;[^}]*min-height:\s*30px;[^}]*height:\s*30px;/s, ) expect(source).toMatch( /\.store-detail__hero \.store-detail__action--icon\s*\{[^}]*width:\s*54px;[^}]*min-width:\s*54px;[^}]*min-height:\s*30px;[^}]*height:\s*30px;/s, ) expect(source).not.toContain(':has(') expect(previewSource).not.toContain('color-mix(') expect(source).toMatch( /\.store-detail\s*\{[^}]*padding:\s*var\(--sky-space-3\) 0 var\(--sky-space-6\)/s, ) }) it('renders five app-specific screenshot and information panels', () => { expect(source).toContain('class="store-detail__previews"') expect(source).toContain(' { expect(source).toContain('ref="previews"') expect(source).toContain('@scroll.passive="updateActivePreview"') expect(source).toContain('scrollToPreview(activePreviewIndex - 1)') expect(source).toContain('scrollToPreview(activePreviewIndex + 1)') expect(source).toContain('details.previousPreview') expect(source).toContain('details.nextPreview') expect(source).toContain('.store-detail__toolbar button:hover') }) })