// @vitest-environment happy-dom
import { describe, it, expect } from 'vitest'

import GalleryItem from '../../src/components/gallery/GalleryItem.vue'
import { freshPinia, mountComponent } from '../support/mountComponent.js'

describe('GalleryItem', () => {
  const image = {
    id: 7, sha256: 'a'.repeat(64), mime: 'image/jpeg',
    width: 100, height: 100,
    thumbnail_url: '/images/thumbs/aa/abc.jpg', artist: null,
  }

  it('reveals the thumbnail only once it has loaded, so tiles fade in individually', async () => {
    const pinia = freshPinia()
    const w = mountComponent(GalleryItem, { props: { image }, pinia })
    const img = w.find('img')
    expect(img.exists()).toBe(true)

    // Pre-load: the tile must NOT be revealed, so it can fade in when its
    // own thumbnail lands rather than pop together with its API batch.
    expect(img.classes()).not.toContain('is-loaded')

    await img.trigger('load')

    expect(img.classes()).toContain('is-loaded')
  })
})