Test End-to-End with Playwright

Set up Playwright for our Next.js 15.5 project with MSAL authentication.

Requirements:
1. playwright.config.ts:
   - baseURL from PLAYWRIGHT_BASE_URL env var (default: http://localhost:3000)
   - Projects: chromium only (our users are on Edge/Chrome, no Firefox/Safari needed)
   - Global setup file that authenticates once and saves storage state
   - Retry: 1 on CI, 0 locally
   - Reporter: html locally, junit on CI for Azure DevOps integration

2. Global setup (e2e/global-setup.ts):
   - Launch browser, navigate to /login
   - Fill in test credentials from PLAYWRIGHT_TEST_USER and PLAYWRIGHT_TEST_PASS env vars
   - Complete MSAL login flow (handle the Microsoft redirect)
   - Wait for redirect back to our app (URL contains /dashboard)
   - Save storage state to e2e/.auth/user.json
   - Create a second auth state for admin: PLAYWRIGHT_ADMIN_USER/PLAYWRIGHT_ADMIN_PASS
     saved to e2e/.auth/admin.json

3. Test fixtures (e2e/fixtures.ts):
   - Export a 'test' that extends base test with:
     - viewerPage: uses e2e/.auth/viewer.json storage state
     - operatorPage: uses e2e/.auth/operator.json storage state
     - adminPage: uses e2e/.auth/admin.json storage state
   - Each fixture creates a new context with the stored auth state

4. .env.example showing all required PLAYWRIGHT_* variables

Our app uses next-auth v5 with JWT strategy. The session cookie is
'next-auth.session-token'. After MSAL redirect, next-auth sets this cookie
and the user lands on /dashboard.

Write Playwright E2E tests for RBAC enforcement on the /facilities page.

Test cases:
1. Viewer can see the facilities list table
2. Viewer does NOT see the "Create Facility" button
3. Viewer navigating directly to /facilities/new gets redirected to /facilities
4. Operator sees and can click "Create Facility"
5. Operator does NOT see the "Delete" button on facility rows
6. Admin sees the "Delete" button and can open the confirmation dialog
7. Unauthenticated user navigating to /facilities gets redirected to /login

Use the role-based fixtures from e2e/fixtures.ts (viewerPage, operatorPage,
adminPage). For the unauthenticated test, use a fresh browser context with
no storage state.

Our MUI DataGrid renders facility rows with data-testid="facility-row-{id}".
The Create button has data-testid="create-facility-btn".
The Delete button has data-testid="delete-facility-{id}".

import { test, expect } from './fixtures';

test.describe('RBAC — Facilities', () => {
  test('viewer cannot see Create button', async ({ viewerPage }) => {
    await viewerPage.goto('/facilities');
    await expect(viewerPage.getByTestId('create-facility-btn')).not.toBeVisible();
  });

  test('viewer direct navigation to /new redirects', async ({ viewerPage }) => {
    await viewerPage.goto('/facilities/new');
    await expect(viewerPage).toHaveURL(/\/facilities$/);
  });

  test('operator can access Create', async ({ operatorPage }) => {
    await operatorPage.goto('/facilities');
    await expect(operatorPage.getByTestId('create-facility-btn')).toBeVisible();
  });

  test('operator cannot see Delete', async ({ operatorPage }) => {
    await operatorPage.goto('/facilities');
    await expect(operatorPage.getByTestId(/^delete-facility-/)).not.toBeVisible();
  });

  test('admin can see Delete', async ({ adminPage }) => {
    await adminPage.goto('/facilities');
    await expect(adminPage.getByTestId(/^delete-facility-/).first()).toBeVisible();
  });
});

Write Playwright tests for DensityGate on /facilities:

1. Default view is 'executive' — shows the summary KPI cards
2. Clicking the 'Operational' tab shows the DataGrid table
3. Clicking the 'Technical' tab shows the SQL query panel
4. Switching from Technical back to Executive hides the SQL panel
5. The selected tier persists after page reload (stored in localStorage)

The DensityGate tabs have data-testid="density-tab-executive",
"density-tab-operational", "density-tab-technical".
The KPI panel: data-testid="kpi-panel"
The DataGrid: data-testid="facilities-grid"
The SQL panel: data-testid="sql-panel"

test('technical view reveals SQL panel', async ({ operatorPage }) => {
  await operatorPage.goto('/facilities');
  await operatorPage.getByTestId('density-tab-technical').click();
  await expect(operatorPage.getByTestId('sql-panel')).toBeVisible();
  await expect(operatorPage.getByTestId('kpi-panel')).not.toBeVisible();
});

test('tier persists after reload', async ({ operatorPage }) => {
  await operatorPage.goto('/facilities');
  await operatorPage.getByTestId('density-tab-operational').click();
  await operatorPage.reload();
  await expect(operatorPage.getByTestId('density-tab-operational'))
    .toHaveAttribute('aria-selected', 'true');
  await expect(operatorPage.getByTestId('facilities-grid')).toBeVisible();
});

Write Playwright tests for mutation feedback on /facilities:

1. Create facility: fill form, submit, verify success snackbar appears
   with text "Facility created"
2. Create with duplicate code: submit, verify error snackbar with
   "A facility with this code already exists"
3. Snackbar auto-dismisses after 6 seconds
4. After successful create, the new facility appears in the DataGrid
   without manual refresh (SWR revalidation)

MUI Snackbar renders with role="alert". Success snackbar has
data-testid="snackbar-success", error has data-testid="snackbar-error".

test('successful create shows snackbar and updates grid', async ({ operatorPage }) => {
  await operatorPage.goto('/facilities/new');
  await operatorPage.getByLabel('Facility Name').fill('Test Lab');
  await operatorPage.getByLabel('Facility Code').fill('TLAB');
  await operatorPage.getByTestId('submit-facility').click();

  // Verify snackbar
  const snackbar = operatorPage.getByTestId('snackbar-success');
  await expect(snackbar).toBeVisible();
  await expect(snackbar).toContainText('Facility created');

  // Verify SWR revalidation — grid updates without refresh
  await expect(operatorPage).toHaveURL(/\/facilities$/);
  await expect(operatorPage.getByText('Test Lab')).toBeVisible();
});