Add Playwright smoke tests, fix votekeeper seed bug, fix reveal cache

- Add end-to-end Playwright smoke test covering full voting flow
- Fix seedVotekeeper using userId instead of email as rowKey (isVotekeeper lookup mismatch)
- Fix RevealView not invalidating results query on reveal/complete
- Add smoke test job to CI workflow with Azurite + Functions + Vite
- Make vite.config.ts API proxy target configurable via API_TARGET env var

Author: kurtzeborn

.github/workflows/ci.yml

@@ -56,3 +56,66 @@ jobs:
       - name: Build
         working-directory: web
         run: npx vite build
+
+  smoke:
+    name: Smoke Tests
+    runs-on: ubuntu-latest
+    needs: [functions, web]
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+
+      - name: Install Azurite
+        run: npm install -g azurite
+
+      - name: Install Azure Functions Core Tools
+        run: npm install -g azure-functions-core-tools@4 --unsafe-perm true
+
+      - name: Install all dependencies
+        run: |
+          npm ci
+          cd functions && npm ci
+          cd ../web && npm ci
+
+      - name: Build Functions
+        working-directory: functions
+        run: npm run build
+
+      - name: Install Playwright Chromium
+        run: npx playwright install --with-deps chromium
+
+      - name: Start services
+        run: |
+          # Start Azurite in background
+          azurite --silent --blobPort 10000 --queuePort 10001 --tablePort 10002 &
+
+          # Start Functions in background
+          cd functions && npx func start --port 7071 &
+
+          # Start Vite dev server in background
+          cd web && npx vite --port 5173 &
+
+          # Wait for all services to be ready
+          echo "Waiting for services..."
+          for i in $(seq 1 30); do
+            if curl -sf http://localhost:5173/api/me > /dev/null 2>&1; then
+              echo "Services ready after ${i}s"
+              break
+            fi
+            sleep 1
+          done
+
+      - name: Run smoke tests
+        run: npm run test:smoke
+
+      - name: Upload test artifacts
+        if: failure()
+        uses: actions/upload-artifact@v4
+        with:
+          name: smoke-test-results
+          path: test-results/
+          retention-days: 7

.gitignore

@@ -10,6 +10,8 @@ functions/deploy/
 
 # Azure Storage emulator
 .azurite/
+__azurite_db_*__*
+AzuriteConfig
 __blobstorage__/
 __queuestorage__/
 __tablestorage__/
@@ -31,3 +33,6 @@ npm-debug.log*
 
 # Test coverage
 coverage/
+# Playwright
+test-results/
+playwright-report/

docs/plan.md

@@ -607,7 +607,6 @@ event-vote/
 
 ### Phase 2: Core Voting
 - [x] Voting option management (add/edit/remove/reorder)
-- [ ] Projector-friendly setup view (prominent event title)
 - [x] QR code generation
 - [x] Voter name entry
 - [x] Attendee ballot view (mobile-first, vote reset + change)
@@ -631,7 +630,7 @@ event-vote/
 - [x] Error handling + edge cases (disconnect recovery, voting closed mid-edit)
 - [x] Mobile responsiveness fine-tuning
 - [x] Event expiration / cleanup
-- [ ] Smoke tests (Playwright — create event, vote, reveal flow)
+- [x] Smoke tests (Playwright — create event, vote, reveal flow)
 - [x] CI/CD pipeline (GitHub Actions — build + unit tests + smoke tests)
 - [x] Deployment to Azure
 - [x] README + docs

functions/src/functions/votekeepers.ts

@@ -104,7 +104,7 @@ async function seedVotekeeper(request: HttpRequest, context: InvocationContext):
       return { status: 401, jsonBody: { error: 'Authentication required' } };
     }
     const decoded = JSON.parse(Buffer.from(header, 'base64').toString('utf-8'));
-    const userId = decoded.userId;
+    const email = (decoded.userDetails || decoded.userId).toLowerCase();
     const displayName = decoded.userDetails || decoded.userId;
 
     // Check if any votekeepers exist
@@ -122,7 +122,7 @@ async function seedVotekeeper(request: HttpRequest, context: InvocationContext):
 
     const entity: VotekeeperEntity = {
       partitionKey: 'votekeeper',
-      rowKey: userId,
+      rowKey: email,
       displayName: displayName,
       addedAt: new Date().toISOString(),
       addedBy: 'system',

package-lock.json

@@ -0,0 +1,12 @@
+{
+  "name": "event-vote",
+  "private": true,
+  "version": "1.0.0",
+  "description": "Live audience voting for events",
+  "devDependencies": {
+    "@playwright/test": "^1.58.2"
+  },
+  "scripts": {
+    "test:smoke": "playwright test"
+  }
+}

package.json

@@ -0,0 +1,22 @@
+import { defineConfig } from '@playwright/test';
+
+export default defineConfig({
+  testDir: './tests/smoke',
+  globalSetup: './tests/smoke/global-setup.ts',
+  timeout: 60_000,
+  expect: { timeout: 10_000 },
+  fullyParallel: false,
+  retries: 0,
+  reporter: 'list',
+  use: {
+    baseURL: 'http://localhost:5173',
+    trace: 'on-first-retry',
+    screenshot: 'only-on-failure',
+  },
+  projects: [
+    {
+      name: 'chromium',
+      use: { browserName: 'chromium' },
+    },
+  ],
+});

playwright.config.ts

@@ -0,0 +1,161 @@
+/**
+ * Smoke test – Full voting flow
+ *
+ * Exercises the entire happy-path:
+ *   1. Votekeeper signs in (mock auth)
+ *   2. Seeds votekeeper if first time
+ *   3. Creates an event
+ *   4. Adds 3 voting options
+ *   5. Opens voting
+ *   6. Voter joins on a mobile viewport, enters name, allocates votes
+ *   7. Votekeeper closes voting
+ *   8. Votekeeper reveals results one-by-one
+ *   9. Votekeeper completes the event
+ *  10. Public results page loads
+ *
+ * Prerequisites: the local dev environment must be running
+ *   (Azurite + Azure Functions + Vite dev server).
+ */
+import { test, expect, type Page, type BrowserContext } from '@playwright/test';
+
+// ── helpers ──────────────────────────────────────────────────────────────
+
+/** Sign in via the mock auth page and land on the dashboard. */
+async function votekeeperSignIn(page: Page) {
+  await page.goto('/.auth/login/aad?post_login_redirect_uri=/dashboard');
+  await page.getByRole('button', { name: /sign in/i }).click();
+  // Dashboard loads, fires /api/me, then shows content or redirects.
+  // Wait for either "Create Event" link or "Become First Votekeeper" button.
+  await expect(
+    page.getByRole('link', { name: /new event/i }).first()
+      .or(page.getByRole('button', { name: /become first votekeeper/i }))
+  ).toBeVisible({ timeout: 20_000 });
+}
+
+/** If the "Become First Votekeeper" button is visible, click it and wait. */
+async function seedIfNeeded(page: Page) {
+  const seedBtn = page.getByRole('button', { name: /become first votekeeper/i });
+  if (await seedBtn.isVisible()) {
+    await seedBtn.click();
+    // After seeding the page refreshes and shows the dashboard
+    await expect(page.getByRole('link', { name: /new event/i }).first()).toBeVisible({ timeout: 15_000 });
+  }
+}
+
+// ── test ─────────────────────────────────────────────────────────────────
+
+test('create event → vote → reveal → complete', async ({ browser }) => {
+  // ── 1. Votekeeper: sign in ──────────────────────────────────────────
+  const vkContext = await browser.newContext();
+  const vk = await vkContext.newPage();
+
+  await votekeeperSignIn(vk);
+  await seedIfNeeded(vk);
+
+  // ── 2. Create event ─────────────────────────────────────────────────
+  await vk.getByRole('link', { name: /new event/i }).first().click();
+  await vk.waitForURL('**/create');
+
+  await vk.getByLabel(/event name/i).fill('Smoke Test Event');
+  await vk.getByRole('button', { name: /create event/i }).click();
+
+  // Land on the manage page – URL contains /manage/<4-letter ID>
+  await vk.waitForURL(/\/manage\/[A-Z]{4}$/);
+  const eventId = vk.url().match(/\/manage\/([A-Z]{4})$/)?.[1];
+  expect(eventId).toBeTruthy();
+
+  // ── 3. Add 3 voting options ─────────────────────────────────────────
+  const options = ['Option Alpha', 'Option Beta', 'Option Gamma'];
+  for (const title of options) {
+    await vk.getByPlaceholder('Option title').fill(title);
+    await vk.getByRole('button', { name: 'Add' }).click();
+    // Wait for the option to appear in the list
+    await expect(vk.getByText(title)).toBeVisible();
+  }
+
+  // Verify all 3 options are listed
+  await expect(vk.getByText('Voting Options (3)')).toBeVisible();
+
+  // ── 4. Open voting ──────────────────────────────────────────────────
+  await vk.getByRole('button', { name: /open voting/i }).click();
+
+  // Status should change
+  await expect(vk.getByText(/open/i).first()).toBeVisible();
+
+  // ── 5. Voter: join, enter name, cast votes ──────────────────────────
+  const voterContext: BrowserContext = await browser.newContext({
+    viewport: { width: 375, height: 812 }, // iPhone-like viewport
+  });
+  const voter = await voterContext.newPage();
+
+  await voter.goto(`/join/${eventId}`);
+  await expect(voter.getByText('Smoke Test Event')).toBeVisible();
+
+  // Enter voter name
+  await voter.getByPlaceholder(/enter your name/i).fill('Test Voter');
+
+  // Voting option buttons should appear
+  await expect(voter.getByText('Option Alpha')).toBeVisible();
+
+  // Allocate votes: 2 on Alpha, 1 on Gamma (3 total, the default)
+  // Use heading-based locator to find each option's + button
+  const optionPlus = (name: string) =>
+    voter.getByRole('heading', { name }).locator('..').locator('..').getByRole('button', { name: '+' });
+
+  await optionPlus('Option Alpha').click();
+  await optionPlus('Option Alpha').click();
+  await optionPlus('Option Gamma').click();
+
+  // Verify all votes allocated
+  await expect(voter.getByText('All votes allocated!')).toBeVisible();
+
+  // Wait for auto-save (debounce 1.5s + network)
+  await expect(voter.getByText('Saving...')).toBeVisible({ timeout: 5_000 });
+  await expect(voter.getByText('✓ Saved')).toBeVisible({ timeout: 10_000 });
+
+  // ── 6. Votekeeper: close voting ─────────────────────────────────────
+  // Accept the confirm dialog
+  vk.on('dialog', (d) => d.accept());
+  await vk.getByRole('button', { name: /close voting/i }).click();
+
+  // Status should become 'closed'
+  await expect(vk.getByText(/closed/i).first()).toBeVisible({ timeout: 10_000 });
+
+  // ── 7. Reveal results one-by-one ────────────────────────────────────
+  // Click "Reveal Results" to start the reveal
+  await vk.getByRole('button', { name: /reveal results/i }).click();
+
+  // Now in the reveal view – dark background
+  await expect(vk.locator('.bg-gray-900')).toBeVisible({ timeout: 10_000 });
+
+  // Reveal each option (3 options → 2 more "Reveal Next" clicks)
+  for (let i = 0; i < 2; i++) {
+    const revealNext = vk.getByRole('button', { name: /reveal next/i });
+    await expect(revealNext).toBeVisible({ timeout: 10_000 });
+    await revealNext.click();
+    // Brief wait for animation/network
+    await vk.waitForTimeout(500);
+  }
+
+  // All revealed – "Complete Event" should appear
+  await expect(vk.getByRole('button', { name: /complete event/i })).toBeVisible({ timeout: 10_000 });
+  await vk.getByRole('button', { name: /complete event/i }).click();
+
+  // ── 8. Verify final results ─────────────────────────────────────────
+  // Wait for "Final Results" label first, then check content
+  await expect(vk.getByText('Final Results')).toBeVisible({ timeout: 10_000 });
+  await expect(vk.getByRole('heading', { name: 'Option Alpha' }).first()).toBeVisible({ timeout: 10_000 });
+
+  // PDF link should be available
+  await expect(vk.getByText('PDF')).toBeVisible();
+
+  // ── 9. Public results page ──────────────────────────────────────────
+  const publicPage = await vkContext.newPage();
+  await publicPage.goto(`/results/${eventId}`);
+  await expect(publicPage.getByText('Smoke Test Event')).toBeVisible({ timeout: 10_000 });
+  await expect(publicPage.getByRole('heading', { name: 'Option Alpha' }).first()).toBeVisible();
+
+  // ── Cleanup ─────────────────────────────────────────────────────────
+  await voterContext.close();
+  await vkContext.close();
+});