Add Bug Reporter E2E test

Author: webstackdev

_TODO.md

@@ -5,13 +5,9 @@
 
 ## Missing E2E Component Tests
 
-- BugReporter
-- Calendar
 - Code/CodeBlock
 - Code/CodeTabs
-- Consent/Checkbox
 - Diagram
-- FileExplorer
 
 ## Performance
 

src/pages/testing/bug-reporter.astro

@@ -0,0 +1,66 @@
+---
+import BaseLayout from '@layouts/BaseLayout.astro'
+import Button from '@components/Button/index.astro'
+import BugReporterComponent from '@components/BugReporter/index.astro'
+
+export const prerender = true
+
+const pageTitle = 'Bug Reporter Component Test Fixture'
+const fixtureDescription =
+  'Dedicated route reserved for validating the Bug Reporter modal without relying on footer layout or scroll position.'
+const pagePath = '/testing/bug-reporter'
+const triggerId = 'bugReporterFixtureTrigger'
+const dialogId = 'bugReporterFixtureDialog'
+const statusId = 'bugReporterFixtureStatus'
+const formId = 'bugReporterFixtureForm'
+const closeButtonId = 'bugReporterFixtureClose'
+const cancelButtonId = 'bugReporterFixtureCancel'
+const minimizeButtonId = 'bugReporterFixtureMinimize'
+const minimizedBarId = 'bugReporterFixtureMinimizedBar'
+const minimizedRestoreButtonId = 'bugReporterFixtureRestore'
+const minimizedCloseButtonId = 'bugReporterFixtureMinimizedClose'
+---
+
+<BaseLayout pageTitle={pageTitle} path={pagePath} pageDescription={fixtureDescription} noindex>
+  <section class="mx-auto flex max-w-4xl flex-col items-center gap-8 py-10 px-4">
+    <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 Trigger</p>
+        <h2 class="text-2xl font-semibold">Open the bug reporter modal</h2>
+        <p class="text-content-active">
+          This trigger renders the production Bug Reporter component with a stable button placement for automation.
+        </p>
+      </div>
+
+      <div class="flex justify-center">
+        <Button
+          id={triggerId}
+          type="button"
+          variant="success"
+          icon="bug"
+          text="Open Bug Reporter"
+          ariaLabel="Report a bug"
+        />
+      </div>
+
+      <BugReporterComponent
+        triggerId={triggerId}
+        dialogId={dialogId}
+        statusId={statusId}
+        formId={formId}
+        closeButtonId={closeButtonId}
+        cancelButtonId={cancelButtonId}
+        minimizeButtonId={minimizeButtonId}
+        minimizedBarId={minimizedBarId}
+        minimizedRestoreButtonId={minimizedRestoreButtonId}
+        minimizedCloseButtonId={minimizedCloseButtonId}
+      />
+    </article>
+  </section>
+</BaseLayout>

test/e2e/specs/04-components/bug-reporter.spec.ts

@@ -0,0 +1,97 @@
+/**
+ * Bug Reporter modal tests
+ * Covers the footer-triggered bug report dialog and minimized state behavior.
+ */
+
+import { BasePage, expect, test } from '@test/e2e/helpers'
+
+const fixturePath = '/testing/bug-reporter'
+const triggerSelector = '#bugReporterFixtureTrigger'
+const dialogSelector = '#bugReporterFixtureDialog'
+const formSelector = '#bugReporterFixtureForm'
+const cancelButtonSelector = '#bugReporterFixtureCancel'
+const minimizeButtonSelector = '#bugReporterFixtureMinimize'
+const minimizedBarSelector = '#bugReporterFixtureMinimizedBar'
+const restoreButtonSelector = '#bugReporterFixtureRestore'
+const minimizedCloseButtonSelector = '#bugReporterFixtureMinimizedClose'
+const nameInputSelector = `${formSelector} input[name="name"]`
+const emailInputSelector = `${formSelector} input[name="email"]`
+const messageSelector = `${formSelector} textarea[name="message"]`
+
+const openBugReporter = async (page: BasePage) => {
+  const trigger = page.locator(triggerSelector)
+  await expect(trigger).toBeVisible()
+  await trigger.click()
+  await expect(page.locator(dialogSelector)).toHaveAttribute('open', '')
+  await expect(page.locator(nameInputSelector)).toBeVisible()
+}
+
+test.describe('Bug Reporter Modal', () => {
+  test('@ready opens from the fixture trigger with labeled fields', async ({ page: playwrightPage }) => {
+    const page = await BasePage.init(playwrightPage)
+    await page.goto(fixturePath, { skipCookieDismiss: true })
+
+    await openBugReporter(page)
+
+    const nameInput = page.locator(nameInputSelector)
+    const emailInput = page.locator(emailInputSelector)
+    const messageInput = page.locator(messageSelector)
+
+    await expect(page.locator(dialogSelector)).toHaveAttribute('open', '')
+    await expect(playwrightPage.getByRole('heading', { name: 'Report a bug' })).toBeVisible()
+    await expect(nameInput).toBeFocused()
+    await expect(nameInput).toHaveAccessibleName('Name')
+    await expect(emailInput).toHaveAccessibleName('Email')
+    await expect(messageInput).toHaveAccessibleName('Description')
+  })
+
+  test('@ready cancel closes the modal and clears entered form state', async ({ page: playwrightPage }) => {
+    const page = await BasePage.init(playwrightPage)
+    await page.goto(fixturePath, { skipCookieDismiss: true })
+
+    await openBugReporter(page)
+
+    const nameInput = page.locator(nameInputSelector)
+    const emailInput = page.locator(emailInputSelector)
+    const messageInput = page.locator(messageSelector)
+
+    await nameInput.fill('Test User')
+    await emailInput.fill('test@example.com')
+    await messageInput.fill('Modal reset check')
+
+    await page.locator(cancelButtonSelector).click()
+    await expect(page.locator(dialogSelector)).not.toHaveAttribute('open', '')
+
+    await openBugReporter(page)
+
+    await expect(nameInput).toHaveValue('')
+    await expect(emailInput).toHaveValue('')
+    await expect(messageInput).toHaveValue('')
+  })
+
+  test('@ready minimize preserves draft state and minimized close clears it', async ({ page: playwrightPage }) => {
+    const page = await BasePage.init(playwrightPage)
+    await page.goto(fixturePath, { skipCookieDismiss: true })
+
+    await openBugReporter(page)
+
+    const messageInput = page.locator(messageSelector)
+    await messageInput.fill('Bug details in progress')
+
+    await page.locator(minimizeButtonSelector).click()
+    await expect(page.locator(dialogSelector)).not.toHaveAttribute('open', '')
+    await expect(page.locator(minimizedBarSelector)).toBeVisible()
+
+    await page.locator(restoreButtonSelector).click()
+    await expect(page.locator(dialogSelector)).toHaveAttribute('open', '')
+    await expect(messageInput).toHaveValue('Bug details in progress')
+
+    await page.locator(minimizeButtonSelector).click()
+    await expect(page.locator(minimizedBarSelector)).toBeVisible()
+    await page.locator(minimizedCloseButtonSelector).click()
+    await expect(page.locator(minimizedBarSelector)).toBeHidden()
+
+    await openBugReporter(page)
+    await expect(messageInput).toHaveValue('')
+  })
+})