feat(exporter): 섹션 엣지 케이스 보강(공백 제거/줄바꿈 토큰/CTA) + 테스트

2025-11-14 23:15:05 +09:00
parent a476756a6c
commit 4b9627d4ee
3 changed files with 115 additions and 10 deletions
@@ -0,0 +1,57 @@
+import { describe, it, expect } from 'vitest'
+import { exportPage } from '@/lib/exporter/html'
+import { pageSchema, type Page } from '@/lib/schema/page'
+
+function makePage(overrides: Partial<Page> = {}): Page {
+  const base: Page = {
+    title: 'Edge',
+    locale: 'en',
+    theme: { primaryColor: '#2563eb', fontFamily: 'Inter' },
+    sections: [
+      { type: 'features', props: { items: ['One', '   ', '   ', 'Two'] } },
+      { type: 'benefits', props: { items: ['A', '   ', '   ', 'B'] } },
+      { type: 'faq', props: { items: [
+        { q: '  ', a: '   ' },
+        { q: 'Valid Q', a: '   ' },
+        { q: 'Another', a: 'Answer' },
+      ] } },
+      { type: 'testimonials', props: { items: [
+        { author: '  ', quote: '   ' },
+        { author: 'Jane', quote: '  Great product   ' },
+      ] } },
+    ] as Page['sections'],
+    form: { actionUrl: '', fields: [], spamProtection: { honeypotFieldName: '_hp', minSubmitSeconds: 2 } },
+    analytics: { ga4MeasurementId: '', metaPixelId: '', customHeadHtml: '' },
+    seo: { title: 't', description: 'd' },
+  }
+  return pageSchema.parse({ ...base, ...overrides })
+}
+
+describe('Exporter - sections edge cases', () => {
+  it('filters out whitespace-only items and keeps valid ones', () => {
+    const out = exportPage(makePage())
+    const html = out.html
+
+    // features: only One, Two
+    expect(html).toContain('<li class="feature-item">One</li>')
+    expect(html).toContain('<li class="feature-item">Two</li>')
+    expect(html).not.toMatch(/<li class="feature-item"><\/li>/)
+
+    // benefits: only A, B
+    expect(html).toContain('<li class="benefit-item">A</li>')
+    expect(html).toContain('<li class="benefit-item">B</li>')
+
+    // faq: drop fully empty, keep items even if answer empty when question is valid
+    expect(html).toContain('<h3 class="faq-q">Valid Q</h3>')
+    // testimonials: drop fully empty, keep trimmed quote
+    expect(html).toContain('<blockquote>“Great product”</blockquote>')
+  })
+
+  it('adds word-break tokens to avoid overflow for long words', () => {
+    const out = exportPage(makePage())
+    const css = out.css
+    expect(css).toMatch(/\.feature-item\{[\s\S]*(?:word-break:break-word|overflow-wrap:anywhere)/i)
+    expect(css).toMatch(/\.benefit-item\{[\s\S]*(?:word-break:break-word|overflow-wrap:anywhere)/i)
+    expect(css).toMatch(/\.testimonial blockquote\{[\s\S]*(?:word-break:break-word|overflow-wrap:anywhere)/i)
+  })
+})