mirror of
https://github.com/snapotter-hq/SnapOtter.git
synced 2026-08-03 07:46:42 +02:00
feat: pipeline templates, analytics opt-out, 83 conversion presets, positioning + e2e modernization
Lands five integrated branches: pipeline templates (#355), analytics opt-out (#354), 83 conversion presets bringing the catalog to 240 tools (#356), self-hosted positioning (#353), and e2e modernization (#351). Integration fixes: aligned stale web analytics tests with the opt-out/allow-list model, closed 3 CodeQL incomplete-sanitization alerts in the i18n generator, resolved settings/index/docs/format-matrix conflicts, and corrected tool counts to 240.
This commit is contained in:
SnapOtter
@@ -1,4 +1,5 @@
|
||||
import path from "node:path";
|
||||
import type { Page } from "@playwright/test";
|
||||
import { expect, test, uploadTestImage, waitForProcessing } from "./helpers";
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
@@ -7,6 +8,40 @@ import { expect, test, uploadTestImage, waitForProcessing } from "./helpers";
|
||||
// optimize-for-web)
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
// A tool page renders its settings panel (and submit button) only after a file
|
||||
// is present; before upload it shows just the full-width dropzone. svg-to-raster
|
||||
// accepts only SVG and pdf-to-image only PDF, so the default PNG from
|
||||
// uploadTestImage gets filtered out. uploadFixture uploads a matching file.
|
||||
const SVG_FIXTURE = path.join(
|
||||
process.cwd(),
|
||||
"tests",
|
||||
"fixtures",
|
||||
"image",
|
||||
"valid",
|
||||
"test-100x100.svg",
|
||||
);
|
||||
const PDF_FIXTURE = path.join(
|
||||
process.cwd(),
|
||||
"tests",
|
||||
"fixtures",
|
||||
"document",
|
||||
"valid",
|
||||
"test-3page.pdf",
|
||||
);
|
||||
|
||||
async function uploadFixture(page: Page, filePath: string): Promise<void> {
|
||||
const fileChooserPromise = page.waitForEvent("filechooser");
|
||||
const uploadButton = page.getByRole("button", { name: /upload from computer/i }).first();
|
||||
if (await uploadButton.isVisible({ timeout: 2000 }).catch(() => false)) {
|
||||
await uploadButton.click();
|
||||
} else {
|
||||
await page.locator("[class*='border-dashed']").first().click();
|
||||
}
|
||||
const fileChooser = await fileChooserPromise;
|
||||
await fileChooser.setFiles(filePath);
|
||||
await page.waitForTimeout(500);
|
||||
}
|
||||
|
||||
test.describe("GUI Format & Conversion Tools", () => {
|
||||
// ========================================================================
|
||||
// SVG TO RASTER
|
||||
@@ -20,12 +55,14 @@ test.describe("GUI Format & Conversion Tools", () => {
|
||||
|
||||
test("shows settings section", async ({ loggedInPage: page }) => {
|
||||
await page.goto("/image/svg-to-raster");
|
||||
await uploadFixture(page, SVG_FIXTURE);
|
||||
await expect(page.getByText("Settings").first()).toBeVisible();
|
||||
});
|
||||
|
||||
test("submit button uses data-testid", async ({ loggedInPage: page }) => {
|
||||
await page.goto("/image/svg-to-raster");
|
||||
// SVG tool needs an SVG file; just verify the submit testid exists on the page
|
||||
// Settings (and the submit button) render only after an SVG is uploaded.
|
||||
await uploadFixture(page, SVG_FIXTURE);
|
||||
await expect(page.getByTestId("svg-to-raster-submit")).toBeVisible();
|
||||
});
|
||||
|
||||
@@ -33,6 +70,7 @@ test.describe("GUI Format & Conversion Tools", () => {
|
||||
loggedInPage: page,
|
||||
}) => {
|
||||
await page.goto("/image/svg-to-raster");
|
||||
await uploadFixture(page, SVG_FIXTURE);
|
||||
|
||||
await expect(page.getByRole("button", { name: "Scale Factor" })).toBeVisible();
|
||||
await expect(page.getByRole("button", { name: "Custom Size" })).toBeVisible();
|
||||
@@ -40,6 +78,7 @@ test.describe("GUI Format & Conversion Tools", () => {
|
||||
|
||||
test("shows DPI preset buttons", async ({ loggedInPage: page }) => {
|
||||
await page.goto("/image/svg-to-raster");
|
||||
await uploadFixture(page, SVG_FIXTURE);
|
||||
|
||||
await expect(page.getByRole("button", { name: "72" })).toBeVisible();
|
||||
await expect(page.getByRole("button", { name: "96" })).toBeVisible();
|
||||
@@ -49,6 +88,7 @@ test.describe("GUI Format & Conversion Tools", () => {
|
||||
|
||||
test("shows format buttons (png, jpg, webp, avif, etc.)", async ({ loggedInPage: page }) => {
|
||||
await page.goto("/image/svg-to-raster");
|
||||
await uploadFixture(page, SVG_FIXTURE);
|
||||
|
||||
await expect(page.getByRole("button", { name: /^png$/i })).toBeVisible();
|
||||
await expect(page.getByRole("button", { name: /^jpg$/i })).toBeVisible();
|
||||
@@ -57,6 +97,7 @@ test.describe("GUI Format & Conversion Tools", () => {
|
||||
|
||||
test("shows background mode buttons (Transparent / Color)", async ({ loggedInPage: page }) => {
|
||||
await page.goto("/image/svg-to-raster");
|
||||
await uploadFixture(page, SVG_FIXTURE);
|
||||
|
||||
await expect(page.getByRole("button", { name: "Transparent" })).toBeVisible();
|
||||
await expect(page.getByRole("button", { name: "Color" })).toBeVisible();
|
||||
@@ -64,6 +105,7 @@ test.describe("GUI Format & Conversion Tools", () => {
|
||||
|
||||
test("color mode shows color presets when selected", async ({ loggedInPage: page }) => {
|
||||
await page.goto("/image/svg-to-raster");
|
||||
await uploadFixture(page, SVG_FIXTURE);
|
||||
|
||||
await page.getByRole("button", { name: "Color" }).click();
|
||||
// Should show white and black color buttons
|
||||
@@ -73,6 +115,7 @@ test.describe("GUI Format & Conversion Tools", () => {
|
||||
|
||||
test("custom size mode shows width and height inputs", async ({ loggedInPage: page }) => {
|
||||
await page.goto("/image/svg-to-raster");
|
||||
await uploadFixture(page, SVG_FIXTURE);
|
||||
|
||||
await page.getByRole("button", { name: "Custom Size" }).click();
|
||||
await expect(page.locator("#svg-custom-width")).toBeVisible();
|
||||
@@ -83,13 +126,7 @@ test.describe("GUI Format & Conversion Tools", () => {
|
||||
await page.goto("/image/svg-to-raster");
|
||||
|
||||
// Scale presets require an SVG file to detect dimensions; upload a test SVG
|
||||
const fileChooserPromise = page.waitForEvent("filechooser");
|
||||
await page.locator("[class*='border-dashed']").first().click();
|
||||
const fileChooser = await fileChooserPromise;
|
||||
await fileChooser.setFiles(
|
||||
path.join(process.cwd(), "tests", "fixtures", "image", "valid", "test-100x100.svg"),
|
||||
);
|
||||
await page.waitForTimeout(500);
|
||||
await uploadFixture(page, SVG_FIXTURE);
|
||||
|
||||
await page.getByRole("button", { name: "Scale Factor" }).click();
|
||||
// Scale presets should be visible (0.5x, 1x, 2x, 3x, 4x)
|
||||
@@ -99,8 +136,9 @@ test.describe("GUI Format & Conversion Tools", () => {
|
||||
test("submit disabled without file", async ({ loggedInPage: page }) => {
|
||||
await page.goto("/image/svg-to-raster");
|
||||
|
||||
const submitBtn = page.getByTestId("svg-to-raster-submit");
|
||||
await expect(submitBtn).toBeDisabled();
|
||||
// The settings panel (and its submit button) mount only after upload,
|
||||
// so before a file there is no submit button to interact with.
|
||||
await expect(page.getByTestId("svg-to-raster-submit")).toHaveCount(0);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -195,10 +233,11 @@ test.describe("GUI Format & Conversion Tools", () => {
|
||||
await page.goto("/image/vectorize");
|
||||
await uploadTestImage(page);
|
||||
|
||||
await page.getByRole("button", { name: /vectorize/i }).click();
|
||||
await page.getByTestId("vectorize-submit").click();
|
||||
await waitForProcessing(page);
|
||||
|
||||
await expect(page.getByRole("link", { name: /download/i }).first()).toBeVisible({
|
||||
// vectorize-settings renders a hardcoded data-testid for its download link.
|
||||
await expect(page.getByTestId("vectorize-download")).toBeVisible({
|
||||
timeout: 15_000,
|
||||
});
|
||||
});
|
||||
@@ -225,6 +264,7 @@ test.describe("GUI Format & Conversion Tools", () => {
|
||||
|
||||
test("shows settings section", async ({ loggedInPage: page }) => {
|
||||
await page.goto("/image/gif-tools");
|
||||
await uploadTestImage(page);
|
||||
await expect(page.getByText("Settings").first()).toBeVisible();
|
||||
});
|
||||
|
||||
@@ -342,11 +382,11 @@ test.describe("GUI Format & Conversion Tools", () => {
|
||||
test("submit disabled without file, enabled with file", async ({ loggedInPage: page }) => {
|
||||
await page.goto("/image/gif-tools");
|
||||
|
||||
const submitBtn = page.getByTestId("gif-tools-submit");
|
||||
await expect(submitBtn).toBeDisabled();
|
||||
// The submit button mounts only after a file is uploaded.
|
||||
await expect(page.getByTestId("gif-tools-submit")).toHaveCount(0);
|
||||
|
||||
await uploadTestImage(page);
|
||||
await expect(submitBtn).toBeEnabled();
|
||||
await expect(page.getByTestId("gif-tools-submit")).toBeEnabled();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -362,6 +402,7 @@ test.describe("GUI Format & Conversion Tools", () => {
|
||||
|
||||
test("shows page size and orientation controls", async ({ loggedInPage: page }) => {
|
||||
await page.goto("/image/image-to-pdf");
|
||||
await uploadTestImage(page);
|
||||
|
||||
await expect(page.getByText("Page Size")).toBeVisible();
|
||||
await expect(page.getByText("Orientation")).toBeVisible();
|
||||
@@ -371,12 +412,14 @@ test.describe("GUI Format & Conversion Tools", () => {
|
||||
|
||||
test("shows submit button with page count", async ({ loggedInPage: page }) => {
|
||||
await page.goto("/image/image-to-pdf");
|
||||
await uploadTestImage(page);
|
||||
|
||||
await expect(page.getByTestId("image-to-pdf-submit")).toBeVisible();
|
||||
});
|
||||
|
||||
test("shows page size dropdown with options", async ({ loggedInPage: page }) => {
|
||||
await page.goto("/image/image-to-pdf");
|
||||
await uploadTestImage(page);
|
||||
|
||||
const select = page.locator("#image-to-pdf-page-size");
|
||||
await expect(select).toBeVisible();
|
||||
@@ -386,6 +429,7 @@ test.describe("GUI Format & Conversion Tools", () => {
|
||||
|
||||
test("changing page size selects new value", async ({ loggedInPage: page }) => {
|
||||
await page.goto("/image/image-to-pdf");
|
||||
await uploadTestImage(page);
|
||||
|
||||
await page.selectOption("#image-to-pdf-page-size", "Letter");
|
||||
await expect(page.locator("#image-to-pdf-page-size")).toHaveValue("Letter");
|
||||
@@ -393,6 +437,7 @@ test.describe("GUI Format & Conversion Tools", () => {
|
||||
|
||||
test("shows margin slider", async ({ loggedInPage: page }) => {
|
||||
await page.goto("/image/image-to-pdf");
|
||||
await uploadTestImage(page);
|
||||
|
||||
const slider = page.locator("#image-to-pdf-margin");
|
||||
await expect(slider).toBeVisible();
|
||||
@@ -401,6 +446,7 @@ test.describe("GUI Format & Conversion Tools", () => {
|
||||
|
||||
test("shows target file size input", async ({ loggedInPage: page }) => {
|
||||
await page.goto("/image/image-to-pdf");
|
||||
await uploadTestImage(page);
|
||||
|
||||
await expect(page.getByTestId("image-to-pdf-target-size-value")).toBeVisible();
|
||||
await expect(page.getByTestId("image-to-pdf-target-size-unit")).toBeVisible();
|
||||
@@ -410,6 +456,7 @@ test.describe("GUI Format & Conversion Tools", () => {
|
||||
loggedInPage: page,
|
||||
}) => {
|
||||
await page.goto("/image/image-to-pdf");
|
||||
await uploadTestImage(page);
|
||||
|
||||
await page.getByRole("button", { name: "Landscape" }).click();
|
||||
await page.getByRole("button", { name: "Portrait" }).click();
|
||||
@@ -418,11 +465,11 @@ test.describe("GUI Format & Conversion Tools", () => {
|
||||
test("submit disabled without file, enabled with file", async ({ loggedInPage: page }) => {
|
||||
await page.goto("/image/image-to-pdf");
|
||||
|
||||
const submitBtn = page.getByTestId("image-to-pdf-submit");
|
||||
await expect(submitBtn).toBeDisabled();
|
||||
// The submit button mounts only after a file is uploaded.
|
||||
await expect(page.getByTestId("image-to-pdf-submit")).toHaveCount(0);
|
||||
|
||||
await uploadTestImage(page);
|
||||
await expect(submitBtn).toBeEnabled();
|
||||
await expect(page.getByTestId("image-to-pdf-submit")).toBeEnabled();
|
||||
});
|
||||
|
||||
test("processes image to PDF and shows download", async ({ loggedInPage: page }) => {
|
||||
@@ -440,16 +487,19 @@ test.describe("GUI Format & Conversion Tools", () => {
|
||||
// PDF TO IMAGE
|
||||
// ========================================================================
|
||||
test.describe("PDF to Image", () => {
|
||||
test("renders tool page without standard dropzone", async ({ loggedInPage: page }) => {
|
||||
test("renders tool page and shows settings after upload", async ({ loggedInPage: page }) => {
|
||||
await page.goto("/pdf/pdf-to-image");
|
||||
await expect(page.getByText("PDF to Image").first()).toBeVisible();
|
||||
|
||||
// PDF to Image uses no-dropzone display mode with custom file input
|
||||
// pdf-to-image uses the custom-results display mode: the settings panel
|
||||
// mounts only after a PDF is uploaded (before that it shows the dropzone).
|
||||
await uploadFixture(page, PDF_FIXTURE);
|
||||
await expect(page.getByText("Settings").first()).toBeVisible();
|
||||
});
|
||||
|
||||
test("shows format options", async ({ loggedInPage: page }) => {
|
||||
await page.goto("/pdf/pdf-to-image");
|
||||
await uploadFixture(page, PDF_FIXTURE);
|
||||
|
||||
// Format options from pdf-to-image-settings.tsx
|
||||
await expect(page.getByText(/format/i).first()).toBeVisible();
|
||||
@@ -457,6 +507,7 @@ test.describe("GUI Format & Conversion Tools", () => {
|
||||
|
||||
test("shows DPI presets", async ({ loggedInPage: page }) => {
|
||||
await page.goto("/pdf/pdf-to-image");
|
||||
await uploadFixture(page, PDF_FIXTURE);
|
||||
|
||||
// DPI buttons from pdf-to-image-settings.tsx
|
||||
await expect(page.getByText(/dpi|resolution/i).first()).toBeVisible();
|
||||
@@ -464,12 +515,14 @@ test.describe("GUI Format & Conversion Tools", () => {
|
||||
|
||||
test("submit button uses data-testid", async ({ loggedInPage: page }) => {
|
||||
await page.goto("/pdf/pdf-to-image");
|
||||
await uploadFixture(page, PDF_FIXTURE);
|
||||
|
||||
await expect(page.getByTestId("pdf-to-image-submit")).toBeVisible();
|
||||
});
|
||||
|
||||
test("shows all format buttons", async ({ loggedInPage: page }) => {
|
||||
await page.goto("/pdf/pdf-to-image");
|
||||
await uploadFixture(page, PDF_FIXTURE);
|
||||
|
||||
await expect(page.getByText("Output Format")).toBeVisible();
|
||||
await expect(page.getByRole("button", { name: "PNG" }).first()).toBeVisible();
|
||||
@@ -479,6 +532,7 @@ test.describe("GUI Format & Conversion Tools", () => {
|
||||
|
||||
test("shows DPI preset buttons", async ({ loggedInPage: page }) => {
|
||||
await page.goto("/pdf/pdf-to-image");
|
||||
await uploadFixture(page, PDF_FIXTURE);
|
||||
|
||||
await expect(page.getByText("Resolution (DPI)")).toBeVisible();
|
||||
await expect(page.getByRole("button", { name: "72" }).first()).toBeVisible();
|
||||
@@ -489,6 +543,7 @@ test.describe("GUI Format & Conversion Tools", () => {
|
||||
|
||||
test("shows color mode buttons", async ({ loggedInPage: page }) => {
|
||||
await page.goto("/pdf/pdf-to-image");
|
||||
await uploadFixture(page, PDF_FIXTURE);
|
||||
|
||||
await expect(page.getByText("Color Mode")).toBeVisible();
|
||||
await expect(page.getByRole("button", { name: "Color" }).first()).toBeVisible();
|
||||
@@ -498,6 +553,7 @@ test.describe("GUI Format & Conversion Tools", () => {
|
||||
|
||||
test("shows pages input field", async ({ loggedInPage: page }) => {
|
||||
await page.goto("/pdf/pdf-to-image");
|
||||
await uploadFixture(page, PDF_FIXTURE);
|
||||
|
||||
await expect(page.locator("#pdf-pages")).toBeVisible();
|
||||
});
|
||||
@@ -505,17 +561,22 @@ test.describe("GUI Format & Conversion Tools", () => {
|
||||
test("shows PDF upload area", async ({ loggedInPage: page }) => {
|
||||
await page.goto("/pdf/pdf-to-image");
|
||||
|
||||
await expect(page.getByText("Drop a PDF here or click to select")).toBeVisible();
|
||||
// Before upload the tool shows its file dropzone with the upload button.
|
||||
await expect(
|
||||
page.getByRole("button", { name: /upload from computer/i }).first(),
|
||||
).toBeVisible();
|
||||
});
|
||||
|
||||
test("submit disabled without file", async ({ loggedInPage: page }) => {
|
||||
await page.goto("/pdf/pdf-to-image");
|
||||
|
||||
await expect(page.getByTestId("pdf-to-image-submit")).toBeDisabled();
|
||||
// The settings panel (and its submit button) mount only after upload.
|
||||
await expect(page.getByTestId("pdf-to-image-submit")).toHaveCount(0);
|
||||
});
|
||||
|
||||
test("shows Custom DPI button", async ({ loggedInPage: page }) => {
|
||||
await page.goto("/pdf/pdf-to-image");
|
||||
await uploadFixture(page, PDF_FIXTURE);
|
||||
|
||||
await expect(page.getByRole("button", { name: "Custom" }).first()).toBeVisible();
|
||||
});
|
||||
@@ -540,20 +601,23 @@ test.describe("GUI Format & Conversion Tools", () => {
|
||||
|
||||
test("shows generated sizes list", async ({ loggedInPage: page }) => {
|
||||
await page.goto("/image/favicon");
|
||||
await uploadTestImage(page);
|
||||
|
||||
// Heading renders as "Generated Sizes (per image)"; getByText matches the substring.
|
||||
await expect(page.getByText("Generated Sizes")).toBeVisible();
|
||||
await expect(page.getByText("favicon-16x16.png")).toBeVisible();
|
||||
await expect(page.getByText("favicon-32x32.png")).toBeVisible();
|
||||
await expect(page.getByText("apple-touch-icon.png")).toBeVisible();
|
||||
await expect(page.getByText("android-chrome-512x512.png")).toBeVisible();
|
||||
await expect(page.getByText("favicon.ico")).toBeVisible();
|
||||
});
|
||||
|
||||
test("shows manifest and HTML snippet mention", async ({ loggedInPage: page }) => {
|
||||
await page.goto("/image/favicon");
|
||||
await uploadTestImage(page);
|
||||
|
||||
await expect(page.getByText("manifest.json")).toBeVisible();
|
||||
await expect(page.getByText("HTML snippet")).toBeVisible();
|
||||
// Rendered as a single line. "manifest.json" alone also appears in a
|
||||
// helper caption, so match the whole unique string.
|
||||
await expect(page.getByText("+ manifest.json + HTML snippet")).toBeVisible();
|
||||
});
|
||||
|
||||
test("submit button uses data-testid", async ({ loggedInPage: page }) => {
|
||||
@@ -566,11 +630,11 @@ test.describe("GUI Format & Conversion Tools", () => {
|
||||
test("submit disabled without file, enabled with file", async ({ loggedInPage: page }) => {
|
||||
await page.goto("/image/favicon");
|
||||
|
||||
const submitBtn = page.getByTestId("favicon-submit");
|
||||
await expect(submitBtn).toBeDisabled();
|
||||
// The submit button mounts only after a file is uploaded.
|
||||
await expect(page.getByTestId("favicon-submit")).toHaveCount(0);
|
||||
|
||||
await uploadTestImage(page);
|
||||
await expect(submitBtn).toBeEnabled();
|
||||
await expect(page.getByTestId("favicon-submit")).toBeEnabled();
|
||||
});
|
||||
|
||||
test("processes favicon generation and shows download", async ({ loggedInPage: page }) => {
|
||||
@@ -622,12 +686,14 @@ test.describe("GUI Format & Conversion Tools", () => {
|
||||
await page.goto("/image/optimize-for-web");
|
||||
await uploadTestImage(page);
|
||||
|
||||
// Scope to the settings panel to avoid matching the file list item button
|
||||
// Scope to the settings panel. The uploaded file (test-image.png) also
|
||||
// appears as a list button whose name contains "PNG", so match the PNG
|
||||
// format button by exact accessible name to avoid a strict-mode collision.
|
||||
const settings = page.locator(".w-72");
|
||||
await expect(settings.getByRole("button", { name: "WebP" })).toBeVisible();
|
||||
await expect(settings.getByRole("button", { name: "JPEG" })).toBeVisible();
|
||||
await expect(settings.getByRole("button", { name: "AVIF" })).toBeVisible();
|
||||
await expect(settings.getByRole("button", { name: "PNG" })).toBeVisible();
|
||||
await expect(settings.getByRole("button", { name: "PNG", exact: true })).toBeVisible();
|
||||
await expect(settings.getByRole("button", { name: "JXL" })).toBeVisible();
|
||||
});
|
||||
|
||||
@@ -635,9 +701,10 @@ test.describe("GUI Format & Conversion Tools", () => {
|
||||
await page.goto("/image/optimize-for-web");
|
||||
await uploadTestImage(page);
|
||||
|
||||
// Scope to the settings panel to avoid matching the file list item button
|
||||
// Match the PNG format button exactly so it does not collide with the
|
||||
// uploaded file's list button (filename test-image.png + "PNG" badge).
|
||||
const settings = page.locator(".w-72");
|
||||
await settings.getByRole("button", { name: "PNG" }).click();
|
||||
await settings.getByRole("button", { name: "PNG", exact: true }).click();
|
||||
await expect(page.locator("#web-quality")).not.toBeVisible();
|
||||
});
|
||||
|
||||
@@ -689,9 +756,9 @@ test.describe("GUI Format & Conversion Tools", () => {
|
||||
test("submit disabled without file", async ({ loggedInPage: page }) => {
|
||||
await page.goto("/image/optimize-for-web");
|
||||
|
||||
// The optimize-for-web submit is a form submit button (no data-testid)
|
||||
const submitBtn = page.locator("button[type='submit']");
|
||||
await expect(submitBtn).toBeDisabled();
|
||||
// The settings form (with its submit button) mounts only after upload, so
|
||||
// before a file there is no submit button on the page at all.
|
||||
await expect(page.locator("button[type='submit']")).toHaveCount(0);
|
||||
});
|
||||
|
||||
test("quality slider value changes for JPEG format", async ({ loggedInPage: page }) => {
|
||||
|
||||
Reference in New Issue
Block a user