leocrm/frontend/e2e/search.spec.ts

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"]').first()).toBeVisible({ timeout: 10_000 });

    // Should show at least one result (or empty state if mock doesn't match exactly)
    const resultItem = page.locator('[data-testid^="search-result-"]').first();
    const resultsList = page.locator('[data-testid="search-results-list"], [data-testid="search-results-all"]');
    await expect(resultsList.first()).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 (empty query — hook is disabled, so just verify page stays visible)
    await page.locator('[data-testid="search-submit-btn"]').click();

    // Page should still be visible
    await expect(page.locator('[data-testid="global-search-page"]')).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 });
    }
  });
});