Particles

frontend/test/e2e.test.ts

@@ -0,0 +1,213 @@
+import { describe, it, expect, vi, beforeAll } from 'vitest'
+
+// --- Mock queryCollection globally ---
+beforeAll(() => {
+  const mockFixedContent = [
+    { path: '/fixed/en/root', locale: 'en', collection: 'fixed' },
+    { path: '/fixed/es/root', locale: 'es', collection: 'fixed' },
+    { path: '/fixed/ca/root', locale: 'ca', collection: 'fixed' },
+    { path: '/fixed/en/contact', locale: 'en', collection: 'fixed' },
+  ]
+
+  const mockBlogItems = [
+    { path: '/blog/en/test', slug: 'test', title: 'First Post', date: '2026-03-18', description: 'Testing testing' },
+    { path: '/blog/en/upgrade', slug: 'upgrade', title: 'Upgrade Post', date: '2026-04-01', description: 'System upgraded' },
+    { path: '/blog/en/translator', slug: 'translator', title: 'Translator Post', date: '2026-05-15', description: 'Auto translation' },
+  ]
+
+  const mockArtItems = [
+    { path: '/art/en/nozt', slug: 'nozt', title: 'Nozt Art', date: '2026-04-14', thumb: '/art/nozt.jpg' },
+    { path: '/art/en/silang-3d', slug: 'silang-3d', title: 'Silang 3D', date: '2026-05-20', thumb: '/art/silang.jpg' },
+  ]
+
+  const mockProjectItems = [
+    { path: '/projects/en/dragonroll', slug: 'dragonroll', title: 'Dragonroll', description: 'RPG helper', date: '2026-01-01', tech: ['Nuxt', 'Vue'] },
+  ]
+
+  global.queryCollection = function queryCollection(collectionName: string) {
+    const items = {
+      fixed: mockFixedContent,
+      blog: mockBlogItems,
+      art: mockArtItems,
+      projects: mockProjectItems,
+    }[collectionName] || []
+
+    return {
+      path: (pathStr: string) => ({
+        first: () => Promise.resolve(items.find((i: any) => i.path === pathStr) || null),
+        all: () => Promise.resolve([items.find((i: any) => i.path === pathStr) || null].filter(Boolean)),
+      }),
+      where: (field: string, op: string, value: any) => {
+        let filtered = [...items]
+        if (op === 'LIKE') {
+          const pattern = value.replace(/\*/g, '').replace(/%/g, '')
+          filtered = items.filter((i: any) => i[field] && typeof i[field] === 'string' && i[field].startsWith(pattern))
+        }
+        return {
+          order: () => ({
+            all: () => Promise.resolve(filtered.sort((a: any, b: any) => {
+              if (a.date && b.date) return new Date(b.date).getTime() - new Date(a.date).getTime()
+              return 0
+            })),
+          }),
+          all: () => Promise.resolve(filtered),
+        }
+      },
+    }
+  }
+
+  global.useState = vi.fn(() => ({ value: [] as any[] }))
+})
+
+// --- Page components ---
+import { renderSuspended } from '@nuxt/test-utils/runtime'
+import IndexPage from '../app/pages/index.vue'
+import BlogListPage from '../app/pages/blog/index.vue'
+import ArtListPage from '../app/pages/art/index.vue'
+import ContactPage from '../app/pages/contact/index.vue'
+
+function getHtml(wrapper: any) {
+  return typeof wrapper.html === 'function' ? wrapper.html() : ''
+}
+
+// ======================
+// Home page tests
+// ======================
+
+describe('Home page (index)', () => {
+  it('renders table header with site navigation', async () => {
+    const wrapper = await renderSuspended(IndexPage, { shallow: false })
+    const html = getHtml(wrapper)
+    expect(html).toContain('ARANROIG')
+  })
+
+  it('renders hidden H1 title for accessibility', async () => {
+    const wrapper = await renderSuspended(IndexPage, { shallow: false })
+    const html = getHtml(wrapper)
+    expect(html).toContain('Aran Roig')
+  })
+
+  it('renders fixed layout wrapper', async () => {
+    const wrapper = await renderSuspended(IndexPage, { shallow: false })
+    const html = getHtml(wrapper)
+    expect(html).toContain('fixed-layout')
+  })
+
+  it('renders intro section', async () => {
+    const wrapper = await renderSuspended(IndexPage, { shallow: false })
+    const html = getHtml(wrapper)
+    expect(html).toContain('intro-section')
+  })
+
+  it('renders projects section with project cards', async () => {
+    const wrapper = await renderSuspended(IndexPage, { shallow: false })
+    const html = getHtml(wrapper)
+    // Verify Container component renders properly
+    expect(html).toContain('Container')
+  })
+
+  it('renders blog section', async () => {
+    const wrapper = await renderSuspended(IndexPage, { shallow: false })
+    const html = getHtml(wrapper)
+    expect(html).toContain('Blog Entries')
+  })
+
+  it('renders art gallery section', async () => {
+    const wrapper = await renderSuspended(IndexPage, { shallow: false })
+    const html = getHtml(wrapper)
+    expect(html).toContain('Art Gallery')
+  })
+
+  it('renders contact section', async () => {
+    const wrapper = await renderSuspended(IndexPage, { shallow: false })
+    const html = getHtml(wrapper)
+    expect(html).toContain('Contact')
+  })
+
+  it('renders footer component', async () => {
+    const wrapper = await renderSuspended(IndexPage, { shallow: false })
+    const html = getHtml(wrapper)
+    expect(html).toContain('tui-statusbar')
+  })
+
+  it('has scroll target anchors', async () => {
+    const wrapper = await renderSuspended(IndexPage, { shallow: false })
+    const html = getHtml(wrapper)
+    expect(html).toContain('scroll-blog')
+    expect(html).toContain('scroll-art')
+    expect(html).toContain('scroll-contact')
+  })
+
+  it('renders footer copyright text', async () => {
+    const wrapper = await renderSuspended(IndexPage, { shallow: false })
+    const html = getHtml(wrapper)
+    expect(html).toContain('2026 Aran Roig')
+  })
+})
+
+// ======================
+// Blog listing tests
+// ======================
+
+describe('Blog listing page', () => {
+  it('renders blog heading', async () => {
+    const wrapper = await renderSuspended(BlogListPage, { shallow: false })
+    const html = getHtml(wrapper)
+    expect(html).toContain('Blog Entries')
+  })
+
+  it('renders tui-list structure', async () => {
+    const wrapper = await renderSuspended(BlogListPage, { shallow: false })
+    const html = getHtml(wrapper)
+    expect(html).toContain('tui-list')
+  })
+
+  it('renders layout', async () => {
+    const wrapper = await renderSuspended(BlogListPage, { shallow: false })
+    const html = getHtml(wrapper)
+    expect(html).toContain('fixed-layout')
+  })
+})
+
+// ======================
+// Art listing tests
+// ======================
+
+describe('Art listing page', () => {
+  it('renders art gallery heading', async () => {
+    const wrapper = await renderSuspended(ArtListPage, { shallow: false })
+    const html = getHtml(wrapper)
+    expect(html).toContain('Art Gallery')
+  })
+
+  it('renders grid layout', async () => {
+    const wrapper = await renderSuspended(ArtListPage, { shallow: false })
+    const html = getHtml(wrapper)
+    expect(html).toContain('grid')
+  })
+
+  it('renders layout', async () => {
+    const wrapper = await renderSuspended(ArtListPage, { shallow: false })
+    const html = getHtml(wrapper)
+    expect(html).toContain('fixed-layout')
+  })
+})
+
+// ======================
+// Contact page tests
+// ======================
+
+describe('Contact page', () => {
+  it('renders contact heading', async () => {
+    const wrapper = await renderSuspended(ContactPage, { shallow: false })
+    const html = getHtml(wrapper)
+    expect(html).toContain('Contact')
+  })
+
+  it('renders layout', async () => {
+    const wrapper = await renderSuspended(ContactPage, { shallow: false })
+    const html = getHtml(wrapper)
+    expect(html).toContain('fixed-layout')
+    expect(html).toContain('tui-statusbar')
+  })
+})