diff --git a/tests/e2e-docs/search-and-theme.spec.ts b/tests/e2e-docs/search-and-theme.spec.ts new file mode 100644 index 00000000..245a0b74 --- /dev/null +++ b/tests/e2e-docs/search-and-theme.spec.ts @@ -0,0 +1,81 @@ +import { expect, test } from "@playwright/test"; + +test.describe("Docs Search", () => { + test("search button is visible", async ({ page }) => { + await page.goto("/guide/getting-started"); + const searchButton = page.locator( + ".VPNavBarSearch button, .DocSearch-Button, button[aria-label*='Search'], .VPNavBarSearchButton button", + ); + await expect(searchButton.first()).toBeVisible(); + }); + + test("clicking search opens search dialog", async ({ page }) => { + await page.goto("/guide/getting-started"); + const searchButton = page.locator( + ".VPNavBarSearch button, .DocSearch-Button, button[aria-label*='Search'], .VPNavBarSearchButton button", + ); + await searchButton.first().click(); + await expect( + page.locator(".VPLocalSearchBox, .DocSearch-Modal, [role='dialog']").first(), + ).toBeVisible(); + }); + + test("typing in search shows results", async ({ page }) => { + await page.goto("/guide/getting-started"); + const searchButton = page.locator( + ".VPNavBarSearch button, .DocSearch-Button, button[aria-label*='Search'], .VPNavBarSearchButton button", + ); + await searchButton.first().click(); + const searchInput = page.locator( + ".VPLocalSearchBox input, .DocSearch-Input, [role='dialog'] input", + ).first(); + await searchInput.fill("docker"); + const results = page.locator( + ".VPLocalSearchBox .result, .DocSearch-Hits, [role='dialog'] .result, [role='listbox'] [role='option']", + ); + await expect(results.first()).toBeVisible({ timeout: 5000 }); + }); +}); + +test.describe("Theme Toggle", () => { + test("theme toggle button is visible", async ({ page }) => { + await page.goto("/guide/getting-started"); + const toggle = page.locator( + ".VPSwitchAppearance, button[aria-label*='Switch'], .VPSwitch", + ); + await expect(toggle.first()).toBeVisible(); + }); + + test("clicking theme toggle changes appearance", async ({ page }) => { + await page.goto("/guide/getting-started"); + const html = page.locator("html"); + const initialClass = await html.getAttribute("class"); + + const toggle = page.locator( + ".VPSwitchAppearance, button[aria-label*='Switch'], .VPSwitch", + ).first(); + await toggle.click(); + await page.waitForTimeout(300); + + const newClass = await html.getAttribute("class"); + expect(newClass).not.toBe(initialClass); + }); +}); + +test.describe("GitHub Stars Component", () => { + test("GitHub star button is visible in navbar", async ({ page }) => { + await page.goto("/"); + const githubBtn = page.locator(".github-btn, .github-btn-wrapper").first(); + await expect(githubBtn).toBeVisible(); + }); + + test("GitHub star button links to correct repo", async ({ page }) => { + await page.goto("/"); + const starLink = page.locator('a[title="Star on GitHub"]').first(); + await expect(starLink).toHaveAttribute( + "href", + "https://github.com/snapotter-hq/snapotter", + ); + await expect(starLink).toHaveAttribute("target", "_blank"); + }); +});