landing-builder/lib/exporter/image.responsive.options.test.ts

import { describe, it, expect } from 'vitest'
import { exportPage } from '@/lib/exporter/html'
import type { ExportOptions } from '@/lib/exporter/html'
import type { Page } from '@/lib/schema/page'

const basePage: Page = {
  title: 'Img Test',
  locale: 'en',
  theme: { primaryColor: '#0ea5e9', fontFamily: 'Inter' },
  sections: [
    { type: 'hero', props: { heading: 'Hero', subheading: '', imageUrl: 'https://example.com/hero.jpg' } },
  ],
  form: {
    actionUrl: '',
    fields: [],
    spamProtection: { honeypotFieldName: '_hp', minSubmitSeconds: 2 },
  },
  analytics: { ga4MeasurementId: '', metaPixelId: '', customHeadHtml: '' },
  seo: { title: 'T', description: 'D' },
}

describe('image responsive/export options', () => {
  it('applies fetchpriority when provided', () => {
    const options: ExportOptions = { imageLoading: 'eager', imageDecoding: 'async', imageFetchPriority: 'high' }
    const { html } = exportPage(basePage, options)
    expect(html).toMatch(/<img[^>]*fetchpriority="high"/)
  })

  it('applies srcset and sizes when provided', () => {
    const options: ExportOptions = {
      imageSrcset: 'https://example.com/hero.jpg 1x, https://example.com/hero@2x.jpg 2x',
      imageSizes: '(max-width: 640px) 100vw, 600px',
    }
    const { html } = exportPage(basePage, options)
    expect(html).toMatch(/<img[^>]*srcset="https:\/\/example.com\/hero.jpg 1x, https:\/\/example.com\/hero@2x.jpg 2x"/)
    expect(html).toMatch(/<img[^>]*sizes="\(max-width: 640px\) 100vw, 600px"/)
  })

  it('applies default sizes when srcset is provided and imageAutoSizes is true', () => {
    const options: ExportOptions = {
      imageSrcset: 'https://example.com/hero.jpg 1x, https://example.com/hero@2x.jpg 2x',
      imageAutoSizes: true,
    }
    const { html } = exportPage(basePage, options)
    expect(html).toMatch(/<img[^>]*srcset="https:\/\/example.com\/hero.jpg 1x, https:\/\/example.com\/hero@2x.jpg 2x"/)
    expect(html).toMatch(/<img[^>]*sizes="\(max-width: 640px\) 100vw, 600px"/)
  })

  it('does not include sizes when srcset is provided but imageAutoSizes is false and sizes not provided', () => {
    const options: ExportOptions = {
      imageSrcset: 'https://example.com/hero.jpg 1x, https://example.com/hero@2x.jpg 2x',
      imageAutoSizes: false,
    }
    const { html } = exportPage(basePage, options)
    expect(html).toMatch(/<img[^>]*srcset="https:\/\/example.com\/hero.jpg 1x, https:\/\/example.com\/hero@2x.jpg 2x"/)
    expect(html).not.toMatch(/<img[^>]*sizes="/)
  })

  it('applies preset sizes when imageSizesPreset is set (mobile-first)', () => {
    const options: ExportOptions = {
      imageSrcset: 'https://example.com/hero.jpg 1x, https://example.com/hero@2x.jpg 2x',
      imageSizesPreset: 'mobile-first',
    }
    const { html } = exportPage(basePage, options)
    expect(html).toMatch(/<img[^>]*sizes="\(max-width: 640px\) 100vw, 800px"/)
  })

  it('applies desktop-fixed preset when selected', () => {
    const options: ExportOptions = {
      imageSrcset: 'https://example.com/hero.jpg 1x, https://example.com/hero@2x.jpg 2x',
      imageSizesPreset: 'desktop-fixed',
    }
    const { html } = exportPage(basePage, options)
    expect(html).toMatch(/<img[^>]*sizes="1200px"/)
  })

  it('explicit imageSizes overrides presets and auto', () => {
    const options: ExportOptions = {
      imageSrcset: 'https://example.com/hero.jpg 1x, https://example.com/hero@2x.jpg 2x',
      imageAutoSizes: true,
      imageSizesPreset: 'desktop-fixed',
      imageSizes: '(max-width: 768px) 100vw, 700px',
    }
    const { html } = exportPage(basePage, options)
    expect(html).toMatch(/<img[^>]*sizes="\(max-width: 768px\) 100vw, 700px"/)
  })
})