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)
+ })
+})