Phase 5.4-5.11: Playwright E2E test infrastructure with 7 spec files
- playwright.config.ts: chromium project, webServer, baseURL, trace/screenshot/video - e2e/helpers.ts: API mock setup, login/logout helpers, mock data for all entities - 7 E2E spec files (1164 lines total): - auth.spec.ts: login/logout workflow - contact-crud.spec.ts: create/edit/delete contacts, add persons - search.spec.ts: global search, filter, results - plugin-toggle.spec.ts: enable/disable plugins, UI changes - mail.spec.ts: mail account setup, folders, mail viewing - dms.spec.ts: folder creation, file upload, preview, share - calendar.spec.ts: appointment creation, calendar switch, kanban view - @playwright/test added as devDependency - e2e scripts added to package.json - TSC: 0 new errors (only pre-existing Dms.tsx)
This commit is contained in:
Agent Zero
@@ -0,0 +1,77 @@
|
||||
import { test, expect } from '@playwright/test';
|
||||
import { setupApiMocks, login, logout, TEST_USER } from './helpers';
|
||||
|
||||
test.describe('Authentication E2E', () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await setupApiMocks(page);
|
||||
});
|
||||
|
||||
test('login form is rendered correctly', async ({ page }) => {
|
||||
await page.goto('/login');
|
||||
|
||||
// Login page container visible
|
||||
await expect(page.locator('[data-testid="login-page"]')).toBeVisible();
|
||||
|
||||
// Email and password inputs present
|
||||
await expect(page.locator('input[type="email"]')).toBeVisible();
|
||||
await expect(page.locator('input[type="password"]')).toBeVisible();
|
||||
|
||||
// Submit button present
|
||||
await expect(page.locator('button[type="submit"]')).toBeVisible();
|
||||
|
||||
// Logo / title visible
|
||||
await expect(page.locator('h1')).toContainText(/leocrm/i);
|
||||
});
|
||||
|
||||
test('successful login redirects to dashboard', async ({ page }) => {
|
||||
await login(page);
|
||||
|
||||
// Should be on dashboard
|
||||
await expect(page).toHaveURL(/\/dashboard/);
|
||||
await expect(page.locator('[data-testid="topbar"]')).toBeVisible();
|
||||
await expect(page.locator('[data-testid="app-shell"]')).toBeVisible();
|
||||
});
|
||||
|
||||
test('login with invalid credentials shows error', async ({ page }) => {
|
||||
// Override login route to return 401
|
||||
await page.route('**/api/v1/auth/login', (route) => {
|
||||
route.fulfill({
|
||||
status: 401,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify({ detail: 'Invalid credentials' }),
|
||||
});
|
||||
});
|
||||
|
||||
await page.goto('/login');
|
||||
await page.locator('input[type="email"]').fill('wrong@test.test');
|
||||
await page.locator('input[type="password"]').fill('wrongpassword');
|
||||
await page.locator('button[type="submit"]').click();
|
||||
|
||||
// Should stay on login page and show error
|
||||
await expect(page).toHaveURL(/\/login/);
|
||||
await expect(page.locator('[role="alert"]')).toBeVisible();
|
||||
});
|
||||
|
||||
test('logout button works and redirects to login', async ({ page }) => {
|
||||
await login(page);
|
||||
|
||||
// Open user menu
|
||||
await page.locator('[data-testid="topbar"] button[aria-haspopup="menu"]').click();
|
||||
|
||||
// Click logout
|
||||
await page.locator('[role="menuitem"]').filter({ hasText: /logout|abmelden/i }).click();
|
||||
|
||||
// Should redirect to login
|
||||
await expect(page).toHaveURL(/\/login/);
|
||||
await expect(page.locator('[data-testid="login-page"]')).toBeVisible();
|
||||
});
|
||||
|
||||
test('protected route redirects to login when not authenticated', async ({ page }) => {
|
||||
// Try to access dashboard without login
|
||||
await page.goto('/dashboard');
|
||||
|
||||
// Should redirect to login
|
||||
await expect(page).toHaveURL(/\/login/);
|
||||
await expect(page.locator('[data-testid="login-page"]')).toBeVisible();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,121 @@
|
||||
import { test, expect } from '@playwright/test';
|
||||
import { setupApiMocks, login, navigateTo } from './helpers';
|
||||
|
||||
test.describe('Calendar E2E', () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await setupApiMocks(page);
|
||||
await login(page);
|
||||
});
|
||||
|
||||
test('calendar page renders with tree and view', async ({ page }) => {
|
||||
await navigateTo(page, '/calendar');
|
||||
|
||||
await expect(page.locator('[data-testid="calendar-page"]')).toBeVisible({ timeout: 10_000 });
|
||||
|
||||
// Calendar tree should be visible
|
||||
await expect(page.locator('[data-testid="calendar-tree"], [data-testid="calendar-tree-loading"]')).toBeVisible({ timeout: 10_000 });
|
||||
|
||||
// Calendar view should be visible (month view is default)
|
||||
await expect(page.locator('[data-testid="month-view"], [data-testid="week-view"], [data-testid="day-view"]')).toBeVisible({ timeout: 10_000 });
|
||||
});
|
||||
|
||||
test('create a new appointment', async ({ page }) => {
|
||||
await navigateTo(page, '/calendar');
|
||||
|
||||
await expect(page.locator('[data-testid="calendar-page"]')).toBeVisible({ timeout: 10_000 });
|
||||
|
||||
// Click new appointment button in toolbar
|
||||
const newBtn = page.locator('[data-testid="plugin-toolbar"] button').filter({ hasText: /new|neu|erstellen|appointment|termin/i }).first();
|
||||
await newBtn.click();
|
||||
|
||||
// Appointment modal should appear
|
||||
await expect(page.locator('[data-testid="appointment-modal"]')).toBeVisible({ timeout: 10_000 });
|
||||
|
||||
// Fill in title
|
||||
await page.locator('[data-testid="appointment-title"]').fill('Test Appointment');
|
||||
|
||||
// Select calendar (should have default)
|
||||
const calendarSelect = page.locator('[data-testid="appointment-calendar"]');
|
||||
await expect(calendarSelect).toBeVisible();
|
||||
|
||||
// Fill in location
|
||||
await page.locator('[data-testid="appointment-location"]').fill('Conference Room A');
|
||||
|
||||
// Save appointment
|
||||
await page.locator('[data-testid="appointment-save"]').click();
|
||||
|
||||
// Modal should close
|
||||
await expect(page.locator('[data-testid="appointment-modal"]')).not.toBeVisible({ timeout: 10_000 });
|
||||
});
|
||||
|
||||
test('switch between calendar views (month/week/day)', async ({ page }) => {
|
||||
await navigateTo(page, '/calendar');
|
||||
|
||||
await expect(page.locator('[data-testid="calendar-page"]')).toBeVisible({ timeout: 10_000 });
|
||||
|
||||
// Default should be month view
|
||||
await expect(page.locator('[data-testid="month-view"]')).toBeVisible({ timeout: 10_000 });
|
||||
|
||||
// Look for view mode buttons in toolbar
|
||||
const weekBtn = page.locator('[data-testid="plugin-toolbar"] button').filter({ hasText: /week|woche/i }).first();
|
||||
if (await weekBtn.isVisible({ timeout: 5_000 })) {
|
||||
await weekBtn.click();
|
||||
await expect(page.locator('[data-testid="week-view"]')).toBeVisible({ timeout: 10_000 });
|
||||
}
|
||||
|
||||
const dayBtn = page.locator('[data-testid="plugin-toolbar"] button').filter({ hasText: /day|tag/i }).first();
|
||||
if (await dayBtn.isVisible({ timeout: 5_000 })) {
|
||||
await dayBtn.click();
|
||||
await expect(page.locator('[data-testid="day-view"]')).toBeVisible({ timeout: 10_000 });
|
||||
}
|
||||
});
|
||||
|
||||
test('calendar tree shows available calendars', async ({ page }) => {
|
||||
await navigateTo(page, '/calendar');
|
||||
|
||||
await expect(page.locator('[data-testid="calendar-page"]')).toBeVisible({ timeout: 10_000 });
|
||||
|
||||
// Calendar tree should show calendars
|
||||
await expect(page.locator('[data-testid="calendar-tree"]')).toBeVisible({ timeout: 10_000 });
|
||||
|
||||
// Should have at least one calendar row
|
||||
const calRow = page.locator('[data-testid^="calendar-tree-row-"]').first();
|
||||
await expect(calRow).toBeVisible({ timeout: 10_000 });
|
||||
});
|
||||
|
||||
test('kanban view shows task columns', async ({ page }) => {
|
||||
await navigateTo(page, '/calendar/kanban');
|
||||
|
||||
// Kanban board should be visible
|
||||
await expect(page.locator('[data-testid="kanban-board"], [data-testid="kanban-empty"]')).toBeVisible({ timeout: 10_000 });
|
||||
|
||||
// If board is visible, check columns
|
||||
const board = page.locator('[data-testid="kanban-board"]');
|
||||
if (await board.isVisible({ timeout: 5_000 })) {
|
||||
// Should have open column
|
||||
await expect(page.locator('[data-testid="kanban-column-open"]')).toBeVisible();
|
||||
// Should have in_progress column
|
||||
await expect(page.locator('[data-testid="kanban-column-in_progress"]')).toBeVisible();
|
||||
// Should have done column
|
||||
await expect(page.locator('[data-testid="kanban-column-done"]')).toBeVisible();
|
||||
}
|
||||
});
|
||||
|
||||
test('clicking a calendar entry shows detail', async ({ page }) => {
|
||||
await navigateTo(page, '/calendar');
|
||||
|
||||
await expect(page.locator('[data-testid="calendar-page"]')).toBeVisible({ timeout: 10_000 });
|
||||
|
||||
// Wait for month view
|
||||
await expect(page.locator('[data-testid="month-view"]')).toBeVisible({ timeout: 10_000 });
|
||||
|
||||
// Look for an entry in the calendar
|
||||
const entry = page.locator('[data-testid^="month-entry-"]').first();
|
||||
if (await entry.isVisible({ timeout: 5_000 })) {
|
||||
await entry.click();
|
||||
|
||||
// Calendar detail should appear
|
||||
await expect(page.locator('[data-testid="calendar-detail"]')).toBeVisible({ timeout: 10_000 });
|
||||
}
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,132 @@
|
||||
import { test, expect } from '@playwright/test';
|
||||
import { setupApiMocks, login, navigateTo, MOCK_CONTACTS } from './helpers';
|
||||
|
||||
test.describe('Contact CRUD E2E', () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await setupApiMocks(page);
|
||||
await login(page);
|
||||
});
|
||||
|
||||
test('create a new company contact', async ({ page }) => {
|
||||
await navigateTo(page, '/contacts');
|
||||
|
||||
// Wait for contacts page to load
|
||||
await expect(page.locator('[data-testid="contact-list-view"], [data-testid="contact-list-empty"], [data-testid="contact-list-loading"]')).toBeVisible({ timeout: 15_000 });
|
||||
|
||||
// Click the "new" toolbar button (Plus icon in plugin toolbar)
|
||||
const newBtn = page.locator('[data-testid="plugin-toolbar"] button').filter({ hasText: /new|neu|erstellen|create/i }).first();
|
||||
await newBtn.click();
|
||||
|
||||
// Contact edit modal should appear
|
||||
await expect(page.locator('[data-testid="contact-type-select"]')).toBeVisible({ timeout: 10_000 });
|
||||
|
||||
// Select company type (should be default)
|
||||
await expect(page.locator('[data-testid="contact-name-input"]')).toBeVisible();
|
||||
|
||||
// Fill in company name
|
||||
await page.locator('[data-testid="contact-name-input"]').fill('Test Company GmbH');
|
||||
|
||||
// Fill in email
|
||||
await page.locator('input[type="email"]').first().fill('test@company.test');
|
||||
|
||||
// Submit
|
||||
await page.locator('[data-testid="contact-submit-btn"]').click();
|
||||
|
||||
// Modal should close (success)
|
||||
await expect(page.locator('[data-testid="contact-type-select"]')).not.toBeVisible({ timeout: 10_000 });
|
||||
});
|
||||
|
||||
test('view contact detail and edit', async ({ page }) => {
|
||||
await navigateTo(page, '/contacts');
|
||||
|
||||
// Wait for list to load
|
||||
await expect(page.locator('[data-testid="contact-list-view"], [data-testid="contact-list-empty"]')).toBeVisible({ timeout: 15_000 });
|
||||
|
||||
// Click on first contact in the list
|
||||
const firstContact = page.locator('[data-testid="contact-list-view"] > div, [data-testid="contact-list-view"] button').first();
|
||||
if (await firstContact.isVisible()) {
|
||||
await firstContact.click();
|
||||
|
||||
// Detail should appear
|
||||
await expect(page.locator('[data-testid="contact-detail"]')).toBeVisible({ timeout: 10_000 });
|
||||
|
||||
// Click edit button in detail
|
||||
const editBtn = page.locator('[data-testid="contact-detail"] button').filter({ hasText: /edit|bearbeiten/i }).first();
|
||||
if (await editBtn.isVisible()) {
|
||||
await editBtn.click();
|
||||
|
||||
// Edit modal should appear
|
||||
await expect(page.locator('[data-testid="contact-type-select"]')).toBeVisible({ timeout: 10_000 });
|
||||
|
||||
// Modify name
|
||||
await page.locator('[data-testid="contact-name-input"]').fill('Updated Company GmbH');
|
||||
|
||||
// Save
|
||||
await page.locator('[data-testid="contact-submit-btn"]').click();
|
||||
|
||||
// Modal should close
|
||||
await expect(page.locator('[data-testid="contact-type-select"]')).not.toBeVisible({ timeout: 10_000 });
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
test('add ansprechpartner (contact person) to a company', async ({ page }) => {
|
||||
await navigateTo(page, '/contacts');
|
||||
|
||||
// Wait for list and click first contact
|
||||
await expect(page.locator('[data-testid="contact-list-view"], [data-testid="contact-list-empty"]')).toBeVisible({ timeout: 15_000 });
|
||||
|
||||
const firstContact = page.locator('[data-testid="contact-list-view"] > div, [data-testid="contact-list-view"] button').first();
|
||||
if (await firstContact.isVisible()) {
|
||||
await firstContact.click();
|
||||
await expect(page.locator('[data-testid="contact-detail"]')).toBeVisible({ timeout: 10_000 });
|
||||
|
||||
// Find and click "Add Person" button
|
||||
const addPersonBtn = page.locator('[data-testid="contact-detail"] button').filter({ hasText: /add.*person|ansprechpartner.*hinzuf/i }).first();
|
||||
if (await addPersonBtn.isVisible()) {
|
||||
await addPersonBtn.click();
|
||||
|
||||
// Person modal should appear
|
||||
await expect(page.locator('[data-testid="person-save-btn"]')).toBeVisible({ timeout: 10_000 });
|
||||
|
||||
// Fill person details
|
||||
const inputs = page.locator('[data-testid="contact-detail"] input, .modal input, [role="dialog"] input');
|
||||
const firstNameInput = inputs.nth(0);
|
||||
const lastNameInput = inputs.nth(1);
|
||||
|
||||
await firstNameInput.fill('Anna');
|
||||
await lastNameInput.fill('Schmidt');
|
||||
|
||||
// Save person
|
||||
await page.locator('[data-testid="person-save-btn"]').click();
|
||||
|
||||
// Modal should close
|
||||
await expect(page.locator('[data-testid="person-save-btn"]')).not.toBeVisible({ timeout: 10_000 });
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
test('delete a contact', async ({ page }) => {
|
||||
await navigateTo(page, '/contacts');
|
||||
|
||||
await expect(page.locator('[data-testid="contact-list-view"], [data-testid="contact-list-empty"]')).toBeVisible({ timeout: 15_000 });
|
||||
|
||||
const firstContact = page.locator('[data-testid="contact-list-view"] > div, [data-testid="contact-list-view"] button').first();
|
||||
if (await firstContact.isVisible()) {
|
||||
await firstContact.click();
|
||||
await expect(page.locator('[data-testid="contact-detail"]')).toBeVisible({ timeout: 10_000 });
|
||||
|
||||
// Set up confirm dialog handler
|
||||
page.on('dialog', (dialog) => dialog.accept());
|
||||
|
||||
// Click delete button
|
||||
const deleteBtn = page.locator('[data-testid="contact-detail"] button').filter({ hasText: /delete|löschen/i }).first();
|
||||
if (await deleteBtn.isVisible()) {
|
||||
await deleteBtn.click();
|
||||
|
||||
// Detail should become empty after deletion
|
||||
await expect(page.locator('[data-testid="contact-detail-empty"], [data-testid="contact-detail-loading"]')).toBeVisible({ timeout: 10_000 });
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,94 @@
|
||||
import { test, expect } from '@playwright/test';
|
||||
import { setupApiMocks, login, navigateTo } from './helpers';
|
||||
|
||||
test.describe('DMS E2E', () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await setupApiMocks(page);
|
||||
await login(page);
|
||||
});
|
||||
|
||||
test('dms page renders with source tree and explorer', async ({ page }) => {
|
||||
await navigateTo(page, '/dms');
|
||||
|
||||
await expect(page.locator('[data-testid="dms-page"]')).toBeVisible({ timeout: 10_000 });
|
||||
|
||||
// Source tree and explorer should be visible on desktop
|
||||
await expect(page.locator('[data-testid="dms-source-pane"], [data-testid="source-tree"], [data-testid="source-tree-loading"]')).toBeVisible({ timeout: 10_000 });
|
||||
await expect(page.locator('[data-testid="dms-explorer-pane"], [data-testid="file-explorer-list"], [data-testid="file-explorer-table"], [data-testid="file-explorer-empty"], [data-testid="file-explorer-loading"]')).toBeVisible({ timeout: 10_000 });
|
||||
});
|
||||
|
||||
test('create a new folder', async ({ page }) => {
|
||||
await navigateTo(page, '/dms');
|
||||
|
||||
await expect(page.locator('[data-testid="dms-page"]')).toBeVisible({ timeout: 10_000 });
|
||||
|
||||
// Click new folder button in toolbar
|
||||
const newFolderBtn = page.locator('[data-testid="plugin-toolbar"] button').filter({ hasText: /new.*folder|neuer.*ordner|ordner.*erstellen/i }).first();
|
||||
await newFolderBtn.click();
|
||||
|
||||
// New folder form should appear
|
||||
await expect(page.locator('[data-testid="new-folder-form"]')).toBeVisible({ timeout: 10_000 });
|
||||
|
||||
// Fill in folder name
|
||||
await page.locator('[data-testid="new-folder-form"] input').first().fill('Test Folder');
|
||||
|
||||
// Click create button
|
||||
const createBtn = page.locator('[data-testid="new-folder-form"] button').filter({ hasText: /create|erstellen|speichern|save/i }).first();
|
||||
await createBtn.click();
|
||||
|
||||
// Form should close after creation
|
||||
await expect(page.locator('[data-testid="new-folder-form"]')).not.toBeVisible({ timeout: 10_000 });
|
||||
});
|
||||
|
||||
test('upload section appears when upload button clicked', async ({ page }) => {
|
||||
await navigateTo(page, '/dms');
|
||||
|
||||
await expect(page.locator('[data-testid="dms-page"]')).toBeVisible({ timeout: 10_000 });
|
||||
|
||||
// Click upload button in toolbar
|
||||
const uploadBtn = page.locator('[data-testid="plugin-toolbar"] button').filter({ hasText: /upload|hochladen/i }).first();
|
||||
await uploadBtn.click();
|
||||
|
||||
// Upload section should appear
|
||||
await expect(page.locator('[data-testid="upload-section"]')).toBeVisible({ timeout: 10_000 });
|
||||
await expect(page.locator('[data-testid="upload-dropzone"]')).toBeVisible();
|
||||
});
|
||||
|
||||
test('file preview modal opens on double-click', async ({ page }) => {
|
||||
await navigateTo(page, '/dms');
|
||||
|
||||
await expect(page.locator('[data-testid="dms-page"]')).toBeVisible({ timeout: 10_000 });
|
||||
|
||||
// Wait for file explorer to load
|
||||
await expect(page.locator('[data-testid="dms-explorer-pane"], [data-testid="file-explorer-list"], [data-testid="file-explorer-table"], [data-testid="file-explorer-empty"], [data-testid="file-explorer-loading"]')).toBeVisible({ timeout: 10_000 });
|
||||
|
||||
// Double-click first file if available
|
||||
const fileRow = page.locator('[data-testid^="file-row-"], [data-testid^="file-card-"]').first();
|
||||
if (await fileRow.isVisible({ timeout: 5_000 })) {
|
||||
await fileRow.dblclick();
|
||||
|
||||
// Preview modal should appear
|
||||
await expect(page.locator('[data-testid="file-preview-modal"]')).toBeVisible({ timeout: 10_000 });
|
||||
}
|
||||
});
|
||||
|
||||
test('share dialog opens for a file', async ({ page }) => {
|
||||
await navigateTo(page, '/dms');
|
||||
|
||||
await expect(page.locator('[data-testid="dms-page"]')).toBeVisible({ timeout: 10_000 });
|
||||
|
||||
// Wait for files to load
|
||||
await expect(page.locator('[data-testid="dms-explorer-pane"], [data-testid="file-explorer-list"], [data-testid="file-explorer-table"], [data-testid="file-explorer-empty"], [data-testid="file-explorer-loading"]')).toBeVisible({ timeout: 10_000 });
|
||||
|
||||
// Find share button on first file (if file actions are available)
|
||||
const fileRow = page.locator('[data-testid^="file-row-"], [data-testid^="file-card-"]').first();
|
||||
if (await fileRow.isVisible({ timeout: 5_000 })) {
|
||||
// Look for share button within the file row
|
||||
const shareBtn = fileRow.locator('button').filter({ hasText: /share|teilen/i }).first();
|
||||
if (await shareBtn.isVisible({ timeout: 3_000 })) {
|
||||
await shareBtn.click();
|
||||
await expect(page.locator('[data-testid="share-dialog"]')).toBeVisible({ timeout: 10_000 });
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,521 @@
|
||||
import { Page, expect } from '@playwright/test';
|
||||
|
||||
/**
|
||||
* E2E test helpers for LeoCRM.
|
||||
*
|
||||
* These helpers provide login automation, API mocking, and common
|
||||
* fixtures used across all spec files. Since the container has no
|
||||
* PostgreSQL/Redis, API calls are intercepted with mock responses.
|
||||
*/
|
||||
|
||||
// ── Test credentials ──
|
||||
export const TEST_USER = {
|
||||
email: 'admin@leocrm.test',
|
||||
password: 'TestPass123!',
|
||||
firstName: 'Admin',
|
||||
lastName: 'User',
|
||||
id: 'user-001',
|
||||
role: 'system_admin',
|
||||
};
|
||||
|
||||
export const TEST_TENANT = {
|
||||
id: 'tenant-001',
|
||||
name: 'Test Tenant',
|
||||
slug: 'test-tenant',
|
||||
};
|
||||
|
||||
// ── Mock data ──
|
||||
export const MOCK_CONTACTS = {
|
||||
items: [
|
||||
{
|
||||
id: 'contact-001',
|
||||
type: 'company' as const,
|
||||
name: 'TechCorp GmbH',
|
||||
displayname: 'TechCorp GmbH',
|
||||
code: 'K-00123',
|
||||
email_1: 'info@techcorp.test',
|
||||
phone_1: '+49 30 12345678',
|
||||
mailing_city: 'Berlin',
|
||||
mailing_postalcode: '10115',
|
||||
mailing_street: 'Hauptstrasse',
|
||||
mailing_number: '1',
|
||||
tags: 'kunde, premium',
|
||||
contact_persons: [],
|
||||
},
|
||||
{
|
||||
id: 'contact-002',
|
||||
type: 'person' as const,
|
||||
firstname: 'Max',
|
||||
surname: 'Mustermann',
|
||||
displayname: 'Max Mustermann',
|
||||
email_1: 'max@mustermann.test',
|
||||
phone_1: '+49 170 9876543',
|
||||
contact_persons: [],
|
||||
},
|
||||
],
|
||||
total: 2,
|
||||
};
|
||||
|
||||
export const MOCK_MAIL_ACCOUNTS = [
|
||||
{
|
||||
id: 'acc-001',
|
||||
email: 'test@leocrm.test',
|
||||
display_name: 'Test Account',
|
||||
imap_host: 'imap.test.test',
|
||||
imap_port: 993,
|
||||
smtp_host: 'smtp.test.test',
|
||||
smtp_port: 587,
|
||||
is_shared: false,
|
||||
},
|
||||
];
|
||||
|
||||
export const MOCK_MAIL_FOLDERS = [
|
||||
{ id: 'folder-001', name: 'INBOX', unread_count: 3, account_id: 'acc-001' },
|
||||
{ id: 'folder-002', name: 'Sent', unread_count: 0, account_id: 'acc-001' },
|
||||
{ id: 'folder-003', name: 'Drafts', unread_count: 0, account_id: 'acc-001' },
|
||||
];
|
||||
|
||||
export const MOCK_MAILS = [
|
||||
{
|
||||
id: 'mail-001',
|
||||
subject: 'Welcome to LeoCRM',
|
||||
from: 'noreply@leocrm.test',
|
||||
to: 'test@leocrm.test',
|
||||
date: '2026-07-23T10:00:00Z',
|
||||
body_text: 'Welcome to LeoCRM! Your account is ready.',
|
||||
is_read: false,
|
||||
flags: [],
|
||||
attachments: [],
|
||||
},
|
||||
{
|
||||
id: 'mail-002',
|
||||
subject: 'Meeting Tomorrow',
|
||||
from: 'boss@leocrm.test',
|
||||
to: 'test@leocrm.test',
|
||||
date: '2026-07-23T09:00:00Z',
|
||||
body_text: 'Don\'t forget the meeting tomorrow at 10 AM.',
|
||||
is_read: true,
|
||||
flags: [],
|
||||
attachments: [],
|
||||
},
|
||||
];
|
||||
|
||||
export const MOCK_DMS_FOLDERS = [
|
||||
{ id: 'folder-001', name: 'Documents', parent_id: null },
|
||||
{ id: 'folder-002', name: 'Images', parent_id: null },
|
||||
{ id: 'folder-003', name: 'Contracts', parent_id: 'folder-001' },
|
||||
];
|
||||
|
||||
export const MOCK_DMS_FILES = [
|
||||
{
|
||||
id: 'file-001',
|
||||
name: 'contract.pdf',
|
||||
folder_id: 'folder-001',
|
||||
size: 102400,
|
||||
mime_type: 'application/pdf',
|
||||
created_at: '2026-07-23T10:00:00Z',
|
||||
updated_at: '2026-07-23T10:00:00Z',
|
||||
},
|
||||
{
|
||||
id: 'file-002',
|
||||
name: 'photo.jpg',
|
||||
folder_id: 'folder-002',
|
||||
size: 204800,
|
||||
mime_type: 'image/jpeg',
|
||||
created_at: '2026-07-23T11:00:00Z',
|
||||
updated_at: '2026-07-23T11:00:00Z',
|
||||
},
|
||||
];
|
||||
|
||||
export const MOCK_CALENDARS = [
|
||||
{ id: 'cal-001', name: 'Personal', color: '#3b82f6' },
|
||||
{ id: 'cal-002', name: 'Work', color: '#10b981' },
|
||||
];
|
||||
|
||||
export const MOCK_CALENDAR_ENTRIES = [
|
||||
{
|
||||
id: 'entry-001',
|
||||
calendar_id: 'cal-001',
|
||||
entry_type: 'appointment',
|
||||
title: 'Team Meeting',
|
||||
description: 'Weekly team sync',
|
||||
start_at: '2026-07-24T09:00:00Z',
|
||||
end_at: '2026-07-24T10:00:00Z',
|
||||
all_day: false,
|
||||
priority: 'medium',
|
||||
status: 'open',
|
||||
subtype: 'normal',
|
||||
},
|
||||
];
|
||||
|
||||
export const MOCK_PLUGINS = [
|
||||
{
|
||||
name: 'tags',
|
||||
display_name: 'Tags',
|
||||
description: 'Tag management plugin',
|
||||
version: '1.0.0',
|
||||
active: true,
|
||||
installed: true,
|
||||
status: 'active',
|
||||
},
|
||||
{
|
||||
name: 'entity_links',
|
||||
display_name: 'Entity Links',
|
||||
description: 'Link entities together',
|
||||
version: '1.0.0',
|
||||
active: false,
|
||||
installed: true,
|
||||
status: 'inactive',
|
||||
},
|
||||
];
|
||||
|
||||
export const MOCK_SEARCH_RESULTS = {
|
||||
contact: [
|
||||
{ id: 'contact-001', type: 'contact', title: 'TechCorp GmbH', snippet: 'Company in Berlin' },
|
||||
],
|
||||
company: [],
|
||||
mail: [
|
||||
{ id: 'mail-001', type: 'mail', title: 'Welcome to LeoCRM', snippet: 'Welcome email' },
|
||||
],
|
||||
file: [],
|
||||
event: [],
|
||||
};
|
||||
|
||||
// ── API mock setup ──
|
||||
|
||||
/**
|
||||
* Intercept all API calls with mock responses.
|
||||
* Call this in beforeEach to set up a fully mocked environment.
|
||||
*/
|
||||
export async function setupApiMocks(page: Page) {
|
||||
// Auth: login
|
||||
await page.route('**/api/v1/auth/login', (route) => {
|
||||
route.fulfill({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify({
|
||||
user: {
|
||||
id: TEST_USER.id,
|
||||
email: TEST_USER.email,
|
||||
first_name: TEST_USER.firstName,
|
||||
last_name: TEST_USER.lastName,
|
||||
role: TEST_USER.role,
|
||||
tenants: [TEST_TENANT],
|
||||
permissions: ['*'],
|
||||
is_system_admin: true,
|
||||
},
|
||||
csrf_token: 'mock-csrf-token',
|
||||
}),
|
||||
});
|
||||
});
|
||||
|
||||
// Auth: me (current user)
|
||||
await page.route('**/api/v1/auth/me', (route) => {
|
||||
route.fulfill({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify({
|
||||
id: TEST_USER.id,
|
||||
email: TEST_USER.email,
|
||||
first_name: TEST_USER.firstName,
|
||||
last_name: TEST_USER.lastName,
|
||||
role: TEST_USER.role,
|
||||
tenants: [TEST_TENANT],
|
||||
permissions: ['*'],
|
||||
is_system_admin: true,
|
||||
}),
|
||||
});
|
||||
});
|
||||
|
||||
// Auth: logout
|
||||
await page.route('**/api/v1/auth/logout', (route) => {
|
||||
route.fulfill({ status: 200, contentType: 'application/json', body: '{}' });
|
||||
});
|
||||
|
||||
// Contacts list
|
||||
await page.route('**/api/v1/contacts*', (route) => {
|
||||
const url = route.request().url();
|
||||
if (url.includes('/contact_persons')) {
|
||||
route.fulfill({ status: 200, contentType: 'application/json', body: '[]' });
|
||||
return;
|
||||
}
|
||||
if (route.request().method() === 'GET') {
|
||||
route.fulfill({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify(MOCK_CONTACTS),
|
||||
});
|
||||
} else if (route.request().method() === 'POST') {
|
||||
const body = route.request().postDataJSON();
|
||||
route.fulfill({
|
||||
status: 201,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify({
|
||||
id: 'contact-new',
|
||||
contact_persons: [],
|
||||
displayname: body?.name || `${body?.firstname || ''} ${body?.surname || ''}`.trim(),
|
||||
...body,
|
||||
}),
|
||||
});
|
||||
} else {
|
||||
route.fulfill({ status: 200, contentType: 'application/json', body: '{}' });
|
||||
}
|
||||
});
|
||||
|
||||
// Contact detail
|
||||
await page.route('**/api/v1/contacts/*', (route) => {
|
||||
if (route.request().method() === 'GET') {
|
||||
route.fulfill({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify(MOCK_CONTACTS.items[0]),
|
||||
});
|
||||
} else if (route.request().method() === 'PUT') {
|
||||
const body = route.request().postDataJSON();
|
||||
route.fulfill({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify({ ...MOCK_CONTACTS.items[0], ...body }),
|
||||
});
|
||||
} else if (route.request().method() === 'DELETE') {
|
||||
route.fulfill({ status: 204, body: '' });
|
||||
} else {
|
||||
route.continue();
|
||||
}
|
||||
});
|
||||
|
||||
// Mail accounts
|
||||
await page.route('**/api/v1/mail/accounts*', (route) => {
|
||||
if (route.request().method() === 'GET') {
|
||||
route.fulfill({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify(MOCK_MAIL_ACCOUNTS),
|
||||
});
|
||||
} else if (route.request().method() === 'POST') {
|
||||
const body = route.request().postDataJSON();
|
||||
route.fulfill({
|
||||
status: 201,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify({
|
||||
id: 'acc-new',
|
||||
display_name: body?.display_name || body?.email,
|
||||
...body,
|
||||
}),
|
||||
});
|
||||
} else {
|
||||
route.continue();
|
||||
}
|
||||
});
|
||||
|
||||
// Mail folders
|
||||
await page.route('**/api/v1/mail/accounts/*/folders*', (route) => {
|
||||
route.fulfill({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify(MOCK_MAIL_FOLDERS),
|
||||
});
|
||||
});
|
||||
|
||||
// Mail list
|
||||
await page.route('**/api/v1/mail/accounts/*/mails*', (route) => {
|
||||
if (route.request().method() === 'GET') {
|
||||
route.fulfill({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify({ items: MOCK_MAILS, total: MOCK_MAILS.length }),
|
||||
});
|
||||
} else {
|
||||
route.continue();
|
||||
}
|
||||
});
|
||||
|
||||
// Mail detail
|
||||
await page.route('**/api/v1/mail/*', (route) => {
|
||||
if (route.request().method() === 'GET') {
|
||||
route.fulfill({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify(MOCK_MAILS[0]),
|
||||
});
|
||||
} else {
|
||||
route.continue();
|
||||
}
|
||||
});
|
||||
|
||||
// DMS folders
|
||||
await page.route('**/api/v1/dms/folders*', (route) => {
|
||||
if (route.request().method() === 'GET') {
|
||||
route.fulfill({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify(MOCK_DMS_FOLDERS),
|
||||
});
|
||||
} else if (route.request().method() === 'POST') {
|
||||
const body = route.request().postDataJSON();
|
||||
route.fulfill({
|
||||
status: 201,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify({ id: 'folder-new', name: body?.name, parent_id: body?.parent_id ?? null }),
|
||||
});
|
||||
} else {
|
||||
route.continue();
|
||||
}
|
||||
});
|
||||
|
||||
// DMS files
|
||||
await page.route('**/api/v1/dms/files*', (route) => {
|
||||
if (route.request().method() === 'GET') {
|
||||
route.fulfill({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify(MOCK_DMS_FILES),
|
||||
});
|
||||
} else {
|
||||
route.continue();
|
||||
}
|
||||
});
|
||||
|
||||
// DMS shared files
|
||||
await page.route('**/api/v1/dms/shared*', (route) => {
|
||||
route.fulfill({ status: 200, contentType: 'application/json', body: '[]' });
|
||||
});
|
||||
|
||||
// Calendar list
|
||||
await page.route('**/api/v1/calendar/calendars*', (route) => {
|
||||
if (route.request().method() === 'GET') {
|
||||
route.fulfill({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify(MOCK_CALENDARS),
|
||||
});
|
||||
} else {
|
||||
route.continue();
|
||||
}
|
||||
});
|
||||
|
||||
// Calendar entries
|
||||
await page.route('**/api/v1/calendar/entries*', (route) => {
|
||||
if (route.request().method() === 'GET') {
|
||||
route.fulfill({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify(MOCK_CALENDAR_ENTRIES),
|
||||
});
|
||||
} else if (route.request().method() === 'POST') {
|
||||
const body = route.request().postDataJSON();
|
||||
route.fulfill({
|
||||
status: 201,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify({ id: 'entry-new', ...body }),
|
||||
});
|
||||
} else {
|
||||
route.continue();
|
||||
}
|
||||
});
|
||||
|
||||
// Calendar kanban
|
||||
await page.route('**/api/v1/calendar/kanban*', (route) => {
|
||||
route.fulfill({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify({
|
||||
open: MOCK_CALENDAR_ENTRIES,
|
||||
in_progress: [],
|
||||
done: [],
|
||||
cancelled: [],
|
||||
}),
|
||||
});
|
||||
});
|
||||
|
||||
// Plugins
|
||||
await page.route('**/api/v1/plugins*', (route) => {
|
||||
if (route.request().method() === 'GET') {
|
||||
route.fulfill({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify(MOCK_PLUGINS),
|
||||
});
|
||||
} else if (route.request().method() === 'POST') {
|
||||
route.fulfill({ status: 200, contentType: 'application/json', body: '{}' });
|
||||
} else {
|
||||
route.continue();
|
||||
}
|
||||
});
|
||||
|
||||
// Plugin activate/deactivate
|
||||
await page.route('**/api/v1/plugins/*/activate', (route) => {
|
||||
route.fulfill({ status: 200, contentType: 'application/json', body: '{}' });
|
||||
});
|
||||
await page.route('**/api/v1/plugins/*/deactivate', (route) => {
|
||||
route.fulfill({ status: 200, contentType: 'application/json', body: '{}' });
|
||||
});
|
||||
|
||||
// Search
|
||||
await page.route('**/api/v1/search*', (route) => {
|
||||
route.fulfill({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
body: JSON.stringify(MOCK_SEARCH_RESULTS),
|
||||
});
|
||||
});
|
||||
|
||||
// User preferences
|
||||
await page.route('**/api/v1/user/preferences*', (route) => {
|
||||
route.fulfill({ status: 200, contentType: 'application/json', body: '{}' });
|
||||
});
|
||||
|
||||
// Generic catch-all for other API endpoints
|
||||
await page.route('**/api/v1/**', (route) => {
|
||||
if (!route.request().url().includes('/auth/') &&
|
||||
!route.request().url().includes('/contacts') &&
|
||||
!route.request().url().includes('/mail/') &&
|
||||
!route.request().url().includes('/dms/') &&
|
||||
!route.request().url().includes('/calendar/') &&
|
||||
!route.request().url().includes('/plugins') &&
|
||||
!route.request().url().includes('/search')) {
|
||||
route.fulfill({ status: 200, contentType: 'application/json', body: '[]' });
|
||||
} else {
|
||||
route.continue();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Perform login via the login form.
|
||||
* Assumes API mocks are already set up.
|
||||
*/
|
||||
export async function login(page: Page) {
|
||||
await page.goto('/login');
|
||||
await expect(page.locator('[data-testid="login-page"]')).toBeVisible();
|
||||
|
||||
// Fill email and password using label-based selectors
|
||||
await page.locator('input[type="email"]').fill(TEST_USER.email);
|
||||
await page.locator('input[type="password"]').fill(TEST_USER.password);
|
||||
|
||||
// Submit the form
|
||||
await page.locator('button[type="submit"]').click();
|
||||
|
||||
// Wait for redirect to dashboard
|
||||
await page.waitForURL('**/dashboard', { timeout: 10_000 });
|
||||
await expect(page.locator('[data-testid="topbar"]')).toBeVisible();
|
||||
}
|
||||
|
||||
/**
|
||||
* Perform logout via the user menu.
|
||||
*/
|
||||
export async function logout(page: Page) {
|
||||
// Open user menu
|
||||
await page.locator('[data-testid="topbar"] button[aria-haspopup="menu"]').click();
|
||||
// Click logout button (text-based since no data-testid on logout button)
|
||||
await page.locator('[role="menuitem"]').filter({ hasText: /logout|abmelden/i }).click();
|
||||
await page.waitForURL('**/login', { timeout: 10_000 });
|
||||
}
|
||||
|
||||
/**
|
||||
* Navigate to a specific route after login.
|
||||
*/
|
||||
export async function navigateTo(page: Page, path: string) {
|
||||
await page.goto(path);
|
||||
await page.waitForLoadState('networkidle');
|
||||
}
|
||||
@@ -0,0 +1,80 @@
|
||||
import { test, expect } from '@playwright/test';
|
||||
import { setupApiMocks, login, navigateTo, MOCK_MAILS } from './helpers';
|
||||
|
||||
test.describe('Mail E2E', () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await setupApiMocks(page);
|
||||
await login(page);
|
||||
});
|
||||
|
||||
test('mail page renders with folder tree and list', async ({ page }) => {
|
||||
await navigateTo(page, '/mail');
|
||||
|
||||
// Mail page should load - check for folder tree or loading state
|
||||
await expect(page.locator('[data-testid="folder-tree-list"], [data-testid="folder-tree-loading"], [data-testid="folder-tree-empty"]')).toBeVisible({ timeout: 15_000 });
|
||||
});
|
||||
|
||||
test('mail list shows emails when folder is selected', async ({ page }) => {
|
||||
await navigateTo(page, '/mail');
|
||||
|
||||
// Wait for folder tree
|
||||
await expect(page.locator('[data-testid="folder-tree-list"], [data-testid="folder-tree-loading"], [data-testid="folder-tree-empty"]')).toBeVisible({ timeout: 15_000 });
|
||||
|
||||
// Click on first folder if available
|
||||
const folder = page.locator('[data-testid^="folder-"]').first();
|
||||
if (await folder.isVisible({ timeout: 5_000 })) {
|
||||
await folder.click();
|
||||
|
||||
// Mail list should appear
|
||||
await expect(page.locator('[data-testid="mail-list"], [data-testid="mail-list-loading"], [data-testid="mail-list-empty"]')).toBeVisible({ timeout: 10_000 });
|
||||
}
|
||||
});
|
||||
|
||||
test('open a mail shows detail pane', async ({ page }) => {
|
||||
await navigateTo(page, '/mail');
|
||||
|
||||
// Wait for folder tree and click first folder
|
||||
await expect(page.locator('[data-testid="folder-tree-list"], [data-testid="folder-tree-loading"], [data-testid="folder-tree-empty"]')).toBeVisible({ timeout: 15_000 });
|
||||
|
||||
const folder = page.locator('[data-testid^="folder-"]').first();
|
||||
if (await folder.isVisible({ timeout: 5_000 })) {
|
||||
await folder.click();
|
||||
|
||||
// Wait for mail list
|
||||
await expect(page.locator('[data-testid="mail-list"], [data-testid="mail-list-loading"], [data-testid="mail-list-empty"]')).toBeVisible({ timeout: 10_000 });
|
||||
|
||||
// Click first mail if available
|
||||
const mailItem = page.locator('[data-testid^="mail-item-"]').first();
|
||||
if (await mailItem.isVisible({ timeout: 5_000 })) {
|
||||
await mailItem.click();
|
||||
|
||||
// Mail detail should appear
|
||||
await expect(page.locator('[data-testid="mail-detail"], [data-testid="mail-detail-loading"], [data-testid="mail-detail-empty"]')).toBeVisible({ timeout: 10_000 });
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
test('mail settings page allows adding an account', async ({ page }) => {
|
||||
await navigateTo(page, '/settings/mail');
|
||||
|
||||
// Wait for accounts tab
|
||||
await expect(page.locator('[data-testid="tab-accounts"]')).toBeVisible({ timeout: 10_000 });
|
||||
|
||||
// Click add account button
|
||||
await page.locator('[data-testid="add-account-btn"]').click();
|
||||
|
||||
// Add account form should appear
|
||||
await expect(page.locator('[data-testid="add-account-form"]')).toBeVisible({ timeout: 10_000 });
|
||||
|
||||
// Fill in account details
|
||||
await page.locator('[data-testid="add-account-form"] input').first().fill('testuser@test.test');
|
||||
await page.locator('[data-testid="add-account-form"] input[type="password"]').fill('testpassword');
|
||||
|
||||
// Click save button
|
||||
const saveBtn = page.locator('[data-testid="add-account-form"] button').filter({ hasText: /save|speichern/i }).first();
|
||||
await saveBtn.click();
|
||||
|
||||
// Form should close after save
|
||||
await expect(page.locator('[data-testid="add-account-form"]')).not.toBeVisible({ timeout: 10_000 });
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,67 @@
|
||||
import { test, expect } from '@playwright/test';
|
||||
import { setupApiMocks, login, navigateTo, MOCK_PLUGINS } from './helpers';
|
||||
|
||||
test.describe('Plugin Toggle E2E', () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await setupApiMocks(page);
|
||||
await login(page);
|
||||
});
|
||||
|
||||
test('settings plugins page renders with plugin list', async ({ page }) => {
|
||||
await navigateTo(page, '/settings/plugins');
|
||||
|
||||
await expect(page.locator('[data-testid="settings-plugins-page"]')).toBeVisible({ timeout: 10_000 });
|
||||
});
|
||||
|
||||
test('activate an inactive plugin', async ({ page }) => {
|
||||
await navigateTo(page, '/settings/plugins');
|
||||
|
||||
await expect(page.locator('[data-testid="settings-plugins-page"]')).toBeVisible({ timeout: 10_000 });
|
||||
|
||||
// Find the inactive plugin (entity_links) and click activate
|
||||
const activateBtn = page.locator('[data-testid="activate-plugin-entity_links"]');
|
||||
if (await activateBtn.isVisible({ timeout: 10_000 })) {
|
||||
await activateBtn.click();
|
||||
|
||||
// Button should change (deactivate should appear)
|
||||
await expect(page.locator('[data-testid="deactivate-plugin-entity_links"]')).toBeVisible({ timeout: 10_000 });
|
||||
}
|
||||
});
|
||||
|
||||
test('deactivate an active plugin', async ({ page }) => {
|
||||
await navigateTo(page, '/settings/plugins');
|
||||
|
||||
await expect(page.locator('[data-testid="settings-plugins-page"]')).toBeVisible({ timeout: 10_000 });
|
||||
|
||||
// Find the active plugin (tags) and click deactivate
|
||||
const deactivateBtn = page.locator('[data-testid="deactivate-plugin-tags"]');
|
||||
if (await deactivateBtn.isVisible({ timeout: 10_000 })) {
|
||||
await deactivateBtn.click();
|
||||
|
||||
// Button should change (activate should appear)
|
||||
await expect(page.locator('[data-testid="activate-plugin-tags"]')).toBeVisible({ timeout: 10_000 });
|
||||
}
|
||||
});
|
||||
|
||||
test('refresh plugins button works', async ({ page }) => {
|
||||
await navigateTo(page, '/settings/plugins');
|
||||
|
||||
await expect(page.locator('[data-testid="settings-plugins-page"]')).toBeVisible({ timeout: 10_000 });
|
||||
|
||||
const refreshBtn = page.locator('[data-testid="refresh-plugins-btn"]');
|
||||
await expect(refreshBtn).toBeVisible();
|
||||
await refreshBtn.click();
|
||||
|
||||
// Page should still be visible
|
||||
await expect(page.locator('[data-testid="settings-plugins-page"]')).toBeVisible();
|
||||
});
|
||||
|
||||
test('plugin install section is visible', async ({ page }) => {
|
||||
await navigateTo(page, '/settings/plugins');
|
||||
|
||||
await expect(page.locator('[data-testid="settings-plugins-page"]')).toBeVisible({ timeout: 10_000 });
|
||||
|
||||
// Upload and URL install options should be present
|
||||
await expect(page.locator('[data-testid="plugin-zip-upload-input"], [data-testid="plugin-upload-btn"], [data-testid="plugin-url-input"], [data-testid="plugin-install-url-btn"]')).toBeVisible({ timeout: 10_000 });
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,72 @@
|
||||
import { test, expect } from '@playwright/test';
|
||||
import { setupApiMocks, login, navigateTo } from './helpers';
|
||||
|
||||
test.describe('Global Search E2E', () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await setupApiMocks(page);
|
||||
await login(page);
|
||||
});
|
||||
|
||||
test('search page renders with input and submit button', async ({ page }) => {
|
||||
await navigateTo(page, '/search');
|
||||
|
||||
await expect(page.locator('[data-testid="global-search-page"]')).toBeVisible({ timeout: 10_000 });
|
||||
await expect(page.locator('[data-testid="search-input"]')).toBeVisible();
|
||||
await expect(page.locator('[data-testid="search-submit-btn"]')).toBeVisible();
|
||||
});
|
||||
|
||||
test('search for contact name shows results', async ({ page }) => {
|
||||
await navigateTo(page, '/search');
|
||||
|
||||
await expect(page.locator('[data-testid="global-search-page"]')).toBeVisible({ timeout: 10_000 });
|
||||
|
||||
// Type search query
|
||||
await page.locator('[data-testid="search-input"]').fill('TechCorp');
|
||||
await page.locator('[data-testid="search-submit-btn"]').click();
|
||||
|
||||
// Wait for results
|
||||
await expect(page.locator('[data-testid="search-results-list"], [data-testid="search-results-all"]')).toBeVisible({ timeout: 10_000 });
|
||||
|
||||
// Should show at least one result
|
||||
const resultItem = page.locator('[data-testid^="search-result-"]').first();
|
||||
await expect(resultItem).toBeVisible({ timeout: 10_000 });
|
||||
});
|
||||
|
||||
test('search results are grouped by type tabs', async ({ page }) => {
|
||||
await navigateTo(page, '/search');
|
||||
|
||||
await expect(page.locator('[data-testid="global-search-page"]')).toBeVisible({ timeout: 10_000 });
|
||||
|
||||
await page.locator('[data-testid="search-input"]').fill('TechCorp');
|
||||
await page.locator('[data-testid="search-submit-btn"]').click();
|
||||
|
||||
// Tabs should be visible
|
||||
await expect(page.locator('[data-testid="search-tabs"]')).toBeVisible({ timeout: 10_000 });
|
||||
});
|
||||
|
||||
test('search with empty query shows all results', async ({ page }) => {
|
||||
await navigateTo(page, '/search');
|
||||
|
||||
await expect(page.locator('[data-testid="global-search-page"]')).toBeVisible({ timeout: 10_000 });
|
||||
|
||||
// Submit without typing
|
||||
await page.locator('[data-testid="search-submit-btn"]').click();
|
||||
|
||||
// Should show results or empty state
|
||||
await expect(page.locator('[data-testid="search-results-list"], [data-testid="search-results-all"], [data-testid="search-query-display"]')).toBeVisible({ timeout: 10_000 });
|
||||
});
|
||||
|
||||
test('search dropdown in topbar works', async ({ page }) => {
|
||||
// The topbar has a search dropdown
|
||||
await expect(page.locator('[data-testid="topbar"]')).toBeVisible();
|
||||
|
||||
const searchDropdown = page.locator('[data-testid="search-dropdown"]');
|
||||
if (await searchDropdown.isVisible()) {
|
||||
// Type in search
|
||||
await searchDropdown.locator('input').fill('test');
|
||||
|
||||
// Wait for results dropdown
|
||||
await expect(page.locator('[data-testid="search-results"]')).toBeVisible({ timeout: 10_000 });
|
||||
}
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user