diff --git a/frontend/src/components/gallery/GalleryGrid.vue b/frontend/src/components/gallery/GalleryGrid.vue index 29db64f..27ac70c 100644 --- a/frontend/src/components/gallery/GalleryGrid.vue +++ b/frontend/src/components/gallery/GalleryGrid.vue @@ -15,6 +15,19 @@ + + + diff --git a/frontend/test/components/galleryGrid.spec.js b/frontend/test/components/galleryGrid.spec.js new file mode 100644 index 0000000..5710a7a --- /dev/null +++ b/frontend/test/components/galleryGrid.spec.js @@ -0,0 +1,47 @@ +// @vitest-environment happy-dom +import { describe, it, expect } from 'vitest' +import { mount } from '@vue/test-utils' + +import GalleryGrid from '../../src/components/gallery/GalleryGrid.vue' +import { useGalleryStore } from '../../src/stores/gallery.js' +import { freshPinia } from '../support/mountComponent.js' + +const GIStub = { name: 'GalleryItem', props: ['image'], template: '
' } + +function mountGrid(pinia) { + return mount(GalleryGrid, { + global: { + plugins: [pinia], + stubs: { GalleryItem: GIStub, RouterLink: { template: '' } }, + }, + }) +} + +describe('GalleryGrid', () => { + it('renders a flat ranked list when there are no date groups (similar mode)', () => { + const pinia = freshPinia() + const store = useGalleryStore() + // similar-mode shape: images present, date_groups empty, no cursor. + store.images = [ + { id: 1, thumbnail_url: '/a' }, + { id: 2, thumbnail_url: '/b' }, + { id: 3, thumbnail_url: '/c' }, + ] + store.dateGroups = [] + const w = mountGrid(pinia) + expect(w.findAll('.gi').length).toBe(3) + }) + + it('renders grouped by date when date groups are present', () => { + const pinia = freshPinia() + const store = useGalleryStore() + store.images = [ + { id: 1, thumbnail_url: '/a' }, + { id: 2, thumbnail_url: '/b' }, + ] + store.dateGroups = [{ year: 2026, month: 6, image_ids: [1, 2] }] + const w = mountGrid(pinia) + expect(w.find('.fc-gallery-grid__date-header').exists()).toBe(true) + expect(w.findAll('.gi').length).toBe(2) + }) +})