test(e2e): add dashboard and navigation E2E tests
- 9 tests: dashboard render, nav links, user display, sync button, navigation flows - Tests navigation to services and songs pages - German UI text assertions (Willkommen, Gottesdienste, Song-Datenbank) - All tests passing
This commit is contained in:
Thorsten Bus
parent
726e291dc6
commit
93b214c172
124
tests/e2e/navigation.spec.ts
Normal file
124
tests/e2e/navigation.spec.ts
Normal file
|
|
@ -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');
|
||||||
|
});
|
||||||
Loading…
Reference in a new issue