test(website): keep upcoming-events coverage when nothing is scheduled (Comfy-Org#15160)

*PR Created by the Glary-Bot Agent*

---

## Summary

The "Upcoming events" list on `/events` is derived from the wall clock,
so it empties out once the newest configured event ends — which silently
reduced every assertion about those rows to a no-op. This restores that
coverage in a form that does not depend on the calendar.

## Changes

- **What**:
- New `UpcomingEventsSection.test.ts` stubs the derived `upcomingEvents`
list (`vi.mock` + `importOriginal`) and covers what the e2e can no
longer see: one row per event, localized title/blurb/location/date, and
the streamed-vs-external link branch (`/events/{id}` vs the external
href with `target=_blank` + `rel`), including the zh-CN event-page href.
- `events.spec.ts` now asserts the list container renders even when
there are no rows, so a zero-row page is still a real assertion rather
than a vacuous `toHaveCount(0)`.
- Corrected the comment on the derivation (`BUILD_NOW` → `NOW`): the
events islands re-evaluate it in the browser on hydration, so
classification is **not** fixed at build time as the old comment
claimed.

## Review Focus

**Why prod is empty is not a bug in the fetch/render logic.** The data
is not remote — it is the hard-coded array in `src/data/events.ts`. The
only dynamic input is the clock: `deriveUpcomingEvents` keeps events
whose end (start + 1h default) is still in the future. The newest
configured event, `video-model-showdown`, ended `2026-08-12T18:00Z`, and
nothing is scheduled after it, so `upcomingEvents` is `[]` and the `ul`
renders as `<!--[--><!--]-->`. A locally built `dist/events/index.html`
reproduces the reported prod markup byte-for-byte. The page needs a
content refresh, not a code fix.

**Two findings worth separate follow-ups (deliberately not changed
here):**

1. `<UpcomingEventsSection client:visible />` ships the full events
array plus `new Date()` to the client, so the upcoming/past split is
re-derived from the *visitor's* clock at hydration. Freezing the browser
clock to `2026-08-01` against the current build makes 2 rows appear
where the build rendered 0, along with a burst of Vue `Hydration
text/children mismatch` warnings — i.e. real visitors on a build older
than an event's end get a visible post-hydration content shift on
`/events`. Making it deterministic per-deploy is a behaviour change (a
finished livestream would linger as "upcoming" until the next deploy),
so it needs a product call.
2. With zero upcoming events the section still renders its heading over
an empty card (first screenshot). An empty state — hiding the section,
or a "nothing scheduled yet" line — would be an improvement, but that is
a design decision.

Follows up Comfy-Org#15150, which stopped the CI failure by guarding the one
unguarded test; this addresses the coverage hole that guard left behind.

## Screenshots

Both taken against a local production build. The first is today's real
clock (reproduces prod); the second freezes the browser clock to
`2026-08-01`, showing the render logic itself is healthy.

## Verification

- `pnpm test:unit` (website): 42 files, 399 tests passing, including the
3 new ones.
- `pnpm typecheck` (astro check): 0 errors, 0 warnings.
- oxfmt, oxlint `--type-aware`, and eslint clean on the changed files
(also via pre-commit hooks).
- `playwright test events.spec.ts --project=desktop --project=mobile`: 7
passed, 2 skipped (the two time-dependent tests, correctly skipped with
zero upcoming events).
- Mutation-checked rather than assumed: inverting the link branch fails
2 of the new tests, deleting the location text fails a third, and
replacing the `ul` with a `div` fails the new e2e assertion — which
previously passed silently.


## Screenshots

![Upcoming events section on a local production build with the real
clock: heading over an empty card, reproducing the empty ul reported on
prod](https://pub-1fd11710d4c8405b948c9edc4287a3f2.r2.dev/sessions/a13b72487621d011f2a2accee147afd95038136721ed1c44890d8816aeb483cd/pr-images/1786574131744-00a7b135-0bac-48f8-b344-0644294b936a.png)

![Same build with the browser clock frozen to 2026-08-01: two upcoming
event rows render with location, date, Add to calendar, and Livestream
links](https://pub-1fd11710d4c8405b948c9edc4287a3f2.r2.dev/sessions/a13b72487621d011f2a2accee147afd95038136721ed1c44890d8816aeb483cd/pr-images/1786574132210-2700dd84-d951-4e6f-81c7-ddb39420ad62.png)

---------

Co-authored-by: Glary-Bot <glary-bot@users.noreply.github.com>

Author: christian-byrne

apps/website/e2e/events.spec.ts

@@ -185,6 +185,9 @@ test.describe('Events page — desktop @smoke', () => {
     for (const [path, locale] of LOCALES) {
       await page.goto(path)
       const section = upcomingSection(page, locale)
+      // Every configured event ages out eventually, so the row assertions
+      // scale to zero — the list itself has to render either way.
+      await expect(section.getByRole('list')).toBeAttached()
       const rows = section.locator('li')
       await expect(rows).toHaveCount(upcomingEvents.length)
 

apps/website/src/data/events.ts

@@ -576,15 +576,17 @@ const events: readonly ComfyEvent[] = [
   }
 ]
 
-// The site is statically built, so classification is fixed at build time: an
-// event moves between the upcoming and past sections on the next deploy.
-const BUILD_NOW = new Date()
+// Sampled once per module load: at build time for the pre-rendered HTML, and
+// again in the browser when the events islands hydrate. An event therefore
+// leaves the upcoming section on the first page load after it ends, rather than
+// on the next deploy; a page left open keeps the list it hydrated with.
+const NOW = new Date()
 
-export const upcomingEvents = deriveUpcomingEvents(events, BUILD_NOW)
+export const upcomingEvents = deriveUpcomingEvents(events, NOW)
 
-export const pastEvents = derivePastEvents(events, BUILD_NOW)
+export const pastEvents = derivePastEvents(events, NOW)
 
-export const featuredEvents = deriveFeaturedEvents(events, BUILD_NOW)
+export const featuredEvents = deriveFeaturedEvents(events, NOW)
 
 export const watchablePastEvents: readonly ComfyEvent[] = pastEvents.filter(
   (event) => eventVideoId(event)

apps/website/src/templates/events/UpcomingEventsSection.test.ts

@@ -0,0 +1,119 @@
+// @vitest-environment happy-dom
+import { render, screen } from '@testing-library/vue'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import type * as EventsData from '../../data/events'
+
+import UpcomingEventsSection from './UpcomingEventsSection.vue'
+
+// `upcomingEvents` is derived from the wall clock, so it empties out once the
+// newest configured event has ended and the e2e coverage of these rows goes
+// quiet with it. Stubbing the list keeps the row markup, localization, and
+// link targets covered whatever the date and whatever happens to be scheduled.
+const { streamedEvent, externalEvent, stub } = vi.hoisted(() => {
+  const streamedEvent = {
+    id: 'streamed-event',
+    category: 'livestream',
+    title: { en: 'Streamed Event', 'zh-CN': '直播活动' },
+    description: { en: 'Watch it live.', 'zh-CN': '在线观看。' },
+    location: { en: 'Online', 'zh-CN': '线上' },
+    dateLabel: {
+      en: 'September 1, 2026 · 10AM PT',
+      'zh-CN': '2026年9月1日 · 上午10点（PT）'
+    },
+    startDateTime: '2026-09-01T10:00:00-07:00',
+    liveVideoId: 'live123'
+  } satisfies EventsData.ComfyEvent
+  const externalEvent = {
+    id: 'external-event',
+    category: 'community',
+    title: { en: 'External Event', 'zh-CN': '外部活动' },
+    description: { en: 'Hosted elsewhere.', 'zh-CN': '由他方举办。' },
+    location: { en: 'San Francisco', 'zh-CN': '旧金山' },
+    dateLabel: { en: 'September 8, 2026', 'zh-CN': '2026年9月8日' },
+    startDateTime: '2026-09-08T10:00:00-07:00',
+    link: {
+      href: { en: 'https://lu.ma/comfy-sf', 'zh-CN': 'https://lu.ma/comfy-sf' },
+      newTab: true
+    }
+  } satisfies EventsData.ComfyEvent
+  const upcomingEvents: readonly EventsData.ComfyEvent[] = [
+    streamedEvent,
+    externalEvent
+  ]
+  return { streamedEvent, externalEvent, stub: { upcomingEvents } }
+})
+
+vi.mock('../../data/events', async (importOriginal) => {
+  const actual = await importOriginal<typeof EventsData>()
+  return {
+    ...actual,
+    get upcomingEvents() {
+      return stub.upcomingEvents
+    }
+  }
+})
+
+beforeEach(() => {
+  stub.upcomingEvents = [streamedEvent, externalEvent]
+})
+
+describe('UpcomingEventsSection', () => {
+  it('renders a row per upcoming event with its title, blurb, location and date', () => {
+    render(UpcomingEventsSection)
+
+    const rows = screen.getAllByRole('listitem')
+    expect(rows).toHaveLength(2)
+
+    for (const [index, event] of [streamedEvent, externalEvent].entries()) {
+      const row = rows[index]
+      expect(row.textContent).toContain(event.title.en)
+      expect(row.textContent).toContain(event.description.en)
+      expect(row.textContent).toContain(event.location.en)
+      expect(row.textContent).toContain(event.dateLabel.en)
+    }
+  })
+
+  it('links streamed events to their own page and the rest straight out', () => {
+    render(UpcomingEventsSection)
+
+    const streamedLink = screen.getByRole('link', {
+      name: `${streamedEvent.title.en} — Livestream`
+    })
+    expect(streamedLink.getAttribute('href')).toBe('/events/streamed-event')
+    expect(streamedLink.getAttribute('target')).toBeNull()
+
+    const externalLink = screen.getByRole('link', {
+      name: `${externalEvent.title.en} — Livestream`
+    })
+    expect(externalLink.getAttribute('href')).toBe(externalEvent.link.href.en)
+    expect(externalLink.getAttribute('target')).toBe('_blank')
+    expect(externalLink.getAttribute('rel')).toBe('noopener noreferrer')
+  })
+
+  // The live page sits in this state whenever the schedule runs dry, so the
+  // list has to survive an empty derivation rather than disappear with it.
+  it('keeps the list in place when nothing is upcoming', () => {
+    stub.upcomingEvents = []
+
+    render(UpcomingEventsSection)
+
+    expect(screen.getByRole('list')).toBeTruthy()
+    expect(screen.queryAllByRole('listitem')).toHaveLength(0)
+  })
+
+  it('localizes rows and event-page links for the zh-CN page', () => {
+    render(UpcomingEventsSection, { props: { locale: 'zh-CN' } })
+
+    expect(screen.getByText(streamedEvent.title['zh-CN'])).toBeTruthy()
+    expect(screen.getByText(streamedEvent.dateLabel['zh-CN'])).toBeTruthy()
+    expect(screen.queryByText(streamedEvent.title.en)).toBeNull()
+
+    const streamedLink = screen.getByRole('link', {
+      name: `${streamedEvent.title['zh-CN']} — 直播`
+    })
+    expect(streamedLink.getAttribute('href')).toBe(
+      '/zh-CN/events/streamed-event'
+    )
+  })
+})