Add tests for pages that rely on Headless UI

Author: hasparus

test/e2e/conf-calendar-menu.spec.ts

@@ -0,0 +1,48 @@
+import { test, expect } from "@playwright/test"
+
+test("opens and dismisses calendar menu, all links match expectation", async ({
+  page,
+}) => {
+  await page.goto("/conf/2025/schedule")
+  await page.waitForLoadState("networkidle")
+
+  const calendarButton = page
+    .locator('button:has-text("Add to calendar")')
+    .first()
+
+  if ((await calendarButton.count()) === 0) {
+    test.skip()
+  }
+
+  await calendarButton.scrollIntoViewIfNeeded()
+  await expect(calendarButton).toBeVisible()
+
+  // Test aria-expanded attribute
+  await expect(calendarButton).toHaveAttribute("aria-expanded", "false")
+
+  // Test opening menu
+  const menuItems = page.locator('[role="menu"]')
+  await expect(menuItems).not.toBeVisible()
+
+  await calendarButton.click()
+  await expect(menuItems).toBeVisible()
+  await expect(calendarButton).toHaveAttribute("aria-expanded", "true")
+
+  // Test menu contains correct links
+  const icsLink = menuItems.locator('a:has-text("ICS")')
+  const googleLink = menuItems.locator('a:has-text("Google")')
+  const outlookLink = menuItems.locator('a:has-text("Outlook")')
+
+  await expect(icsLink).toBeVisible()
+  await expect(googleLink).toBeVisible()
+  await expect(outlookLink).toBeVisible()
+
+  await expect(icsLink).toHaveAttribute("href", /data:text\/calendar/)
+  await expect(googleLink).toHaveAttribute("href", /google\.com/)
+  await expect(outlookLink).toHaveAttribute("href", /outlook\./)
+
+  // Test closing menu by clicking outside
+  await page.mouse.click(10, 10)
+  await expect(menuItems).not.toBeVisible()
+  await expect(calendarButton).toHaveAttribute("aria-expanded", "false")
+})

test/e2e/conf-filters.spec.ts

@@ -0,0 +1,116 @@
+import { test, expect } from "@playwright/test"
+
+test("conference schedule filter combinations and results", async ({
+  page,
+}) => {
+  await page.goto("/conf/2025/schedule")
+  await page.waitForLoadState("networkidle")
+
+  const comboboxOptions = page.locator('[role="listbox"]')
+
+  const sessionFormatCombobox = page.getByRole("combobox", {
+    name: "Session Format",
+  })
+  await expect(sessionFormatCombobox).toBeVisible()
+
+  await sessionFormatCombobox.click()
+  await expect(comboboxOptions).toBeVisible()
+
+  const graphqlProductionOption = comboboxOptions.locator(
+    '[role="option"]:has-text("GraphQL in Production")',
+  )
+  await expect(graphqlProductionOption).toBeVisible()
+  await graphqlProductionOption.click()
+
+  await page.keyboard.press("Escape")
+  await expect(comboboxOptions).not.toBeVisible()
+
+  const talkCategoryCombobox = page.getByRole("combobox", {
+    name: "Talk Category",
+  })
+  await expect(talkCategoryCombobox).toBeVisible()
+
+  await talkCategoryCombobox.click()
+  await expect(comboboxOptions).toBeVisible()
+
+  const securityOption = comboboxOptions.locator(
+    '[role="option"]:has-text("Security")',
+  )
+  await expect(securityOption).toBeVisible()
+  await securityOption.click()
+
+  await page.keyboard.press("Escape")
+  await expect(comboboxOptions).not.toBeVisible()
+
+  const audienceCombobox = page.getByRole("combobox", { name: "Audience" })
+  await expect(audienceCombobox).toBeVisible()
+
+  await audienceCombobox.click()
+  await expect(comboboxOptions).toBeVisible()
+
+  const allAudienceOptions = comboboxOptions.locator('[role="option"]')
+  const audienceOptionCount = await allAudienceOptions.count()
+
+  expect(audienceOptionCount).toBeGreaterThan(0)
+
+  const intermediateOption = comboboxOptions.locator(
+    '[role="option"]:has-text("Intermediate")',
+  )
+  await expect(intermediateOption).toBeVisible()
+  await expect(intermediateOption).not.toHaveAttribute("aria-disabled", "true")
+
+  const beginnerOption = comboboxOptions.locator(
+    '[role="option"]:has-text("Beginner")',
+  )
+  await expect(beginnerOption).toBeVisible()
+  await expect(beginnerOption).toHaveAttribute("aria-disabled", "true")
+
+  await page.keyboard.press("Escape")
+  await expect(comboboxOptions).not.toBeVisible()
+
+  await page.keyboard.press("Escape")
+
+  const sessionLink = page.locator(
+    'a[aria-label*="Unlocking Federation Security at Scale in Booking"]',
+  )
+  await expect(sessionLink).toBeVisible()
+})
+
+test("talk category multi-selection and escape key functionality", async ({
+  page,
+}) => {
+  await page.goto("/conf/2025/schedule")
+  await page.waitForLoadState("networkidle")
+
+  const comboboxOptions = page.locator('[role="listbox"]')
+
+  const talkCategoryCombobox = page.getByRole("combobox", {
+    name: "Talk Category",
+  })
+  await expect(talkCategoryCombobox).toBeVisible()
+
+  await talkCategoryCombobox.click()
+  await expect(comboboxOptions).toBeVisible()
+
+  const backendOption = comboboxOptions.locator(
+    '[role="option"]:has-text("Backend")',
+  )
+  const scalingOption = comboboxOptions.locator(
+    '[role="option"]:has-text("Scaling")',
+  )
+
+  await expect(backendOption).toBeVisible()
+  await expect(scalingOption).toBeVisible()
+
+  await backendOption.click()
+
+  await talkCategoryCombobox.click()
+  await expect(comboboxOptions).toBeVisible()
+  await scalingOption.click()
+
+  await talkCategoryCombobox.click()
+  await expect(comboboxOptions).toBeVisible()
+
+  await page.keyboard.press("Escape")
+  await expect(comboboxOptions).not.toBeVisible()
+})