feat: 이미지 최적화 2·3차(imageAutoSizes/imageSizesPreset) 및 문서/플랜 반영 (TDD)
- ExportOptions.imageAutoSizes 추가 및 기본 sizes 자동 적용 - ExportOptions.imageSizesPreset 추가(mobile-first/desktop-fixed) - 우선순위: imageSizes > preset > auto > none - 테스트 케이스 확장(image.responsive.options.test.ts) - README/MAIN_PLAN 업데이트
This commit is contained in:
@@ -35,4 +35,53 @@ describe('image responsive/export 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"/)
|
||||
})
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user