mirror of
https://github.com/snapotter-hq/SnapOtter.git
synced 2026-08-03 07:46:42 +02:00
SnapOtter
a0556772e8
14-agent parallel test expansion covering integration, unit, E2E, E2E-Docker, cross-format matrix, adversarial, GUI navigation/tools/settings/visual/a11y/perf. - Integration: expand 23 tool test files with HEIC, stress, batch, edge cases - Unit: close coverage gaps in image-engine, stores, lib (metadata, auto-enhance, connection-store, lazy-with-retry, collage/file-store HEIC preview) - AI bridge: 141 new tests for dispatcher buffering, crash recovery, OOM/segfault - Cross-format: 794 parameterized tests (16 formats x 12 tools + no-crash matrix) - Adversarial: memory stress (50x large file), zero-byte, corrupted headers, unicode - E2E-Docker: expand 8 spec files with dimension verification, pipeline chains - GUI E2E: tool UI settings/interactions for all 47 tools, remove all test.skip, RBAC per-role verification, visual screenshot naming, cross-browser smoke tests, a11y ARIA/focus/contrast, performance budgets, 15-tool stability test - Fix: replace-color.ts tolerance=0 caused division-by-zero producing NaN pixels Total: 8,958 tests passing across 202 files. Zero failures, zero skips.
371 lines
15 KiB
TypeScript
371 lines
15 KiB
TypeScript
import { expect, test, uploadTestImage, waitForProcessing } from "./helpers";
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// GUI E2E: Layout & Composition Tools (collage, stitch, split)
|
|
// ---------------------------------------------------------------------------
|
|
|
|
test.describe("GUI Layout Tools", () => {
|
|
// ========================================================================
|
|
// COLLAGE
|
|
// ========================================================================
|
|
test.describe("Collage", () => {
|
|
test("renders tool page without standard dropzone", async ({ loggedInPage: page }) => {
|
|
await page.goto("/collage");
|
|
await expect(page.getByText("Collage").first()).toBeVisible();
|
|
|
|
// Collage uses custom upload UI, not standard dropzone
|
|
await expect(page.getByText(/upload/i).first()).toBeVisible();
|
|
});
|
|
|
|
test("shows aspect ratio options in Canvas section", async ({ loggedInPage: page }) => {
|
|
await page.goto("/collage");
|
|
|
|
// Canvas section is collapsed by default -- expand it
|
|
await page.getByText("Canvas").click();
|
|
|
|
await expect(page.getByRole("button", { name: "Free" }).first()).toBeVisible();
|
|
await expect(page.getByRole("button", { name: "1:1" }).first()).toBeVisible();
|
|
await expect(page.getByRole("button", { name: "4:3" }).first()).toBeVisible();
|
|
await expect(page.getByRole("button", { name: "16:9" }).first()).toBeVisible();
|
|
});
|
|
|
|
test("shows output format selector in Output section", async ({ loggedInPage: page }) => {
|
|
await page.goto("/collage");
|
|
|
|
// Output section is collapsed by default -- expand it
|
|
await page.getByText("Output").click();
|
|
|
|
await expect(page.getByRole("button", { name: "PNG" }).first()).toBeVisible();
|
|
await expect(page.getByRole("button", { name: "JPEG" }).first()).toBeVisible();
|
|
await expect(page.getByRole("button", { name: "WebP" }).first()).toBeVisible();
|
|
});
|
|
|
|
test("shows background color in Spacing section", async ({ loggedInPage: page }) => {
|
|
await page.goto("/collage");
|
|
|
|
// Spacing & Style section is open by default
|
|
await expect(page.getByText(/background/i).first()).toBeVisible();
|
|
});
|
|
|
|
test("submit button uses data-testid", async ({ loggedInPage: page }) => {
|
|
await page.goto("/collage");
|
|
|
|
await expect(page.getByTestId("collage-submit")).toBeVisible();
|
|
});
|
|
|
|
test("shows gap/spacing slider in Spacing section", async ({ loggedInPage: page }) => {
|
|
await page.goto("/collage");
|
|
|
|
// Spacing & Style section should show gap controls
|
|
await expect(page.getByText(/gap|spacing/i).first()).toBeVisible();
|
|
});
|
|
|
|
test("submit button is disabled without images", async ({ loggedInPage: page }) => {
|
|
await page.goto("/collage");
|
|
|
|
const submitBtn = page.getByTestId("collage-submit");
|
|
await expect(submitBtn).toBeDisabled();
|
|
});
|
|
|
|
test("shows quality slider in Output section for JPEG", async ({ loggedInPage: page }) => {
|
|
await page.goto("/collage");
|
|
|
|
await page.getByText("Output").click();
|
|
await page.getByRole("button", { name: "JPEG" }).first().click();
|
|
// Quality slider should appear for lossy format
|
|
await expect(page.getByText(/quality/i).first()).toBeVisible();
|
|
});
|
|
});
|
|
|
|
// ========================================================================
|
|
// STITCH
|
|
// ========================================================================
|
|
test.describe("Stitch", () => {
|
|
test("renders tool page with dropzone", async ({ loggedInPage: page }) => {
|
|
await page.goto("/stitch");
|
|
await expect(page.getByText("Stitch").first()).toBeVisible();
|
|
await expect(page.getByText("Upload from computer")).toBeVisible();
|
|
});
|
|
|
|
test("shows direction options after upload", async ({ loggedInPage: page }) => {
|
|
await page.goto("/stitch");
|
|
await uploadTestImage(page);
|
|
|
|
// Direction buttons: horizontal, vertical, grid
|
|
await expect(page.getByText(/horizontal/i).first()).toBeVisible();
|
|
await expect(page.getByText(/vertical/i).first()).toBeVisible();
|
|
await expect(page.getByText(/grid/i).first()).toBeVisible();
|
|
});
|
|
|
|
test("shows resize mode options after upload", async ({ loggedInPage: page }) => {
|
|
await page.goto("/stitch");
|
|
await uploadTestImage(page);
|
|
|
|
await expect(page.getByText(/resize mode|fit|original/i).first()).toBeVisible();
|
|
});
|
|
|
|
test("shows alignment options after upload", async ({ loggedInPage: page }) => {
|
|
await page.goto("/stitch");
|
|
await uploadTestImage(page);
|
|
|
|
await expect(page.getByText(/alignment|align/i).first()).toBeVisible();
|
|
});
|
|
|
|
test("submit button uses data-testid and has correct label", async ({ loggedInPage: page }) => {
|
|
await page.goto("/stitch");
|
|
await uploadTestImage(page);
|
|
|
|
const submitBtn = page.getByTestId("stitch-submit");
|
|
await expect(submitBtn).toBeVisible();
|
|
});
|
|
|
|
test("submit disabled without file, enabled with file", async ({ loggedInPage: page }) => {
|
|
await page.goto("/stitch");
|
|
|
|
const submitBtn = page.getByTestId("stitch-submit");
|
|
await expect(submitBtn).toBeDisabled();
|
|
|
|
await uploadTestImage(page);
|
|
await expect(submitBtn).toBeEnabled();
|
|
});
|
|
|
|
test("direction buttons switch active state", async ({ loggedInPage: page }) => {
|
|
await page.goto("/stitch");
|
|
await uploadTestImage(page);
|
|
|
|
// Click vertical
|
|
await page
|
|
.getByText(/vertical/i)
|
|
.first()
|
|
.click();
|
|
// Click grid
|
|
await page.getByText(/grid/i).first().click();
|
|
// Click horizontal
|
|
await page
|
|
.getByText(/horizontal/i)
|
|
.first()
|
|
.click();
|
|
});
|
|
|
|
test("shows gap slider after upload", async ({ loggedInPage: page }) => {
|
|
await page.goto("/stitch");
|
|
await uploadTestImage(page);
|
|
|
|
await expect(page.getByText(/gap/i).first()).toBeVisible();
|
|
});
|
|
});
|
|
|
|
// ========================================================================
|
|
// SPLIT
|
|
// ========================================================================
|
|
test.describe("Split", () => {
|
|
test("renders tool page with dropzone", async ({ loggedInPage: page }) => {
|
|
await page.goto("/split");
|
|
await expect(page.getByText("Image Splitting").first()).toBeVisible();
|
|
await expect(page.getByText("Upload from computer")).toBeVisible();
|
|
});
|
|
|
|
test("shows mode selector (Grid / Tile Size) after upload", async ({ loggedInPage: page }) => {
|
|
await page.goto("/split");
|
|
await uploadTestImage(page);
|
|
|
|
await expect(page.getByRole("button", { name: "Grid" }).first()).toBeVisible();
|
|
await expect(page.getByRole("button", { name: "Tile Size" }).first()).toBeVisible();
|
|
});
|
|
|
|
test("shows grid presets after upload", async ({ loggedInPage: page }) => {
|
|
await page.goto("/split");
|
|
await uploadTestImage(page);
|
|
|
|
// Grid presets from split-settings.tsx
|
|
await expect(page.getByRole("button", { name: "2x2" }).first()).toBeVisible();
|
|
await expect(page.getByRole("button", { name: "3x3" }).first()).toBeVisible();
|
|
});
|
|
|
|
test("tile size mode shows width and height inputs", async ({ loggedInPage: page }) => {
|
|
await page.goto("/split");
|
|
await uploadTestImage(page);
|
|
|
|
await page.getByRole("button", { name: "Tile Size" }).first().click();
|
|
// Tile size mode should show dimension inputs
|
|
await expect(page.getByText(/width|tile/i).first()).toBeVisible();
|
|
});
|
|
|
|
test("shows output format selector after upload", async ({ loggedInPage: page }) => {
|
|
await page.goto("/split");
|
|
await uploadTestImage(page);
|
|
|
|
// Output format options
|
|
await expect(page.getByText(/output format|format/i).first()).toBeVisible();
|
|
});
|
|
|
|
test("shows 3x3 and 4x4 grid presets", async ({ loggedInPage: page }) => {
|
|
await page.goto("/split");
|
|
await uploadTestImage(page);
|
|
|
|
await expect(page.getByRole("button", { name: "3x3" }).first()).toBeVisible();
|
|
await expect(page.getByRole("button", { name: "4x4" }).first()).toBeVisible();
|
|
});
|
|
|
|
test("switching to tile size mode and back to grid works", async ({ loggedInPage: page }) => {
|
|
await page.goto("/split");
|
|
await uploadTestImage(page);
|
|
|
|
await page.getByRole("button", { name: "Tile Size" }).first().click();
|
|
await page.getByRole("button", { name: "Grid" }).first().click();
|
|
// Grid presets should reappear
|
|
await expect(page.getByRole("button", { name: "2x2" }).first()).toBeVisible();
|
|
});
|
|
|
|
test("processes split and shows download", async ({ loggedInPage: page }) => {
|
|
await page.goto("/split");
|
|
await uploadTestImage(page);
|
|
await page.waitForTimeout(1000);
|
|
|
|
// Select a preset (2x2)
|
|
await page.getByRole("button", { name: "2x2" }).first().click();
|
|
|
|
// Click split button
|
|
const splitBtn = page
|
|
.getByRole("button", { name: /split/i })
|
|
.filter({ hasNotText: /image splitting/i })
|
|
.first();
|
|
await splitBtn.click();
|
|
await waitForProcessing(page);
|
|
|
|
// Should show download (zip) or tile results
|
|
await expect(
|
|
page
|
|
.getByRole("link", { name: /download/i })
|
|
.first()
|
|
.or(page.getByText(/tiles|download/i).first()),
|
|
).toBeVisible({ timeout: 15_000 });
|
|
});
|
|
});
|
|
|
|
// ========================================================================
|
|
// BEAUTIFY (Screenshot Beautifier)
|
|
// ========================================================================
|
|
test.describe("Beautify", () => {
|
|
test("renders tool page with dropzone", async ({ loggedInPage: page }) => {
|
|
await page.goto("/beautify");
|
|
await expect(page.getByText("Beautify").first()).toBeVisible();
|
|
await expect(page.getByText("Upload from computer")).toBeVisible();
|
|
});
|
|
|
|
test("shows Quick Presets section with preset buttons", async ({ loggedInPage: page }) => {
|
|
await page.goto("/beautify");
|
|
|
|
await expect(page.getByText("Quick Presets")).toBeVisible();
|
|
await expect(page.getByText("Purple Haze")).toBeVisible();
|
|
await expect(page.getByText("Flamingo")).toBeVisible();
|
|
await expect(page.getByText("Ocean")).toBeVisible();
|
|
await expect(page.getByText("Midnight")).toBeVisible();
|
|
await expect(page.getByText("Mint")).toBeVisible();
|
|
await expect(page.getByText("Sunset")).toBeVisible();
|
|
});
|
|
|
|
test("shows Background section with tabs", async ({ loggedInPage: page }) => {
|
|
await page.goto("/beautify");
|
|
|
|
await expect(page.getByText("Background").first()).toBeVisible();
|
|
await expect(page.getByRole("button", { name: "Gradient" })).toBeVisible();
|
|
await expect(page.getByRole("button", { name: "Solid" })).toBeVisible();
|
|
await expect(page.getByRole("button", { name: "Image" })).toBeVisible();
|
|
await expect(page.getByRole("button", { name: "None" })).toBeVisible();
|
|
});
|
|
|
|
test("shows Device Frame section with frame types", async ({ loggedInPage: page }) => {
|
|
await page.goto("/beautify");
|
|
|
|
await expect(page.getByText("Device Frame")).toBeVisible();
|
|
await expect(page.getByRole("button", { name: "macOS" })).toBeVisible();
|
|
await expect(page.getByRole("button", { name: "Windows" })).toBeVisible();
|
|
await expect(page.getByRole("button", { name: "Browser" })).toBeVisible();
|
|
await expect(page.getByRole("button", { name: "iPhone" })).toBeVisible();
|
|
});
|
|
|
|
test("frame type shows Light/Dark theme toggle", async ({ loggedInPage: page }) => {
|
|
await page.goto("/beautify");
|
|
|
|
// macOS is default frame -- should show theme toggle
|
|
await expect(page.getByRole("button", { name: "Light" }).first()).toBeVisible();
|
|
await expect(page.getByRole("button", { name: "Dark" }).first()).toBeVisible();
|
|
});
|
|
|
|
test("shows Spacing section with padding and border radius sliders", async ({
|
|
loggedInPage: page,
|
|
}) => {
|
|
await page.goto("/beautify");
|
|
|
|
await expect(page.getByText("Spacing")).toBeVisible();
|
|
await expect(page.locator("#beautify-padding")).toBeVisible();
|
|
await expect(page.locator("#beautify-border-radius")).toBeVisible();
|
|
});
|
|
|
|
test("shows Shadow section with preset chips", async ({ loggedInPage: page }) => {
|
|
await page.goto("/beautify");
|
|
|
|
await expect(page.getByText("Shadow").first()).toBeVisible();
|
|
await expect(page.getByRole("button", { name: "Subtle" })).toBeVisible();
|
|
await expect(page.getByRole("button", { name: "Medium" })).toBeVisible();
|
|
await expect(page.getByRole("button", { name: "Dramatic" })).toBeVisible();
|
|
});
|
|
|
|
test("custom shadow shows blur/offset/color controls", async ({ loggedInPage: page }) => {
|
|
await page.goto("/beautify");
|
|
|
|
await page.getByRole("button", { name: "Custom" }).first().click();
|
|
await expect(page.locator("#beautify-shadow-blur")).toBeVisible();
|
|
await expect(page.locator("#beautify-shadow-x")).toBeVisible();
|
|
await expect(page.locator("#beautify-shadow-y")).toBeVisible();
|
|
await expect(page.locator("#beautify-shadow-color")).toBeVisible();
|
|
await expect(page.locator("#beautify-shadow-opacity")).toBeVisible();
|
|
});
|
|
|
|
test("shows collapsible Export Size section with social presets", async ({
|
|
loggedInPage: page,
|
|
}) => {
|
|
await page.goto("/beautify");
|
|
|
|
await expect(page.getByText("Export Size")).toBeVisible();
|
|
await page.getByText("Export Size").click();
|
|
await expect(page.getByRole("button", { name: "Original" })).toBeVisible();
|
|
await expect(page.getByRole("button", { name: "X/Twitter" })).toBeVisible();
|
|
await expect(page.getByRole("button", { name: "LinkedIn" })).toBeVisible();
|
|
});
|
|
|
|
test("shows collapsible Watermark section", async ({ loggedInPage: page }) => {
|
|
await page.goto("/beautify");
|
|
|
|
await expect(page.getByText("Watermark").first()).toBeVisible();
|
|
await page.getByText("Watermark").first().click();
|
|
await expect(page.locator("#beautify-watermark-text")).toBeVisible();
|
|
await expect(page.locator("#beautify-watermark-position")).toBeVisible();
|
|
await expect(page.locator("#beautify-watermark-opacity")).toBeVisible();
|
|
});
|
|
|
|
test("submit button disabled without file, enabled with file", async ({
|
|
loggedInPage: page,
|
|
}) => {
|
|
await page.goto("/beautify");
|
|
|
|
const submitBtn = page.getByTestId("beautify-submit");
|
|
await expect(submitBtn).toBeDisabled();
|
|
|
|
await uploadTestImage(page);
|
|
await expect(submitBtn).toBeEnabled();
|
|
});
|
|
|
|
test("processes beautify and shows download", async ({ loggedInPage: page }) => {
|
|
await page.goto("/beautify");
|
|
await uploadTestImage(page);
|
|
|
|
await page.getByTestId("beautify-submit").click();
|
|
await waitForProcessing(page);
|
|
|
|
await expect(page.getByTestId("beautify-download")).toBeVisible({ timeout: 15_000 });
|
|
});
|
|
});
|
|
});
|