leocrm/frontend/e2e/dms.spec.ts

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 });
      }
    }
  });
});