8c3f8c74db
Feature/SW-3365 reduce upscaling of images (fix blurry images) * fix: handle when images are wider than 3:2 but rendered in a 3:2 container * use dimensions everywhere applicable * fall back to using <img sizes='auto' /> if possible * imageLoader: never nest * remove empty test file Approved-by: Anton Gunnarsson Approved-by: Matilda Landström
70 lines
1.9 KiB
TypeScript
70 lines
1.9 KiB
TypeScript
import { describe, it, expect } from 'vitest'
|
|
import { imageLoader } from './imageLoader'
|
|
describe('imageLoader', () => {
|
|
it('should generate the correct image URL for absolute URLs', () => {
|
|
const loader = imageLoader({ dimensions: { width: 800, height: 600 } })
|
|
const url = loader({
|
|
quality: 80,
|
|
src: 'https://example.com/image.jpg',
|
|
width: 800,
|
|
})
|
|
|
|
expect(url).toBe(
|
|
'https://img.scandichotels.com/.netlify/images?url=https://example.com/image.jpg&w=800&q=80'
|
|
)
|
|
})
|
|
|
|
it('should generate the correct image URL for relative URLs', () => {
|
|
const loader = imageLoader({ dimensions: { width: 800, height: 600 } })
|
|
const url = loader({
|
|
quality: 80,
|
|
src: '/image.jpg',
|
|
width: 800,
|
|
})
|
|
|
|
expect(url).toBe('/image.jpg?w=800&q=80')
|
|
})
|
|
|
|
it('should compensate for landscape 3:2 images', () => {
|
|
const loader = imageLoader({ dimensions: { width: 6000, height: 4000 } })
|
|
const url = loader({
|
|
src: '/image.jpg',
|
|
width: 400,
|
|
})
|
|
|
|
expect(url).toBe('/image.jpg?w=600')
|
|
})
|
|
|
|
it('should compensate for landscape ~3:2 images', () => {
|
|
const loader = imageLoader({ dimensions: { width: 7952, height: 5304 } })
|
|
const url = loader({
|
|
src: '/image.jpg',
|
|
width: 400,
|
|
})
|
|
|
|
expect(url).toBe('/image.jpg?w=600')
|
|
})
|
|
|
|
it('should compensate for standing 2:3 images', () => {
|
|
const loader = imageLoader({ dimensions: { width: 4000, height: 6000 } })
|
|
const url = loader({
|
|
src: '/image.jpg',
|
|
width: 800,
|
|
})
|
|
|
|
expect(url).toBe('/image.jpg?w=800')
|
|
})
|
|
|
|
it('should compensate for landscape 2:1 images', () => {
|
|
const loader = imageLoader({ dimensions: { width: 2000, height: 1000 } })
|
|
const url = loader({
|
|
src: '/image.jpg',
|
|
width: 800,
|
|
})
|
|
|
|
// used to fetch an image 800x400 image but we, probably, render it with a height of 533
|
|
|
|
expect(url).toBe('/image.jpg?w=1200')
|
|
})
|
|
})
|