Add Calendar component E2E test

Author: webstackdev

src/pages/testing/calendar.astro

@@ -0,0 +1,45 @@
+---
+import BaseLayout from '@layouts/BaseLayout.astro'
+import CalendarComponent from '@components/Calendar/index.astro'
+
+export const prerender = true
+
+const pageTitle = 'Calendar Component Test Fixture'
+const fixtureDescription =
+  'Dedicated route reserved for validating the Add to Calendar component with deterministic event metadata.'
+const pagePath = '/testing/calendar'
+---
+
+<BaseLayout pageTitle={pageTitle} path={pagePath} pageDescription={fixtureDescription} noindex>
+  <section class="mx-auto flex max-w-4xl flex-col items-center gap-8 px-4 py-10">
+    <header class="max-w-3xl text-center space-y-4">
+      <p class="text-xs uppercase tracking-widest text-content-active">Testing Fixture</p>
+      <h1 class="text-3xl font-semibold leading-tight">{pageTitle}</h1>
+      <p class="text-content-active">{fixtureDescription}</p>
+    </header>
+
+    <article class="w-full max-w-2xl space-y-6 rounded-lg border border-trim bg-page-offset p-6 shadow-sm">
+      <div class="space-y-2">
+        <p class="text-xs uppercase tracking-wider text-content-active">Fixture Event</p>
+        <h2 class="text-2xl font-semibold">Team sync</h2>
+        <p class="text-content-active">
+          Stable event data for validating Google Calendar, Outlook, and `.ics` download actions.
+        </p>
+      </div>
+
+      <div class="flex justify-center">
+        <CalendarComponent
+          name="Team sync"
+          startDate="2030-01-02"
+          startTime="13:00"
+          endDate="2030-01-02"
+          endTime="14:00"
+          location="Remote"
+          description="Weekly team sync"
+        >
+          Add to calendar
+        </CalendarComponent>
+      </div>
+    </article>
+  </section>
+</BaseLayout>

test/e2e/specs/04-components/calendar.spec.ts

@@ -0,0 +1,107 @@
+/**
+ * Calendar component tests
+ * Covers the dedicated testing fixture for the Add to Calendar menu and download actions.
+ */
+
+import { readFile } from 'node:fs/promises'
+import { BasePage, expect, test } from '@test/e2e/helpers'
+
+const fixturePath = '/testing/calendar'
+const componentSelector = '[data-testid="add-to-calendar"]'
+const triggerSelector = `${componentSelector} [data-calendar-trigger]`
+const menuSelector = `${componentSelector} [data-calendar-menu]`
+const googleLinkSelector = `${componentSelector} [data-calendar-link="google"]`
+const outlookLinkSelector = `${componentSelector} [data-calendar-link="outlook"]`
+const downloadButtonSelector = `${componentSelector} [data-calendar-download-ics]`
+
+const loadCalendarFixture = async (playwrightPage: Parameters<typeof BasePage.init>[0]) => {
+  const page = await BasePage.init(playwrightPage)
+  await page.goto(fixturePath)
+  await expect(page.locator(componentSelector)).toBeVisible()
+  return page
+}
+
+test.describe('Calendar Component', () => {
+  test('@ready renders the testing fixture with a collapsed calendar menu', async ({ page: playwrightPage }) => {
+    const page = await loadCalendarFixture(playwrightPage)
+
+    await expect(playwrightPage.getByRole('heading', { name: 'Calendar Component Test Fixture' })).toBeVisible()
+    await expect(page.locator(triggerSelector)).toHaveText(/Add to calendar/i)
+    await expect(page.locator(menuSelector)).toHaveClass(/hidden/)
+    await expect(page.locator(triggerSelector)).toHaveAttribute('aria-expanded', 'false')
+  })
+
+  test('@ready toggles the menu and populates Google and Outlook links from fixture metadata', async ({
+    page: playwrightPage,
+  }) => {
+    const page = await loadCalendarFixture(playwrightPage)
+
+    await page.locator(triggerSelector).click()
+
+    await expect(page.locator(menuSelector)).not.toHaveClass(/hidden/)
+    await expect(page.locator(triggerSelector)).toHaveAttribute('aria-expanded', 'true')
+
+    const googleHref = await page.locator(googleLinkSelector).getAttribute('href')
+    expect(googleHref).toBeTruthy()
+
+    if (googleHref) {
+      const googleUrl = new URL(googleHref)
+      expect(googleUrl.hostname).toContain('calendar.google.com')
+      expect(googleUrl.pathname).toBe('/calendar/render')
+      expect(googleUrl.searchParams.get('action')).toBe('TEMPLATE')
+      expect(googleUrl.searchParams.get('text')).toBe('Team sync')
+      expect(googleUrl.searchParams.get('dates')).toBe('20300102T130000Z/20300102T140000Z')
+      expect(googleUrl.searchParams.get('details')).toBe('Weekly team sync')
+      expect(googleUrl.searchParams.get('location')).toBe('Remote')
+    }
+
+    const outlookHref = await page.locator(outlookLinkSelector).getAttribute('href')
+    expect(outlookHref).toBeTruthy()
+
+    if (outlookHref) {
+      const outlookUrl = new URL(outlookHref)
+      expect(outlookUrl.hostname).toContain('outlook.office.com')
+      expect(outlookUrl.pathname).toBe('/calendar/0/deeplink/compose')
+      expect(outlookUrl.searchParams.get('path')).toBe('/calendar/action/compose')
+      expect(outlookUrl.searchParams.get('rru')).toBe('addevent')
+      expect(outlookUrl.searchParams.get('subject')).toBe('Team sync')
+      expect(outlookUrl.searchParams.get('startdt')).toBe('2030-01-02T13:00:00.000Z')
+      expect(outlookUrl.searchParams.get('enddt')).toBe('2030-01-02T14:00:00.000Z')
+      expect(outlookUrl.searchParams.get('body')).toBe('Weekly team sync')
+      expect(outlookUrl.searchParams.get('location')).toBe('Remote')
+    }
+
+    await page.locator(triggerSelector).click()
+    await expect(page.locator(menuSelector)).toHaveClass(/hidden/)
+    await expect(page.locator(triggerSelector)).toHaveAttribute('aria-expanded', 'false')
+  })
+
+  test('@ready downloads an .ics file with the fixture event details', async ({ page: playwrightPage }) => {
+    const page = await loadCalendarFixture(playwrightPage)
+
+    await page.locator(triggerSelector).click()
+    const downloadPromise = playwrightPage.waitForEvent('download')
+    await page.locator(downloadButtonSelector).click()
+    const download = await downloadPromise
+
+    expect(download.suggestedFilename()).toBe('event.ics')
+    const downloadPath = await download.path()
+    expect(downloadPath).toBeTruthy()
+
+    if (!downloadPath) {
+      return
+    }
+
+    const icsText = await readFile(downloadPath, 'utf8')
+    expect(icsText).toContain('BEGIN:VCALENDAR')
+    expect(icsText).toContain('SUMMARY:Team sync')
+    expect(icsText).toContain('DESCRIPTION:Weekly team sync')
+    expect(icsText).toContain('LOCATION:Remote')
+    expect(icsText).toContain('DTSTART:20300102T130000Z')
+    expect(icsText).toContain('DTEND:20300102T140000Z')
+    expect(icsText).toContain('END:VCALENDAR')
+
+    await expect(page.locator(menuSelector)).toHaveClass(/hidden/)
+    await expect(page.locator(triggerSelector)).toHaveAttribute('aria-expanded', 'false')
+  })
+})