een-api-toolkit 0.1.13 → 0.2.0

package/examples/vue-feeds/e2e/auth.spec.ts

@@ -1,510 +1,248 @@
 /**
- * Authenticated E2E tests for vue-feeds example
+ * E2E tests for the Vue Feeds Example - OAuth Login Flow
  *
- * These tests require:
- * - TEST_USER and TEST_PASSWORD environment variables
- * - VITE_EEN_CLIENT_ID environment variable
- * - Running OAuth proxy server (see ../../../scripts/restart-proxy.sh)
+ * Tests the OAuth login flow through the UI:
+ * 1. Click login button in the example app
+ * 2. Enter credentials on EEN OAuth page
+ * 3. Complete the OAuth callback
+ * 4. Verify authenticated state and feeds functionality
+ *
+ * Required environment variables:
+ * - VITE_PROXY_URL: OAuth proxy URL (e.g., http://127.0.0.1:8787)
+ * - VITE_EEN_CLIENT_ID: EEN OAuth client ID
+ * - TEST_USER: Test user email
+ * - TEST_PASSWORD: Test user password
+ *
+ * Note: Helper functions (isProxyAccessible, performLogin, clearAuthState) are
+ * intentionally duplicated in each example's auth.spec.ts to avoid Playwright's
+ * "Requiring @playwright/test second time" error that occurs when importing
+ * from a shared file outside the example directory.
  */
 
-import { test, expect } from '@playwright/test'
-import { getAuthToken, injectAuthState, AuthState } from '../../../e2e/auth-helper'
+import { test, expect, Page } from '@playwright/test'
+import { baseURL } from '../playwright.config'
 
-test.describe('vue-feeds authenticated tests', () => {
-  let authState: AuthState
+const TIMEOUTS = {
+  OAUTH_REDIRECT: 30000,
+  ELEMENT_VISIBLE: 15000,
+  PASSWORD_VISIBLE: 10000,
+  AUTH_COMPLETE: 30000,
+  UI_UPDATE: 10000,
+  PROXY_CHECK: 5000,
+  FEEDS_LOAD: 30000
+} as const
 
-  test.beforeAll(async () => {
-    // Get auth token (from cache or fresh login)
-    authState = await getAuthToken()
-  })
+const TEST_USER = process.env.TEST_USER
+const TEST_PASSWORD = process.env.TEST_PASSWORD
+const PROXY_URL = process.env.VITE_PROXY_URL
 
-  test.beforeEach(async ({ page }) => {
-    // Navigate to home and inject auth state before each test
-    await page.goto('/')
-    await injectAuthState(page, authState)
-  })
-
-  test('authenticated home page shows view feeds button', async ({ page }) => {
-    // Reload to apply auth state (already injected by beforeEach)
-    await page.reload()
-
-    // Should show authenticated state
-    await expect(page.getByTestId('authenticated')).toBeVisible()
-    await expect(page.getByTestId('view-feeds-button')).toBeVisible()
-    await expect(page.getByText('You are logged in!')).toBeVisible()
-  })
-
-  test('authenticated user sees cameras on feeds page', async ({ page }) => {
-    // Navigate to feeds page (auth already injected by beforeEach)
-    await page.goto('/feeds')
-
-    // Should show the feeds view
-    await expect(page.getByRole('heading', { name: 'Camera Feeds' })).toBeVisible()
-
-    // Wait for cameras to load (or show no cameras message)
-    await page.waitForSelector('[data-testid="camera-select"], .no-cameras', {
-      timeout: 30000
+/**
+ * Checks if the OAuth proxy server is accessible.
+ * Returns false if proxy is unavailable, allowing tests to be skipped gracefully.
+ */
+async function isProxyAccessible(): Promise<boolean> {
+  if (!PROXY_URL) return false
+  const controller = new AbortController()
+  const timeoutId = setTimeout(() => controller.abort(), TIMEOUTS.PROXY_CHECK)
+
+  try {
+    const response = await fetch(PROXY_URL, {
+      method: 'HEAD',
+      signal: controller.signal
     })
-
-    // Either cameras are loaded or we see "no cameras" message
-    const cameraSelect = page.getByTestId('camera-select')
-    const noCameras = page.locator('.no-cameras')
-
-    const hasCameras = await cameraSelect.isVisible().catch(() => false)
-    const hasNoCameras = await noCameras.isVisible().catch(() => false)
-
-    expect(hasCameras || hasNoCameras).toBe(true)
-
-    if (hasCameras) {
-      console.log('Cameras found - checking controls')
-
-      // Verify controls are present
-      await expect(page.getByTestId('refresh-button')).toBeVisible()
-
-      // Wait for feeds to load
-      await page.waitForSelector('[data-testid="feeds-table"], .no-feeds', {
-        timeout: 30000
-      })
-
-      // Check if we have feeds
-      const hasFeeds = await page.getByTestId('feeds-table').isVisible().catch(() => false)
-      if (hasFeeds) {
-        console.log('Feeds loaded successfully')
-
-        // Check feeds summary
-        await expect(page.getByTestId('feeds-summary')).toBeVisible()
-
-        // Check that at least one feed row exists
-        const feedRows = page.getByTestId('feed-row')
-        const count = await feedRows.count()
-        expect(count).toBeGreaterThan(0)
-        console.log(`Found ${count} feeds`)
-      } else {
-        console.log('No feeds available for this camera')
-      }
-    } else {
-      console.log('No cameras in account')
+    return response.ok || response.status === 404
+  } catch (error) {
+    if (!process.env.CI) {
+      console.log('Proxy check failed:', error instanceof Error ? error.message : error)
     }
-  })
+    return false
+  } finally {
+    clearTimeout(timeoutId)
+  }
+}
 
-  test('feeds table shows correct feed information', async ({ page }) => {
-    // Navigate to feeds page (auth already injected by beforeEach)
-    await page.goto('/feeds')
+/**
+ * Performs OAuth login flow through the EEN authentication page.
+ * Handles two-step navigation: app login page -> EEN OAuth -> callback
+ */
+async function performLogin(page: Page, username: string, password: string): Promise<void> {
+  await page.goto('/')
 
-    // Wait for cameras to load
-    await page.waitForSelector('[data-testid="camera-select"], .no-cameras', {
-      timeout: 30000
-    })
+  // Click login button on home page to go to login page
+  await page.click('[data-testid="login-button"]')
+  await page.waitForURL('/login')
 
-    const hasCameras = await page.getByTestId('camera-select').isVisible().catch(() => false)
+  // Click login button on login page to trigger OAuth
+  await Promise.all([
+    page.waitForURL(/.*eagleeyenetworks.com.*/, { timeout: TIMEOUTS.OAUTH_REDIRECT }),
+    page.getByRole('button', { name: 'Login with Eagle Eye Networks' }).click()
+  ])
 
-    if (hasCameras) {
-      // Wait for feeds to load
-      await page.waitForSelector('[data-testid="feeds-table"], .no-feeds', {
-        timeout: 30000
-      })
+  // EEN OAuth page selectors - these depend on EEN's login UI and may need
+  // updates if EEN changes their authentication page structure
+  const emailInput = page.locator('#authentication--input__email')
+  await emailInput.waitFor({ state: 'visible', timeout: TIMEOUTS.ELEMENT_VISIBLE })
+  await emailInput.fill(username)
 
-      const hasFeeds = await page.getByTestId('feeds-table').isVisible().catch(() => false)
-
-      if (hasFeeds) {
-        // Verify feed ID is displayed
-        const feedId = await page.getByTestId('feed-id').first().textContent()
-        expect(feedId).toBeTruthy()
-        console.log(`First feed ID: ${feedId}`)
-
-        // Verify feed type is displayed (main, preview, or talkdown)
-        const feedType = await page.getByTestId('feed-type').first().textContent()
-        expect(feedType).toMatch(/main|preview|talkdown/i)
-        console.log(`First feed type: ${feedType}`)
-
-        // Verify media type is displayed
-        const mediaType = await page.getByTestId('feed-media-type').first().textContent()
-        expect(mediaType).toBeTruthy()
-        console.log(`First feed media type: ${mediaType}`)
-
-        // Verify URL availability is shown
-        const feedUrls = page.getByTestId('feed-urls').first()
-        await expect(feedUrls).toBeVisible()
-      } else {
-        console.log('No feeds to test')
-      }
-    } else {
-      console.log('No cameras to test with')
-    }
-  })
+  await page.getByRole('button', { name: 'Next' }).click()
 
-  test('refresh button fetches feeds', async ({ page }) => {
-    // Navigate to feeds page (auth already injected by beforeEach)
-    await page.goto('/feeds')
+  const passwordInput = page.locator('#authentication--input__password')
+  await passwordInput.waitFor({ state: 'visible', timeout: TIMEOUTS.PASSWORD_VISIBLE })
+  await passwordInput.fill(password)
 
-    // Wait for cameras to load
-    await page.waitForSelector('[data-testid="camera-select"], .no-cameras', {
-      timeout: 30000
-    })
+  // EEN uses either #next or "Sign in" button depending on login flow
+  await page.locator('#next, button:has-text("Sign in")').first().click()
 
-    const hasCameras = await page.getByTestId('camera-select').isVisible().catch(() => false)
+  // Wait for redirect back to the app using configured baseURL
+  const baseURLPattern = new RegExp(baseURL.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'))
+  await page.waitForURL(baseURLPattern, { timeout: TIMEOUTS.AUTH_COMPLETE })
+}
 
-    if (hasCameras) {
-      // Wait for feeds to load
-      await page.waitForSelector('[data-testid="feeds-table"], .no-feeds', {
-        timeout: 30000
+/**
+ * Clears authentication state from browser storage.
+ * Used in afterEach to ensure test isolation.
+ */
+async function clearAuthState(page: Page): Promise<void> {
+  try {
+    const url = page.url()
+    if (url && url.startsWith('http')) {
+      await page.evaluate(() => {
+        try {
+          localStorage.clear()
+          sessionStorage.clear()
+        } catch {
+          // Storage access may fail in certain contexts
+        }
       })
-
-      // Click refresh
-      await page.getByTestId('refresh-button').click()
-
-      // Button should be visible (not broken)
-      await expect(page.getByTestId('refresh-button')).toBeVisible()
-
-      console.log('Refresh button clicked successfully')
-    } else {
-      console.log('No cameras to test refresh with')
     }
-  })
-
-  test('camera selection changes feeds', async ({ page }) => {
-    // Navigate to feeds page (auth already injected by beforeEach)
-    await page.goto('/feeds')
-
-    // Wait for cameras to load
-    await page.waitForSelector('[data-testid="camera-select"], .no-cameras', {
-      timeout: 30000
-    })
-
-    const cameraSelect = page.getByTestId('camera-select')
-    const hasCameras = await cameraSelect.isVisible().catch(() => false)
-
-    if (hasCameras) {
-      // Get all camera options
-      const options = await cameraSelect.locator('option').all()
-
-      if (options.length >= 2) {
-        // Wait for initial feeds to load
-        await page.waitForSelector('[data-testid="feeds-table"], .no-feeds', {
-          timeout: 30000
-        })
-
-        // Get the second camera's value
-        const secondCameraValue = await options[1].getAttribute('value')
-        console.log(`Selecting camera: ${secondCameraValue}`)
-
-        // Select the second camera
-        await cameraSelect.selectOption(secondCameraValue!)
+  } catch (error) {
+    if (!process.env.CI) {
+      console.log('Clear auth state failed:', error instanceof Error ? error.message : error)
+    }
+  }
+}
 
-        // Wait for feeds to reload
-        await page.waitForSelector('[data-testid="feeds-list"]', {
-          timeout: 30000
-        })
+test.describe('Vue Feeds Example - Auth', () => {
+  let proxyAccessible = false
 
-        // Give it a moment to fetch new feeds
-        await page.waitForTimeout(2000)
+  function skipIfNoProxy() {
+    test.skip(!proxyAccessible, 'OAuth proxy not accessible')
+  }
 
-        // Verify feeds list is visible
-        await expect(page.getByTestId('feeds-list')).toBeVisible()
+  function skipIfNoCredentials() {
+    test.skip(!TEST_USER || !TEST_PASSWORD, 'Test credentials not available')
+  }
 
-        console.log('Camera selection changed successfully')
-      } else {
-        console.log('Only one camera available - cannot test camera switching')
-      }
-    } else {
-      console.log('No cameras to test with')
+  test.beforeAll(async () => {
+    proxyAccessible = await isProxyAccessible()
+    if (!proxyAccessible) {
+      console.log('OAuth proxy not accessible - OAuth tests will be skipped')
     }
   })
 
-  test('preview button opens modal with multipart image', async ({ page }) => {
-    // Navigate to feeds page (auth already injected by beforeEach)
-    await page.goto('/feeds')
-
-    // Wait for cameras to load
-    await page.waitForSelector('[data-testid="camera-select"], .no-cameras', {
-      timeout: 30000
-    })
-
-    const hasCameras = await page.getByTestId('camera-select').isVisible().catch(() => false)
-
-    if (hasCameras) {
-      // Wait for feeds to load
-      await page.waitForSelector('[data-testid="feeds-table"], .no-feeds', {
-        timeout: 30000
-      })
-
-      const hasFeeds = await page.getByTestId('feeds-table').isVisible().catch(() => false)
-
-      if (hasFeeds) {
-        // Check if there's a View button (for preview feeds)
-        const viewButton = page.getByTestId('view-preview-button').first()
-        const hasViewButton = await viewButton.isVisible().catch(() => false)
-
-        if (hasViewButton) {
-          console.log('Found View button - clicking to open modal')
-
-          // Click the View button
-          await viewButton.click()
-
-          // Wait for modal to appear
-          await expect(page.getByTestId('preview-modal')).toBeVisible({ timeout: 10000 })
-
-          // Verify modal shows preview image
-          await expect(page.getByTestId('preview-image')).toBeVisible({ timeout: 10000 })
-
-          // Verify modal header shows "Live Preview"
-          await expect(page.getByRole('heading', { name: 'Live Preview' })).toBeVisible()
-
-          // Verify mode badge shows PREVIEW
-          await expect(page.locator('.mode-preview')).toContainText('PREVIEW')
-
-          console.log('Preview modal opened successfully with multipart image')
+  test.afterEach(async ({ page }) => {
+    await clearAuthState(page)
+  })
 
-          // Close modal
-          await page.locator('.close-button').click()
-          await expect(page.getByTestId('preview-modal')).not.toBeVisible()
-          console.log('Modal closed successfully')
-        } else {
-          console.log('No preview feeds with View button available')
-        }
-      } else {
-        console.log('No feeds available to test preview modal')
-      }
-    } else {
-      console.log('No cameras to test with')
-    }
+  test('shows login button when not authenticated', async ({ page }) => {
+    await page.goto('/')
+    await expect(page.getByTestId('not-authenticated')).toBeVisible()
+    await expect(page.getByTestId('nav-login')).toBeVisible()
   })
 
-  test('live button opens modal with video element', async ({ page }) => {
-    // Navigate to feeds page (auth already injected by beforeEach)
+  test('feeds page redirects to login when not authenticated', async ({ page }) => {
     await page.goto('/feeds')
+    await expect(page).toHaveURL('/login')
+  })
 
-    // Wait for cameras to load
-    await page.waitForSelector('[data-testid="camera-select"], .no-cameras', {
-      timeout: 30000
-    })
-
-    const hasCameras = await page.getByTestId('camera-select').isVisible().catch(() => false)
+  test('login button redirects to OAuth page', async ({ page }) => {
+    skipIfNoProxy()
+    skipIfNoCredentials()
 
-    if (hasCameras) {
-      // Wait for feeds to load
-      await page.waitForSelector('[data-testid="feeds-table"], .no-feeds', {
-        timeout: 30000
-      })
+    await page.goto('/')
+    await expect(page.getByTestId('login-button')).toBeVisible()
 
-      const hasFeeds = await page.getByTestId('feeds-table').isVisible().catch(() => false)
+    // Click login button on home page to go to login page
+    await page.click('[data-testid="login-button"]')
+    await page.waitForURL('/login')
 
-      if (hasFeeds) {
-        // Check if there's a Live button (for main feeds)
-        const liveButton = page.getByTestId('view-live-button').first()
-        const hasLiveButton = await liveButton.isVisible().catch(() => false)
+    // Click login button on login page to trigger OAuth
+    await Promise.all([
+      page.waitForURL(/.*eagleeyenetworks.com.*/, { timeout: TIMEOUTS.OAUTH_REDIRECT }),
+      page.getByRole('button', { name: 'Login with Eagle Eye Networks' }).click()
+    ])
 
-        if (hasLiveButton) {
-          console.log('Found Live button - clicking to open modal')
+    // EEN OAuth page selector
+    const emailInput = page.locator('#authentication--input__email')
+    await expect(emailInput).toBeVisible({ timeout: TIMEOUTS.ELEMENT_VISIBLE })
+  })
 
-          // Click the Live button
-          await liveButton.click()
+  test('complete OAuth login flow and view feeds', async ({ page }) => {
+    skipIfNoProxy()
+    skipIfNoCredentials()
 
-          // Wait for modal to appear
-          await expect(page.getByTestId('preview-modal')).toBeVisible({ timeout: 10000 })
+    await page.goto('/')
+    await expect(page.getByTestId('not-authenticated')).toBeVisible()
 
-          // Verify modal shows video element
-          await expect(page.getByTestId('preview-video')).toBeVisible({ timeout: 10000 })
+    await performLogin(page, TEST_USER!, TEST_PASSWORD!)
 
-          // Verify modal header shows "Live Stream (SDK)"
-          await expect(page.getByRole('heading', { name: 'Live Stream (SDK)' })).toBeVisible()
+    await expect(page.getByTestId('not-authenticated')).not.toBeVisible({ timeout: TIMEOUTS.UI_UPDATE })
+    await expect(page.getByTestId('nav-feeds')).toBeVisible()
+    await expect(page.getByTestId('nav-logout')).toBeVisible()
+  })
 
-          // Verify mode badge shows LIVE
-          await expect(page.locator('.mode-live')).toContainText('LIVE')
+  test('can view feeds list after login', async ({ page }) => {
+    skipIfNoProxy()
+    skipIfNoCredentials()
 
-          console.log('Live modal opened successfully with video element')
+    await performLogin(page, TEST_USER!, TEST_PASSWORD!)
+    await expect(page.getByTestId('nav-feeds')).toBeVisible({ timeout: TIMEOUTS.UI_UPDATE })
 
-          // Close modal
-          await page.locator('.close-button').click()
-          await expect(page.getByTestId('preview-modal')).not.toBeVisible()
-          console.log('Modal closed successfully')
-        } else {
-          console.log('No main feeds with Live button available')
-        }
-      } else {
-        console.log('No feeds available to test live modal')
-      }
-    } else {
-      console.log('No cameras to test with')
-    }
-  })
+    await page.click('[data-testid="nav-feeds"]')
+    await page.waitForURL('/feeds')
 
-  test('modal closes with escape key', async ({ page }) => {
-    // Navigate to feeds page (auth already injected by beforeEach)
-    await page.goto('/feeds')
+    await expect(page.getByRole('heading', { name: 'Camera Feeds' })).toBeVisible()
 
     // Wait for cameras to load
     await page.waitForSelector('[data-testid="camera-select"], .no-cameras', {
-      timeout: 30000
+      timeout: TIMEOUTS.FEEDS_LOAD
     })
+  })
 
-    const hasCameras = await page.getByTestId('camera-select').isVisible().catch(() => false)
-
-    if (hasCameras) {
-      // Wait for feeds to load
-      await page.waitForSelector('[data-testid="feeds-table"], .no-feeds', {
-        timeout: 30000
-      })
-
-      const hasFeeds = await page.getByTestId('feeds-table').isVisible().catch(() => false)
-
-      if (hasFeeds) {
-        // Try View button first, then Live button
-        const viewButton = page.getByTestId('view-preview-button').first()
-        const liveButton = page.getByTestId('view-live-button').first()
-
-        const hasViewButton = await viewButton.isVisible().catch(() => false)
-        const hasLiveButton = await liveButton.isVisible().catch(() => false)
-
-        if (hasViewButton || hasLiveButton) {
-          const buttonToClick = hasViewButton ? viewButton : liveButton
-          const buttonType = hasViewButton ? 'View' : 'Live'
-          console.log(`Opening modal with ${buttonType} button`)
-
-          // Click the button to open modal
-          await buttonToClick.click()
+  test('feeds page shows camera selector when cameras available', async ({ page }) => {
+    skipIfNoProxy()
+    skipIfNoCredentials()
 
-          // Wait for modal to appear
-          await expect(page.getByTestId('preview-modal')).toBeVisible({ timeout: 10000 })
+    await performLogin(page, TEST_USER!, TEST_PASSWORD!)
+    await expect(page.getByTestId('nav-feeds')).toBeVisible({ timeout: TIMEOUTS.UI_UPDATE })
 
-          // Press Escape key
-          await page.keyboard.press('Escape')
+    await page.click('[data-testid="nav-feeds"]')
+    await page.waitForURL('/feeds')
 
-          // Verify modal is closed
-          await expect(page.getByTestId('preview-modal')).not.toBeVisible({ timeout: 5000 })
-          console.log('Modal closed with Escape key successfully')
-        } else {
-          console.log('No preview or live feeds available to test modal escape')
-        }
-      } else {
-        console.log('No feeds available')
-      }
-    } else {
-      console.log('No cameras to test with')
-    }
-  })
-
-  test('modal closes when clicking backdrop', async ({ page }) => {
-    // Navigate to feeds page (auth already injected by beforeEach)
-    await page.goto('/feeds')
-
-    // Wait for cameras to load
     await page.waitForSelector('[data-testid="camera-select"], .no-cameras', {
-      timeout: 30000
+      timeout: TIMEOUTS.FEEDS_LOAD
     })
 
     const hasCameras = await page.getByTestId('camera-select').isVisible().catch(() => false)
-
     if (hasCameras) {
-      // Wait for feeds to load
-      await page.waitForSelector('[data-testid="feeds-table"], .no-feeds', {
-        timeout: 30000
-      })
-
-      const hasFeeds = await page.getByTestId('feeds-table').isVisible().catch(() => false)
-
-      if (hasFeeds) {
-        // Try View button first, then Live button
-        const viewButton = page.getByTestId('view-preview-button').first()
-        const liveButton = page.getByTestId('view-live-button').first()
-
-        const hasViewButton = await viewButton.isVisible().catch(() => false)
-        const hasLiveButton = await liveButton.isVisible().catch(() => false)
-
-        if (hasViewButton || hasLiveButton) {
-          const buttonToClick = hasViewButton ? viewButton : liveButton
-          const buttonType = hasViewButton ? 'View' : 'Live'
-          console.log(`Opening modal with ${buttonType} button`)
-
-          // Click the button to open modal
-          await buttonToClick.click()
-
-          // Wait for modal to appear
-          await expect(page.getByTestId('preview-modal')).toBeVisible({ timeout: 10000 })
-
-          // Click on the backdrop (modal-overlay) outside the modal-content
-          // The modal-overlay covers the entire screen, click in a corner
-          await page.getByTestId('preview-modal').click({ position: { x: 10, y: 10 } })
-
-          // Verify modal is closed
-          await expect(page.getByTestId('preview-modal')).not.toBeVisible({ timeout: 5000 })
-          console.log('Modal closed by clicking backdrop successfully')
-        } else {
-          console.log('No preview or live feeds available to test backdrop close')
-        }
-      } else {
-        console.log('No feeds available')
-      }
+      await expect(page.getByTestId('refresh-button')).toBeVisible()
+      console.log('Camera selector and refresh button visible')
     } else {
-      console.log('No cameras to test with')
+      console.log('No cameras in account - skipping camera-specific checks')
     }
   })
 
-  test('modal displays correct feed information', async ({ page }) => {
-    // Navigate to feeds page (auth already injected by beforeEach)
-    await page.goto('/feeds')
+  test('can logout after login', async ({ page }) => {
+    skipIfNoProxy()
+    skipIfNoCredentials()
 
-    // Wait for cameras to load
-    await page.waitForSelector('[data-testid="camera-select"], .no-cameras', {
-      timeout: 30000
-    })
-
-    const hasCameras = await page.getByTestId('camera-select').isVisible().catch(() => false)
-
-    if (hasCameras) {
-      // Wait for feeds to load
-      await page.waitForSelector('[data-testid="feeds-table"], .no-feeds', {
-        timeout: 30000
-      })
-
-      const hasFeeds = await page.getByTestId('feeds-table').isVisible().catch(() => false)
-
-      if (hasFeeds) {
-        // Try View button first, then Live button
-        const viewButton = page.getByTestId('view-preview-button').first()
-        const liveButton = page.getByTestId('view-live-button').first()
-
-        const hasViewButton = await viewButton.isVisible().catch(() => false)
-        const hasLiveButton = await liveButton.isVisible().catch(() => false)
-
-        if (hasViewButton || hasLiveButton) {
-          const buttonToClick = hasViewButton ? viewButton : liveButton
-          console.log(`Opening modal to verify feed info`)
+    await performLogin(page, TEST_USER!, TEST_PASSWORD!)
+    await expect(page.getByTestId('nav-logout')).toBeVisible({ timeout: TIMEOUTS.UI_UPDATE })
 
-          // Click the button to open modal
-          await buttonToClick.click()
+    await page.click('[data-testid="nav-logout"]')
 
-          // Wait for modal to appear
-          await expect(page.getByTestId('preview-modal')).toBeVisible({ timeout: 10000 })
-
-          // Verify feed info is displayed in modal
-          const modalFeedInfo = page.locator('.feed-info')
-          await expect(modalFeedInfo).toBeVisible()
-
-          // Check that Feed ID is displayed
-          await expect(modalFeedInfo).toContainText('Feed ID:')
-
-          // Check that Type is displayed
-          await expect(modalFeedInfo).toContainText('Type:')
-
-          // Check that Device is displayed
-          await expect(modalFeedInfo).toContainText('Device:')
-
-          // Check that Mode is displayed
-          await expect(modalFeedInfo).toContainText('Mode:')
-
-          console.log('Modal displays correct feed information')
-
-          // Close modal
-          await page.locator('.close-button').click()
-        } else {
-          console.log('No preview or live feeds available to test modal info')
-        }
-      } else {
-        console.log('No feeds available')
-      }
-    } else {
-      console.log('No cameras to test with')
-    }
+    await page.waitForURL('**/')
+    await expect(page.getByTestId('not-authenticated')).toBeVisible({ timeout: TIMEOUTS.UI_UPDATE })
+    await expect(page.getByTestId('nav-login')).toBeVisible()
   })
 })