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

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

test.describe('Goals Dashboard', () => {
  authTest('should display goals dashboard', async ({ authenticatedPage: page }) => {
    await page.goto('/dashboard/goals');
    await waitForPageLoad(page);

    // Should show goals dashboard
    await expect(page.locator('[data-testid="goals-dashboard"], .goals-dashboard, h1:has-text("Goals")')).toBeVisible();
  });

  authTest('should show goals overview metrics', async ({ authenticatedPage: page }) => {
    await page.goto('/dashboard/goals');
    await waitForPageLoad(page);

    // Should show key metrics (active goals, completed, progress)
    const metricsContainer = page.locator('[data-testid="goals-metrics"], .goals-metrics, .stats-grid');
    if (await metricsContainer.isVisible()) {
      const metricCards = page.locator('[data-testid="metric-card"], .metric-card, .stat-card');
      expect(await metricCards.count()).toBeGreaterThan(0);
    }
  });

  authTest('should have navigation to definitions', async ({ authenticatedPage: page }) => {
    await page.goto('/dashboard/goals');

    const definitionsLink = page.locator('a[href*="definitions"]');
    if (await definitionsLink.isVisible()) {
      await definitionsLink.click();
      await expect(page).toHaveURL(/\/goals\/definitions/);
    }
  });

  authTest('should have navigation to my goals', async ({ authenticatedPage: page }) => {
    await page.goto('/dashboard/goals');

    const myGoalsLink = page.locator('a[href*="my-goals"]');
    if (await myGoalsLink.isVisible()) {
      await myGoalsLink.click();
      await expect(page).toHaveURL(/\/goals\/my-goals/);
    }
  });

  authTest('should have navigation to reports', async ({ authenticatedPage: page }) => {
    await page.goto('/dashboard/goals');

    const reportsLink = page.locator('a[href*="reports"]');
    if (await reportsLink.isVisible()) {
      await reportsLink.click();
      await expect(page).toHaveURL(/\/goals\/reports/);
    }
  });
});

test.describe('Goal Definitions', () => {
  authTest('should display goal definitions list', async ({ authenticatedPage: page }) => {
    await page.goto('/dashboard/goals/definitions');
    await waitForPageLoad(page);

    // Should show definitions page
    await expect(page.locator('h1:has-text("Definitions"), h1:has-text("Goal"), [data-testid="definitions-page"]')).toBeVisible();
  });

  authTest('should show definitions table or list', async ({ authenticatedPage: page }) => {
    await page.goto('/dashboard/goals/definitions');
    await waitForPageLoad(page);

    // Should show table or list
    const table = page.locator('table, [data-testid="definitions-table"], [data-testid="definitions-list"]');
    await expect(table).toBeVisible();
  });

  authTest('should have create definition button for admin', async ({ adminPage: page }) => {
    await page.goto('/dashboard/goals/definitions');

    // Admin should see create button
    const createButton = page.locator('button:has-text("New Goal"), button:has-text("Create"), [data-testid="create-definition"]');
    if (await createButton.isVisible()) {
      await expect(createButton).toBeVisible();
    }
  });

  authTest('should open create definition modal/form', async ({ adminPage: page }) => {
    await page.goto('/dashboard/goals/definitions');

    const createButton = page.locator('button:has-text("New Goal"), button:has-text("Create"), [data-testid="create-definition"]');
    if (await createButton.isVisible()) {
      await createButton.click();

      // Should show form/modal
      const form = page.locator('form, [data-testid="definition-form"], [role="dialog"]');
      await expect(form).toBeVisible();
    }
  });

  authTest('should show definition detail on row click', async ({ authenticatedPage: page }) => {
    await page.goto('/dashboard/goals/definitions');
    await waitForPageLoad(page);

    // Click first row if table has data
    const firstRow = page.locator('table tbody tr, [data-testid="definition-row"]').first();
    if (await firstRow.isVisible()) {
      await firstRow.click();
      // Should navigate to detail page
      await expect(page).toHaveURL(/\/goals\/definitions\/.+/);
    }
  });

  authTest('should filter definitions by status', async ({ authenticatedPage: page }) => {
    await page.goto('/dashboard/goals/definitions');
    await waitForPageLoad(page);

    // Look for status filter
    const statusFilter = page.locator('[data-testid="status-filter"], select[name="status"]');
    if (await statusFilter.isVisible()) {
      await statusFilter.click();
    }
  });
});

test.describe('My Goals', () => {
  authTest('should display my goals page', async ({ authenticatedPage: page }) => {
    await page.goto('/dashboard/goals/my-goals');
    await waitForPageLoad(page);

    // Should show my goals page
    await expect(page.locator('h1:has-text("My Goals"), [data-testid="my-goals-page"]')).toBeVisible();
  });

  authTest('should show assigned goals list', async ({ authenticatedPage: page }) => {
    await page.goto('/dashboard/goals/my-goals');
    await waitForPageLoad(page);

    // Should show goals list or cards
    const goalsList = page.locator('table, [data-testid="my-goals-list"], .goals-list, .goals-grid');
    await expect(goalsList).toBeVisible();
  });

  authTest('should show progress indicators', async ({ authenticatedPage: page }) => {
    await page.goto('/dashboard/goals/my-goals');
    await waitForPageLoad(page);

    // Look for progress bars or indicators
    const progressIndicators = page.locator('[data-testid="goal-progress"], .progress-bar, .progress-indicator');
    if (await progressIndicators.count() > 0) {
      await expect(progressIndicators.first()).toBeVisible();
    }
  });

  authTest('should filter by goal status', async ({ authenticatedPage: page }) => {
    await page.goto('/dashboard/goals/my-goals');
    await waitForPageLoad(page);

    // Look for status tabs or filter
    const statusFilter = page.locator('[data-testid="status-tabs"], [data-testid="status-filter"], .status-tabs');
    if (await statusFilter.isVisible()) {
      await statusFilter.click();
    }
  });

  authTest('should navigate to assignment detail', async ({ authenticatedPage: page }) => {
    await page.goto('/dashboard/goals/my-goals');
    await waitForPageLoad(page);

    // Click on a goal
    const goalCard = page.locator('[data-testid="goal-card"], .goal-card, table tbody tr').first();
    if (await goalCard.isVisible()) {
      await goalCard.click();
      // Should navigate to assignment detail
      await expect(page).toHaveURL(/\/goals\/assignments\/.+/);
    }
  });

  authTest('should update goal progress', async ({ authenticatedPage: page }) => {
    await page.goto('/dashboard/goals/my-goals');
    await waitForPageLoad(page);

    // Look for update progress button
    const updateButton = page.locator('button:has-text("Update"), button:has-text("Log Progress"), [data-testid="update-progress"]').first();
    if (await updateButton.isVisible()) {
      await updateButton.click();

      // Should show progress form/modal
      const progressForm = page.locator('[data-testid="progress-form"], [role="dialog"], form');
      await expect(progressForm).toBeVisible();
    }
  });
});

test.describe('Goal Reports', () => {
  authTest('should display reports page', async ({ authenticatedPage: page }) => {
    await page.goto('/dashboard/goals/reports');
    await waitForPageLoad(page);

    // Should show reports page
    await expect(page.locator('h1:has-text("Reports"), [data-testid="goal-reports-page"]')).toBeVisible();
  });

  authTest('should show report filters', async ({ authenticatedPage: page }) => {
    await page.goto('/dashboard/goals/reports');
    await waitForPageLoad(page);

    // Should show date range or period filters
    const filters = page.locator('[data-testid="report-filters"], .report-filters, input[type="date"]');
    await expect(filters).toBeVisible();
  });

  authTest('should show report charts or tables', async ({ authenticatedPage: page }) => {
    await page.goto('/dashboard/goals/reports');
    await waitForPageLoad(page);

    // Should show charts or data tables
    const reportContent = page.locator('[data-testid="report-content"], .report-chart, .report-table, table, canvas');
    await expect(reportContent).toBeVisible();
  });

  authTest('should export report', async ({ authenticatedPage: page }) => {
    await page.goto('/dashboard/goals/reports');
    await waitForPageLoad(page);

    // Look for export button
    const exportButton = page.locator('button:has-text("Export"), button:has-text("Download"), [data-testid="export-report"]');
    if (await exportButton.isVisible()) {
      await expect(exportButton).toBeVisible();
    }
  });

  authTest('should filter by team or user', async ({ adminPage: page }) => {
    await page.goto('/dashboard/goals/reports');
    await waitForPageLoad(page);

    // Admin may have team/user filter
    const teamFilter = page.locator('[data-testid="team-filter"], select[name="team"], [data-testid="user-filter"]');
    if (await teamFilter.isVisible()) {
      await teamFilter.click();
    }
  });
});

test.describe('Goals - Unauthenticated', () => {
  test('should redirect to login if not authenticated', async ({ page }) => {
    await page.goto('/dashboard/goals');
    await expect(page).toHaveURL(/\/auth\/login/);
  });

  test('should redirect definitions page to login', async ({ page }) => {
    await page.goto('/dashboard/goals/definitions');
    await expect(page).toHaveURL(/\/auth\/login/);
  });

  test('should redirect my-goals page to login', async ({ page }) => {
    await page.goto('/dashboard/goals/my-goals');
    await expect(page).toHaveURL(/\/auth\/login/);
  });

  test('should redirect reports page to login', async ({ page }) => {
    await page.goto('/dashboard/goals/reports');
    await expect(page).toHaveURL(/\/auth\/login/);
  });
});