initial commit after project creation

tests/e2e/search.spec.ts

@@ -0,0 +1,166 @@
+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();
+  });
+});