diff --git a/tests/e2e/navigation.spec.ts b/tests/e2e/navigation.spec.ts new file mode 100644 index 0000000..23c7af7 --- /dev/null +++ b/tests/e2e/navigation.spec.ts @@ -0,0 +1,124 @@ +import { test, expect } from '@playwright/test'; + +// Test 1: Dashboard page renders after login +test('dashboard page renders after login', async ({ page }) => { + await page.goto('/dashboard'); + await page.waitForLoadState('networkidle'); + + // Verify we're on dashboard + await expect(page).toHaveURL(/.*dashboard/); + + // Verify dashboard heading is visible (German text) + await expect(page.getByText('Übersicht')).toBeVisible(); + + // Verify welcome message is visible + await expect(page.getByTestId('dashboard-welcome-text')).toBeVisible(); +}); + +// Test 2: Top navigation shows correct links +test('top navigation shows correct links', async ({ page }) => { + await page.goto('/dashboard'); + await page.waitForLoadState('networkidle'); + + // Verify Services link is visible + await expect(page.getByTestId('auth-layout-nav-services')).toBeVisible(); + + // Verify Song-Datenbank link is visible + await expect(page.getByTestId('auth-layout-nav-songs')).toBeVisible(); + + // Verify text content of links + await expect(page.getByTestId('auth-layout-nav-services')).toContainText('Services'); + await expect(page.getByTestId('auth-layout-nav-songs')).toContainText('Song-Datenbank'); +}); + +// Test 3: Top navigation shows logged-in user +test('top navigation shows logged-in user', async ({ page }) => { + await page.goto('/dashboard'); + await page.waitForLoadState('networkidle'); + + // Verify user dropdown trigger is visible + await expect(page.getByTestId('auth-layout-user-dropdown-trigger')).toBeVisible(); + + // Verify user name is displayed in dropdown trigger + const userDropdown = page.getByTestId('auth-layout-user-dropdown-trigger'); + await expect(userDropdown).toContainText(/./); // At least some text (user name) +}); + +// Test 4: Sync button visible with timestamp +test('sync button visible with timestamp', async ({ page }) => { + await page.goto('/dashboard'); + await page.waitForLoadState('networkidle'); + + // Verify sync button is visible + await expect(page.getByTestId('auth-layout-sync-button')).toBeVisible(); + + // Verify sync button contains German text + await expect(page.getByTestId('auth-layout-sync-button')).toContainText('Daten aktualisieren'); + + // Verify sync timestamp is visible + await expect(page.getByTestId('auth-layout-sync-timestamp')).toBeVisible(); + + // Verify timestamp contains German text + await expect(page.getByTestId('auth-layout-sync-timestamp')).toContainText('Zuletzt aktualisiert'); +}); + +// Test 5: Clicking Gottesdienste navigates to services +test('clicking Services navigates to services list', async ({ page }) => { + await page.goto('/dashboard'); + await page.waitForLoadState('networkidle'); + + // Click on Services link + await page.getByTestId('auth-layout-nav-services').click(); + + // Wait for navigation + await page.waitForLoadState('networkidle'); + + // Verify we're on services page + await expect(page).toHaveURL(/.*services/); +}); + +// Test 6: Clicking Song-Datenbank navigates to songs +test('clicking Song-Datenbank navigates to songs list', async ({ page }) => { + await page.goto('/dashboard'); + await page.waitForLoadState('networkidle'); + + // Click on Song-Datenbank link + await page.getByTestId('auth-layout-nav-songs').click(); + + // Wait for navigation + await page.waitForLoadState('networkidle'); + + // Verify we're on songs page + await expect(page).toHaveURL(/.*songs/); +}); + +// Test 7: Logo links back to dashboard +test('logo links back to dashboard', async ({ page }) => { + // Navigate to services first + await page.goto('/services'); + await page.waitForLoadState('networkidle'); + + // Click logo + await page.getByTestId('auth-layout-logo').click(); + + // Wait for navigation + await page.waitForLoadState('networkidle'); + + // Verify we're back on dashboard + await expect(page).toHaveURL(/.*dashboard/); +}); + +// Test 8: User dropdown trigger is clickable +test('user dropdown trigger is clickable', async ({ page }) => { + await page.goto('/dashboard'); + await page.waitForLoadState('networkidle'); + + // Click user dropdown + await page.getByTestId('auth-layout-user-dropdown-trigger').click(); + + // Verify logout link appears + await expect(page.getByTestId('auth-layout-logout-link')).toBeVisible(); + + // Verify logout link contains German text + await expect(page.getByTestId('auth-layout-logout-link')).toContainText('Abmelden'); +});