test: E2E tests for tenant branding (#1973)

* test: add E2E tests for tenant branding

Covers login page heading, browser title, and header for both bare
domain and tenant subdomain scenarios.

- Bare domain: heading and title show "Meridian Operations Console"
- Tenant subdomain (mocked /api/tenant-info): heading shows display
  name, title shows "{Name} - Operations Console"
- Header shows JWT tenantDisplayName (x-tenant-display-name claim)
  when present, falls back to "Meridian" when absent

* test: fix header fallback test to use platform admin fixture

The authenticatedPage fixture has tenantId='dev-tenant' which causes
the header to show "Dev Tenant" via formatSlugAsDisplayName. The
"Meridian" fallback applies to platform admins with no tenant selected.

* test: use authenticated tenant fixture for header fallback test

Replace platform admin fixture with authenticatedPage fixture. The
platform admin TenantSelector issues an API call on mount causing
timing uncertainty. Using a tenant user with tenantId='dev-tenant'
and no x-tenant-display-name reliably tests the slug fallback path:
formatSlugAsDisplayName('dev-tenant') = "Dev Tenant".

* test: use UTF-8 safe base64url encoding for JWT segments

btoa() only handles Latin-1 input and throws InvalidCharacterError for
non-ASCII tenant display names. Encode via TextEncoder -> btoa -> base64url
so tokens work for any Unicode display name.

---------

Co-authored-by: Ben Coombs <bjcoombs@users.noreply.github.com>

Author: bjcoombs

frontend/e2e/tenant-branding.spec.ts

@@ -0,0 +1,126 @@
+import { test, expect, type Page } from '@playwright/test'
+import { test as authTest, expect as authExpect } from './fixtures'
+
+/**
+ * UTF-8 safe base64url encoder for JWT segments.
+ * btoa() only accepts Latin-1, so non-ASCII display names (e.g., "東京電力") would
+ * throw InvalidCharacterError. TextEncoder handles the full Unicode range.
+ */
+function encodeJwtSegment(value: Record<string, unknown>): string {
+  const bytes = new TextEncoder().encode(JSON.stringify(value))
+  let binary = ''
+  for (const byte of bytes) binary += String.fromCharCode(byte)
+  return btoa(binary).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '')
+}
+
+/**
+ * Build a dev-mode JWT with an explicit tenant display name claim.
+ * The auth context reads `x-tenant-display-name` to populate `claims.tenantDisplayName`.
+ */
+function buildTokenWithDisplayName(displayName: string): string {
+  const header = encodeJwtSegment({ alg: 'none', typ: 'JWT' })
+  const payload = encodeJwtSegment({
+    userId: 'e2e-user',
+    tenantId: 'dev-tenant',
+    roles: ['tenant-user'],
+    scopes: ['read', 'write'],
+    'x-tenant-display-name': displayName,
+    exp: Math.floor(Date.now() / 1000) + 86_400,
+    iss: 'meridian-dev',
+    aud: 'meridian-console',
+    sub: 'e2e-user',
+  })
+  return `${header}.${payload}.e2e-signature`
+}
+
+/**
+ * Inject a dev token via __DEV_LOGIN__ and navigate to / so the authenticated
+ * app shell renders with the given token's claims.
+ */
+async function injectTokenAndNavigate(page: Page, token: string) {
+  await page.goto('/')
+  await page.waitForFunction(
+    () => typeof (window as Record<string, unknown>).__DEV_LOGIN__ === 'function',
+  )
+  await page.evaluate((t) => {
+    ;(window as Record<string, unknown>).__DEV_LOGIN__(t)
+  }, token)
+  await page.evaluate(() => {
+    window.history.pushState({}, '', '/')
+    window.dispatchEvent(new PopStateEvent('popstate'))
+  })
+  await page.waitForSelector('main', { timeout: 10_000 })
+}
+
+/**
+ * Tenant branding E2E tests.
+ *
+ * The test environment runs on localhost, which has no tenant subdomain.
+ * Tenant subdomain scenarios are simulated by mocking the /api/tenant-info
+ * endpoint via page.route().
+ *
+ * Scenarios covered:
+ * - Bare domain login page heading and browser title
+ * - Tenant subdomain login page heading and browser title (mocked API)
+ * - Header shows tenant display name from JWT after login
+ * - Header shows "Meridian" when no display name is present
+ */
+
+test.describe('Tenant branding - bare domain login page', () => {
+  test('shows "Meridian Operations Console" heading', async ({ page }) => {
+    await page.goto('/login')
+    await expect(page.getByRole('heading', { name: 'Meridian Operations Console' })).toBeVisible()
+  })
+
+  test('browser title is "Meridian Operations Console"', async ({ page }) => {
+    await page.goto('/login')
+    // Wait for the heading to confirm the page has settled
+    await page.getByRole('heading', { name: 'Meridian Operations Console' }).waitFor()
+    await expect(page).toHaveTitle('Meridian Operations Console')
+  })
+})
+
+test.describe('Tenant branding - tenant subdomain login page', () => {
+  test('shows tenant display name in login heading', async ({ page }) => {
+    await page.route('/api/tenant-info', (route) =>
+      route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify({ slug: 'acme', displayName: 'Acme Energy' }),
+      }),
+    )
+    await page.goto('/login')
+    await expect(
+      page.getByRole('heading', { name: 'Acme Energy Operations Console' }),
+    ).toBeVisible()
+  })
+
+  test('browser title shows "{Tenant Name} - Operations Console"', async ({ page }) => {
+    await page.route('/api/tenant-info', (route) =>
+      route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify({ slug: 'acme', displayName: 'Acme Energy' }),
+      }),
+    )
+    await page.goto('/login')
+    await page.getByRole('heading', { name: 'Acme Energy Operations Console' }).waitFor()
+    await expect(page).toHaveTitle('Acme Energy - Operations Console')
+  })
+})
+
+test.describe('Tenant branding - header after login', () => {
+  test('header shows tenant display name from JWT', async ({ page }) => {
+    const token = buildTokenWithDisplayName('Volterra Energy')
+    await injectTokenAndNavigate(page, token)
+    await expect(page.locator('header').getByText('Volterra Energy')).toBeVisible()
+  })
+
+  authTest('header shows formatted slug when JWT has no display name', async ({
+    authenticatedPage: page,
+  }) => {
+    // Tenant user with tenantId='dev-tenant' but no x-tenant-display-name in the JWT.
+    // Falls back to formatSlugAsDisplayName('dev-tenant') = "Dev Tenant".
+    await authExpect(page.locator('header').getByText('Dev Tenant')).toBeVisible()
+  })
+})