fete/frontend/src/components/__tests__/EventList.spec.ts

import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
import { mount } from '@vue/test-utils'
import { createRouter, createMemoryHistory } from 'vue-router'
import EventList from '../EventList.vue'

const router = createRouter({
  history: createMemoryHistory(),
  routes: [
    { path: '/', component: { template: '<div />' } },
    { path: '/events/:eventToken', name: 'event', component: { template: '<div />' } },
  ],
})

// Fixed "now": Wednesday, 2026-03-11 12:00
const NOW = new Date(2026, 2, 11, 12, 0, 0)

const mockEvents = [
  { eventToken: 'past-1', title: 'Past Event', dateTime: '2026-03-01T10:00:00' },
  { eventToken: 'later-1', title: 'Later Event', dateTime: '2027-06-15T10:00:00' },
  { eventToken: 'today-1', title: 'Today Event', dateTime: '2026-03-11T18:00:00' },
  { eventToken: 'week-1', title: 'This Week Event', dateTime: '2026-03-13T10:00:00' },
  { eventToken: 'nextweek-1', title: 'Next Week Event', dateTime: '2026-03-16T10:00:00' },
]

vi.mock('../../composables/useEventStorage', () => ({
  isValidStoredEvent: (e: unknown) => {
    if (typeof e !== 'object' || e === null) return false
    const obj = e as Record<string, unknown>
    return typeof obj.eventToken === 'string' && obj.eventToken.length > 0
      && typeof obj.title === 'string' && obj.title.length > 0
      && typeof obj.dateTime === 'string' && obj.dateTime.length > 0
  },
  useEventStorage: () => ({
    getStoredEvents: () => mockEvents,
    removeEvent: vi.fn(),
  }),
}))

vi.mock('../../composables/useRelativeTime', () => ({
  formatRelativeTime: (dateTime: string) => {
    if (dateTime.includes('03-01')) return '10 days ago'
    if (dateTime.includes('06-15')) return 'in 1 year'
    if (dateTime.includes('03-11')) return 'in 6 hours'
    if (dateTime.includes('03-13')) return 'in 2 days'
    if (dateTime.includes('03-16')) return 'in 5 days'
    return 'sometime'
  },
}))

function mountList() {
  return mount(EventList, {
    global: { plugins: [router] },
  })
}

describe('EventList', () => {
  beforeEach(() => {
    vi.useFakeTimers()
    vi.setSystemTime(NOW)
  })

  afterEach(() => {
    vi.useRealTimers()
  })

  it('renders section headers for each non-empty section', () => {
    const wrapper = mountList()
    const headers = wrapper.findAll('.section-header')
    expect(headers).toHaveLength(5)
    expect(headers[0]!.text()).toBe('Today')
    expect(headers[1]!.text()).toBe('This Week')
    expect(headers[2]!.text()).toBe('Next Week')
    expect(headers[3]!.text()).toBe('Later')
    expect(headers[4]!.text()).toBe('Past')
  })

  it('renders events within their correct sections', () => {
    const wrapper = mountList()
    const sections = wrapper.findAll('.event-section')
    expect(sections).toHaveLength(5)

    expect(sections[0]!.text()).toContain('Today Event')
    expect(sections[1]!.text()).toContain('This Week Event')
    expect(sections[2]!.text()).toContain('Next Week Event')
    expect(sections[3]!.text()).toContain('Later Event')
    expect(sections[4]!.text()).toContain('Past Event')
  })

  it('renders all valid events as cards', () => {
    const wrapper = mountList()
    const cards = wrapper.findAll('.event-card')
    expect(cards).toHaveLength(5)
  })

  it('marks past events with isPast class', () => {
    const wrapper = mountList()
    const pastSection = wrapper.findAll('.event-section')[4]!
    const pastCards = pastSection.findAll('.event-card')
    expect(pastCards).toHaveLength(1)
    expect(pastCards[0]!.classes()).toContain('event-card--past')
  })

  it('does not mark non-past events with isPast class', () => {
    const wrapper = mountList()
    const todaySection = wrapper.findAll('.event-section')[0]!
    const cards = todaySection.findAll('.event-card')
    expect(cards[0]!.classes()).not.toContain('event-card--past')
  })

  it('sections have aria-label attributes', () => {
    const wrapper = mountList()
    const sections = wrapper.findAll('section')
    expect(sections[0]!.attributes('aria-label')).toBe('Today')
    expect(sections[1]!.attributes('aria-label')).toBe('This Week')
    expect(sections[2]!.attributes('aria-label')).toBe('Next Week')
    expect(sections[3]!.attributes('aria-label')).toBe('Later')
    expect(sections[4]!.attributes('aria-label')).toBe('Past')
  })

  it('does not render date subheader in "Today" section', () => {
    const wrapper = mountList()
    const todaySection = wrapper.findAll('.event-section')[0]!
    expect(todaySection.find('.date-subheader').exists()).toBe(false)
  })

  it('renders date subheaders in non-today sections', () => {
    const wrapper = mountList()
    const thisWeekSection = wrapper.findAll('.event-section')[1]!
    expect(thisWeekSection.find('.date-subheader').exists()).toBe(true)

    const nextWeekSection = wrapper.findAll('.event-section')[2]!
    expect(nextWeekSection.find('.date-subheader').exists()).toBe(true)

    const laterSection = wrapper.findAll('.event-section')[3]!
    expect(laterSection.find('.date-subheader').exists()).toBe(true)

    const pastSection = wrapper.findAll('.event-section')[4]!
    expect(pastSection.find('.date-subheader').exists()).toBe(true)
  })
})