leocrm/frontend/e2e/mail.spec.ts

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
    // .first() because the responsive layout renders the tree in both desktop and mobile panes.
    await expect(page.locator('[data-testid="folder-tree-list"], [data-testid="folder-tree-loading"], [data-testid="folder-tree-empty"]').first()).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"]').first()).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"]').first()).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"]').first()).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"]').first()).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"]').first()).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 (in mock mode, may stay open — just verify save was clicked)
    await page.waitForTimeout(1_000);
  });
});