towerops/e2e/tests/search.spec.ts

import { test, expect } from '@playwright/test';

test.describe('Global Search', () => {
  test('can access global search', async ({ page }) => {
    await page.goto('/dashboard');

    // Look for search input in navigation
    const searchInput = page.locator(
      'input[type="search"], input[placeholder*="Search"], [data-search]'
    ).first();

    if (await searchInput.isVisible()) {
      await expect(searchInput).toBeVisible();
    }
  });

  test('can search for devices', async ({ page }) => {
    await page.goto('/dashboard');

    // Find search input
    const searchInput = page.locator('input[type="search"]').first();

    if (await searchInput.isVisible()) {
      await searchInput.fill('device');
      await page.waitForTimeout(1000);

      // Look for search results
      const searchResults = page.locator(
        '[data-search-results], [role="listbox"], .search-results'
      ).first();

      if (await searchResults.isVisible({ timeout: 2000 }).catch(() => false)) {
        await expect(searchResults).toBeVisible();
      }
    }
  });

  test('can search for sites', async ({ page }) => {
    await page.goto('/dashboard');

    const searchInput = page.locator('input[type="search"]').first();

    if (await searchInput.isVisible()) {
      await searchInput.fill('site');
      await page.waitForTimeout(1000);
    }
  });

  test('can search for alerts', async ({ page }) => {
    await page.goto('/dashboard');

    const searchInput = page.locator('input[type="search"]').first();

    if (await searchInput.isVisible()) {
      await searchInput.fill('alert');
      await page.waitForTimeout(1000);
    }
  });

  test('can navigate to search result', async ({ page }) => {
    await page.goto('/dashboard');

    const searchInput = page.locator('input[type="search"]').first();

    if (await searchInput.isVisible()) {
      await searchInput.fill('test');
      await page.waitForTimeout(1000);

      // Click first result
      const firstResult = page.locator(
        '[data-search-result], [role="option"], .search-result'
      ).first();

      if (await firstResult.isVisible({ timeout: 2000 }).catch(() => false)) {
        await firstResult.click();
        await page.waitForTimeout(500);
      }
    }
  });

  test('search shows no results message when empty', async ({ page }) => {
    await page.goto('/dashboard');

    const searchInput = page.locator('input[type="search"]').first();

    if (await searchInput.isVisible()) {
      await searchInput.fill('xyznonexistent12345');
      await page.waitForTimeout(1000);

      // Look for no results message
      const noResults = page.locator(
        ':has-text("No results"), :has-text("not found"), .empty-state'
      ).first();

      if (await noResults.isVisible({ timeout: 2000 }).catch(() => false)) {
        await expect(noResults).toBeVisible();
      }
    }
  });

  test('can clear search', async ({ page }) => {
    await page.goto('/dashboard');

    const searchInput = page.locator('input[type="search"]').first();

    if (await searchInput.isVisible()) {
      await searchInput.fill('test');
      await page.waitForTimeout(500);

      // Look for clear button
      const clearButton = page.locator(
        'button[aria-label*="clear"], button:has-text("×"), .clear-search'
      ).first();

      if (await clearButton.isVisible()) {
        await clearButton.click();
        await expect(searchInput).toHaveValue('');
      }
    }
  });

  test('can use keyboard to navigate search results', async ({ page }) => {
    await page.goto('/dashboard');

    const searchInput = page.locator('input[type="search"]').first();

    if (await searchInput.isVisible()) {
      await searchInput.fill('test');
      await page.waitForTimeout(1000);

      // Press down arrow to navigate results
      await searchInput.press('ArrowDown');
      await page.waitForTimeout(200);

      // Press enter to select
      await searchInput.press('Enter');
      await page.waitForTimeout(500);
    }
  });
});