template-saas-frontend-v2/tests/e2e/dashboard/dashboard.spec.ts

import { test, expect } from '@playwright/test';
import { test as authTest } from '../fixtures/auth.fixture';
import { waitForPageLoad } from '../utils/helpers';

test.describe('Dashboard', () => {
  // Use authenticated page fixture
  authTest('should display dashboard after login', async ({ authenticatedPage: page }) => {
    await page.goto('/dashboard');
    await waitForPageLoad(page);

    // Should show dashboard container
    await expect(page.locator('[data-testid="dashboard"], .dashboard')).toBeVisible();
  });

  authTest('should show user greeting', async ({ authenticatedPage: page }) => {
    await page.goto('/dashboard');

    // Should show personalized greeting
    const greeting = page.locator('[data-testid="user-greeting"], .user-greeting');
    await expect(greeting).toBeVisible();
  });

  authTest('should display navigation sidebar', async ({ authenticatedPage: page }) => {
    await page.goto('/dashboard');

    // Should show sidebar
    const sidebar = page.locator('[data-testid="sidebar"], .sidebar, nav');
    await expect(sidebar).toBeVisible();

    // Should have navigation links
    await expect(page.locator('a[href="/dashboard"]')).toBeVisible();
    await expect(page.locator('a[href*="settings"], a[href*="profile"]')).toBeVisible();
  });

  authTest('should show notification bell', async ({ authenticatedPage: page }) => {
    await page.goto('/dashboard');

    // Should show notification icon
    const notificationBell = page.locator('[data-testid="notification-bell"], .notification-bell');
    await expect(notificationBell).toBeVisible();
  });

  authTest('should show user menu', async ({ authenticatedPage: page }) => {
    await page.goto('/dashboard');

    // Should show user avatar/menu
    const userMenu = page.locator('[data-testid="user-menu"], .user-menu');
    await expect(userMenu).toBeVisible();

    // Click to open menu
    await userMenu.click();

    // Should show dropdown with options
    await expect(page.locator('[data-testid="logout-button"], button:has-text("Logout")')).toBeVisible();
  });

  authTest('should navigate to profile settings', async ({ authenticatedPage: page }) => {
    await page.goto('/dashboard');

    // Click on profile/settings link
    await page.click('a[href*="profile"], a[href*="settings"]');

    // Should navigate to profile page
    await expect(page).toHaveURL(/\/(profile|settings)/);
  });

  authTest('should display quick stats/metrics', async ({ authenticatedPage: page }) => {
    await page.goto('/dashboard');

    // Should show stats cards (if implemented)
    const statsContainer = page.locator('[data-testid="dashboard-stats"], .dashboard-stats');

    // This is optional - may not be implemented
    if (await statsContainer.isVisible()) {
      // Should have at least one stat card
      const statCards = page.locator('[data-testid="stat-card"], .stat-card');
      expect(await statCards.count()).toBeGreaterThan(0);
    }
  });

  authTest('should show recent activity', async ({ authenticatedPage: page }) => {
    await page.goto('/dashboard');

    // Should show activity section (if implemented)
    const activitySection = page.locator('[data-testid="recent-activity"], .recent-activity');

    // This is optional feature
    if (await activitySection.isVisible()) {
      await expect(activitySection).toBeVisible();
    }
  });

  authTest('should be responsive on mobile', async ({ authenticatedPage: page }) => {
    // Set mobile viewport
    await page.setViewportSize({ width: 375, height: 667 });
    await page.goto('/dashboard');

    // Sidebar should be hidden or collapsed
    const sidebar = page.locator('[data-testid="sidebar"], .sidebar');

    // Either hidden or has mobile menu button
    const menuButton = page.locator('[data-testid="mobile-menu"], .mobile-menu-button');

    // One of these should be true
    const isSidebarHidden = !(await sidebar.isVisible());
    const hasMobileMenu = await menuButton.isVisible();

    expect(isSidebarHidden || hasMobileMenu).toBeTruthy();
  });
});

test.describe('Dashboard - Unauthenticated', () => {
  test('should redirect to login if not authenticated', async ({ page }) => {
    await page.goto('/dashboard');

    // Should redirect to login
    await expect(page).toHaveURL(/\/auth\/login/);
  });
});