Built the Sentinel Tab

app/tests/notification-center.spec.ts

@@ -0,0 +1,59 @@
+import { test, expect } from '@playwright/test';
+
+test.beforeEach(async ({ page }) => {
+  await page.addInitScript(() => {
+    class FakeWebSocket {
+      url: string;
+      readyState = 1;
+      onopen: ((event: Event) => void) | null = null;
+      onmessage: ((event: MessageEvent) => void) | null = null;
+      onclose: (() => void) | null = null;
+      onerror: (() => void) | null = null;
+
+      constructor(url: string) {
+        this.url = url;
+        setTimeout(() => {
+          this.onopen?.(new Event('open'));
+          if (url.includes('/notifications')) {
+            this.onmessage?.(
+              new MessageEvent('message', {
+                data: JSON.stringify({
+                  type: 'WS_ASSET_OPENED',
+                  data: {
+                    lead_id: 'lead-1',
+                    lead_name: 'Mohammed Al-Rashid',
+                    asset_name: 'PH-01 Deck',
+                  },
+                }),
+              }),
+            );
+          }
+        }, 50);
+      }
+
+      send() {}
+      close() {
+        this.onclose?.();
+      }
+    }
+
+    Object.defineProperty(window, 'WebSocket', {
+      configurable: true,
+      writable: true,
+      value: FakeWebSocket,
+    });
+  });
+});
+
+test('shows unread notification badge and panel content', async ({ page }) => {
+  await page.goto('/login');
+  await page.getByText('Tap to authenticate with FaceID').waitFor();
+  await page.getByRole('button').first().click();
+  await expect(page.getByText('Project Velocity')).toBeVisible({ timeout: 5000 });
+
+  await expect(page.locator('#notification-bell')).toBeVisible();
+  await expect(page.locator('#notification-bell')).toContainText(/[1-9]/);
+  await page.locator('#notification-bell').click();
+  await expect(page.locator('#notification-panel')).toBeVisible();
+  await expect(page.getByText('Velocity Link Opened').first()).toBeVisible();
+});