refactor: fix biome linting issues and update project documentation

- Fix 36+ biome linting issues reducing errors/warnings from 227 to 191
- Replace explicit 'any' types with proper TypeScript interfaces
- Fix React hooks dependencies and useCallback patterns
- Resolve unused variables and parameter assignment issues
- Improve accessibility with proper label associations
- Add comprehensive API documentation for admin and security features
- Update README.md with accurate PostgreSQL setup and current tech stack
- Create complete documentation for audit logging, CSP monitoring, and batch processing
- Fix outdated project information and missing developer workflows
This commit is contained in:
2025-07-11 21:50:53 +02:00
committed by Kaj Kowalski
parent 3e9e75e854
commit 1eea2cc3e4
121 changed files with 28687 additions and 4895 deletions

View File

@ -34,17 +34,17 @@ async function loginAsAdmin(page: Page) {
async function waitForDataProcessing(page: Page, timeout = 30000) {
// Wait for processing indicators to disappear
await page.waitForSelector('[data-testid="processing-indicator"]', {
state: 'hidden',
timeout
state: "hidden",
timeout,
});
}
async function setupMockCsvEndpoint(page: Page) {
// Mock the CSV endpoint to return test data
await page.route('**/test-csv-data', (route) => {
await page.route("**/test-csv-data", (route) => {
route.fulfill({
status: 200,
contentType: 'text/csv',
contentType: "text/csv",
body: mockCsvData,
});
});
@ -66,29 +66,32 @@ test.describe("CSV Processing Workflow", () => {
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');
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'
);
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.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'
"Invalid URL format"
);
});
});
@ -97,9 +100,14 @@ test.describe("CSV Processing Workflow", () => {
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.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();
await expect(
page.locator('[data-testid="success-message"]')
).toBeVisible();
});
test("should trigger manual CSV import", async ({ page }) => {
@ -110,15 +118,17 @@ test.describe("CSV Processing Workflow", () => {
await page.click('[data-testid="refresh-data-button"]');
// Should show processing indicator
await expect(page.locator('[data-testid="processing-indicator"]')).toBeVisible();
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'
);
await expect(
page.locator('[data-testid="import-success"]')
).toContainText("Data imported successfully");
});
test("should display import progress", async ({ page }) => {
@ -128,18 +138,29 @@ test.describe("CSV Processing Workflow", () => {
await page.click('[data-testid="refresh-data-button"]');
// Check progress indicators
await expect(page.locator('[data-testid="import-progress"]')).toBeVisible();
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');
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.fill(
'[data-testid="csv-url"]',
"http://localhost:3000/api/nonexistent-csv"
);
await page.click('[data-testid="save-settings"]');
// Try to import
@ -148,7 +169,7 @@ test.describe("CSV Processing Workflow", () => {
// Should show error message
await expect(page.locator('[data-testid="import-error"]')).toContainText(
'Failed to fetch CSV data'
"Failed to fetch CSV data"
);
});
});
@ -157,7 +178,10 @@ test.describe("CSV Processing Workflow", () => {
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.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");
@ -169,16 +193,24 @@ test.describe("CSV Processing Workflow", () => {
await page.goto("http://localhost:3000/dashboard/overview");
// Check metric cards show correct data
await expect(page.locator('[data-testid="total-sessions"]')).toContainText('3');
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');
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 }) => {
@ -189,19 +221,29 @@ test.describe("CSV Processing Workflow", () => {
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');
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%');
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%');
await expect(
page.locator('[data-testid="hr-forwarding-rate"]')
).toContainText("33%");
});
});
@ -209,7 +251,10 @@ test.describe("CSV Processing Workflow", () => {
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.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");
@ -226,49 +271,55 @@ test.describe("CSV Processing Workflow", () => {
// 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');
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');
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');
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');
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');
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');
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');
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');
await page.selectOption('[data-testid="page-size"]', "2");
// Should show pagination
await expect(page.locator('[data-testid="pagination"]')).toBeVisible();
@ -284,7 +335,10 @@ test.describe("CSV Processing Workflow", () => {
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.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");
@ -302,10 +356,18 @@ test.describe("CSV Processing Workflow", () => {
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');
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 }) => {
@ -317,9 +379,15 @@ test.describe("CSV Processing Workflow", () => {
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');
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 }) => {
@ -327,13 +395,17 @@ test.describe("CSV Processing Workflow", () => {
await page.click('[data-testid="session-item"]');
// Check questions section
const questionsSection = page.locator('[data-testid="extracted-questions"]');
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);
await expect(
questionsList.locator('[data-testid="question-item"]')
).toHaveCount.greaterThan(0);
}
});
});
@ -344,7 +416,10 @@ test.describe("CSV Processing Workflow", () => {
// 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.fill(
'[data-testid="csv-url"]',
"http://localhost:3000/api/test-csv-data"
);
await page.click('[data-testid="save-settings"]');
// Start import and monitor status
@ -352,23 +427,36 @@ test.describe("CSV Processing Workflow", () => {
await page.click('[data-testid="refresh-data-button"]');
// Should show real-time status updates
await expect(page.locator('[data-testid="status-importing"]')).toBeVisible();
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 });
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();
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.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");
@ -376,7 +464,9 @@ test.describe("CSV Processing Workflow", () => {
await waitForDataProcessing(page);
// Metrics should be updated
const updatedSessions = await page.locator('[data-testid="total-sessions"]').textContent();
const updatedSessions = await page
.locator('[data-testid="total-sessions"]')
.textContent();
expect(updatedSessions).not.toBe(initialSessions);
});
});
@ -384,16 +474,19 @@ test.describe("CSV Processing Workflow", () => {
test.describe("Error Handling", () => {
test("should handle CSV parsing errors", async ({ page }) => {
// Mock invalid CSV data
await page.route('**/invalid-csv', (route) => {
await page.route("**/invalid-csv", (route) => {
route.fulfill({
status: 200,
contentType: 'text/csv',
body: 'invalid,csv,format\nwithout,proper,headers',
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.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");
@ -401,21 +494,24 @@ test.describe("CSV Processing Workflow", () => {
// Should show parsing error
await expect(page.locator('[data-testid="parsing-error"]')).toContainText(
'Invalid CSV format'
"Invalid CSV format"
);
});
test("should handle AI processing failures", async ({ page }) => {
// Mock AI service failure
await page.route('**/api/openai/**', (route) => {
await page.route("**/api/openai/**", (route) => {
route.fulfill({
status: 500,
body: JSON.stringify({ error: 'AI service unavailable' }),
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.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");
@ -423,7 +519,7 @@ test.describe("CSV Processing Workflow", () => {
// Should show AI processing error
await expect(page.locator('[data-testid="ai-error"]')).toContainText(
'AI analysis failed'
"AI analysis failed"
);
});
@ -431,12 +527,15 @@ test.describe("CSV Processing Workflow", () => {
let attemptCount = 0;
// Mock failing then succeeding API
await page.route('**/api/process-batch', (route) => {
await page.route("**/api/process-batch", (route) => {
attemptCount++;
if (attemptCount === 1) {
route.fulfill({ status: 500, body: 'Server error' });
route.fulfill({ status: 500, body: "Server error" });
} else {
route.fulfill({ status: 200, body: JSON.stringify({ success: true }) });
route.fulfill({
status: 200,
body: JSON.stringify({ success: true }),
});
}
});
@ -444,11 +543,15 @@ test.describe("CSV Processing Workflow", () => {
await page.click('[data-testid="refresh-data-button"]');
// Should show retry attempt
await expect(page.locator('[data-testid="retry-indicator"]')).toBeVisible();
await expect(
page.locator('[data-testid="retry-indicator"]')
).toBeVisible();
// Should eventually succeed
await waitForDataProcessing(page);
await expect(page.locator('[data-testid="import-success"]')).toBeVisible();
await expect(
page.locator('[data-testid="import-success"]')
).toBeVisible();
});
});
});
});

View File

@ -28,13 +28,10 @@ async function loginUser(page: Page) {
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
);
await page.waitForFunction((selector) => {
const chart = document.querySelector(selector);
return chart && chart.children.length > 0;
}, chartSelector);
}
test.describe("Dashboard Navigation", () => {
@ -57,34 +54,40 @@ test.describe("Dashboard Navigation", () => {
test("should highlight active navigation item", async ({ page }) => {
// Overview should be active by default
await expect(page.locator('[data-testid="nav-overview"]')).toHaveClass(/active/);
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/);
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');
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');
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');
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');
await expect(page.locator("h1")).toContainText("Dashboard Overview");
});
test("should support breadcrumb navigation", async ({ page }) => {
@ -100,9 +103,15 @@ test.describe("Dashboard Navigation", () => {
// 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');
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");
}
});
});
@ -127,7 +136,9 @@ test.describe("Dashboard Navigation", () => {
if (await notifications.isVisible()) {
await notifications.click();
await expect(page.locator('[data-testid="notifications-dropdown"]')).toBeVisible();
await expect(
page.locator('[data-testid="notifications-dropdown"]')
).toBeVisible();
}
});
@ -135,8 +146,10 @@ test.describe("Dashboard Navigation", () => {
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();
await searchInput.fill("test search");
await expect(
page.locator('[data-testid="search-results"]')
).toBeVisible();
}
});
});
@ -167,13 +180,23 @@ test.describe("Data Visualization", () => {
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();
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"]');
const totalSessions = page.locator(
'[data-testid="total-sessions-value"]'
);
await expect(totalSessions).toContainText(/\d+/); // Should contain numbers
});
@ -184,9 +207,15 @@ test.describe("Data Visualization", () => {
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();
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 }) => {
@ -226,8 +255,12 @@ test.describe("Data Visualization", () => {
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();
await expect(
firstQuestion.locator('[data-testid="question-text"]')
).toBeVisible();
await expect(
firstQuestion.locator('[data-testid="question-count"]')
).toBeVisible();
}
});
@ -238,8 +271,12 @@ test.describe("Data Visualization", () => {
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();
await expect(
page.locator('[data-testid="chart-x-axis"]')
).toBeVisible();
await expect(
page.locator('[data-testid="chart-y-axis"]')
).toBeVisible();
}
});
});
@ -250,13 +287,17 @@ test.describe("Data Visualization", () => {
if (await sentimentChart.isVisible()) {
// Click on positive sentiment section
const positiveSection = page.locator('[data-testid="positive-segment"]');
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();
await expect(
page.locator('[data-testid="chart-filter-active"]')
).toBeVisible();
}
}
});
@ -288,7 +329,10 @@ test.describe("Data Visualization", () => {
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.move(
box.x + box.width / 2 + 50,
box.y + box.height / 2
);
await page.mouse.up();
}
}
@ -310,7 +354,9 @@ test.describe("Data Visualization", () => {
await page.waitForTimeout(1000);
// Check that data is filtered
await expect(page.locator('[data-testid="filter-applied"]')).toBeVisible();
await expect(
page.locator('[data-testid="filter-applied"]')
).toBeVisible();
}
});
@ -318,13 +364,15 @@ test.describe("Data Visualization", () => {
const sentimentFilter = page.locator('[data-testid="sentiment-filter"]');
if (await sentimentFilter.isVisible()) {
await sentimentFilter.selectOption('POSITIVE');
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');
await expect(
page.locator('[data-testid="active-filters"]')
).toContainText("Sentiment: Positive");
}
});
@ -332,7 +380,7 @@ test.describe("Data Visualization", () => {
// Apply some filters first
const sentimentFilter = page.locator('[data-testid="sentiment-filter"]');
if (await sentimentFilter.isVisible()) {
await sentimentFilter.selectOption('POSITIVE');
await sentimentFilter.selectOption("POSITIVE");
}
// Clear filters
@ -341,7 +389,9 @@ test.describe("Data Visualization", () => {
await clearButton.click();
// Should reset all data
await expect(page.locator('[data-testid="active-filters"]')).toHaveCount(0);
await expect(
page.locator('[data-testid="active-filters"]')
).toHaveCount(0);
}
});
});
@ -352,12 +402,12 @@ test.describe("Data Visualization", () => {
if (await exportButton.isVisible()) {
// Start download
const downloadPromise = page.waitForEvent('download');
const downloadPromise = page.waitForEvent("download");
await exportButton.click();
const download = await downloadPromise;
// Verify download
expect(download.suggestedFilename()).toContain('.csv');
expect(download.suggestedFilename()).toContain(".csv");
}
});
@ -365,7 +415,7 @@ test.describe("Data Visualization", () => {
const exportButton = page.locator('[data-testid="export-image"]');
if (await exportButton.isVisible()) {
const downloadPromise = page.waitForEvent('download');
const downloadPromise = page.waitForEvent("download");
await exportButton.click();
const download = await downloadPromise;
@ -392,11 +442,17 @@ test.describe("Responsive Design", () => {
// Open mobile menu
await mobileMenu.click();
await expect(page.locator('[data-testid="mobile-navigation"]')).toBeVisible();
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();
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 }) => {
@ -405,7 +461,7 @@ test.describe("Responsive Design", () => {
// Charts should be stacked
const chartContainer = page.locator('[data-testid="charts-container"]');
await expect(chartContainer).toHaveCSS('flex-direction', 'column');
await expect(chartContainer).toHaveCSS("flex-direction", "column");
});
test("should show simplified metrics on mobile", async ({ page }) => {
@ -438,7 +494,7 @@ test.describe("Responsive Design", () => {
// Charts should adapt to medium screen
const chartGrid = page.locator('[data-testid="chart-grid"]');
await expect(chartGrid).toHaveCSS('grid-template-columns', /repeat\(2,/);
await expect(chartGrid).toHaveCSS("grid-template-columns", /repeat\(2,/);
});
});
});
@ -449,20 +505,22 @@ test.describe("Accessibility", () => {
});
test.describe("Keyboard Navigation", () => {
test("should support keyboard navigation in dashboard", async ({ page }) => {
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');
await page.keyboard.press("Tab");
// Should focus on first interactive element
const focused = page.locator(':focus');
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 page.keyboard.press("Tab");
const currentFocus = page.locator(":focus");
await expect(currentFocus).toBeVisible();
}
});
@ -471,10 +529,10 @@ test.describe("Accessibility", () => {
await page.goto("http://localhost:3000/dashboard/overview");
// Test keyboard shortcuts (if implemented)
await page.keyboard.press('Alt+1'); // Navigate to overview
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 page.keyboard.press("Alt+2"); // Navigate to sessions
await expect(page).toHaveURL(/\/dashboard\/sessions/);
});
});
@ -484,14 +542,14 @@ test.describe("Accessibility", () => {
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');
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');
await expect(sentimentChart).toHaveAttribute("role", "img");
await expect(sentimentChart).toHaveAttribute("aria-label");
}
});
@ -504,7 +562,7 @@ test.describe("Accessibility", () => {
for (let i = 0; i < count; i++) {
const chart = charts.nth(i);
const ariaLabel = await chart.getAttribute('aria-label');
const ariaLabel = await chart.getAttribute("aria-label");
expect(ariaLabel).toBeTruthy();
expect(ariaLabel?.length).toBeGreaterThan(10); // Should be descriptive
}
@ -514,15 +572,15 @@ test.describe("Accessibility", () => {
await page.goto("http://localhost:3000/dashboard/overview");
// Check for live regions
const liveRegions = page.locator('[aria-live]');
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);
const ariaLive = await region.getAttribute("aria-live");
expect(["polite", "assertive"]).toContain(ariaLive);
}
}
});
@ -539,19 +597,27 @@ test.describe("Accessibility", () => {
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();
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.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();
await expect(
page.locator('[data-testid="total-sessions-card"]')
).toBeVisible();
await expect(
page.locator('[data-testid="sentiment-chart"]')
).toBeVisible();
});
});
});
});

View File

@ -47,7 +47,7 @@ async function fillLoginForm(page: Page, email: string, password: string) {
async function waitForDashboard(page: Page) {
await expect(page).toHaveURL(/\/dashboard/);
await expect(page.locator('h1')).toContainText('Dashboard');
await expect(page.locator("h1")).toContainText("Dashboard");
}
test.describe("User Authentication Workflow", () => {
@ -57,7 +57,9 @@ test.describe("User Authentication Workflow", () => {
});
test.describe("Company Registration Flow", () => {
test("should allow new company registration with admin user", async ({ page }) => {
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/);
@ -70,9 +72,9 @@ test.describe("User Authentication Workflow", () => {
// Should redirect to login page with success message
await expect(page).toHaveURL(/\/login/);
await expect(page.locator('[data-testid="success-message"]')).toContainText(
"Registration successful"
);
await expect(
page.locator('[data-testid="success-message"]')
).toContainText("Registration successful");
});
test("should validate registration form fields", async ({ page }) => {
@ -82,15 +84,15 @@ test.describe("User Authentication Workflow", () => {
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"
);
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 }) => {
@ -100,15 +102,17 @@ test.describe("User Authentication Workflow", () => {
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"
);
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);
await expect(
page.locator('[data-testid="admin-password-error"]')
).toHaveCount(0);
});
});
@ -119,9 +123,15 @@ test.describe("User Authentication Workflow", () => {
await page.goto("http://localhost:3000/login");
});
test("should allow successful login with valid credentials", async ({ page }) => {
test("should allow successful login with valid credentials", async ({
page,
}) => {
// Fill login form
await fillLoginForm(page, testCompany.adminEmail, testCompany.adminPassword);
await fillLoginForm(
page,
testCompany.adminEmail,
testCompany.adminPassword
);
// Submit login
await page.click('[data-testid="login-button"]');
@ -159,9 +169,9 @@ test.describe("User Authentication Workflow", () => {
await expect(page.locator('[data-testid="email-error"]')).toContainText(
"Email is required"
);
await expect(page.locator('[data-testid="password-error"]')).toContainText(
"Password is required"
);
await expect(
page.locator('[data-testid="password-error"]')
).toContainText("Password is required");
});
test("should handle rate limiting", async ({ page }) => {
@ -183,19 +193,29 @@ test.describe("User Authentication Workflow", () => {
test.beforeEach(async ({ page }) => {
// Login before each test
await page.goto("http://localhost:3000/login");
await fillLoginForm(page, testCompany.adminEmail, testCompany.adminPassword);
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');
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();
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();
@ -207,17 +227,17 @@ test.describe("User Authentication Workflow", () => {
// Navigate to Sessions
await page.click('[data-testid="nav-sessions"]');
await expect(page).toHaveURL(/\/dashboard\/sessions/);
await expect(page.locator('h1')).toContainText('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');
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');
await expect(page.locator("h1")).toContainText("Dashboard Overview");
});
test("should handle unauthorized access attempts", async ({ page }) => {
@ -225,10 +245,14 @@ test.describe("User Authentication Workflow", () => {
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();
const isAdmin = await page
.locator('[data-testid="admin-panel"]')
.isVisible();
if (!isAdmin) {
await expect(page.locator('[data-testid="access-denied"]')).toBeVisible();
await expect(
page.locator('[data-testid="access-denied"]')
).toBeVisible();
}
});
});
@ -237,7 +261,11 @@ test.describe("User Authentication Workflow", () => {
test.beforeEach(async ({ page }) => {
// Login before each test
await page.goto("http://localhost:3000/login");
await fillLoginForm(page, testCompany.adminEmail, testCompany.adminPassword);
await fillLoginForm(
page,
testCompany.adminEmail,
testCompany.adminPassword
);
await page.click('[data-testid="login-button"]');
await waitForDashboard(page);
});
@ -290,7 +318,11 @@ test.describe("User Authentication Workflow", () => {
test.beforeEach(async ({ page }) => {
// Login before each test
await page.goto("http://localhost:3000/login");
await fillLoginForm(page, testCompany.adminEmail, testCompany.adminPassword);
await fillLoginForm(
page,
testCompany.adminEmail,
testCompany.adminPassword
);
await page.click('[data-testid="login-button"]');
await waitForDashboard(page);
});
@ -306,9 +338,9 @@ test.describe("User Authentication Workflow", () => {
await expect(page).toHaveURL(/\/login/);
// Should show logout success message
await expect(page.locator('[data-testid="success-message"]')).toContainText(
"Logged out successfully"
);
await expect(
page.locator('[data-testid="success-message"]')
).toContainText("Logged out successfully");
// Try to access protected page
await page.goto("http://localhost:3000/dashboard");
@ -319,7 +351,9 @@ test.describe("User Authentication Workflow", () => {
test("should clear session data on logout", async ({ page }) => {
// Check that session data exists
const sessionBefore = await page.evaluate(() => localStorage.getItem("session"));
const sessionBefore = await page.evaluate(() =>
localStorage.getItem("session")
);
expect(sessionBefore).toBeTruthy();
// Logout
@ -327,7 +361,9 @@ test.describe("User Authentication Workflow", () => {
await page.click('[data-testid="logout-button"]');
// Check that session data is cleared
const sessionAfter = await page.evaluate(() => localStorage.getItem("session"));
const sessionAfter = await page.evaluate(() =>
localStorage.getItem("session")
);
expect(sessionAfter).toBeFalsy();
});
});
@ -345,9 +381,9 @@ test.describe("User Authentication Workflow", () => {
await page.click('[data-testid="reset-button"]');
// Should show success message
await expect(page.locator('[data-testid="success-message"]')).toContainText(
"Password reset email sent"
);
await expect(
page.locator('[data-testid="success-message"]')
).toContainText("Password reset email sent");
});
test("should validate email format in password reset", async ({ page }) => {
@ -371,7 +407,11 @@ test.describe("User Authentication Workflow", () => {
// Test login flow on mobile
await page.goto("http://localhost:3000/login");
await fillLoginForm(page, testCompany.adminEmail, testCompany.adminPassword);
await fillLoginForm(
page,
testCompany.adminEmail,
testCompany.adminPassword
);
await page.click('[data-testid="login-button"]');
// Should work on mobile
@ -420,10 +460,9 @@ test.describe("User Authentication Workflow", () => {
"aria-label",
"Password"
);
await expect(page.locator('[data-testid="login-button"]')).toHaveAttribute(
"role",
"button"
);
await expect(
page.locator('[data-testid="login-button"]')
).toHaveAttribute("role", "button");
});
});
});
});