Files
SnapOtter/tests/integration/text-overlay.test.ts
T
SnapOtter 649ad5db9e test: massive test coverage expansion (+1,437 tests, 22 new files)
Expand test coverage across all layers via 14 parallel agents:

Unit tests (3,378 total, +534):
- First-ever AI sidecar tests (157 tests covering bridge lifecycle, all 12 tool modules)
- API route infrastructure (auth, pipeline, batch, settings, teams, roles, audit, api-keys, files, docs)
- Lib coverage improvements (audit 7%->95%, worker-pool 33%->100%)
- Web store/lib gap fills (features-store, tool-registry)

Integration tests (4,403 total, +903):
- Expanded 19 tool test files with parameter variations, format edge cases, boundary values
- Cross-format matrix: 290 tests covering 14 tools x 17 formats
- Adversarial/edge cases: 63 tests for extreme inputs, concurrent requests, corrupted files

E2E-Docker (125 new tests):
- Expanded 8 spec files + 1 new file covering all 49 tools
- Added HEIC/format handling, auth failures, download verification

GUI E2E (expanded 28 spec files):
- Navigation, responsive layout, keyboard shortcuts
- All 51 tool UIs with settings, processing, display modes
- Batch/pipeline workflows, settings/RBAC, visual regression
- Resilience, accessibility (ARIA, contrast, focus), performance budgets
2026-05-09 09:02:29 +08:00

811 lines
28 KiB
TypeScript

/**
* Integration tests for the text-overlay tool.
*
* Adds styled text onto an image with position, color, background box,
* and shadow options.
*/
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");
const PNG = readFileSync(join(FIXTURES, "test-200x150.png"));
let testApp: TestApp;
let app: TestApp["app"];
let adminToken: string;
beforeAll(async () => {
testApp = await buildTestApp();
app = testApp.app;
adminToken = await loginAsAdmin(app);
}, 30_000);
afterAll(async () => {
await testApp.cleanup();
}, 10_000);
describe("text-overlay", () => {
it("adds text overlay with default settings", async () => {
const { body, contentType } = createMultipartPayload([
{ name: "file", filename: "test.png", contentType: "image/png", content: PNG },
{ name: "settings", content: JSON.stringify({ text: "Hello World" }) },
]);
const res = await app.inject({
method: "POST",
url: "/api/v1/tools/text-overlay",
headers: { authorization: `Bearer ${adminToken}`, "content-type": contentType },
body,
});
expect(res.statusCode).toBe(200);
const json = JSON.parse(res.body);
expect(json.downloadUrl).toBeDefined();
expect(json.jobId).toBeDefined();
expect(json.processedSize).toBeGreaterThan(0);
});
it("output differs from input", async () => {
const { body, contentType } = createMultipartPayload([
{ name: "file", filename: "test.png", contentType: "image/png", content: PNG },
{ name: "settings", content: JSON.stringify({ text: "Overlay" }) },
]);
const res = await app.inject({
method: "POST",
url: "/api/v1/tools/text-overlay",
headers: { authorization: `Bearer ${adminToken}`, "content-type": contentType },
body,
});
expect(res.statusCode).toBe(200);
const json = JSON.parse(res.body);
const dlRes = await app.inject({
method: "GET",
url: json.downloadUrl,
headers: { authorization: `Bearer ${adminToken}` },
});
expect(dlRes.statusCode).toBe(200);
expect(Buffer.from(dlRes.rawPayload).equals(PNG)).toBe(false);
});
it.each(["top", "center", "bottom"] as const)("supports position: %s", async (position) => {
const { body, contentType } = createMultipartPayload([
{ name: "file", filename: "test.png", contentType: "image/png", content: PNG },
{ name: "settings", content: JSON.stringify({ text: "Pos", position }) },
]);
const res = await app.inject({
method: "POST",
url: "/api/v1/tools/text-overlay",
headers: { authorization: `Bearer ${adminToken}`, "content-type": contentType },
body,
});
expect(res.statusCode).toBe(200);
});
it("applies custom color and font size", async () => {
const { body, contentType } = createMultipartPayload([
{ name: "file", filename: "test.png", contentType: "image/png", content: PNG },
{
name: "settings",
content: JSON.stringify({ text: "Styled", color: "#FF0000", fontSize: 24 }),
},
]);
const res = await app.inject({
method: "POST",
url: "/api/v1/tools/text-overlay",
headers: { authorization: `Bearer ${adminToken}`, "content-type": contentType },
body,
});
expect(res.statusCode).toBe(200);
});
it("enables background box", async () => {
const { body, contentType } = createMultipartPayload([
{ name: "file", filename: "test.png", contentType: "image/png", content: PNG },
{
name: "settings",
content: JSON.stringify({
text: "With BG",
backgroundBox: true,
backgroundColor: "#333333",
}),
},
]);
const res = await app.inject({
method: "POST",
url: "/api/v1/tools/text-overlay",
headers: { authorization: `Bearer ${adminToken}`, "content-type": contentType },
body,
});
expect(res.statusCode).toBe(200);
});
it("disables shadow", async () => {
const { body, contentType } = createMultipartPayload([
{ name: "file", filename: "test.png", contentType: "image/png", content: PNG },
{
name: "settings",
content: JSON.stringify({ text: "No Shadow", shadow: false }),
},
]);
const res = await app.inject({
method: "POST",
url: "/api/v1/tools/text-overlay",
headers: { authorization: `Bearer ${adminToken}`, "content-type": contentType },
body,
});
expect(res.statusCode).toBe(200);
});
it("rejects request without a file", async () => {
const { body, contentType } = createMultipartPayload([
{ name: "settings", content: JSON.stringify({ text: "NoFile" }) },
]);
const res = await app.inject({
method: "POST",
url: "/api/v1/tools/text-overlay",
headers: { authorization: `Bearer ${adminToken}`, "content-type": contentType },
body,
});
expect(res.statusCode).toBe(400);
});
it("rejects request without text", async () => {
const { body, contentType } = createMultipartPayload([
{ name: "file", filename: "test.png", contentType: "image/png", content: PNG },
{ name: "settings", content: JSON.stringify({}) },
]);
const res = await app.inject({
method: "POST",
url: "/api/v1/tools/text-overlay",
headers: { authorization: `Bearer ${adminToken}`, "content-type": contentType },
body,
});
expect(res.statusCode).toBe(400);
const json = JSON.parse(res.body);
expect(json.error).toContain("Invalid settings");
});
it("rejects invalid color format", async () => {
const { body, contentType } = createMultipartPayload([
{ name: "file", filename: "test.png", contentType: "image/png", content: PNG },
{ name: "settings", content: JSON.stringify({ text: "Bad", color: "blue" }) },
]);
const res = await app.inject({
method: "POST",
url: "/api/v1/tools/text-overlay",
headers: { authorization: `Bearer ${adminToken}`, "content-type": contentType },
body,
});
expect(res.statusCode).toBe(400);
});
it("rejects fontSize out of range", async () => {
const { body, contentType } = createMultipartPayload([
{ name: "file", filename: "test.png", contentType: "image/png", content: PNG },
{ name: "settings", content: JSON.stringify({ text: "Big", fontSize: 999 }) },
]);
const res = await app.inject({
method: "POST",
url: "/api/v1/tools/text-overlay",
headers: { authorization: `Bearer ${adminToken}`, "content-type": contentType },
body,
});
expect(res.statusCode).toBe(400);
});
// ── Branch coverage: lines 40-41 (metadata fallback for width/height) ──
it("handles tiny 1x1 image input", async () => {
const TINY = readFileSync(join(FIXTURES, "test-1x1.png"));
const { body, contentType } = createMultipartPayload([
{ name: "file", filename: "tiny.png", contentType: "image/png", content: TINY },
{ name: "settings", content: JSON.stringify({ text: "Tiny", position: "center" }) },
]);
const res = await app.inject({
method: "POST",
url: "/api/v1/tools/text-overlay",
headers: { authorization: `Bearer ${adminToken}`, "content-type": contentType },
body,
});
expect(res.statusCode).toBe(200);
const json = JSON.parse(res.body);
expect(json.downloadUrl).toBeDefined();
});
// ── HEIC input handling ───────────────────────────────────────────
it("handles HEIC input", { timeout: 120_000 }, async () => {
const HEIC = readFileSync(join(FIXTURES, "test-200x150.heic"));
const { body, contentType } = createMultipartPayload([
{ name: "file", filename: "photo.heic", contentType: "image/heic", content: HEIC },
{ name: "settings", content: JSON.stringify({ text: "HEIC overlay" }) },
]);
const res = await app.inject({
method: "POST",
url: "/api/v1/tools/text-overlay",
headers: { authorization: `Bearer ${adminToken}`, "content-type": contentType },
body,
});
expect(res.statusCode).toBe(200);
const json = JSON.parse(res.body);
expect(json.downloadUrl).toBeDefined();
});
// ── Background box + shadow combined ──────────────────────────────
it("combines background box and shadow with position top", async () => {
const { body, contentType } = createMultipartPayload([
{ name: "file", filename: "test.png", contentType: "image/png", content: PNG },
{
name: "settings",
content: JSON.stringify({
text: "Combined",
position: "top",
backgroundBox: true,
backgroundColor: "#FF0000",
shadow: true,
}),
},
]);
const res = await app.inject({
method: "POST",
url: "/api/v1/tools/text-overlay",
headers: { authorization: `Bearer ${adminToken}`, "content-type": contentType },
body,
});
expect(res.statusCode).toBe(200);
const json = JSON.parse(res.body);
expect(json.downloadUrl).toBeDefined();
});
// ── XML escaping in text ──────────────────────────────────────────
it("handles special XML characters in overlay text", async () => {
const { body, contentType } = createMultipartPayload([
{ name: "file", filename: "test.png", contentType: "image/png", content: PNG },
{
name: "settings",
content: JSON.stringify({ text: '<Test & "Quotes">' }),
},
]);
const res = await app.inject({
method: "POST",
url: "/api/v1/tools/text-overlay",
headers: { authorization: `Bearer ${adminToken}`, "content-type": contentType },
body,
});
expect(res.statusCode).toBe(200);
});
// ── JPEG format preserves correctly ───────────────────────────────
it("preserves JPEG format", async () => {
const JPG = readFileSync(join(FIXTURES, "test-100x100.jpg"));
const { body, contentType } = createMultipartPayload([
{ name: "file", filename: "test.jpg", contentType: "image/jpeg", content: JPG },
{ name: "settings", content: JSON.stringify({ text: "JPEG" }) },
]);
const res = await app.inject({
method: "POST",
url: "/api/v1/tools/text-overlay",
headers: { authorization: `Bearer ${adminToken}`, "content-type": contentType },
body,
});
expect(res.statusCode).toBe(200);
const json = JSON.parse(res.body);
const dlRes = await app.inject({
method: "GET",
url: json.downloadUrl,
headers: { authorization: `Bearer ${adminToken}` },
});
const meta = await sharp(dlRes.rawPayload).metadata();
expect(meta.format).toBe("jpeg");
});
// ── Large file (stress test) ──────────────────────────────────────
it("handles stress-large.jpg", async () => {
const LARGE = readFileSync(join(FIXTURES, "content", "stress-large.jpg"));
const { body, contentType } = createMultipartPayload([
{ name: "file", filename: "large.jpg", contentType: "image/jpeg", content: LARGE },
{ name: "settings", content: JSON.stringify({ text: "Stress test", fontSize: 100 }) },
]);
const res = await app.inject({
method: "POST",
url: "/api/v1/tools/text-overlay",
headers: { authorization: `Bearer ${adminToken}`, "content-type": contentType },
body,
});
expect(res.statusCode).toBe(200);
const json = JSON.parse(res.body);
expect(json.processedSize).toBeGreaterThan(0);
});
// ── No shadow, no background box ──────────────────────────────────
it("renders text with no shadow and no background box", async () => {
const { body, contentType } = createMultipartPayload([
{ name: "file", filename: "test.png", contentType: "image/png", content: PNG },
{
name: "settings",
content: JSON.stringify({ text: "Minimal", shadow: false, backgroundBox: false }),
},
]);
const res = await app.inject({
method: "POST",
url: "/api/v1/tools/text-overlay",
headers: { authorization: `Bearer ${adminToken}`, "content-type": contentType },
body,
});
expect(res.statusCode).toBe(200);
});
// ── Rejects text exceeding max length ────────────────────────────
it("rejects text exceeding max length (>500 chars)", async () => {
const longText = "B".repeat(501);
const { body, contentType } = createMultipartPayload([
{ name: "file", filename: "test.png", contentType: "image/png", content: PNG },
{ name: "settings", content: JSON.stringify({ text: longText }) },
]);
const res = await app.inject({
method: "POST",
url: "/api/v1/tools/text-overlay",
headers: { authorization: `Bearer ${adminToken}`, "content-type": contentType },
body,
});
expect(res.statusCode).toBe(400);
});
// ── WebP input ───────────────────────────────────────────────────
it("processes WebP input", async () => {
const WEBP = readFileSync(join(FIXTURES, "test-50x50.webp"));
const { body, contentType } = createMultipartPayload([
{ name: "file", filename: "test.webp", contentType: "image/webp", content: WEBP },
{ name: "settings", content: JSON.stringify({ text: "WebP overlay" }) },
]);
const res = await app.inject({
method: "POST",
url: "/api/v1/tools/text-overlay",
headers: { authorization: `Bearer ${adminToken}`, "content-type": contentType },
body,
});
expect(res.statusCode).toBe(200);
const json = JSON.parse(res.body);
expect(json.downloadUrl).toBeDefined();
});
// ── Rejects unauthenticated request ──────────────────────────────
it("rejects unauthenticated request", async () => {
const { body, contentType } = createMultipartPayload([
{ name: "file", filename: "test.png", contentType: "image/png", content: PNG },
{ name: "settings", content: JSON.stringify({ text: "Unauth" }) },
]);
const res = await app.inject({
method: "POST",
url: "/api/v1/tools/text-overlay",
headers: { "content-type": contentType },
body,
});
expect(res.statusCode).toBe(401);
});
// ── Background box with bottom position ──────────────────────────
it("applies background box at bottom position", async () => {
const { body, contentType } = createMultipartPayload([
{ name: "file", filename: "test.png", contentType: "image/png", content: PNG },
{
name: "settings",
content: JSON.stringify({
text: "Bottom box",
position: "bottom",
backgroundBox: true,
backgroundColor: "#0000FF",
shadow: true,
}),
},
]);
const res = await app.inject({
method: "POST",
url: "/api/v1/tools/text-overlay",
headers: { authorization: `Bearer ${adminToken}`, "content-type": contentType },
body,
});
expect(res.statusCode).toBe(200);
const json = JSON.parse(res.body);
expect(json.downloadUrl).toBeDefined();
});
// ── Max font size ────────────────────────────────────────────────
it("applies maximum font size (200)", async () => {
const { body, contentType } = createMultipartPayload([
{ name: "file", filename: "test.png", contentType: "image/png", content: PNG },
{
name: "settings",
content: JSON.stringify({ text: "Max", fontSize: 200 }),
},
]);
const res = await app.inject({
method: "POST",
url: "/api/v1/tools/text-overlay",
headers: { authorization: `Bearer ${adminToken}`, "content-type": contentType },
body,
});
expect(res.statusCode).toBe(200);
});
// ── Min font size ────────────────────────────────────────────────
it("applies minimum font size (8)", async () => {
const { body, contentType } = createMultipartPayload([
{ name: "file", filename: "test.png", contentType: "image/png", content: PNG },
{
name: "settings",
content: JSON.stringify({ text: "Tiny text", fontSize: 8 }),
},
]);
const res = await app.inject({
method: "POST",
url: "/api/v1/tools/text-overlay",
headers: { authorization: `Bearer ${adminToken}`, "content-type": contentType },
body,
});
expect(res.statusCode).toBe(200);
});
// ── Invalid backgroundColor format ───────────────────────────────
it("rejects invalid backgroundColor format", async () => {
const { body, contentType } = createMultipartPayload([
{ name: "file", filename: "test.png", contentType: "image/png", content: PNG },
{
name: "settings",
content: JSON.stringify({
text: "Bad BG",
backgroundBox: true,
backgroundColor: "green",
}),
},
]);
const res = await app.inject({
method: "POST",
url: "/api/v1/tools/text-overlay",
headers: { authorization: `Bearer ${adminToken}`, "content-type": contentType },
body,
});
expect(res.statusCode).toBe(400);
});
// ── HEIF input ───────────────────────────────────────────────────
it(
"handles HEIF input (motorcycle.heif)",
{ timeout: 120_000 },
async () => {
const HEIF = readFileSync(join(FIXTURES, "content", "motorcycle.heif"));
const { body, contentType } = createMultipartPayload([
{ name: "file", filename: "photo.heif", contentType: "image/heif", content: HEIF },
{ name: "settings", content: JSON.stringify({ text: "HEIF overlay" }) },
]);
const res = await app.inject({
method: "POST",
url: "/api/v1/tools/text-overlay",
headers: { authorization: `Bearer ${adminToken}`, "content-type": contentType },
body,
});
expect(res.statusCode).toBe(200);
const json = JSON.parse(res.body);
expect(json.downloadUrl).toBeDefined();
},
60_000,
);
// ── Animated GIF input ──────────────────────────────────────────
it("handles animated GIF input", async () => {
const GIF = readFileSync(join(FIXTURES, "animated.gif"));
const { body, contentType } = createMultipartPayload([
{ name: "file", filename: "anim.gif", contentType: "image/gif", content: GIF },
{ name: "settings", content: JSON.stringify({ text: "GIF overlay" }) },
]);
const res = await app.inject({
method: "POST",
url: "/api/v1/tools/text-overlay",
headers: { authorization: `Bearer ${adminToken}`, "content-type": contentType },
body,
});
expect(res.statusCode).toBe(200);
const json = JSON.parse(res.body);
expect(json.downloadUrl).toBeDefined();
});
// ── SVG input ───────────────────────────────────────────────────
it("handles SVG input", async () => {
const SVG = readFileSync(join(FIXTURES, "test-100x100.svg"));
const { body, contentType } = createMultipartPayload([
{ name: "file", filename: "icon.svg", contentType: "image/svg+xml", content: SVG },
{ name: "settings", content: JSON.stringify({ text: "SVG overlay" }) },
]);
const res = await app.inject({
method: "POST",
url: "/api/v1/tools/text-overlay",
headers: { authorization: `Bearer ${adminToken}`, "content-type": contentType },
body,
});
expect(res.statusCode).toBe(200);
const json = JSON.parse(res.body);
expect(json.downloadUrl).toBeDefined();
});
// ── Preserves image dimensions ───────────────────────────────────
it("preserves image dimensions after text overlay", async () => {
const { body, contentType } = createMultipartPayload([
{ name: "file", filename: "test.png", contentType: "image/png", content: PNG },
{ name: "settings", content: JSON.stringify({ text: "Dim test" }) },
]);
const res = await app.inject({
method: "POST",
url: "/api/v1/tools/text-overlay",
headers: { authorization: `Bearer ${adminToken}`, "content-type": contentType },
body,
});
expect(res.statusCode).toBe(200);
const json = JSON.parse(res.body);
const dlRes = await app.inject({
method: "GET",
url: json.downloadUrl,
headers: { authorization: `Bearer ${adminToken}` },
});
const meta = await sharp(dlRes.rawPayload).metadata();
expect(meta.width).toBe(200);
expect(meta.height).toBe(150);
});
// ── Multiline text support ───────────────────────────────────────
it("handles multiline text with newlines", async () => {
const { body, contentType } = createMultipartPayload([
{ name: "file", filename: "test.png", contentType: "image/png", content: PNG },
{
name: "settings",
content: JSON.stringify({ text: "Line 1\nLine 2\nLine 3" }),
},
]);
const res = await app.inject({
method: "POST",
url: "/api/v1/tools/text-overlay",
headers: { authorization: `Bearer ${adminToken}`, "content-type": contentType },
body,
});
expect(res.statusCode).toBe(200);
const json = JSON.parse(res.body);
expect(json.downloadUrl).toBeDefined();
});
// ── TIFF input format ───────────────────────────────────────────
it("processes TIFF input format", async () => {
const TIFF = readFileSync(join(FIXTURES, "formats", "sample.tiff"));
const { body, contentType } = createMultipartPayload([
{ name: "file", filename: "test.tiff", contentType: "image/tiff", content: TIFF },
{ name: "settings", content: JSON.stringify({ text: "TIFF overlay" }) },
]);
const res = await app.inject({
method: "POST",
url: "/api/v1/tools/text-overlay",
headers: { authorization: `Bearer ${adminToken}`, "content-type": contentType },
body,
});
expect(res.statusCode).toBe(200);
const json = JSON.parse(res.body);
expect(json.downloadUrl).toBeDefined();
});
// ── Rejects fontSize below minimum ──────────────────────────────
it("rejects fontSize below minimum (<8)", async () => {
const { body, contentType } = createMultipartPayload([
{ name: "file", filename: "test.png", contentType: "image/png", content: PNG },
{ name: "settings", content: JSON.stringify({ text: "Bad", fontSize: 7 }) },
]);
const res = await app.inject({
method: "POST",
url: "/api/v1/tools/text-overlay",
headers: { authorization: `Bearer ${adminToken}`, "content-type": contentType },
body,
});
expect(res.statusCode).toBe(400);
});
// ── Rejects fontSize above maximum ──────────────────────────────
it("rejects fontSize above maximum (>200)", async () => {
const { body, contentType } = createMultipartPayload([
{ name: "file", filename: "test.png", contentType: "image/png", content: PNG },
{ name: "settings", content: JSON.stringify({ text: "Bad", fontSize: 201 }) },
]);
const res = await app.inject({
method: "POST",
url: "/api/v1/tools/text-overlay",
headers: { authorization: `Bearer ${adminToken}`, "content-type": contentType },
body,
});
expect(res.statusCode).toBe(400);
});
// ── Background box with different positions ─────────────────────
it("applies background box at center position", async () => {
const { body, contentType } = createMultipartPayload([
{ name: "file", filename: "test.png", contentType: "image/png", content: PNG },
{
name: "settings",
content: JSON.stringify({
text: "Center box",
position: "center",
backgroundBox: true,
backgroundColor: "#990000",
}),
},
]);
const res = await app.inject({
method: "POST",
url: "/api/v1/tools/text-overlay",
headers: { authorization: `Bearer ${adminToken}`, "content-type": contentType },
body,
});
expect(res.statusCode).toBe(200);
const json = JSON.parse(res.body);
expect(json.downloadUrl).toBeDefined();
});
// ── Invalid position value ──────────────────────────────────────
it("rejects invalid position value", async () => {
const { body, contentType } = createMultipartPayload([
{ name: "file", filename: "test.png", contentType: "image/png", content: PNG },
{
name: "settings",
content: JSON.stringify({ text: "Bad", position: "left" }),
},
]);
const res = await app.inject({
method: "POST",
url: "/api/v1/tools/text-overlay",
headers: { authorization: `Bearer ${adminToken}`, "content-type": contentType },
body,
});
expect(res.statusCode).toBe(400);
});
// ── Unicode text support ────────────────────────────────────────
it("handles unicode text characters", async () => {
const { body, contentType } = createMultipartPayload([
{ name: "file", filename: "test.png", contentType: "image/png", content: PNG },
{
name: "settings",
content: JSON.stringify({ text: "Hello World 123" }),
},
]);
const res = await app.inject({
method: "POST",
url: "/api/v1/tools/text-overlay",
headers: { authorization: `Bearer ${adminToken}`, "content-type": contentType },
body,
});
expect(res.statusCode).toBe(200);
const json = JSON.parse(res.body);
expect(json.downloadUrl).toBeDefined();
});
// ── All parameters combined ──────────────────────────────────────
it("applies all parameters at once", async () => {
const { body, contentType } = createMultipartPayload([
{ name: "file", filename: "test.png", contentType: "image/png", content: PNG },
{
name: "settings",
content: JSON.stringify({
text: "Full",
fontSize: 24,
color: "#00FF00",
position: "center",
backgroundBox: true,
backgroundColor: "#333333",
shadow: true,
}),
},
]);
const res = await app.inject({
method: "POST",
url: "/api/v1/tools/text-overlay",
headers: { authorization: `Bearer ${adminToken}`, "content-type": contentType },
body,
});
expect(res.statusCode).toBe(200);
const json = JSON.parse(res.body);
expect(json.downloadUrl).toBeDefined();
});
});