aranroig.com/frontend/test/e2e.test.ts

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