docs-app/tests/e2e/search.spec.ts

import { expect, test } from "@playwright/test";
import { SEARCH_TEST_DATA, SearchHelper } from "./utils/search-helpers";

// Test data for known content that should be searchable
const KNOWN_CONTENT = {
  // These should be updated based on your actual content
  searchTerms: [
    "TinaDocs",
    "documentation",
    "search",
    "API",
    "TinaCMS",
    "deployment",
    "theming",
    "components",
  ],
  nonExistentTerms: [
    "xyz123nonexistent",
    "completelyrandomterm",
    "shouldnotexist",
  ],
};

test.describe("Search Functionality", () => {
  test.beforeEach(async ({ page }) => {
    // Navigate to the docs page before each test
    await page.goto(`${process.env.NEXT_PUBLIC_BASE_PATH ?? ""}/docs`);

    // Wait for the page to load completely
    await page.waitForLoadState("networkidle");

    // Wait for the search input to be available (client component hydration)
    const searchInput = page.locator('input[placeholder="Search..."]');
    await searchInput.waitFor({ state: "visible", timeout: 10000 });
  });

  test("should show search results for existing content", async ({ page }) => {
    const searchHelper = new SearchHelper(page);

    // Test with a known search term
    await searchHelper.performSearch(SEARCH_TEST_DATA.knownTerms[0]);

    // Check if search results container is visible
    await searchHelper.expectSearchResultsVisible();

    // Verify that results are clickable links
    const resultLinks = searchHelper.getSearchResultLinks();
    await expect(resultLinks.first()).toBeVisible();
  });

  test('should show "No Llamas Found" for non-existent content', async ({
    page,
  }) => {
    const searchHelper = new SearchHelper(page);

    // Test with a non-existent search term
    await searchHelper.performSearch(SEARCH_TEST_DATA.nonExistentTerms[0]);

    // Check if "No Llamas Found" message appears
    const noResultsMessage = searchHelper.getNoResultsMessage();
    await expect(noResultsMessage).toBeVisible();
  });

  test("should clear search results when clicking outside", async ({
    page,
  }) => {
    const searchHelper = new SearchHelper(page);

    // Perform a search
    await searchHelper.performSearch(SEARCH_TEST_DATA.knownTerms[0]);

    // Click outside the search area
    await searchHelper.clearSearch();

    // Verify search results are cleared
    await searchHelper.expectSearchResultsNotVisible();

    // Verify search input is cleared
    await searchHelper.expectSearchInputValue("");
  });

  test("should handle empty search input", async ({ page }) => {
    const searchHelper = new SearchHelper(page);

    // Try to search with empty input
    await searchHelper.performSearch("");

    // Verify no search results are shown
    await searchHelper.expectSearchResultsNotVisible();
  });

  test("should navigate to search result pages", async ({ page }) => {
    const searchHelper = new SearchHelper(page);

    // Perform a search
    await searchHelper.performSearch(SEARCH_TEST_DATA.knownTerms[0]);

    // Click on the first search result
    const firstResult = searchHelper.getSearchResultLinks().first();
    await expect(firstResult).toBeVisible();

    // Store the href to verify navigation
    const href = await firstResult.getAttribute("href");
    expect(href).toBeTruthy();

    // Click the result
    await firstResult.click();

    // Verify navigation occurred
    await page.waitForLoadState("networkidle");

    // Check if we're on a docs page
    await expect(page).toHaveURL(/\/docs/);
  });

  test("should show loading state during search", async ({ page }) => {
    const searchHelper = new SearchHelper(page);

    // Start typing to trigger search
    const searchInput = searchHelper.getSearchInput();
    // Ensure the input is visible before interacting
    await searchInput.waitFor({ state: "visible", timeout: 10000 });
    await searchInput.fill(SEARCH_TEST_DATA.knownTerms[0]);

    // Check for loading indicator (if implemented)
    // This might show "Mustering all the Llamas..." message
    const loadingMessage = searchHelper.getLoadingMessage();

    // The loading state might be very brief, so we'll just verify the search works
    await searchInput.press("Enter");

    // Verify search completed (either with results or no results message)
    await searchHelper.expectSearchResultsVisible();
  });

  test("should verify Pagefind files are accessible", async ({ page }) => {
    const searchHelper = new SearchHelper(page);

    await searchHelper.verifyPagefindFilesAccessible();
  });

  test("should work on mobile viewport", async ({ page }) => {
    const searchHelper = new SearchHelper(page);

    await searchHelper.testMobileSearch();
  });
});

test.describe("Search Performance", () => {
  test("should complete search within reasonable time", async ({ page }) => {
    const searchHelper = new SearchHelper(page);

    await searchHelper.navigateToDocs();

    // Measure search performance
    const searchTime = await searchHelper.measureSearchPerformance(
      SEARCH_TEST_DATA.knownTerms[0]
    );

    // Search should complete within 3 seconds
    expect(searchTime).toBeLessThan(3000);

    // Verify search completed successfully
    await searchHelper.expectSearchResultsVisible();
  });
});