chore: add E2E testing, CI pipeline, and improve coverage

.github/workflows/ci.yml

@@ -0,0 +1,27 @@
+name: CI
+on:
+  pull_request:
+    branches: [main]
+  push:
+    branches: [main]
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: "npm"
+      - run: npm ci
+      - run: npm run test:coverage
+      - run: npm run build
+      - run: npx playwright install --with-deps chromium
+      - run: npm run test:e2e
+      - uses: actions/upload-artifact@v4
+        if: ${{ !cancelled() }}
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 7

.gitignore

@@ -34,3 +34,6 @@ amplifyconfiguration*
 .npm
 *.tsbuildinfo
 coverage/
+playwright-report/
+test-results/
+.features-gen/

.husky/pre-commit

@@ -2,3 +2,5 @@
 . "$(dirname -- "$0")/_/husky.sh"
 
 npx lint-staged
+npm run test
+npm run build

e2e/features/landing.feature

@@ -0,0 +1,13 @@
+Feature: Landing Page
+
+  Scenario: Page loads with meeting controls
+    Given I am on the landing page
+    Then I should see a "Start Meeting" button
+    And I should see a meeting PIN input
+    And I should see a name input
+
+  Scenario: Cannot join without a name
+    Given I am on the landing page
+    When I clear the name input
+    And I click "Start Meeting"
+    Then I should see a validation error

e2e/steps/landing.ts

@@ -0,0 +1,33 @@
+import { expect } from "@playwright/test";
+import { createBdd } from "playwright-bdd";
+
+const { Given, When, Then } = createBdd();
+
+Given("I am on the landing page", async ({ page }) => {
+  await page.goto("/");
+});
+
+Then("I should see a {string} button", async ({ page }, text: string) => {
+  await expect(page.getByRole("button", { name: text })).toBeVisible();
+});
+
+Then("I should see a meeting PIN input", async ({ page }) => {
+  await expect(page.getByPlaceholder(/pin|meeting/i)).toBeVisible();
+});
+
+Then("I should see a name input", async ({ page }) => {
+  await expect(page.getByLabel(/name/i)).toBeVisible();
+});
+
+When("I clear the name input", async ({ page }) => {
+  const nameInput = page.getByLabel(/name/i);
+  await nameInput.clear();
+});
+
+When("I click {string}", async ({ page }, text: string) => {
+  await page.getByRole("button", { name: text }).click();
+});
+
+Then("I should see a validation error", async ({ page }) => {
+  await expect(page.getByRole("alert")).toBeVisible();
+});