53 lines
2.2 KiB
React
53 lines
2.2 KiB
React
import { describe, it, expect } from 'vitest'
|
|
import { render } from '@testing-library/react'
|
|
import { readFileSync } from 'fs'
|
|
import { fileURLToPath } from 'url'
|
|
import { dirname, join } from 'path'
|
|
import PhotoBand from './PhotoBand'
|
|
|
|
const __dirname = dirname(fileURLToPath(import.meta.url))
|
|
|
|
describe('PhotoBand', () => {
|
|
it('renders nothing when there are no images', () => {
|
|
const { container } = render(<PhotoBand images={[]} />)
|
|
expect(container.querySelector('.photo-band')).toBeNull()
|
|
})
|
|
|
|
// The CSS animation translates the track by -50%. If the sequence is not
|
|
// rendered exactly twice, the loop "jumps" instead of being seamless.
|
|
it('renders the image sequence exactly twice for a seamless loop', () => {
|
|
const images = ['/a.webp', '/b.webp', '/c.webp']
|
|
const { container } = render(<PhotoBand images={images} />)
|
|
const rendered = [...container.querySelectorAll('.photo-band-track img')].map(img =>
|
|
img.getAttribute('src')
|
|
)
|
|
|
|
expect(rendered).toHaveLength(images.length * 2)
|
|
// First half and second half must be identical and in original order.
|
|
expect(rendered.slice(0, images.length)).toEqual(images)
|
|
expect(rendered.slice(images.length)).toEqual(images)
|
|
})
|
|
|
|
it('keeps the duplication invariant for any non-empty image list', () => {
|
|
for (const n of [1, 2, 4, 7]) {
|
|
const images = Array.from({ length: n }, (_, i) => `/img-${i}.webp`)
|
|
const { container } = render(<PhotoBand images={images} />)
|
|
const count = container.querySelectorAll('.photo-band-track img').length
|
|
expect(count).toBe(n * 2)
|
|
}
|
|
})
|
|
|
|
// Regression guard for the freeze bug: `width: auto` made the track width
|
|
// depend on image decode timing, so before images loaded the track had ~0
|
|
// width and translateX(-50%) appeared frozen. The track image must have a
|
|
// deterministic width that does not depend on the loaded image.
|
|
it('does not use width:auto for band images (freeze-bug guard)', () => {
|
|
const css = readFileSync(join(__dirname, '..', 'pages', 'Home.css'), 'utf-8')
|
|
const imgRule = css.match(/\.photo-band-track img\s*\{([^}]*)\}/)
|
|
expect(imgRule).not.toBeNull()
|
|
const body = imgRule[1]
|
|
expect(body).not.toMatch(/width:\s*auto/)
|
|
expect(body).toMatch(/width:\s*\d/)
|
|
})
|
|
})
|