+
+ {/* Fit Mode Cycle */}
+ {
+ e.stopPropagation();
+ cycleFitMode();
+ }}
+ title={`Fit mode: ${currentFitMode}`}
+ aria-label="Cycle fit mode"
+ >
+ {currentFitMode === "fitBoth" ? (
+
+
+ {/* Zoom Controls */}
+ {
+ e.stopPropagation();
+ handleZoomOut();
+ }}
+ disabled={zoom <= minZoomVal}
+ title="Zoom Out"
+ aria-label="Zoom Out"
+ >
+
+ {
+ e.stopPropagation();
+ handleResetZoom();
+ }}
+ title="Reset Zoom (100%)"
+ aria-label="Reset Zoom"
+ >
+ {Math.round(zoom * 100)}%
+
+ {
+ e.stopPropagation();
+ handleZoomIn();
+ }}
+ disabled={zoom >= maxZoomVal}
+ title="Zoom In"
+ aria-label="Zoom In"
+ >
+
+
{onDelete && (
<>
{
await expect(lightbox).not.toBeVisible();
});
+test("lightbox navigation zones span full-height and handle navigation", async ({
+ page,
+}) => {
+ await page.goto("/gallery");
+ await expect(page.getByTestId("loading-skeleton")).toBeHidden();
+
+ try {
+ await expect(page.locator('img[class*="media"]').first()).toBeVisible({
+ timeout: 5000,
+ });
+ } catch {
+ test.skip(true, "No gallery items to test lightbox navigation zones");
+ return;
+ }
+
+ // Open lightbox on first item
+ await page.locator('img[class*="media"]').first().click();
+ const lightbox = page.locator('div[class*="overlay"]');
+ await expect(lightbox).toBeVisible();
+
+ // Next navigation zone should be visible and attached
+ const nextZone = page.locator('button[class*="navZoneNext"]').first();
+ const prevZone = page.locator('button[class*="navZonePrev"]').first();
+
+ await expect(nextZone).toBeVisible();
+
+ // Verify bounding box height matches mainArea
+ const boundingBox = await nextZone.boundingBox();
+ const mainAreaBox = await page
+ .locator('div[class*="mainArea"]')
+ .first()
+ .boundingBox();
+
+ expect(boundingBox).not.toBeNull();
+ expect(mainAreaBox).not.toBeNull();
+
+ if (boundingBox && mainAreaBox) {
+ expect(boundingBox.height).toBeGreaterThanOrEqual(mainAreaBox.height - 2);
+ }
+
+ // Click next zone
+ if (await nextZone.isVisible()) {
+ await nextZone.click();
+ // After navigating to second item, prev zone should become visible
+ await expect(prevZone).toBeVisible();
+ }
+
+ await page.keyboard.press("Escape");
+ await expect(lightbox).not.toBeVisible();
+});
+
+test("lightbox show/hide controls toggles, H key shortcut, and two-step Escape", async ({
+ page,
+}) => {
+ await page.goto("/gallery");
+ await expect(page.getByTestId("loading-skeleton")).toBeHidden();
+
+ try {
+ await expect(page.locator('img[class*="media"]').first()).toBeVisible({
+ timeout: 5000,
+ });
+ } catch {
+ test.skip(true, "No gallery items to test lightbox controls toggle");
+ return;
+ }
+
+ // Open lightbox
+ await page.locator('img[class*="media"]').first().click();
+ const lightbox = page.locator('div[class*="overlay"]');
+ await expect(lightbox).toBeVisible();
+
+ const toggleBtn = page.locator('button[class*="persistentToggleBtn"]');
+ await expect(toggleBtn).toBeVisible();
+
+ const controls = page.locator('div[class*="controls"]').first();
+ const sidebar = page.locator('div[class*="sidebar"]').first();
+
+ // Initially controls and sidebar are visible
+ await expect(controls).toHaveAttribute("data-visible", "true");
+ await expect(sidebar).not.toHaveClass(/sidebarHidden/);
+
+ // Click persistent toggle button -> controls hide, sidebar remains visible
+ await toggleBtn.click();
+ await expect(controls).toHaveAttribute("data-visible", "false");
+ await expect(sidebar).not.toHaveClass(/sidebarHidden/);
+
+ // Toggle button remains visible
+ await expect(toggleBtn).toBeVisible();
+
+ // Press H key -> controls reappear
+ await page.keyboard.press("h");
+ await expect(controls).toHaveAttribute("data-visible", "true");
+
+ // Hide controls again with H key
+ await page.keyboard.press("H");
+ await expect(controls).toHaveAttribute("data-visible", "false");
+
+ // Two-step Escape: First Escape restores controls, second Escape closes lightbox
+ await page.keyboard.press("Escape");
+ await expect(controls).toHaveAttribute("data-visible", "true");
+ await expect(lightbox).toBeVisible();
+
+ await page.keyboard.press("Escape");
+ await expect(lightbox).not.toBeVisible();
+});
+
+test("lightbox fit mode cycling and zoom controls", async ({ page }) => {
+ await page.goto("/gallery");
+ await expect(page.getByTestId("loading-skeleton")).toBeHidden();
+
+ try {
+ await expect(page.locator('img[class*="media"]').first()).toBeVisible({
+ timeout: 5000,
+ });
+ } catch {
+ test.skip(true, "No gallery items to test lightbox fit mode and zoom");
+ return;
+ }
+
+ // Open lightbox
+ await page.locator('img[class*="media"]').first().click();
+ const lightbox = page.locator('div[class*="overlay"]');
+ await expect(lightbox).toBeVisible();
+
+ // Check Fit Mode cycle button
+ const fitBtn = page.locator('button[aria-label="Cycle fit mode"]').first();
+ await expect(fitBtn).toBeVisible();
+ await expect(fitBtn).toHaveAttribute("title", /Fit mode:.*/);
+
+ // Click to cycle fit modes
+ const initialTitle = await fitBtn.getAttribute("title");
+ await fitBtn.click();
+ const nextTitle = await fitBtn.getAttribute("title");
+ expect(nextTitle).not.toBe(initialTitle);
+
+ await fitBtn.click();
+ const thirdTitle = await fitBtn.getAttribute("title");
+ expect(thirdTitle).not.toBe(nextTitle);
+
+ // Zoom controls
+ const zoomInBtn = page.locator('button[aria-label="Zoom In"]').first();
+ const zoomOutBtn = page.locator('button[aria-label="Zoom Out"]').first();
+ const zoomResetBtn = page.locator('button[aria-label="Reset Zoom"]').first();
+
+ await expect(zoomInBtn).toBeVisible();
+ await expect(zoomOutBtn).toBeVisible();
+ await expect(zoomResetBtn).toBeVisible();
+
+ // Reset zoom to 100% first
+ await zoomResetBtn.click();
+ await expect(zoomResetBtn).toHaveText("100%");
+
+ // Click Zoom In
+ await zoomInBtn.click();
+ await expect(zoomResetBtn).toHaveText(/(125|150)%/);
+
+ // Click Zoom Reset
+ await zoomResetBtn.click();
+ await expect(zoomResetBtn).toHaveText("100%");
+
+ // Click Zoom Out
+ await zoomOutBtn.click();
+ await expect(zoomResetBtn).toHaveText(/(75|50)%/);
+
+ await page.keyboard.press("Escape");
+ await expect(lightbox).not.toBeVisible();
+});
+
+test("lightbox touch pinch-to-zoom gesture", async ({ page }) => {
+ await page.goto("/gallery");
+ await expect(page.getByTestId("loading-skeleton")).toBeHidden();
+
+ try {
+ await expect(page.locator('img[class*="media"]').first()).toBeVisible({
+ timeout: 5000,
+ });
+ } catch {
+ test.skip(true, "No gallery items to test lightbox pinch-to-zoom");
+ return;
+ }
+
+ // Open lightbox
+ await page.locator('img[class*="media"]').first().click();
+ const lightbox = page.locator('div[class*="overlay"]');
+ await expect(lightbox).toBeVisible();
+
+ const img = page.locator('img[class*="image"]').first();
+ await expect(img).toBeVisible();
+ const zoomResetBtn = page.locator('button[aria-label="Reset Zoom"]').first();
+
+ // Dispatch multi-touch pinch outward gesture on image
+ const box = await img.boundingBox();
+ if (box) {
+ const centerX = box.x + box.width / 2;
+ const centerY = box.y + box.height / 2;
+
+ await img.dispatchEvent("touchstart", {
+ touches: [
+ { identifier: 0, clientX: centerX - 10, clientY: centerY - 10 },
+ { identifier: 1, clientX: centerX + 10, clientY: centerY + 10 },
+ ],
+ });
+
+ await img.dispatchEvent("touchmove", {
+ touches: [
+ { identifier: 0, clientX: centerX - 50, clientY: centerY - 50 },
+ { identifier: 1, clientX: centerX + 50, clientY: centerY + 50 },
+ ],
+ });
+
+ await expect(zoomResetBtn).not.toHaveText("100%");
+
+ await img.dispatchEvent("touchend", {
+ touches: [],
+ changedTouches: [
+ { identifier: 0, clientX: centerX - 50, clientY: centerY - 50 },
+ { identifier: 1, clientX: centerX + 50, clientY: centerY + 50 },
+ ],
+ });
+ }
+
+ await page.keyboard.press("Escape");
+ await expect(lightbox).not.toBeVisible();
+});
+
test("gallery defaults to infinite scroll mode", async ({ page }) => {
await page.goto("/gallery");
await expect(page.getByTestId("loading-skeleton")).toBeHidden();
diff --git a/tests/settings.spec.ts b/tests/settings.spec.ts
index 6cf3014..d917b6a 100644
--- a/tests/settings.spec.ts
+++ b/tests/settings.spec.ts
@@ -319,4 +319,124 @@ test.describe
await expect(page.locator("#galleryPageSize").first()).toHaveValue("50");
await expect(page.locator("#loopVideos").first()).toBeChecked();
});
+
+ test("renders Lightbox settings section and handles auto-hide toggle state", async ({
+ page,
+ }) => {
+ // Lightbox heading should be visible under App Settings
+ await expect(
+ page.getByRole("heading", { name: "Lightbox Settings" }).first(),
+ ).toBeVisible();
+
+ // Check all controls exist with defaults
+ const fitModeSelect = page.locator("#lightboxFitMode").first();
+ const zoomMinInput = page.locator("#lightboxZoomMin").first();
+ const zoomMaxInput = page.locator("#lightboxZoomMax").first();
+ const zoomStepInput = page.locator("#lightboxZoomStep").first();
+ const autoHideToggle = page.locator("#lightboxAutoHideControls").first();
+ const autoHideDelayInput = page.locator("#lightboxAutoHideDelay").first();
+
+ await expect(fitModeSelect).toBeVisible();
+ await expect(fitModeSelect).toHaveValue("fitBoth");
+
+ await expect(zoomMinInput).toBeVisible();
+ await expect(zoomMinInput).toHaveValue("50");
+
+ await expect(zoomMaxInput).toBeVisible();
+ await expect(zoomMaxInput).toHaveValue("200");
+
+ await expect(zoomStepInput).toBeVisible();
+ await expect(zoomStepInput).toHaveValue("25");
+
+ await expect(autoHideToggle).toBeAttached();
+ expect(await autoHideToggle.isChecked()).toBe(false);
+
+ // Auto-hide delay input should be disabled when auto-hide is off
+ await expect(autoHideDelayInput).toBeDisabled();
+
+ // Toggle auto-hide on via switch label
+ const toggleLabel = page
+ .locator("label[for='lightboxAutoHideControls']")
+ .first();
+ await toggleLabel.click();
+
+ expect(await autoHideToggle.isChecked()).toBe(true);
+ await expect(autoHideDelayInput).toBeEnabled();
+ });
+
+ test("validates Lightbox zoom bounds and range rules", async ({ page }) => {
+ const zoomMinInput = page.locator("#lightboxZoomMin").first();
+ const zoomMaxInput = page.locator("#lightboxZoomMax").first();
+ const saveButton = page
+ .getByRole("button", { name: "Save Changes" })
+ .first();
+
+ // Min zoom out of range (< 10)
+ await zoomMinInput.fill("5");
+ await saveButton.click();
+ const alert = page.locator("[class*='notification']").first();
+ await expect(alert).toBeVisible({ timeout: 15000 });
+ await expect(alert).toContainText(
+ "Lightbox minimum zoom must be between 10% and 100%.",
+ );
+
+ // Reset min zoom, test min > max validation
+ await zoomMinInput.fill("800");
+ await saveButton.click();
+ await expect(alert).toBeVisible({ timeout: 15000 });
+ await expect(alert).toContainText(
+ "Lightbox minimum zoom cannot be greater than maximum zoom.",
+ );
+ });
+
+ test("can modify, save, and persist Lightbox settings", async ({
+ page,
+ }) => {
+ const fitModeSelect = page.locator("#lightboxFitMode").first();
+ const zoomMinInput = page.locator("#lightboxZoomMin").first();
+ const zoomMaxInput = page.locator("#lightboxZoomMax").first();
+ const zoomStepInput = page.locator("#lightboxZoomStep").first();
+ const autoHideToggleLabel = page
+ .locator("label[for='lightboxAutoHideControls']")
+ .first();
+ const autoHideDelayInput = page.locator("#lightboxAutoHideDelay").first();
+ const saveButton = page
+ .getByRole("button", { name: "Save Changes" })
+ .first();
+
+ await fitModeSelect.selectOption("fitWidth");
+ await zoomMinInput.fill("30");
+ await zoomMaxInput.fill("600");
+ await zoomStepInput.fill("50");
+ await autoHideToggleLabel.click();
+ await autoHideDelayInput.fill("5");
+
+ await saveButton.click();
+
+ const alert = page.locator("[class*='notification']").first();
+ await expect(alert).toBeVisible({ timeout: 15000 });
+ await expect(alert).toContainText(
+ "Settings saved and updated successfully!",
+ );
+
+ // Reload page and verify settings are preserved
+ await page.reload();
+ await expect(page.getByTestId("loading-skeleton")).toBeHidden();
+ await expect(
+ page.locator("[data-hydrated='true']").first(),
+ ).toBeVisible();
+
+ await expect(page.locator("#lightboxFitMode").first()).toHaveValue(
+ "fitWidth",
+ );
+ await expect(page.locator("#lightboxZoomMin").first()).toHaveValue("30");
+ await expect(page.locator("#lightboxZoomMax").first()).toHaveValue("600");
+ await expect(page.locator("#lightboxZoomStep").first()).toHaveValue("50");
+ expect(
+ await page.locator("#lightboxAutoHideControls").first().isChecked(),
+ ).toBe(true);
+ await expect(page.locator("#lightboxAutoHideDelay").first()).toHaveValue(
+ "5",
+ );
+ });
});
diff --git a/tests/unit/settings-defaults.test.ts b/tests/unit/settings-defaults.test.ts
new file mode 100644
index 0000000..ad69d0b
--- /dev/null
+++ b/tests/unit/settings-defaults.test.ts
@@ -0,0 +1,13 @@
+import { describe, expect, it } from "vitest";
+import { DEFAULT_SETTINGS } from "@/types/settings";
+
+describe("Lightbox Settings Defaults", () => {
+ it("defines default values for all lightbox fields in DEFAULT_SETTINGS", () => {
+ expect(DEFAULT_SETTINGS.app.lightboxFitMode).toBe("fitBoth");
+ expect(DEFAULT_SETTINGS.app.lightboxZoomMin).toBe(50);
+ expect(DEFAULT_SETTINGS.app.lightboxZoomMax).toBe(200);
+ expect(DEFAULT_SETTINGS.app.lightboxZoomStep).toBe(25);
+ expect(DEFAULT_SETTINGS.app.lightboxAutoHideControls).toBe(false);
+ expect(DEFAULT_SETTINGS.app.lightboxAutoHideDelay).toBe(3);
+ });
+});