livedash-node/e2e/csv-processing-workflow.spec.ts

/**
 * E2E tests for CSV upload and session processing workflow
 *
 * Tests the complete data processing pipeline:
 * 1. CSV import configuration
 * 2. Data import and validation
 * 3. Session processing and AI analysis
 * 4. Dashboard visualization
 * 5. Data filtering and search
 */

import { test, expect, type Page } from "@playwright/test";

// Test data
const testAdmin = {
  email: "admin@csvtest.com",
  password: "AdminTestPassword123!",
};

const mockCsvData = `sessionId,userId,language,country,ipAddress,sentiment,messagesSent,startTime,endTime,escalated,forwardedHr,summary
session1,user1,en,US,192.168.1.1,positive,5,2024-01-15T10:00:00Z,2024-01-15T10:30:00Z,false,false,User requested vacation time
session2,user2,nl,NL,192.168.1.2,neutral,3,2024-01-15T11:00:00Z,2024-01-15T11:20:00Z,true,false,User had login issues
session3,user3,de,DE,192.168.1.3,negative,8,2024-01-15T12:00:00Z,2024-01-15T12:45:00Z,false,true,User complained about salary`;

// Helper functions
async function loginAsAdmin(page: Page) {
  await page.goto("http://localhost:3000/login");
  await page.fill('[data-testid="email"]', testAdmin.email);
  await page.fill('[data-testid="password"]', testAdmin.password);
  await page.click('[data-testid="login-button"]');
  await expect(page).toHaveURL(/\/dashboard/);
}

async function waitForDataProcessing(page: Page, timeout = 30000) {
  // Wait for processing indicators to disappear
  await page.waitForSelector('[data-testid="processing-indicator"]', {
    state: "hidden",
    timeout,
  });
}

async function setupMockCsvEndpoint(page: Page) {
  // Mock the CSV endpoint to return test data
  await page.route("**/test-csv-data", (route) => {
    route.fulfill({
      status: 200,
      contentType: "text/csv",
      body: mockCsvData,
    });
  });
}

test.describe("CSV Processing Workflow", () => {
  test.beforeEach(async ({ page }) => {
    // Setup mock CSV endpoint
    await setupMockCsvEndpoint(page);

    // Login as admin
    await loginAsAdmin(page);
  });

  test.describe("CSV Import Configuration", () => {
    test("should configure CSV import settings", async ({ page }) => {
      // Navigate to company settings
      await page.click('[data-testid="nav-company"]');
      await expect(page).toHaveURL(/\/dashboard\/company/);

      // Update CSV configuration
      await page.fill(
        '[data-testid="csv-url"]',
        "http://localhost:3000/api/test-csv-data"
      );
      await page.fill('[data-testid="csv-username"]', "testuser");
      await page.fill('[data-testid="csv-password"]', "testpass");

      // Save settings
      await page.click('[data-testid="save-settings"]');

      // Should show success message
      await expect(
        page.locator('[data-testid="success-message"]')
      ).toContainText("Settings saved successfully");
    });

    test("should validate CSV URL format", async ({ page }) => {
      await page.goto("http://localhost:3000/dashboard/company");

      // Enter invalid URL
      await page.fill('[data-testid="csv-url"]', "invalid-url");
      await page.click('[data-testid="save-settings"]');

      // Should show validation error
      await expect(page.locator('[data-testid="csv-url-error"]')).toContainText(
        "Invalid URL format"
      );
    });
  });

  test.describe("Manual CSV Import", () => {
    test.beforeEach(async ({ page }) => {
      // Configure CSV settings first
      await page.goto("http://localhost:3000/dashboard/company");
      await page.fill(
        '[data-testid="csv-url"]',
        "http://localhost:3000/api/test-csv-data"
      );
      await page.click('[data-testid="save-settings"]');
      await expect(
        page.locator('[data-testid="success-message"]')
      ).toBeVisible();
    });

    test("should trigger manual CSV import", async ({ page }) => {
      // Navigate to overview
      await page.goto("http://localhost:3000/dashboard/overview");

      // Trigger manual refresh
      await page.click('[data-testid="refresh-data-button"]');

      // Should show processing indicator
      await expect(
        page.locator('[data-testid="processing-indicator"]')
      ).toBeVisible();

      // Wait for processing to complete
      await waitForDataProcessing(page);

      // Should show success message
      await expect(
        page.locator('[data-testid="import-success"]')
      ).toContainText("Data imported successfully");
    });

    test("should display import progress", async ({ page }) => {
      await page.goto("http://localhost:3000/dashboard/overview");

      // Start import
      await page.click('[data-testid="refresh-data-button"]');

      // Check progress indicators
      await expect(
        page.locator('[data-testid="import-progress"]')
      ).toBeVisible();

      // Progress should show stages
      await expect(
        page.locator('[data-testid="stage-csv-import"]')
      ).toContainText("CSV Import");
      await expect(
        page.locator('[data-testid="stage-processing"]')
      ).toContainText("Processing");
      await expect(
        page.locator('[data-testid="stage-ai-analysis"]')
      ).toContainText("AI Analysis");
    });

    test("should handle import errors gracefully", async ({ page }) => {
      // Configure invalid CSV URL
      await page.goto("http://localhost:3000/dashboard/company");
      await page.fill(
        '[data-testid="csv-url"]',
        "http://localhost:3000/api/nonexistent-csv"
      );
      await page.click('[data-testid="save-settings"]');

      // Try to import
      await page.goto("http://localhost:3000/dashboard/overview");
      await page.click('[data-testid="refresh-data-button"]');

      // Should show error message
      await expect(page.locator('[data-testid="import-error"]')).toContainText(
        "Failed to fetch CSV data"
      );
    });
  });

  test.describe("Data Visualization", () => {
    test.beforeEach(async ({ page }) => {
      // Import test data first
      await page.goto("http://localhost:3000/dashboard/company");
      await page.fill(
        '[data-testid="csv-url"]',
        "http://localhost:3000/api/test-csv-data"
      );
      await page.click('[data-testid="save-settings"]');

      await page.goto("http://localhost:3000/dashboard/overview");
      await page.click('[data-testid="refresh-data-button"]');
      await waitForDataProcessing(page);
    });

    test("should display session metrics correctly", async ({ page }) => {
      await page.goto("http://localhost:3000/dashboard/overview");

      // Check metric cards show correct data
      await expect(
        page.locator('[data-testid="total-sessions"]')
      ).toContainText("3");

      // Check sentiment distribution
      const sentimentChart = page.locator('[data-testid="sentiment-chart"]');
      await expect(sentimentChart).toBeVisible();

      // Verify sentiment data
      await expect(
        page.locator('[data-testid="positive-sentiment"]')
      ).toContainText("1");
      await expect(
        page.locator('[data-testid="neutral-sentiment"]')
      ).toContainText("1");
      await expect(
        page.locator('[data-testid="negative-sentiment"]')
      ).toContainText("1");
    });

    test("should display geographic distribution", async ({ page }) => {
      await page.goto("http://localhost:3000/dashboard/overview");

      // Check geographic map
      const geoMap = page.locator('[data-testid="geographic-map"]');
      await expect(geoMap).toBeVisible();

      // Check country data
      await expect(page.locator('[data-testid="country-us"]')).toContainText(
        "US: 1"
      );
      await expect(page.locator('[data-testid="country-nl"]')).toContainText(
        "NL: 1"
      );
      await expect(page.locator('[data-testid="country-de"]')).toContainText(
        "DE: 1"
      );
    });

    test("should display escalation metrics", async ({ page }) => {
      await page.goto("http://localhost:3000/dashboard/overview");

      // Check escalation rate
      await expect(
        page.locator('[data-testid="escalation-rate"]')
      ).toContainText("33%");

      // Check HR forwarding rate
      await expect(
        page.locator('[data-testid="hr-forwarding-rate"]')
      ).toContainText("33%");
    });
  });

  test.describe("Session Management", () => {
    test.beforeEach(async ({ page }) => {
      // Import test data
      await page.goto("http://localhost:3000/dashboard/company");
      await page.fill(
        '[data-testid="csv-url"]',
        "http://localhost:3000/api/test-csv-data"
      );
      await page.click('[data-testid="save-settings"]');

      await page.goto("http://localhost:3000/dashboard/overview");
      await page.click('[data-testid="refresh-data-button"]');
      await waitForDataProcessing(page);
    });

    test("should display sessions list", async ({ page }) => {
      await page.goto("http://localhost:3000/dashboard/sessions");

      // Should show all sessions
      await expect(page.locator('[data-testid="session-list"]')).toBeVisible();
      await expect(page.locator('[data-testid="session-item"]')).toHaveCount(3);

      // Check session details
      const firstSession = page.locator('[data-testid="session-item"]').first();
      await expect(firstSession).toContainText("session1");
      await expect(firstSession).toContainText("positive");
      await expect(firstSession).toContainText("US");
    });

    test("should filter sessions by sentiment", async ({ page }) => {
      await page.goto("http://localhost:3000/dashboard/sessions");

      // Filter by positive sentiment
      await page.selectOption('[data-testid="sentiment-filter"]', "POSITIVE");

      // Should show only positive sessions
      await expect(page.locator('[data-testid="session-item"]')).toHaveCount(1);
      await expect(page.locator('[data-testid="session-item"]')).toContainText(
        "session1"
      );
    });

    test("should filter sessions by country", async ({ page }) => {
      await page.goto("http://localhost:3000/dashboard/sessions");

      // Filter by Germany
      await page.selectOption('[data-testid="country-filter"]', "DE");

      // Should show only German sessions
      await expect(page.locator('[data-testid="session-item"]')).toHaveCount(1);
      await expect(page.locator('[data-testid="session-item"]')).toContainText(
        "session3"
      );
    });

    test("should search sessions by content", async ({ page }) => {
      await page.goto("http://localhost:3000/dashboard/sessions");

      // Search for "vacation"
      await page.fill('[data-testid="search-input"]', "vacation");

      // Should show matching sessions
      await expect(page.locator('[data-testid="session-item"]')).toHaveCount(1);
      await expect(page.locator('[data-testid="session-item"]')).toContainText(
        "vacation time"
      );
    });

    test("should paginate sessions", async ({ page }) => {
      await page.goto("http://localhost:3000/dashboard/sessions");

      // Set small page size
      await page.selectOption('[data-testid="page-size"]', "2");

      // Should show pagination
      await expect(page.locator('[data-testid="pagination"]')).toBeVisible();
      await expect(page.locator('[data-testid="session-item"]')).toHaveCount(2);

      // Go to next page
      await page.click('[data-testid="next-page"]');
      await expect(page.locator('[data-testid="session-item"]')).toHaveCount(1);
    });
  });

  test.describe("Session Details", () => {
    test.beforeEach(async ({ page }) => {
      // Import test data
      await page.goto("http://localhost:3000/dashboard/company");
      await page.fill(
        '[data-testid="csv-url"]',
        "http://localhost:3000/api/test-csv-data"
      );
      await page.click('[data-testid="save-settings"]');

      await page.goto("http://localhost:3000/dashboard/overview");
      await page.click('[data-testid="refresh-data-button"]');
      await waitForDataProcessing(page);
    });

    test("should view individual session details", async ({ page }) => {
      await page.goto("http://localhost:3000/dashboard/sessions");

      // Click on first session
      await page.click('[data-testid="session-item"]');

      // Should navigate to session detail page
      await expect(page).toHaveURL(/\/dashboard\/sessions\/[^/]+/);

      // Check session details
      await expect(page.locator('[data-testid="session-id"]')).toContainText(
        "session1"
      );
      await expect(
        page.locator('[data-testid="sentiment-badge"]')
      ).toContainText("positive");
      await expect(page.locator('[data-testid="country-badge"]')).toContainText(
        "US"
      );
      await expect(
        page.locator('[data-testid="session-summary"]')
      ).toContainText("vacation time");
    });

    test("should display session timeline", async ({ page }) => {
      await page.goto("http://localhost:3000/dashboard/sessions");
      await page.click('[data-testid="session-item"]');

      // Check timeline
      const timeline = page.locator('[data-testid="session-timeline"]');
      await expect(timeline).toBeVisible();

      // Should show start and end times
      await expect(page.locator('[data-testid="start-time"]')).toContainText(
        "10:00"
      );
      await expect(page.locator('[data-testid="end-time"]')).toContainText(
        "10:30"
      );
      await expect(page.locator('[data-testid="duration"]')).toContainText(
        "30 minutes"
      );
    });

    test("should display extracted questions", async ({ page }) => {
      await page.goto("http://localhost:3000/dashboard/sessions");
      await page.click('[data-testid="session-item"]');

      // Check questions section
      const questionsSection = page.locator(
        '[data-testid="extracted-questions"]'
      );
      await expect(questionsSection).toBeVisible();

      // Should show AI-extracted questions (if any)
      const questionsList = page.locator('[data-testid="questions-list"]');
      if (await questionsList.isVisible()) {
        await expect(
          questionsList.locator('[data-testid="question-item"]')
        ).toHaveCount.greaterThan(0);
      }
    });
  });

  test.describe("Real-time Updates", () => {
    test("should show real-time processing status", async ({ page }) => {
      await page.goto("http://localhost:3000/dashboard/overview");

      // Configure CSV
      await page.goto("http://localhost:3000/dashboard/company");
      await page.fill(
        '[data-testid="csv-url"]',
        "http://localhost:3000/api/test-csv-data"
      );
      await page.click('[data-testid="save-settings"]');

      // Start import and monitor status
      await page.goto("http://localhost:3000/dashboard/overview");
      await page.click('[data-testid="refresh-data-button"]');

      // Should show real-time status updates
      await expect(
        page.locator('[data-testid="status-importing"]')
      ).toBeVisible();

      // Status should progress through stages
      await page.waitForSelector('[data-testid="status-processing"]', {
        timeout: 10000,
      });
      await page.waitForSelector('[data-testid="status-analyzing"]', {
        timeout: 10000,
      });
      await page.waitForSelector('[data-testid="status-complete"]', {
        timeout: 30000,
      });
    });

    test("should update metrics in real-time", async ({ page }) => {
      await page.goto("http://localhost:3000/dashboard/overview");

      // Get initial metrics
      const initialSessions = await page
        .locator('[data-testid="total-sessions"]')
        .textContent();

      // Import data
      await page.goto("http://localhost:3000/dashboard/company");
      await page.fill(
        '[data-testid="csv-url"]',
        "http://localhost:3000/api/test-csv-data"
      );
      await page.click('[data-testid="save-settings"]');

      await page.goto("http://localhost:3000/dashboard/overview");
      await page.click('[data-testid="refresh-data-button"]');
      await waitForDataProcessing(page);

      // Metrics should be updated
      const updatedSessions = await page
        .locator('[data-testid="total-sessions"]')
        .textContent();
      expect(updatedSessions).not.toBe(initialSessions);
    });
  });

  test.describe("Error Handling", () => {
    test("should handle CSV parsing errors", async ({ page }) => {
      // Mock invalid CSV data
      await page.route("**/invalid-csv", (route) => {
        route.fulfill({
          status: 200,
          contentType: "text/csv",
          body: "invalid,csv,format\nwithout,proper,headers",
        });
      });

      await page.goto("http://localhost:3000/dashboard/company");
      await page.fill(
        '[data-testid="csv-url"]',
        "http://localhost:3000/api/invalid-csv"
      );
      await page.click('[data-testid="save-settings"]');

      await page.goto("http://localhost:3000/dashboard/overview");
      await page.click('[data-testid="refresh-data-button"]');

      // Should show parsing error
      await expect(page.locator('[data-testid="parsing-error"]')).toContainText(
        "Invalid CSV format"
      );
    });

    test("should handle AI processing failures", async ({ page }) => {
      // Mock AI service failure
      await page.route("**/api/openai/**", (route) => {
        route.fulfill({
          status: 500,
          body: JSON.stringify({ error: "AI service unavailable" }),
        });
      });

      await page.goto("http://localhost:3000/dashboard/company");
      await page.fill(
        '[data-testid="csv-url"]',
        "http://localhost:3000/api/test-csv-data"
      );
      await page.click('[data-testid="save-settings"]');

      await page.goto("http://localhost:3000/dashboard/overview");
      await page.click('[data-testid="refresh-data-button"]');

      // Should show AI processing error
      await expect(page.locator('[data-testid="ai-error"]')).toContainText(
        "AI analysis failed"
      );
    });

    test("should retry failed operations", async ({ page }) => {
      let attemptCount = 0;

      // Mock failing then succeeding API
      await page.route("**/api/process-batch", (route) => {
        attemptCount++;
        if (attemptCount === 1) {
          route.fulfill({ status: 500, body: "Server error" });
        } else {
          route.fulfill({
            status: 200,
            body: JSON.stringify({ success: true }),
          });
        }
      });

      await page.goto("http://localhost:3000/dashboard/overview");
      await page.click('[data-testid="refresh-data-button"]');

      // Should show retry attempt
      await expect(
        page.locator('[data-testid="retry-indicator"]')
      ).toBeVisible();

      // Should eventually succeed
      await waitForDataProcessing(page);
      await expect(
        page.locator('[data-testid="import-success"]')
      ).toBeVisible();
    });
  });
});