Files
SnapOtter/tests/integration/gif-tools.test.ts
T
a1e11dff74 feat(gif-tools): SOTA upgrade with 6 processing modes (#52)
* feat(find-duplicates): upgrade to 128-bit dHash with metadata and thumbnails

* feat(find-duplicates): add custom-results display mode and duplicate store

* feat(find-duplicates): add results overview grid and detail comparison view

* feat(find-duplicates): overhaul settings with sensitivity presets and download actions

* feat(find-duplicates): update i18n description

* chore: replace jsqr with zxing-wasm for barcode reading

* feat(barcode-read): rewrite backend with zxing-wasm for all barcode types

* feat(barcode-read): rewrite frontend with multi-file, results table, progress, export

- Multi-file sequential processing with per-file progress
- Structured results table with type badges and copy per-result
- Copy All and Export CSV functionality
- Thorough scan toggle (maps to tryHarder in zxing-wasm)
- Before/after view shows annotated image with bounding boxes
- Updated tool description in constants and i18n

* feat(stitch): update tool name and description for redesign

* feat(stitch): add grid layout, alignment, border, radius, quality, and new resize modes

* feat(stitch): redesign settings UI with grid, alignment, border, radius, quality

* test(stitch): add stitch to e2e tool navigation suite

* feat(vectorize): redesign with dual-engine backend and preset-driven UI

- Backend: potrace for B&W, VTracer (@neplex/vectorizer) for full-color vectorization
- Frontend: 5 presets (logo, illustration, photo, sketch, custom)
- Settings: color precision, gradient step, detail, smoothing, corner threshold, invert
- Updated OpenAPI spec and i18n description

* feat(border): redesign with presets, shadow, padding color, swatches

- Add 8 one-click presets (Clean White, Gallery Black, Shadow, Rounded, Polaroid, Vintage, Minimal, Cinematic)
- Implement proper shadow rendering with blur, offset X/Y, color, opacity
- Add padding color control (was hardcoded white)
- Add color swatches for quick color selection
- Wrap in form for Enter key submission
- Add smart validation (requires at least one effect active)
- Align frontend/backend slider ranges
- Organize UI with sections and collapsible shadow toggle

* feat(split): overhaul image splitting with live grid overlay and tile preview

- Add interactive-split display mode with SplitCanvas component
- Live SVG grid overlay on uploaded image showing split boundaries
- Two split modes: Grid (NxM) and Tile Size (px dimensions)
- 9 grid presets (2x1, 1x2, 2x2, 3x1, 1x3, 3x3, 2x3, 3x2, 4x4)
- Output format selection (original/PNG/JPG/WebP) with quality slider
- Post-split tile preview thumbnails with individual download
- Download All as ZIP button
- HEIC/HEIF preview with loading spinner
- Backend: tile-size mode, output format conversion, quality control
- Zustand store for split state management

* feat(split): rewrite backend and frontend settings

Backend: tile-size mode, output format conversion, quality control.
Frontend: split modes, presets, format selector, tile preview grid.

* feat(border): add live CSS preview and remove before/after slider

- Add imageWrapperStyle prop to ImageViewer for live border preview
- Add onImageStyle callback through tool-page to settings components
- Change border displayMode to no-comparison (no slider)
- BorderControls sends live CSS styles (border, padding, radius, shadow)
- Preview updates instantly as user adjusts sliders or clicks presets

* fix: repair i18n file corrupted by formatter during merge conflict resolution

* feat(border): enable live CSS preview in right pane as settings change

* fix(border): keep CSS preview visible after processing for WYSIWYG consistency

* chore(gif-tools): scaffold for SOTA upgrade

- Add animated GIF test fixture (3 frames, 100x100)
- Update tool description to reflect new capabilities
- Add fflate dependency to API for ZIP creation

* feat(gif-tools): rewrite backend with 6 processing modes

Modes: resize (with percentage), optimize (colors/dither/effort),
speed (delay manipulation), reverse (frame reorder), extract
(single/range/all with ZIP), rotate (90/180/270 + flip).

Adds /api/v1/tools/gif-tools/info metadata endpoint.

* test(gif-tools): add integration tests for all 6 modes

Tests metadata endpoint, resize (pixel + percentage), optimize,
speed, reverse, extract (single/range/all), and rotate (angle + flip).

Fix animated.gif fixture to be a real 3-frame animation (was a single
100x300 frame). Fix reverse and rotate modes to process frames
individually and reassemble via GIF binary concatenation, since
Sharp 0.33.x loses page-height metadata when reconstructing from raw
pixel data.

* feat(gif-tools): rewrite frontend with tabbed 6-mode UI

- useGifInfo hook for metadata (frame count, dimensions, duration)
- Info bar showing GIF properties
- 3x2 mode grid: Resize, Optimize, Speed, Reverse, Extract, Rotate
- Animation modes disabled for static images
- Loop control (infinite/once/custom)
- Batch processing support

* test(gif-tools): add to representative tools in e2e suite

---------

Co-authored-by: Siddharth Kumar Sah <siddharth123sk@gmail.com>
2026-04-13 16:23:07 +08:00

355 lines
10 KiB
TypeScript

/**
* Integration tests for the SOTA GIF Tools.
*
* Tests all 6 processing modes (resize, optimize, speed, reverse, extract, rotate)
* plus the metadata endpoint. Uses a real Fastify server with in-memory SQLite.
*/
import { readFileSync } from "node:fs";
import { join } from "node:path";
import sharp from "sharp";
import { afterAll, beforeAll, describe, expect, it } from "vitest";
import { buildTestApp, createMultipartPayload, loginAsAdmin, type TestApp } from "./test-server.js";
const FIXTURES = join(__dirname, "..", "fixtures");
let testApp: TestApp;
let app: TestApp["app"];
let adminToken: string;
let animatedGif: Buffer;
beforeAll(async () => {
testApp = await buildTestApp();
app = testApp.app;
adminToken = await loginAsAdmin(app);
animatedGif = readFileSync(join(FIXTURES, "animated.gif"));
}, 30_000);
afterAll(async () => {
await testApp.cleanup();
}, 10_000);
function makePayload(settings: Record<string, unknown>, buffer?: Buffer, filename?: string) {
const { body, contentType } = createMultipartPayload([
{
name: "file",
filename: filename ?? "test.gif",
contentType: "image/gif",
content: buffer ?? animatedGif,
},
{ name: "settings", content: JSON.stringify(settings) },
]);
return { body, contentType };
}
// ── Metadata endpoint ─────────────────────────────────────────────
describe("POST /api/v1/tools/gif-tools/info", () => {
it("returns metadata for an animated GIF", async () => {
const { body: payload, contentType } = createMultipartPayload([
{
name: "file",
filename: "test.gif",
contentType: "image/gif",
content: animatedGif,
},
]);
const res = await app.inject({
method: "POST",
url: "/api/v1/tools/gif-tools/info",
payload,
headers: {
"content-type": contentType,
authorization: `Bearer ${adminToken}`,
},
});
expect(res.statusCode).toBe(200);
const data = JSON.parse(res.body);
expect(data.pages).toBe(3);
expect(data.width).toBe(100);
expect(data.height).toBe(100);
expect(data.delay).toHaveLength(3);
expect(data.duration).toBeGreaterThan(0);
expect(data.fileSize).toBeGreaterThan(0);
});
it("returns pages=1 for a static image", async () => {
const png = readFileSync(join(FIXTURES, "test-200x150.png"));
const { body: payload, contentType } = createMultipartPayload([
{
name: "file",
filename: "test.png",
contentType: "image/png",
content: png,
},
]);
const res = await app.inject({
method: "POST",
url: "/api/v1/tools/gif-tools/info",
payload,
headers: {
"content-type": contentType,
authorization: `Bearer ${adminToken}`,
},
});
expect(res.statusCode).toBe(200);
const data = JSON.parse(res.body);
expect(data.pages).toBe(1);
});
});
// ── Resize mode ───────────────────────────────────────────────────
describe("Resize mode", () => {
it("resizes animated GIF by pixel dimensions", async () => {
const { body: payload, contentType } = makePayload({
mode: "resize",
width: 50,
});
const res = await app.inject({
method: "POST",
url: "/api/v1/tools/gif-tools",
payload,
headers: {
"content-type": contentType,
authorization: `Bearer ${adminToken}`,
},
});
expect(res.statusCode).toBe(200);
const result = JSON.parse(res.body);
expect(result.downloadUrl).toBeDefined();
expect(result.processedSize).toBeLessThan(result.originalSize);
});
it("resizes animated GIF by percentage", async () => {
const { body: payload, contentType } = makePayload({
mode: "resize",
percentage: 50,
});
const res = await app.inject({
method: "POST",
url: "/api/v1/tools/gif-tools",
payload,
headers: {
"content-type": contentType,
authorization: `Bearer ${adminToken}`,
},
});
expect(res.statusCode).toBe(200);
const result = JSON.parse(res.body);
expect(result.processedSize).toBeLessThan(result.originalSize);
});
});
// ── Optimize mode ─────────────────────────────────────────────────
describe("Optimize mode", () => {
it("processes with custom color/effort settings", async () => {
const { body: payload, contentType } = makePayload({
mode: "optimize",
colors: 16,
effort: 10,
dither: 0.5,
});
const res = await app.inject({
method: "POST",
url: "/api/v1/tools/gif-tools",
payload,
headers: {
"content-type": contentType,
authorization: `Bearer ${adminToken}`,
},
});
expect(res.statusCode).toBe(200);
const result = JSON.parse(res.body);
expect(result.downloadUrl).toBeDefined();
});
});
// ── Speed mode ────────────────────────────────────────────────────
describe("Speed mode", () => {
it("doubles the playback speed", async () => {
const { body: payload, contentType } = makePayload({
mode: "speed",
speedFactor: 2,
});
const res = await app.inject({
method: "POST",
url: "/api/v1/tools/gif-tools",
payload,
headers: {
"content-type": contentType,
authorization: `Bearer ${adminToken}`,
},
});
expect(res.statusCode).toBe(200);
const result = JSON.parse(res.body);
// Download and verify the delay was halved
const dlRes = await app.inject({
method: "GET",
url: result.downloadUrl,
});
const meta = await sharp(dlRes.rawPayload).metadata();
const origMeta = await sharp(animatedGif).metadata();
const origDelay = origMeta.delay?.[0] ?? 100;
const newDelay = meta.delay?.[0] ?? 0;
expect(newDelay).toBe(Math.max(20, Math.round(origDelay / 2)));
});
});
// ── Reverse mode ──────────────────────────────────────────────────
describe("Reverse mode", () => {
it("reverses frame order of an animated GIF", async () => {
const { body: payload, contentType } = makePayload({
mode: "reverse",
});
const res = await app.inject({
method: "POST",
url: "/api/v1/tools/gif-tools",
payload,
headers: {
"content-type": contentType,
authorization: `Bearer ${adminToken}`,
},
});
expect(res.statusCode).toBe(200);
const result = JSON.parse(res.body);
expect(result.downloadUrl).toBeDefined();
// Download and verify it still has 3 frames
const dlRes = await app.inject({
method: "GET",
url: result.downloadUrl,
});
const meta = await sharp(dlRes.rawPayload).metadata();
expect(meta.pages).toBe(3);
});
});
// ── Extract mode ──────────────────────────────────────────────────
describe("Extract mode", () => {
it("extracts a single frame as PNG", async () => {
const { body: payload, contentType } = makePayload({
mode: "extract",
extractMode: "single",
frameNumber: 0,
extractFormat: "png",
});
const res = await app.inject({
method: "POST",
url: "/api/v1/tools/gif-tools",
payload,
headers: {
"content-type": contentType,
authorization: `Bearer ${adminToken}`,
},
});
expect(res.statusCode).toBe(200);
const result = JSON.parse(res.body);
expect(result.downloadUrl).toContain("_frame0.png");
});
it("extracts all frames as a ZIP", async () => {
const { body: payload, contentType } = makePayload({
mode: "extract",
extractMode: "all",
extractFormat: "png",
});
const res = await app.inject({
method: "POST",
url: "/api/v1/tools/gif-tools",
payload,
headers: {
"content-type": contentType,
authorization: `Bearer ${adminToken}`,
},
});
expect(res.statusCode).toBe(200);
const result = JSON.parse(res.body);
expect(result.downloadUrl).toContain("_frames.zip");
});
it("extracts a range of frames as a ZIP", async () => {
const { body: payload, contentType } = makePayload({
mode: "extract",
extractMode: "range",
frameStart: 0,
frameEnd: 1,
extractFormat: "webp",
});
const res = await app.inject({
method: "POST",
url: "/api/v1/tools/gif-tools",
payload,
headers: {
"content-type": contentType,
authorization: `Bearer ${adminToken}`,
},
});
expect(res.statusCode).toBe(200);
const result = JSON.parse(res.body);
expect(result.downloadUrl).toContain("_frames.zip");
});
});
// ── Rotate mode ───────────────────────────────────────────────────
describe("Rotate mode", () => {
it("rotates 90 degrees", async () => {
const { body: payload, contentType } = makePayload({
mode: "rotate",
angle: 90,
});
const res = await app.inject({
method: "POST",
url: "/api/v1/tools/gif-tools",
payload,
headers: {
"content-type": contentType,
authorization: `Bearer ${adminToken}`,
},
});
expect(res.statusCode).toBe(200);
const result = JSON.parse(res.body);
expect(result.downloadUrl).toBeDefined();
});
it("flips horizontally", async () => {
const { body: payload, contentType } = makePayload({
mode: "rotate",
flipH: true,
});
const res = await app.inject({
method: "POST",
url: "/api/v1/tools/gif-tools",
payload,
headers: {
"content-type": contentType,
authorization: `Bearer ${adminToken}`,
},
});
expect(res.statusCode).toBe(200);
});
});