mirror of
https://github.com/kjanat/livedash-node.git
synced 2026-01-16 17:12:10 +01:00
feat: implement comprehensive CSRF protection
This commit is contained in:
454
e2e/csv-processing-workflow.spec.ts
Normal file
454
e2e/csv-processing-workflow.spec.ts
Normal file
@ -0,0 +1,454 @@
|
||||
/**
|
||||
* 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();
|
||||
});
|
||||
});
|
||||
});
|
||||
557
e2e/dashboard-navigation.spec.ts
Normal file
557
e2e/dashboard-navigation.spec.ts
Normal file
@ -0,0 +1,557 @@
|
||||
/**
|
||||
* E2E tests for dashboard navigation and data visualization
|
||||
*
|
||||
* Tests the dashboard user experience:
|
||||
* 1. Navigation between dashboard sections
|
||||
* 2. Data visualization components
|
||||
* 3. Interactive filtering and search
|
||||
* 4. Responsive design
|
||||
* 5. Accessibility features
|
||||
*/
|
||||
|
||||
import { test, expect, type Page } from "@playwright/test";
|
||||
|
||||
// Test data
|
||||
const testUser = {
|
||||
email: "dashboard@test.com",
|
||||
password: "DashboardTest123!",
|
||||
};
|
||||
|
||||
// Helper functions
|
||||
async function loginUser(page: Page) {
|
||||
await page.goto("http://localhost:3000/login");
|
||||
await page.fill('[data-testid="email"]', testUser.email);
|
||||
await page.fill('[data-testid="password"]', testUser.password);
|
||||
await page.click('[data-testid="login-button"]');
|
||||
await expect(page).toHaveURL(/\/dashboard/);
|
||||
}
|
||||
|
||||
async function waitForChartLoad(page: Page, chartSelector: string) {
|
||||
await page.waitForSelector(chartSelector);
|
||||
await page.waitForFunction(
|
||||
(selector) => {
|
||||
const chart = document.querySelector(selector);
|
||||
return chart && chart.children.length > 0;
|
||||
},
|
||||
chartSelector
|
||||
);
|
||||
}
|
||||
|
||||
test.describe("Dashboard Navigation", () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await loginUser(page);
|
||||
});
|
||||
|
||||
test.describe("Navigation Menu", () => {
|
||||
test("should display main navigation menu", async ({ page }) => {
|
||||
// Check navigation sidebar
|
||||
const nav = page.locator('[data-testid="main-navigation"]');
|
||||
await expect(nav).toBeVisible();
|
||||
|
||||
// Check navigation items
|
||||
await expect(page.locator('[data-testid="nav-overview"]')).toBeVisible();
|
||||
await expect(page.locator('[data-testid="nav-sessions"]')).toBeVisible();
|
||||
await expect(page.locator('[data-testid="nav-users"]')).toBeVisible();
|
||||
await expect(page.locator('[data-testid="nav-company"]')).toBeVisible();
|
||||
});
|
||||
|
||||
test("should highlight active navigation item", async ({ page }) => {
|
||||
// Overview should be active by default
|
||||
await expect(page.locator('[data-testid="nav-overview"]')).toHaveClass(/active/);
|
||||
|
||||
// Navigate to sessions
|
||||
await page.click('[data-testid="nav-sessions"]');
|
||||
await expect(page.locator('[data-testid="nav-sessions"]')).toHaveClass(/active/);
|
||||
await expect(page.locator('[data-testid="nav-overview"]')).not.toHaveClass(/active/);
|
||||
});
|
||||
|
||||
test("should navigate between sections correctly", async ({ page }) => {
|
||||
// Navigate to Sessions
|
||||
await page.click('[data-testid="nav-sessions"]');
|
||||
await expect(page).toHaveURL(/\/dashboard\/sessions/);
|
||||
await expect(page.locator('h1')).toContainText('Sessions');
|
||||
|
||||
// Navigate to Users
|
||||
await page.click('[data-testid="nav-users"]');
|
||||
await expect(page).toHaveURL(/\/dashboard\/users/);
|
||||
await expect(page.locator('h1')).toContainText('Users');
|
||||
|
||||
// Navigate to Company
|
||||
await page.click('[data-testid="nav-company"]');
|
||||
await expect(page).toHaveURL(/\/dashboard\/company/);
|
||||
await expect(page.locator('h1')).toContainText('Company Settings');
|
||||
|
||||
// Navigate back to Overview
|
||||
await page.click('[data-testid="nav-overview"]');
|
||||
await expect(page).toHaveURL(/\/dashboard\/overview/);
|
||||
await expect(page.locator('h1')).toContainText('Dashboard Overview');
|
||||
});
|
||||
|
||||
test("should support breadcrumb navigation", async ({ page }) => {
|
||||
// Navigate to sessions and then a specific session
|
||||
await page.click('[data-testid="nav-sessions"]');
|
||||
|
||||
// Mock a session item click (assuming sessions exist)
|
||||
const sessionItems = page.locator('[data-testid="session-item"]');
|
||||
const sessionCount = await sessionItems.count();
|
||||
|
||||
if (sessionCount > 0) {
|
||||
await sessionItems.first().click();
|
||||
|
||||
// Check breadcrumbs
|
||||
await expect(page.locator('[data-testid="breadcrumb"]')).toBeVisible();
|
||||
await expect(page.locator('[data-testid="breadcrumb-home"]')).toContainText('Dashboard');
|
||||
await expect(page.locator('[data-testid="breadcrumb-sessions"]')).toContainText('Sessions');
|
||||
await expect(page.locator('[data-testid="breadcrumb-current"]')).toContainText('Session Details');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
test.describe("Header Navigation", () => {
|
||||
test("should display user menu", async ({ page }) => {
|
||||
// Check user menu trigger
|
||||
const userMenu = page.locator('[data-testid="user-menu"]');
|
||||
await expect(userMenu).toBeVisible();
|
||||
|
||||
// Open user menu
|
||||
await userMenu.click();
|
||||
|
||||
// Check menu items
|
||||
await expect(page.locator('[data-testid="user-profile"]')).toBeVisible();
|
||||
await expect(page.locator('[data-testid="user-settings"]')).toBeVisible();
|
||||
await expect(page.locator('[data-testid="logout-button"]')).toBeVisible();
|
||||
});
|
||||
|
||||
test("should display notifications", async ({ page }) => {
|
||||
const notifications = page.locator('[data-testid="notifications"]');
|
||||
|
||||
if (await notifications.isVisible()) {
|
||||
await notifications.click();
|
||||
await expect(page.locator('[data-testid="notifications-dropdown"]')).toBeVisible();
|
||||
}
|
||||
});
|
||||
|
||||
test("should display search functionality", async ({ page }) => {
|
||||
const searchInput = page.locator('[data-testid="global-search"]');
|
||||
|
||||
if (await searchInput.isVisible()) {
|
||||
await searchInput.fill('test search');
|
||||
await expect(page.locator('[data-testid="search-results"]')).toBeVisible();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
test.describe("Page Titles and Metadata", () => {
|
||||
test("should update page title for each section", async ({ page }) => {
|
||||
// Overview page
|
||||
await page.goto("http://localhost:3000/dashboard/overview");
|
||||
await expect(page).toHaveTitle(/Dashboard Overview/);
|
||||
|
||||
// Sessions page
|
||||
await page.goto("http://localhost:3000/dashboard/sessions");
|
||||
await expect(page).toHaveTitle(/Sessions/);
|
||||
|
||||
// Users page
|
||||
await page.goto("http://localhost:3000/dashboard/users");
|
||||
await expect(page).toHaveTitle(/Users/);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
test.describe("Data Visualization", () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await loginUser(page);
|
||||
await page.goto("http://localhost:3000/dashboard/overview");
|
||||
});
|
||||
|
||||
test.describe("Overview Dashboard", () => {
|
||||
test("should display key metrics cards", async ({ page }) => {
|
||||
// Check metric cards
|
||||
await expect(page.locator('[data-testid="total-sessions-card"]')).toBeVisible();
|
||||
await expect(page.locator('[data-testid="avg-sentiment-card"]')).toBeVisible();
|
||||
await expect(page.locator('[data-testid="escalation-rate-card"]')).toBeVisible();
|
||||
await expect(page.locator('[data-testid="avg-response-time-card"]')).toBeVisible();
|
||||
|
||||
// Check that metrics have values
|
||||
const totalSessions = page.locator('[data-testid="total-sessions-value"]');
|
||||
await expect(totalSessions).toContainText(/\d+/); // Should contain numbers
|
||||
});
|
||||
|
||||
test("should display sentiment distribution chart", async ({ page }) => {
|
||||
const sentimentChart = page.locator('[data-testid="sentiment-chart"]');
|
||||
await expect(sentimentChart).toBeVisible();
|
||||
|
||||
await waitForChartLoad(page, '[data-testid="sentiment-chart"]');
|
||||
|
||||
// Check chart has data
|
||||
await expect(page.locator('[data-testid="positive-sentiment"]')).toBeVisible();
|
||||
await expect(page.locator('[data-testid="neutral-sentiment"]')).toBeVisible();
|
||||
await expect(page.locator('[data-testid="negative-sentiment"]')).toBeVisible();
|
||||
});
|
||||
|
||||
test("should display category distribution chart", async ({ page }) => {
|
||||
const categoryChart = page.locator('[data-testid="category-chart"]');
|
||||
await expect(categoryChart).toBeVisible();
|
||||
|
||||
await waitForChartLoad(page, '[data-testid="category-chart"]');
|
||||
|
||||
// Should show category data
|
||||
const categories = page.locator('[data-testid="category-item"]');
|
||||
const count = await categories.count();
|
||||
expect(count).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
test("should display geographic distribution map", async ({ page }) => {
|
||||
const geoMap = page.locator('[data-testid="geographic-map"]');
|
||||
await expect(geoMap).toBeVisible();
|
||||
|
||||
// Wait for map to load
|
||||
await page.waitForTimeout(2000);
|
||||
|
||||
// Check if country data is displayed
|
||||
const countryData = page.locator('[data-testid="country-data"]');
|
||||
if (await countryData.isVisible()) {
|
||||
expect(await countryData.count()).toBeGreaterThan(0);
|
||||
}
|
||||
});
|
||||
|
||||
test("should display top questions list", async ({ page }) => {
|
||||
const topQuestions = page.locator('[data-testid="top-questions"]');
|
||||
await expect(topQuestions).toBeVisible();
|
||||
|
||||
// Check if questions are displayed
|
||||
const questionItems = page.locator('[data-testid="question-item"]');
|
||||
const count = await questionItems.count();
|
||||
|
||||
if (count > 0) {
|
||||
// Should show question text and count
|
||||
const firstQuestion = questionItems.first();
|
||||
await expect(firstQuestion.locator('[data-testid="question-text"]')).toBeVisible();
|
||||
await expect(firstQuestion.locator('[data-testid="question-count"]')).toBeVisible();
|
||||
}
|
||||
});
|
||||
|
||||
test("should display time series chart", async ({ page }) => {
|
||||
const timeChart = page.locator('[data-testid="time-series-chart"]');
|
||||
|
||||
if (await timeChart.isVisible()) {
|
||||
await waitForChartLoad(page, '[data-testid="time-series-chart"]');
|
||||
|
||||
// Check chart axes
|
||||
await expect(page.locator('[data-testid="chart-x-axis"]')).toBeVisible();
|
||||
await expect(page.locator('[data-testid="chart-y-axis"]')).toBeVisible();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
test.describe("Chart Interactions", () => {
|
||||
test("should allow chart filtering interactions", async ({ page }) => {
|
||||
const sentimentChart = page.locator('[data-testid="sentiment-chart"]');
|
||||
|
||||
if (await sentimentChart.isVisible()) {
|
||||
// Click on positive sentiment section
|
||||
const positiveSection = page.locator('[data-testid="positive-segment"]');
|
||||
|
||||
if (await positiveSection.isVisible()) {
|
||||
await positiveSection.click();
|
||||
|
||||
// Should filter data or show details
|
||||
await expect(page.locator('[data-testid="chart-filter-active"]')).toBeVisible();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
test("should show chart tooltips on hover", async ({ page }) => {
|
||||
const chart = page.locator('[data-testid="sentiment-chart"]');
|
||||
|
||||
if (await chart.isVisible()) {
|
||||
await chart.hover();
|
||||
|
||||
// Check for tooltip
|
||||
const tooltip = page.locator('[data-testid="chart-tooltip"]');
|
||||
if (await tooltip.isVisible()) {
|
||||
await expect(tooltip).toContainText(/\d+/); // Should show numeric data
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
test("should support chart zoom and pan", async ({ page }) => {
|
||||
const timeChart = page.locator('[data-testid="time-series-chart"]');
|
||||
|
||||
if (await timeChart.isVisible()) {
|
||||
// Test zoom (scroll)
|
||||
await timeChart.hover();
|
||||
await page.mouse.wheel(0, -100);
|
||||
|
||||
// Test pan (drag)
|
||||
const box = await timeChart.boundingBox();
|
||||
if (box) {
|
||||
await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2);
|
||||
await page.mouse.down();
|
||||
await page.mouse.move(box.x + box.width / 2 + 50, box.y + box.height / 2);
|
||||
await page.mouse.up();
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
test.describe("Data Filtering", () => {
|
||||
test("should filter data by date range", async ({ page }) => {
|
||||
// Open date picker
|
||||
const dateFilter = page.locator('[data-testid="date-range-picker"]');
|
||||
|
||||
if (await dateFilter.isVisible()) {
|
||||
await dateFilter.click();
|
||||
|
||||
// Select date range
|
||||
await page.click('[data-testid="date-last-week"]');
|
||||
|
||||
// Should update charts
|
||||
await page.waitForTimeout(1000);
|
||||
|
||||
// Check that data is filtered
|
||||
await expect(page.locator('[data-testid="filter-applied"]')).toBeVisible();
|
||||
}
|
||||
});
|
||||
|
||||
test("should filter data by sentiment", async ({ page }) => {
|
||||
const sentimentFilter = page.locator('[data-testid="sentiment-filter"]');
|
||||
|
||||
if (await sentimentFilter.isVisible()) {
|
||||
await sentimentFilter.selectOption('POSITIVE');
|
||||
|
||||
// Should update all visualizations
|
||||
await page.waitForTimeout(1000);
|
||||
|
||||
// Check filter is applied
|
||||
await expect(page.locator('[data-testid="active-filters"]')).toContainText('Sentiment: Positive');
|
||||
}
|
||||
});
|
||||
|
||||
test("should clear all filters", async ({ page }) => {
|
||||
// Apply some filters first
|
||||
const sentimentFilter = page.locator('[data-testid="sentiment-filter"]');
|
||||
if (await sentimentFilter.isVisible()) {
|
||||
await sentimentFilter.selectOption('POSITIVE');
|
||||
}
|
||||
|
||||
// Clear filters
|
||||
const clearButton = page.locator('[data-testid="clear-filters"]');
|
||||
if (await clearButton.isVisible()) {
|
||||
await clearButton.click();
|
||||
|
||||
// Should reset all data
|
||||
await expect(page.locator('[data-testid="active-filters"]')).toHaveCount(0);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
test.describe("Data Export", () => {
|
||||
test("should export chart data as CSV", async ({ page }) => {
|
||||
const exportButton = page.locator('[data-testid="export-csv"]');
|
||||
|
||||
if (await exportButton.isVisible()) {
|
||||
// Start download
|
||||
const downloadPromise = page.waitForEvent('download');
|
||||
await exportButton.click();
|
||||
const download = await downloadPromise;
|
||||
|
||||
// Verify download
|
||||
expect(download.suggestedFilename()).toContain('.csv');
|
||||
}
|
||||
});
|
||||
|
||||
test("should export chart as image", async ({ page }) => {
|
||||
const exportButton = page.locator('[data-testid="export-image"]');
|
||||
|
||||
if (await exportButton.isVisible()) {
|
||||
const downloadPromise = page.waitForEvent('download');
|
||||
await exportButton.click();
|
||||
const download = await downloadPromise;
|
||||
|
||||
expect(download.suggestedFilename()).toMatch(/\.(png|jpg|svg)$/);
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
test.describe("Responsive Design", () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await loginUser(page);
|
||||
});
|
||||
|
||||
test.describe("Mobile Layout", () => {
|
||||
test("should adapt navigation for mobile", async ({ page }) => {
|
||||
// Set mobile viewport
|
||||
await page.setViewportSize({ width: 375, height: 667 });
|
||||
await page.goto("http://localhost:3000/dashboard/overview");
|
||||
|
||||
// Should show mobile menu button
|
||||
const mobileMenu = page.locator('[data-testid="mobile-menu-toggle"]');
|
||||
await expect(mobileMenu).toBeVisible();
|
||||
|
||||
// Open mobile menu
|
||||
await mobileMenu.click();
|
||||
await expect(page.locator('[data-testid="mobile-navigation"]')).toBeVisible();
|
||||
|
||||
// Check navigation items in mobile menu
|
||||
await expect(page.locator('[data-testid="mobile-nav-overview"]')).toBeVisible();
|
||||
await expect(page.locator('[data-testid="mobile-nav-sessions"]')).toBeVisible();
|
||||
});
|
||||
|
||||
test("should stack charts vertically on mobile", async ({ page }) => {
|
||||
await page.setViewportSize({ width: 375, height: 667 });
|
||||
await page.goto("http://localhost:3000/dashboard/overview");
|
||||
|
||||
// Charts should be stacked
|
||||
const chartContainer = page.locator('[data-testid="charts-container"]');
|
||||
await expect(chartContainer).toHaveCSS('flex-direction', 'column');
|
||||
});
|
||||
|
||||
test("should show simplified metrics on mobile", async ({ page }) => {
|
||||
await page.setViewportSize({ width: 375, height: 667 });
|
||||
await page.goto("http://localhost:3000/dashboard/overview");
|
||||
|
||||
// Should show condensed metric cards
|
||||
const metricCards = page.locator('[data-testid="metric-card"]');
|
||||
const count = await metricCards.count();
|
||||
|
||||
// Should show fewer cards or smaller layout
|
||||
for (let i = 0; i < count; i++) {
|
||||
const card = metricCards.nth(i);
|
||||
const box = await card.boundingBox();
|
||||
if (box) {
|
||||
expect(box.width).toBeLessThan(300); // Smaller cards on mobile
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
test.describe("Tablet Layout", () => {
|
||||
test("should adapt layout for tablet", async ({ page }) => {
|
||||
await page.setViewportSize({ width: 768, height: 1024 });
|
||||
await page.goto("http://localhost:3000/dashboard/overview");
|
||||
|
||||
// Should show sidebar but possibly collapsed
|
||||
const sidebar = page.locator('[data-testid="sidebar"]');
|
||||
await expect(sidebar).toBeVisible();
|
||||
|
||||
// Charts should adapt to medium screen
|
||||
const chartGrid = page.locator('[data-testid="chart-grid"]');
|
||||
await expect(chartGrid).toHaveCSS('grid-template-columns', /repeat\(2,/);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
test.describe("Accessibility", () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await loginUser(page);
|
||||
});
|
||||
|
||||
test.describe("Keyboard Navigation", () => {
|
||||
test("should support keyboard navigation in dashboard", async ({ page }) => {
|
||||
await page.goto("http://localhost:3000/dashboard/overview");
|
||||
|
||||
// Test tab navigation
|
||||
await page.keyboard.press('Tab');
|
||||
|
||||
// Should focus on first interactive element
|
||||
const focused = page.locator(':focus');
|
||||
await expect(focused).toBeVisible();
|
||||
|
||||
// Navigate through elements
|
||||
for (let i = 0; i < 5; i++) {
|
||||
await page.keyboard.press('Tab');
|
||||
const currentFocus = page.locator(':focus');
|
||||
await expect(currentFocus).toBeVisible();
|
||||
}
|
||||
});
|
||||
|
||||
test("should support keyboard shortcuts", async ({ page }) => {
|
||||
await page.goto("http://localhost:3000/dashboard/overview");
|
||||
|
||||
// Test keyboard shortcuts (if implemented)
|
||||
await page.keyboard.press('Alt+1'); // Navigate to overview
|
||||
await expect(page).toHaveURL(/\/dashboard\/overview/);
|
||||
|
||||
await page.keyboard.press('Alt+2'); // Navigate to sessions
|
||||
await expect(page).toHaveURL(/\/dashboard\/sessions/);
|
||||
});
|
||||
});
|
||||
|
||||
test.describe("Screen Reader Support", () => {
|
||||
test("should have proper ARIA labels", async ({ page }) => {
|
||||
await page.goto("http://localhost:3000/dashboard/overview");
|
||||
|
||||
// Check main landmarks
|
||||
await expect(page.locator('main')).toHaveAttribute('role', 'main');
|
||||
await expect(page.locator('nav')).toHaveAttribute('role', 'navigation');
|
||||
|
||||
// Check chart accessibility
|
||||
const sentimentChart = page.locator('[data-testid="sentiment-chart"]');
|
||||
if (await sentimentChart.isVisible()) {
|
||||
await expect(sentimentChart).toHaveAttribute('role', 'img');
|
||||
await expect(sentimentChart).toHaveAttribute('aria-label');
|
||||
}
|
||||
});
|
||||
|
||||
test("should provide alternative text for charts", async ({ page }) => {
|
||||
await page.goto("http://localhost:3000/dashboard/overview");
|
||||
|
||||
// Check chart descriptions
|
||||
const charts = page.locator('[role="img"]');
|
||||
const count = await charts.count();
|
||||
|
||||
for (let i = 0; i < count; i++) {
|
||||
const chart = charts.nth(i);
|
||||
const ariaLabel = await chart.getAttribute('aria-label');
|
||||
expect(ariaLabel).toBeTruthy();
|
||||
expect(ariaLabel?.length).toBeGreaterThan(10); // Should be descriptive
|
||||
}
|
||||
});
|
||||
|
||||
test("should announce dynamic content changes", async ({ page }) => {
|
||||
await page.goto("http://localhost:3000/dashboard/overview");
|
||||
|
||||
// Check for live regions
|
||||
const liveRegions = page.locator('[aria-live]');
|
||||
const count = await liveRegions.count();
|
||||
|
||||
if (count > 0) {
|
||||
// Should have appropriate aria-live settings
|
||||
for (let i = 0; i < count; i++) {
|
||||
const region = liveRegions.nth(i);
|
||||
const ariaLive = await region.getAttribute('aria-live');
|
||||
expect(['polite', 'assertive']).toContain(ariaLive);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
test.describe("Color and Contrast", () => {
|
||||
test("should maintain accessibility in dark mode", async ({ page }) => {
|
||||
await page.goto("http://localhost:3000/dashboard/overview");
|
||||
|
||||
// Toggle dark mode (if available)
|
||||
const darkModeToggle = page.locator('[data-testid="theme-toggle"]');
|
||||
|
||||
if (await darkModeToggle.isVisible()) {
|
||||
await darkModeToggle.click();
|
||||
|
||||
// Check that elements are still visible
|
||||
await expect(page.locator('[data-testid="total-sessions-card"]')).toBeVisible();
|
||||
await expect(page.locator('[data-testid="sentiment-chart"]')).toBeVisible();
|
||||
}
|
||||
});
|
||||
|
||||
test("should work without color", async ({ page }) => {
|
||||
// Test with forced colors (simulates high contrast mode)
|
||||
await page.emulateMedia({ colorScheme: 'dark', forcedColors: 'active' });
|
||||
await page.goto("http://localhost:3000/dashboard/overview");
|
||||
|
||||
// Elements should still be distinguishable
|
||||
await expect(page.locator('[data-testid="total-sessions-card"]')).toBeVisible();
|
||||
await expect(page.locator('[data-testid="sentiment-chart"]')).toBeVisible();
|
||||
});
|
||||
});
|
||||
});
|
||||
429
e2e/user-auth-workflow.spec.ts
Normal file
429
e2e/user-auth-workflow.spec.ts
Normal file
@ -0,0 +1,429 @@
|
||||
/**
|
||||
* E2E tests for complete user registration and login workflow
|
||||
*
|
||||
* Tests the full user journey:
|
||||
* 1. Company registration
|
||||
* 2. User login
|
||||
* 3. Dashboard access
|
||||
* 4. Authentication state management
|
||||
* 5. Session persistence
|
||||
* 6. Logout functionality
|
||||
*/
|
||||
|
||||
import { test, expect, type Page } from "@playwright/test";
|
||||
|
||||
// Test data
|
||||
const testCompany = {
|
||||
name: "E2E Test Company",
|
||||
csvUrl: "https://example.com/test.csv",
|
||||
csvUsername: "testuser",
|
||||
csvPassword: "testpass123",
|
||||
adminEmail: "admin@e2etest.com",
|
||||
adminName: "E2E Admin",
|
||||
adminPassword: "E2ETestPassword123!",
|
||||
};
|
||||
|
||||
const testUser = {
|
||||
email: "user@e2etest.com",
|
||||
password: "UserTestPassword123!",
|
||||
name: "E2E Test User",
|
||||
};
|
||||
|
||||
// Helper functions
|
||||
async function fillRegistrationForm(page: Page) {
|
||||
await page.fill('[data-testid="company-name"]', testCompany.name);
|
||||
await page.fill('[data-testid="csv-url"]', testCompany.csvUrl);
|
||||
await page.fill('[data-testid="csv-username"]', testCompany.csvUsername);
|
||||
await page.fill('[data-testid="csv-password"]', testCompany.csvPassword);
|
||||
await page.fill('[data-testid="admin-email"]', testCompany.adminEmail);
|
||||
await page.fill('[data-testid="admin-name"]', testCompany.adminName);
|
||||
await page.fill('[data-testid="admin-password"]', testCompany.adminPassword);
|
||||
}
|
||||
|
||||
async function fillLoginForm(page: Page, email: string, password: string) {
|
||||
await page.fill('[data-testid="email"]', email);
|
||||
await page.fill('[data-testid="password"]', password);
|
||||
}
|
||||
|
||||
async function waitForDashboard(page: Page) {
|
||||
await expect(page).toHaveURL(/\/dashboard/);
|
||||
await expect(page.locator('h1')).toContainText('Dashboard');
|
||||
}
|
||||
|
||||
test.describe("User Authentication Workflow", () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
// Set base URL for local development
|
||||
await page.goto("http://localhost:3000");
|
||||
});
|
||||
|
||||
test.describe("Company Registration Flow", () => {
|
||||
test("should allow new company registration with admin user", async ({ page }) => {
|
||||
// Navigate to registration page
|
||||
await page.click('[data-testid="register-link"]');
|
||||
await expect(page).toHaveURL(/\/register/);
|
||||
|
||||
// Fill registration form
|
||||
await fillRegistrationForm(page);
|
||||
|
||||
// Submit registration
|
||||
await page.click('[data-testid="register-button"]');
|
||||
|
||||
// Should redirect to login page with success message
|
||||
await expect(page).toHaveURL(/\/login/);
|
||||
await expect(page.locator('[data-testid="success-message"]')).toContainText(
|
||||
"Registration successful"
|
||||
);
|
||||
});
|
||||
|
||||
test("should validate registration form fields", async ({ page }) => {
|
||||
await page.goto("http://localhost:3000/register");
|
||||
|
||||
// Try to submit empty form
|
||||
await page.click('[data-testid="register-button"]');
|
||||
|
||||
// Should show validation errors
|
||||
await expect(page.locator('[data-testid="company-name-error"]')).toContainText(
|
||||
"Company name is required"
|
||||
);
|
||||
await expect(page.locator('[data-testid="admin-email-error"]')).toContainText(
|
||||
"Email is required"
|
||||
);
|
||||
await expect(page.locator('[data-testid="admin-password-error"]')).toContainText(
|
||||
"Password must be at least 12 characters"
|
||||
);
|
||||
});
|
||||
|
||||
test("should enforce password strength requirements", async ({ page }) => {
|
||||
await page.goto("http://localhost:3000/register");
|
||||
|
||||
// Test weak password
|
||||
await page.fill('[data-testid="admin-password"]', "weakpass");
|
||||
await page.blur('[data-testid="admin-password"]');
|
||||
|
||||
await expect(page.locator('[data-testid="admin-password-error"]')).toContainText(
|
||||
"Password must contain at least one uppercase letter"
|
||||
);
|
||||
|
||||
// Test strong password
|
||||
await page.fill('[data-testid="admin-password"]', "StrongPassword123!");
|
||||
await page.blur('[data-testid="admin-password"]');
|
||||
|
||||
await expect(page.locator('[data-testid="admin-password-error"]')).toHaveCount(0);
|
||||
});
|
||||
});
|
||||
|
||||
test.describe("User Login Flow", () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
// Assume company registration was completed in previous test
|
||||
// Navigate directly to login page
|
||||
await page.goto("http://localhost:3000/login");
|
||||
});
|
||||
|
||||
test("should allow successful login with valid credentials", async ({ page }) => {
|
||||
// Fill login form
|
||||
await fillLoginForm(page, testCompany.adminEmail, testCompany.adminPassword);
|
||||
|
||||
// Submit login
|
||||
await page.click('[data-testid="login-button"]');
|
||||
|
||||
// Should redirect to dashboard
|
||||
await waitForDashboard(page);
|
||||
|
||||
// Verify user info is displayed
|
||||
await expect(page.locator('[data-testid="user-name"]')).toContainText(
|
||||
testCompany.adminName
|
||||
);
|
||||
});
|
||||
|
||||
test("should reject invalid credentials", async ({ page }) => {
|
||||
// Fill login form with wrong password
|
||||
await fillLoginForm(page, testCompany.adminEmail, "wrongpassword");
|
||||
|
||||
// Submit login
|
||||
await page.click('[data-testid="login-button"]');
|
||||
|
||||
// Should show error message
|
||||
await expect(page.locator('[data-testid="error-message"]')).toContainText(
|
||||
"Invalid credentials"
|
||||
);
|
||||
|
||||
// Should remain on login page
|
||||
await expect(page).toHaveURL(/\/login/);
|
||||
});
|
||||
|
||||
test("should validate login form fields", async ({ page }) => {
|
||||
// Try to submit empty form
|
||||
await page.click('[data-testid="login-button"]');
|
||||
|
||||
// Should show validation errors
|
||||
await expect(page.locator('[data-testid="email-error"]')).toContainText(
|
||||
"Email is required"
|
||||
);
|
||||
await expect(page.locator('[data-testid="password-error"]')).toContainText(
|
||||
"Password is required"
|
||||
);
|
||||
});
|
||||
|
||||
test("should handle rate limiting", async ({ page }) => {
|
||||
// Attempt multiple failed logins
|
||||
for (let i = 0; i < 6; i++) {
|
||||
await fillLoginForm(page, "invalid@email.com", "wrongpassword");
|
||||
await page.click('[data-testid="login-button"]');
|
||||
await page.waitForTimeout(100); // Small delay between attempts
|
||||
}
|
||||
|
||||
// Should show rate limit error
|
||||
await expect(page.locator('[data-testid="error-message"]')).toContainText(
|
||||
"Too many login attempts"
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
test.describe("Dashboard Access and Navigation", () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
// Login before each test
|
||||
await page.goto("http://localhost:3000/login");
|
||||
await fillLoginForm(page, testCompany.adminEmail, testCompany.adminPassword);
|
||||
await page.click('[data-testid="login-button"]');
|
||||
await waitForDashboard(page);
|
||||
});
|
||||
|
||||
test("should display dashboard overview correctly", async ({ page }) => {
|
||||
// Check main dashboard elements
|
||||
await expect(page.locator('h1')).toContainText('Dashboard Overview');
|
||||
|
||||
// Check metric cards
|
||||
await expect(page.locator('[data-testid="total-sessions-card"]')).toBeVisible();
|
||||
await expect(page.locator('[data-testid="avg-sentiment-card"]')).toBeVisible();
|
||||
await expect(page.locator('[data-testid="escalation-rate-card"]')).toBeVisible();
|
||||
|
||||
// Check navigation sidebar
|
||||
await expect(page.locator('[data-testid="nav-overview"]')).toBeVisible();
|
||||
await expect(page.locator('[data-testid="nav-sessions"]')).toBeVisible();
|
||||
await expect(page.locator('[data-testid="nav-users"]')).toBeVisible();
|
||||
});
|
||||
|
||||
test("should navigate between dashboard sections", async ({ page }) => {
|
||||
// Navigate to Sessions
|
||||
await page.click('[data-testid="nav-sessions"]');
|
||||
await expect(page).toHaveURL(/\/dashboard\/sessions/);
|
||||
await expect(page.locator('h1')).toContainText('Sessions');
|
||||
|
||||
// Navigate to Users
|
||||
await page.click('[data-testid="nav-users"]');
|
||||
await expect(page).toHaveURL(/\/dashboard\/users/);
|
||||
await expect(page.locator('h1')).toContainText('Users');
|
||||
|
||||
// Navigate back to Overview
|
||||
await page.click('[data-testid="nav-overview"]');
|
||||
await expect(page).toHaveURL(/\/dashboard\/overview/);
|
||||
await expect(page.locator('h1')).toContainText('Dashboard Overview');
|
||||
});
|
||||
|
||||
test("should handle unauthorized access attempts", async ({ page }) => {
|
||||
// Try to access admin-only features as regular user
|
||||
await page.goto("http://localhost:3000/dashboard/users");
|
||||
|
||||
// If user is not admin, should show appropriate message or redirect
|
||||
const isAdmin = await page.locator('[data-testid="admin-panel"]').isVisible();
|
||||
|
||||
if (!isAdmin) {
|
||||
await expect(page.locator('[data-testid="access-denied"]')).toBeVisible();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
test.describe("Session Management", () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
// Login before each test
|
||||
await page.goto("http://localhost:3000/login");
|
||||
await fillLoginForm(page, testCompany.adminEmail, testCompany.adminPassword);
|
||||
await page.click('[data-testid="login-button"]');
|
||||
await waitForDashboard(page);
|
||||
});
|
||||
|
||||
test("should persist session across page refreshes", async ({ page }) => {
|
||||
// Refresh the page
|
||||
await page.reload();
|
||||
|
||||
// Should still be logged in
|
||||
await waitForDashboard(page);
|
||||
await expect(page.locator('[data-testid="user-name"]')).toContainText(
|
||||
testCompany.adminName
|
||||
);
|
||||
});
|
||||
|
||||
test("should persist session across browser tabs", async ({ context }) => {
|
||||
// Open new tab
|
||||
const newTab = await context.newPage();
|
||||
await newTab.goto("http://localhost:3000/dashboard");
|
||||
|
||||
// Should be automatically logged in
|
||||
await waitForDashboard(newTab);
|
||||
await expect(newTab.locator('[data-testid="user-name"]')).toContainText(
|
||||
testCompany.adminName
|
||||
);
|
||||
|
||||
await newTab.close();
|
||||
});
|
||||
|
||||
test("should redirect to login when session expires", async ({ page }) => {
|
||||
// Simulate session expiration by clearing localStorage/cookies
|
||||
await page.evaluate(() => {
|
||||
localStorage.clear();
|
||||
document.cookie.split(";").forEach((c) => {
|
||||
const eqPos = c.indexOf("=");
|
||||
const name = eqPos > -1 ? c.substr(0, eqPos) : c;
|
||||
document.cookie = `${name}=;expires=Thu, 01 Jan 1970 00:00:00 GMT;path=/`;
|
||||
});
|
||||
});
|
||||
|
||||
// Try to navigate to protected page
|
||||
await page.goto("http://localhost:3000/dashboard");
|
||||
|
||||
// Should redirect to login
|
||||
await expect(page).toHaveURL(/\/login/);
|
||||
});
|
||||
});
|
||||
|
||||
test.describe("Logout Functionality", () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
// Login before each test
|
||||
await page.goto("http://localhost:3000/login");
|
||||
await fillLoginForm(page, testCompany.adminEmail, testCompany.adminPassword);
|
||||
await page.click('[data-testid="login-button"]');
|
||||
await waitForDashboard(page);
|
||||
});
|
||||
|
||||
test("should successfully logout user", async ({ page }) => {
|
||||
// Open user menu
|
||||
await page.click('[data-testid="user-menu"]');
|
||||
|
||||
// Click logout
|
||||
await page.click('[data-testid="logout-button"]');
|
||||
|
||||
// Should redirect to login page
|
||||
await expect(page).toHaveURL(/\/login/);
|
||||
|
||||
// Should show logout success message
|
||||
await expect(page.locator('[data-testid="success-message"]')).toContainText(
|
||||
"Logged out successfully"
|
||||
);
|
||||
|
||||
// Try to access protected page
|
||||
await page.goto("http://localhost:3000/dashboard");
|
||||
|
||||
// Should redirect back to login
|
||||
await expect(page).toHaveURL(/\/login/);
|
||||
});
|
||||
|
||||
test("should clear session data on logout", async ({ page }) => {
|
||||
// Check that session data exists
|
||||
const sessionBefore = await page.evaluate(() => localStorage.getItem("session"));
|
||||
expect(sessionBefore).toBeTruthy();
|
||||
|
||||
// Logout
|
||||
await page.click('[data-testid="user-menu"]');
|
||||
await page.click('[data-testid="logout-button"]');
|
||||
|
||||
// Check that session data is cleared
|
||||
const sessionAfter = await page.evaluate(() => localStorage.getItem("session"));
|
||||
expect(sessionAfter).toBeFalsy();
|
||||
});
|
||||
});
|
||||
|
||||
test.describe("Password Reset Flow", () => {
|
||||
test("should allow password reset request", async ({ page }) => {
|
||||
await page.goto("http://localhost:3000/login");
|
||||
|
||||
// Click forgot password link
|
||||
await page.click('[data-testid="forgot-password-link"]');
|
||||
await expect(page).toHaveURL(/\/forgot-password/);
|
||||
|
||||
// Enter email
|
||||
await page.fill('[data-testid="email"]', testCompany.adminEmail);
|
||||
await page.click('[data-testid="reset-button"]');
|
||||
|
||||
// Should show success message
|
||||
await expect(page.locator('[data-testid="success-message"]')).toContainText(
|
||||
"Password reset email sent"
|
||||
);
|
||||
});
|
||||
|
||||
test("should validate email format in password reset", async ({ page }) => {
|
||||
await page.goto("http://localhost:3000/forgot-password");
|
||||
|
||||
// Enter invalid email
|
||||
await page.fill('[data-testid="email"]', "invalid-email");
|
||||
await page.click('[data-testid="reset-button"]');
|
||||
|
||||
// Should show validation error
|
||||
await expect(page.locator('[data-testid="email-error"]')).toContainText(
|
||||
"Invalid email format"
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
test.describe("Mobile Responsive Design", () => {
|
||||
test("should work correctly on mobile devices", async ({ page }) => {
|
||||
// Set mobile viewport
|
||||
await page.setViewportSize({ width: 375, height: 667 });
|
||||
|
||||
// Test login flow on mobile
|
||||
await page.goto("http://localhost:3000/login");
|
||||
await fillLoginForm(page, testCompany.adminEmail, testCompany.adminPassword);
|
||||
await page.click('[data-testid="login-button"]');
|
||||
|
||||
// Should work on mobile
|
||||
await waitForDashboard(page);
|
||||
|
||||
// Check mobile navigation
|
||||
const mobileMenu = page.locator('[data-testid="mobile-menu-toggle"]');
|
||||
if (await mobileMenu.isVisible()) {
|
||||
await mobileMenu.click();
|
||||
await expect(page.locator('[data-testid="mobile-nav"]')).toBeVisible();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
test.describe("Accessibility", () => {
|
||||
test("should be accessible with keyboard navigation", async ({ page }) => {
|
||||
await page.goto("http://localhost:3000/login");
|
||||
|
||||
// Test keyboard navigation
|
||||
await page.keyboard.press("Tab");
|
||||
await expect(page.locator('[data-testid="email"]')).toBeFocused();
|
||||
|
||||
await page.keyboard.press("Tab");
|
||||
await expect(page.locator('[data-testid="password"]')).toBeFocused();
|
||||
|
||||
await page.keyboard.press("Tab");
|
||||
await expect(page.locator('[data-testid="login-button"]')).toBeFocused();
|
||||
|
||||
// Test form submission with Enter key
|
||||
await page.fill('[data-testid="email"]', testCompany.adminEmail);
|
||||
await page.fill('[data-testid="password"]', testCompany.adminPassword);
|
||||
await page.keyboard.press("Enter");
|
||||
|
||||
await waitForDashboard(page);
|
||||
});
|
||||
|
||||
test("should have proper ARIA labels and roles", async ({ page }) => {
|
||||
await page.goto("http://localhost:3000/login");
|
||||
|
||||
// Check form accessibility
|
||||
await expect(page.locator('[data-testid="email"]')).toHaveAttribute(
|
||||
"aria-label",
|
||||
"Email address"
|
||||
);
|
||||
await expect(page.locator('[data-testid="password"]')).toHaveAttribute(
|
||||
"aria-label",
|
||||
"Password"
|
||||
);
|
||||
await expect(page.locator('[data-testid="login-button"]')).toHaveAttribute(
|
||||
"role",
|
||||
"button"
|
||||
);
|
||||
});
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user