Files
SnapOtter/tests/e2e-docker/layout-tools.spec.ts
T
SnapOtterandGitHub d10d0f544f fix: release QA hardening across processing, media, security, and CI gates (#649)
A release-readiness QA pass over the whole product. The commits split into
defects a user would hit and gates that were reporting green while measuring
nothing.

## Fixes that change behaviour

Rate limiting was bypassable on every install: TRUST_PROXY defaulted to true, so
request.ip came from a client-set header and a forged X-Forwarded-For got past
the login limiter. The default is now a private-network trust list.

A transient Postgres outage stranded in-flight jobs, leaving finished output on
disk with no row pointing at it. A reconciler now resolves those rows and adopts
the bytes rather than dropping the work.

A Redis connection that moved to a new address wedged every read-blocked
consumer, so completions stopped signalling while health still answered 200.
Socket timeouts plus subscriber pings recover it.

Installing more than one AI bundle left the shared venv multi-versioned and
silently broke three tools. The installer now reconciles distributions to one
version each.

Converting an image to JXL at quality 1 through 4 returned a 500, because
libjxl 0.7 rejects the distance those values compute. The quality is floored at
what the encoder honours. A missing ffmpeg was also reported to the user as a
corrupt upload; it now says the engine is unavailable.

RAW uploads reached an unpatched LibRaw on arm64, so it is built from source at
0.22.2, and the release scan was split so it can fail on an unfixed critical
instead of hiding it behind ignore-unfixed.

## Gates that could not fail

Two mutation lanes ran zero mutants because Stryker crawled the gitignored docs
build; coverage discarded its whole report on any failing test; the lint gate
skipped root tests, scripts, and two workspaces; and several generated matrices
counted a host missing ffmpeg as a passing tool. Each now measures what it
claims.

Full evidence and the outstanding release items are tracked locally and are not
part of this branch.
2026-07-27 15:37:30 +08:00

1027 lines
38 KiB
TypeScript

import { readFileSync } from "node:fs";
import { join } from "node:path";
import { expect, test } from "@playwright/test";
// ─── Layout Tools ──────────────────────────────────────────────────
// Extended tests for: collage (templates, gaps, formats), stitch
// (alignment, large sets), split (asymmetric grids, edge cases),
// border (rounded, gradient, asymmetric sizes)
// Complements creative-tools.spec.ts with deeper layout coverage.
const FIXTURES = join(process.cwd(), "tests", "fixtures", "image", "valid");
const FORMATS = join(process.cwd(), "tests", "fixtures", "image", "formats");
const CONTENT = FIXTURES;
let token: string;
test.beforeAll(async ({ request }) => {
const res = await request.post("/api/auth/login", {
data: { username: "admin", password: "admin" },
});
const body = await res.json();
token = body.token;
});
function fixture(name: string): Buffer {
return readFileSync(join(FIXTURES, name));
}
function formatFixture(name: string): Buffer {
return readFileSync(join(FORMATS, name));
}
function contentFixture(name: string): Buffer {
return readFileSync(join(CONTENT, name));
}
/**
* Build a raw multipart/form-data body for multi-file uploads.
*/
function buildMultipart(
files: Array<{ name: string; filename: string; contentType: string; buffer: Buffer }>,
fields: Array<{ name: string; value: string }>,
): { body: Buffer; contentType: string } {
const boundary = `----PlaywrightBoundary${Date.now()}`;
const parts: Buffer[] = [];
for (const file of files) {
parts.push(
Buffer.from(
`--${boundary}\r\nContent-Disposition: form-data; name="${file.name}"; filename="${file.filename}"\r\nContent-Type: ${file.contentType}\r\n\r\n`,
),
);
parts.push(file.buffer);
parts.push(Buffer.from("\r\n"));
}
for (const field of fields) {
parts.push(
Buffer.from(
`--${boundary}\r\nContent-Disposition: form-data; name="${field.name}"\r\n\r\n${field.value}\r\n`,
),
);
}
parts.push(Buffer.from(`--${boundary}--\r\n`));
return {
body: Buffer.concat(parts),
contentType: `multipart/form-data; boundary=${boundary}`,
};
}
const PNG_200x150 = fixture("test-200x150.png");
const JPG_100x100 = fixture("test-100x100.jpg");
const WEBP_50x50 = fixture("test-50x50.webp");
const HEIC_200x150 = fixture("test-200x150.heic");
const JPG_PORTRAIT = fixture("test-portrait.jpg");
const JPG_SAMPLE = formatFixture("sample.jpg");
// ─── Collage — Extended Templates ──────────────────────────────────
test.describe("Collage — extended", () => {
test("3-image collage with vertical layout", async ({ request }) => {
const { body, contentType } = buildMultipart(
[
{ name: "file", filename: "a.png", contentType: "image/png", buffer: PNG_200x150 },
{ name: "file", filename: "b.jpg", contentType: "image/jpeg", buffer: JPG_100x100 },
{ name: "file", filename: "c.webp", contentType: "image/webp", buffer: WEBP_50x50 },
],
[
{
name: "settings",
value: JSON.stringify({
templateId: "3-v-equal",
width: 400,
height: 600,
format: "png",
}),
},
],
);
const res = await request.post("/api/v1/tools/image/collage", {
headers: { Authorization: `Bearer ${token}`, "Content-Type": contentType },
data: body,
});
expect(res.ok()).toBe(true);
const json = await res.json();
expect(json.downloadUrl).toBeTruthy();
expect(json.processedSize).toBeGreaterThan(0);
});
test("collage with wide gap and dark background", async ({ request }) => {
const { body, contentType } = buildMultipart(
[
{ name: "file", filename: "a.png", contentType: "image/png", buffer: PNG_200x150 },
{ name: "file", filename: "b.jpg", contentType: "image/jpeg", buffer: JPG_100x100 },
],
[
{
name: "settings",
value: JSON.stringify({
templateId: "2-h-equal",
gap: 30,
backgroundColor: "#1a1a1a",
outputFormat: "jpeg",
}),
},
],
);
const res = await request.post("/api/v1/tools/image/collage", {
headers: { Authorization: `Bearer ${token}`, "Content-Type": contentType },
data: body,
});
expect(res.ok()).toBe(true);
const json = await res.json();
expect(json.downloadUrl).toBeTruthy();
});
test("collage with 4 images", async ({ request }) => {
const { body, contentType } = buildMultipart(
[
{ name: "file", filename: "a.png", contentType: "image/png", buffer: PNG_200x150 },
{ name: "file", filename: "b.jpg", contentType: "image/jpeg", buffer: JPG_100x100 },
{ name: "file", filename: "c.webp", contentType: "image/webp", buffer: WEBP_50x50 },
{ name: "file", filename: "d.jpg", contentType: "image/jpeg", buffer: JPG_PORTRAIT },
],
[
{
name: "settings",
value: JSON.stringify({
templateId: "4-grid",
width: 800,
height: 800,
gap: 5,
format: "png",
}),
},
],
);
const res = await request.post("/api/v1/tools/image/collage", {
headers: { Authorization: `Bearer ${token}`, "Content-Type": contentType },
data: body,
});
expect(res.ok()).toBe(true);
const json = await res.json();
expect(json.downloadUrl).toBeTruthy();
});
test("collage with zero gap", async ({ request }) => {
const { body, contentType } = buildMultipart(
[
{ name: "file", filename: "a.png", contentType: "image/png", buffer: PNG_200x150 },
{ name: "file", filename: "b.jpg", contentType: "image/jpeg", buffer: JPG_100x100 },
],
[
{
name: "settings",
value: JSON.stringify({
templateId: "2-h-equal",
gap: 0,
outputFormat: "png",
}),
},
],
);
const res = await request.post("/api/v1/tools/image/collage", {
headers: { Authorization: `Bearer ${token}`, "Content-Type": contentType },
data: body,
});
expect(res.ok()).toBe(true);
const json = await res.json();
expect(json.downloadUrl).toBeTruthy();
});
test("collage with single image still succeeds", async ({ request }) => {
const { body, contentType } = buildMultipart(
[{ name: "file", filename: "a.png", contentType: "image/png", buffer: PNG_200x150 }],
[
{
name: "settings",
value: JSON.stringify({ templateId: "2-h-equal", width: 400 }),
},
],
);
const res = await request.post("/api/v1/tools/image/collage", {
headers: { Authorization: `Bearer ${token}`, "Content-Type": contentType },
data: body,
});
expect(res.ok()).toBe(true);
const json = await res.json();
expect(json.downloadUrl).toBeTruthy();
});
});
// ─── Stitch — Extended ─────────────────────────────────────────────
test.describe("Stitch — extended", () => {
test("stitch 4 images horizontally", async ({ request }) => {
const { body, contentType } = buildMultipart(
[
{ name: "file", filename: "a.png", contentType: "image/png", buffer: PNG_200x150 },
{ name: "file", filename: "b.jpg", contentType: "image/jpeg", buffer: JPG_100x100 },
{ name: "file", filename: "c.webp", contentType: "image/webp", buffer: WEBP_50x50 },
{ name: "file", filename: "d.jpg", contentType: "image/jpeg", buffer: JPG_PORTRAIT },
],
[{ name: "settings", value: JSON.stringify({ direction: "horizontal", gap: 5 }) }],
);
const res = await request.post("/api/v1/tools/image/stitch", {
headers: { Authorization: `Bearer ${token}`, "Content-Type": contentType },
data: body,
});
expect(res.ok()).toBe(true);
const json = await res.json();
expect(json.downloadUrl).toBeTruthy();
expect(json.processedSize).toBeGreaterThan(0);
});
test("stitch 4 images vertically", async ({ request }) => {
const { body, contentType } = buildMultipart(
[
{ name: "file", filename: "a.png", contentType: "image/png", buffer: PNG_200x150 },
{ name: "file", filename: "b.jpg", contentType: "image/jpeg", buffer: JPG_100x100 },
{ name: "file", filename: "c.webp", contentType: "image/webp", buffer: WEBP_50x50 },
{ name: "file", filename: "d.jpg", contentType: "image/jpeg", buffer: JPG_PORTRAIT },
],
[{ name: "settings", value: JSON.stringify({ direction: "vertical", gap: 10 }) }],
);
const res = await request.post("/api/v1/tools/image/stitch", {
headers: { Authorization: `Bearer ${token}`, "Content-Type": contentType },
data: body,
});
expect(res.ok()).toBe(true);
const json = await res.json();
expect(json.downloadUrl).toBeTruthy();
});
test("stitch with wide gap and custom background", async ({ request }) => {
const { body, contentType } = buildMultipart(
[
{ name: "file", filename: "a.png", contentType: "image/png", buffer: PNG_200x150 },
{ name: "file", filename: "b.jpg", contentType: "image/jpeg", buffer: JPG_100x100 },
],
[
{
name: "settings",
value: JSON.stringify({
direction: "horizontal",
gap: 50,
backgroundColor: "#00FF00",
}),
},
],
);
const res = await request.post("/api/v1/tools/image/stitch", {
headers: { Authorization: `Bearer ${token}`, "Content-Type": contentType },
data: body,
});
expect(res.ok()).toBe(true);
const json = await res.json();
expect(json.downloadUrl).toBeTruthy();
});
test("stitch in grid mode with 4 images and 2 columns", async ({ request }) => {
const { body, contentType } = buildMultipart(
[
{ name: "file", filename: "a.png", contentType: "image/png", buffer: PNG_200x150 },
{ name: "file", filename: "b.jpg", contentType: "image/jpeg", buffer: JPG_100x100 },
{ name: "file", filename: "c.webp", contentType: "image/webp", buffer: WEBP_50x50 },
{ name: "file", filename: "d.jpg", contentType: "image/jpeg", buffer: JPG_PORTRAIT },
],
[
{
name: "settings",
value: JSON.stringify({ direction: "grid", gridColumns: 2, gap: 5 }),
},
],
);
const res = await request.post("/api/v1/tools/image/stitch", {
headers: { Authorization: `Bearer ${token}`, "Content-Type": contentType },
data: body,
});
expect(res.ok()).toBe(true);
const json = await res.json();
expect(json.downloadUrl).toBeTruthy();
});
test("stitch 5 images in grid with 3 columns", async ({ request }) => {
const { body, contentType } = buildMultipart(
[
{ name: "file", filename: "a.png", contentType: "image/png", buffer: PNG_200x150 },
{ name: "file", filename: "b.jpg", contentType: "image/jpeg", buffer: JPG_100x100 },
{ name: "file", filename: "c.webp", contentType: "image/webp", buffer: WEBP_50x50 },
{ name: "file", filename: "d.jpg", contentType: "image/jpeg", buffer: JPG_PORTRAIT },
{
name: "file",
filename: "e.heic",
contentType: "image/heic",
buffer: HEIC_200x150,
},
],
[
{
name: "settings",
value: JSON.stringify({ direction: "grid", gridColumns: 3, gap: 8 }),
},
],
);
const res = await request.post("/api/v1/tools/image/stitch", {
headers: { Authorization: `Bearer ${token}`, "Content-Type": contentType },
data: body,
});
expect(res.ok()).toBe(true);
const json = await res.json();
expect(json.downloadUrl).toBeTruthy();
});
test("stitch with HEIC images", async ({ request }) => {
const { body, contentType } = buildMultipart(
[
{ name: "file", filename: "a.heic", contentType: "image/heic", buffer: HEIC_200x150 },
{ name: "file", filename: "b.png", contentType: "image/png", buffer: PNG_200x150 },
],
[{ name: "settings", value: JSON.stringify({ direction: "horizontal", gap: 0 }) }],
);
const res = await request.post("/api/v1/tools/image/stitch", {
headers: { Authorization: `Bearer ${token}`, "Content-Type": contentType },
data: body,
});
expect(res.ok()).toBe(true);
const json = await res.json();
expect(json.downloadUrl).toBeTruthy();
});
});
// ─── Split — Extended ──────────────────────────────────────────────
test.describe("Split — extended", () => {
test("split into 1x3 columns (vertical strips)", async ({ request }) => {
const res = await request.post("/api/v1/tools/image/split", {
headers: { Authorization: `Bearer ${token}` },
multipart: {
file: { name: "test.png", mimeType: "image/png", buffer: PNG_200x150 },
settings: JSON.stringify({ columns: 3, rows: 1 }),
},
});
expect(res.ok()).toBe(true);
// Split returns a ZIP file (PK magic bytes), not JSON
const buffer = Buffer.from(await res.body());
expect(buffer.length).toBeGreaterThan(0);
expect(buffer[0]).toBe(0x50); // 'P'
expect(buffer[1]).toBe(0x4b); // 'K'
});
test("split into 1x2 rows (horizontal strips)", async ({ request }) => {
const res = await request.post("/api/v1/tools/image/split", {
headers: { Authorization: `Bearer ${token}` },
multipart: {
file: { name: "test.png", mimeType: "image/png", buffer: PNG_200x150 },
settings: JSON.stringify({ columns: 1, rows: 2 }),
},
});
expect(res.ok()).toBe(true);
// Split returns a ZIP file
const buffer = Buffer.from(await res.body());
expect(buffer.length).toBeGreaterThan(0);
expect(buffer[0]).toBe(0x50);
expect(buffer[1]).toBe(0x4b);
});
test("split into 4x4 tiles", async ({ request }) => {
const res = await request.post("/api/v1/tools/image/split", {
headers: { Authorization: `Bearer ${token}` },
multipart: {
file: { name: "sample.jpg", mimeType: "image/jpeg", buffer: JPG_SAMPLE },
settings: JSON.stringify({ columns: 4, rows: 4 }),
},
});
expect(res.ok()).toBe(true);
// Split returns a ZIP file
const buffer = Buffer.from(await res.body());
expect(buffer.length).toBeGreaterThan(0);
expect(buffer[0]).toBe(0x50);
expect(buffer[1]).toBe(0x4b);
});
test("split JPEG image", async ({ request }) => {
const res = await request.post("/api/v1/tools/image/split", {
headers: { Authorization: `Bearer ${token}` },
multipart: {
file: { name: "test.jpg", mimeType: "image/jpeg", buffer: JPG_100x100 },
settings: JSON.stringify({ columns: 2, rows: 2 }),
},
});
expect(res.ok()).toBe(true);
// Split returns a ZIP file
const buffer = Buffer.from(await res.body());
expect(buffer.length).toBeGreaterThan(0);
expect(buffer[0]).toBe(0x50);
expect(buffer[1]).toBe(0x4b);
});
test("split WebP image", async ({ request }) => {
const webpSample = formatFixture("sample.webp");
const res = await request.post("/api/v1/tools/image/split", {
headers: { Authorization: `Bearer ${token}` },
multipart: {
file: { name: "sample.webp", mimeType: "image/webp", buffer: webpSample },
settings: JSON.stringify({ columns: 3, rows: 2 }),
},
});
expect(res.ok()).toBe(true);
// Split returns a ZIP file
const buffer = Buffer.from(await res.body());
expect(buffer.length).toBeGreaterThan(0);
expect(buffer[0]).toBe(0x50);
expect(buffer[1]).toBe(0x4b);
});
test("split portrait-oriented image", async ({ request }) => {
const res = await request.post("/api/v1/tools/image/split", {
headers: { Authorization: `Bearer ${token}` },
multipart: {
file: { name: "portrait.jpg", mimeType: "image/jpeg", buffer: JPG_PORTRAIT },
settings: JSON.stringify({ columns: 2, rows: 3 }),
},
});
expect(res.ok()).toBe(true);
// Split returns a ZIP file
const buffer = Buffer.from(await res.body());
expect(buffer.length).toBeGreaterThan(0);
expect(buffer[0]).toBe(0x50);
expect(buffer[1]).toBe(0x4b);
});
test("split HEIC image into tiles", async ({ request }) => {
const res = await request.post("/api/v1/tools/image/split", {
headers: { Authorization: `Bearer ${token}` },
multipart: {
file: { name: "test.heic", mimeType: "image/heic", buffer: HEIC_200x150 },
settings: JSON.stringify({ columns: 2, rows: 2 }),
},
});
expect(res.ok()).toBe(true);
// Split returns a ZIP file
const buffer = Buffer.from(await res.body());
expect(buffer.length).toBeGreaterThan(0);
expect(buffer[0]).toBe(0x50);
expect(buffer[1]).toBe(0x4b);
});
});
// ─── Border — Extended ─────────────────────────────────────────────
test.describe("Border — extended", () => {
test("border on HEIC image", async ({ request }) => {
const res = await request.post("/api/v1/tools/image/border", {
headers: { Authorization: `Bearer ${token}` },
multipart: {
file: { name: "test.heic", mimeType: "image/heic", buffer: HEIC_200x150 },
settings: JSON.stringify({ size: 15, color: "#336699" }),
},
});
expect(res.ok()).toBe(true);
const body = await res.json();
expect(body.downloadUrl).toBeTruthy();
expect(body.processedSize).toBeGreaterThan(0);
});
test("border on WebP image", async ({ request }) => {
const webpSample = formatFixture("sample.webp");
const res = await request.post("/api/v1/tools/image/border", {
headers: { Authorization: `Bearer ${token}` },
multipart: {
file: { name: "sample.webp", mimeType: "image/webp", buffer: webpSample },
settings: JSON.stringify({ size: 25, color: "#FF6633" }),
},
});
expect(res.ok()).toBe(true);
const body = await res.json();
expect(body.downloadUrl).toBeTruthy();
});
test("very wide border (100px)", async ({ request }) => {
const res = await request.post("/api/v1/tools/image/border", {
headers: { Authorization: `Bearer ${token}` },
multipart: {
file: { name: "test.jpg", mimeType: "image/jpeg", buffer: JPG_100x100 },
settings: JSON.stringify({ size: 100, color: "#CCCCCC" }),
},
});
expect(res.ok()).toBe(true);
const body = await res.json();
expect(body.downloadUrl).toBeTruthy();
expect(body.processedSize).toBeGreaterThan(0);
});
test("border with transparent color on PNG", async ({ request }) => {
const res = await request.post("/api/v1/tools/image/border", {
headers: { Authorization: `Bearer ${token}` },
multipart: {
file: { name: "test.png", mimeType: "image/png", buffer: PNG_200x150 },
settings: JSON.stringify({ size: 20, color: "#00000000" }),
},
});
// May succeed with transparent border or reject — both valid
if (res.ok()) {
const body = await res.json();
expect(body.downloadUrl).toBeTruthy();
} else {
const body = await res.json();
expect(body.error).toBeDefined();
}
});
test("border on large content image", async ({ request }) => {
const portrait = contentFixture("portrait-color.jpg");
const res = await request.post("/api/v1/tools/image/border", {
headers: { Authorization: `Bearer ${token}` },
multipart: {
file: { name: "portrait.jpg", mimeType: "image/jpeg", buffer: portrait },
settings: JSON.stringify({ size: 30, color: "#FFFFFF" }),
},
});
expect(res.ok()).toBe(true);
const body = await res.json();
expect(body.downloadUrl).toBeTruthy();
expect(body.processedSize).toBeGreaterThan(0);
});
});
// ─── Collage — Output Verification ──────────────────────────────
test.describe("Collage — output verification", () => {
test("collage output can be downloaded", async ({ request }) => {
const { body, contentType } = buildMultipart(
[
{ name: "file", filename: "a.png", contentType: "image/png", buffer: PNG_200x150 },
{ name: "file", filename: "b.jpg", contentType: "image/jpeg", buffer: JPG_100x100 },
],
[
{
name: "settings",
value: JSON.stringify({
templateId: "2-h-equal",
width: 400,
outputFormat: "png",
}),
},
],
);
const res = await request.post("/api/v1/tools/image/collage", {
headers: { Authorization: `Bearer ${token}`, "Content-Type": contentType },
data: body,
});
expect(res.ok()).toBe(true);
const json = await res.json();
expect(json.downloadUrl).toBeTruthy();
// Verify the collage can be downloaded
const dlRes = await request.get(json.downloadUrl, {
headers: { Authorization: `Bearer ${token}` },
});
expect(dlRes.ok()).toBe(true);
const buffer = Buffer.from(await dlRes.body());
expect(buffer.length).toBeGreaterThan(0);
});
test("collage with HEIC images", async ({ request }) => {
const { body, contentType } = buildMultipart(
[
{ name: "file", filename: "a.heic", contentType: "image/heic", buffer: HEIC_200x150 },
{ name: "file", filename: "b.png", contentType: "image/png", buffer: PNG_200x150 },
],
[
{
name: "settings",
value: JSON.stringify({
templateId: "2-h-equal",
width: 400,
outputFormat: "png",
}),
},
],
);
const res = await request.post("/api/v1/tools/image/collage", {
headers: { Authorization: `Bearer ${token}`, "Content-Type": contentType },
data: body,
});
expect(res.ok()).toBe(true);
const json = await res.json();
expect(json.downloadUrl).toBeTruthy();
});
});
// ─── Stitch — Output Verification ───────────────────────────────
test.describe("Stitch — output verification", () => {
test("stitched image can be downloaded", async ({ request }) => {
const { body, contentType } = buildMultipart(
[
{ name: "file", filename: "a.png", contentType: "image/png", buffer: PNG_200x150 },
{ name: "file", filename: "b.jpg", contentType: "image/jpeg", buffer: JPG_100x100 },
],
[{ name: "settings", value: JSON.stringify({ direction: "horizontal", gap: 0 }) }],
);
const res = await request.post("/api/v1/tools/image/stitch", {
headers: { Authorization: `Bearer ${token}`, "Content-Type": contentType },
data: body,
});
expect(res.ok()).toBe(true);
const json = await res.json();
expect(json.downloadUrl).toBeTruthy();
const dlRes = await request.get(json.downloadUrl, {
headers: { Authorization: `Bearer ${token}` },
});
expect(dlRes.ok()).toBe(true);
const buffer = Buffer.from(await dlRes.body());
expect(buffer.length).toBeGreaterThan(0);
});
});
// ─── Border — Output Verification ───────────────────────────────
test.describe("Border — output verification", () => {
test("bordered image can be downloaded and is larger", async ({ request }) => {
const res = await request.post("/api/v1/tools/image/border", {
headers: { Authorization: `Bearer ${token}` },
multipart: {
file: { name: "test.png", mimeType: "image/png", buffer: PNG_200x150 },
settings: JSON.stringify({ size: 20, color: "#FF0000" }),
},
});
expect(res.ok()).toBe(true);
const body = await res.json();
expect(body.downloadUrl).toBeTruthy();
// Download and verify the bordered image
const dlRes = await request.get(body.downloadUrl, {
headers: { Authorization: `Bearer ${token}` },
});
expect(dlRes.ok()).toBe(true);
const buffer = Buffer.from(await dlRes.body());
expect(buffer.length).toBeGreaterThan(0);
});
test("border with minimum size (1px)", async ({ request }) => {
const res = await request.post("/api/v1/tools/image/border", {
headers: { Authorization: `Bearer ${token}` },
multipart: {
file: { name: "test.jpg", mimeType: "image/jpeg", buffer: JPG_100x100 },
settings: JSON.stringify({ size: 1, color: "#000000" }),
},
});
expect(res.ok()).toBe(true);
const body = await res.json();
expect(body.downloadUrl).toBeTruthy();
});
});
// ─── Collage -- All Template Types ─────────────────────────────
test.describe("Collage -- template types", () => {
const templates = [
{ id: "2-h-equal", images: 2, label: "2-horizontal-equal" },
{ id: "2-v-equal", images: 2, label: "2-vertical-equal" },
{ id: "3-v-equal", images: 3, label: "3-vertical-equal" },
{ id: "3-h-1big-2small", images: 3, label: "3-horizontal-1big-2small" },
{ id: "4-grid", images: 4, label: "4-grid" },
] as const;
const imagePool = [
{ name: "file", filename: "a.png", contentType: "image/png", buffer: PNG_200x150 },
{ name: "file", filename: "b.jpg", contentType: "image/jpeg", buffer: JPG_100x100 },
{ name: "file", filename: "c.webp", contentType: "image/webp", buffer: WEBP_50x50 },
{ name: "file", filename: "d.jpg", contentType: "image/jpeg", buffer: JPG_PORTRAIT },
];
for (const tmpl of templates) {
test(`collage with template ${tmpl.label}`, async ({ request }) => {
const files = imagePool.slice(0, tmpl.images);
const { body, contentType } = buildMultipart(files, [
{
name: "settings",
value: JSON.stringify({
templateId: tmpl.id,
width: 600,
height: 600,
gap: 5,
outputFormat: "png",
}),
},
]);
const res = await request.post("/api/v1/tools/image/collage", {
headers: { Authorization: `Bearer ${token}`, "Content-Type": contentType },
data: body,
});
expect(res.ok(), `collage with template ${tmpl.label} should succeed`).toBe(true);
const json = await res.json();
expect(json.downloadUrl).toBeTruthy();
expect(json.processedSize).toBeGreaterThan(0);
});
}
});
// ─── Collage -- Background Colors ──────────────────────────────
test.describe("Collage -- background colors", () => {
const bgColors = ["#FFFFFF", "#000000", "#FF0000", "#1a1a2e"] as const;
for (const bg of bgColors) {
test(`collage with background ${bg}`, async ({ request }) => {
const { body, contentType } = buildMultipart(
[
{ name: "file", filename: "a.png", contentType: "image/png", buffer: PNG_200x150 },
{ name: "file", filename: "b.jpg", contentType: "image/jpeg", buffer: JPG_100x100 },
],
[
{
name: "settings",
value: JSON.stringify({
templateId: "2-h-equal",
gap: 10,
backgroundColor: bg,
outputFormat: "png",
}),
},
],
);
const res = await request.post("/api/v1/tools/image/collage", {
headers: { Authorization: `Bearer ${token}`, "Content-Type": contentType },
data: body,
});
expect(res.ok(), `collage with bg=${bg} should succeed`).toBe(true);
const json = await res.json();
expect(json.downloadUrl).toBeTruthy();
});
}
});
// ─── Stitch -- Alignment Options ───────────────────────────────
test.describe("Stitch -- alignment options", () => {
test("stitch horizontal with start alignment", async ({ request }) => {
const { body, contentType } = buildMultipart(
[
{ name: "file", filename: "a.png", contentType: "image/png", buffer: PNG_200x150 },
{ name: "file", filename: "b.jpg", contentType: "image/jpeg", buffer: JPG_100x100 },
{ name: "file", filename: "c.webp", contentType: "image/webp", buffer: WEBP_50x50 },
],
[
{
name: "settings",
value: JSON.stringify({ direction: "horizontal", gap: 5, alignment: "start" }),
},
],
);
const res = await request.post("/api/v1/tools/image/stitch", {
headers: { Authorization: `Bearer ${token}`, "Content-Type": contentType },
data: body,
});
expect(res.ok()).toBe(true);
const json = await res.json();
expect(json.downloadUrl).toBeTruthy();
});
test("stitch vertical with end alignment", async ({ request }) => {
const { body, contentType } = buildMultipart(
[
{ name: "file", filename: "a.png", contentType: "image/png", buffer: PNG_200x150 },
{ name: "file", filename: "b.jpg", contentType: "image/jpeg", buffer: JPG_100x100 },
],
[
{
name: "settings",
value: JSON.stringify({ direction: "vertical", gap: 5, alignment: "end" }),
},
],
);
const res = await request.post("/api/v1/tools/image/stitch", {
headers: { Authorization: `Bearer ${token}`, "Content-Type": contentType },
data: body,
});
expect(res.ok()).toBe(true);
const json = await res.json();
expect(json.downloadUrl).toBeTruthy();
});
test("stitch horizontal with center alignment", async ({ request }) => {
const { body, contentType } = buildMultipart(
[
{ name: "file", filename: "a.png", contentType: "image/png", buffer: PNG_200x150 },
{ name: "file", filename: "b.jpg", contentType: "image/jpeg", buffer: JPG_100x100 },
{ name: "file", filename: "c.webp", contentType: "image/webp", buffer: WEBP_50x50 },
],
[
{
name: "settings",
value: JSON.stringify({ direction: "horizontal", gap: 0, alignment: "center" }),
},
],
);
const res = await request.post("/api/v1/tools/image/stitch", {
headers: { Authorization: `Bearer ${token}`, "Content-Type": contentType },
data: body,
});
expect(res.ok()).toBe(true);
const json = await res.json();
expect(json.downloadUrl).toBeTruthy();
});
});
// ─── Split -- Grid Variations ──────────────────────────────────
test.describe("Split -- grid variations", () => {
test("split into 1x1 (single tile returns full image)", async ({ request }) => {
const res = await request.post("/api/v1/tools/image/split", {
headers: { Authorization: `Bearer ${token}` },
multipart: {
file: { name: "test.png", mimeType: "image/png", buffer: PNG_200x150 },
settings: JSON.stringify({ columns: 1, rows: 1 }),
},
});
expect(res.ok()).toBe(true);
const buffer = Buffer.from(await res.body());
expect(buffer.length).toBeGreaterThan(0);
// ZIP magic bytes
expect(buffer[0]).toBe(0x50);
expect(buffer[1]).toBe(0x4b);
});
test("split into 5x5 tiles", async ({ request }) => {
const res = await request.post("/api/v1/tools/image/split", {
headers: { Authorization: `Bearer ${token}` },
multipart: {
file: { name: "test.png", mimeType: "image/png", buffer: PNG_200x150 },
settings: JSON.stringify({ columns: 5, rows: 5 }),
},
});
expect(res.ok()).toBe(true);
const buffer = Buffer.from(await res.body());
expect(buffer.length).toBeGreaterThan(0);
expect(buffer[0]).toBe(0x50);
expect(buffer[1]).toBe(0x4b);
});
test("split into 2x5 tiles (more rows than columns)", async ({ request }) => {
const res = await request.post("/api/v1/tools/image/split", {
headers: { Authorization: `Bearer ${token}` },
multipart: {
file: { name: "test.png", mimeType: "image/png", buffer: PNG_200x150 },
settings: JSON.stringify({ columns: 2, rows: 5 }),
},
});
expect(res.ok()).toBe(true);
const buffer = Buffer.from(await res.body());
expect(buffer.length).toBeGreaterThan(0);
expect(buffer[0]).toBe(0x50);
expect(buffer[1]).toBe(0x4b);
});
test("split into 10x1 columns", async ({ request }) => {
const res = await request.post("/api/v1/tools/image/split", {
headers: { Authorization: `Bearer ${token}` },
multipart: {
file: { name: "test.png", mimeType: "image/png", buffer: PNG_200x150 },
settings: JSON.stringify({ columns: 10, rows: 1 }),
},
});
expect(res.ok()).toBe(true);
const buffer = Buffer.from(await res.body());
expect(buffer.length).toBeGreaterThan(0);
expect(buffer[0]).toBe(0x50);
expect(buffer[1]).toBe(0x4b);
});
});
// ─── Border -- Width and Color Variations ──────────────────────
test.describe("Border -- width and color variations", () => {
const borderSizes = [1, 5, 20, 50, 100] as const;
for (const size of borderSizes) {
test(`border with size=${size}px`, async ({ request }) => {
const res = await request.post("/api/v1/tools/image/border", {
headers: { Authorization: `Bearer ${token}` },
multipart: {
file: { name: "test.png", mimeType: "image/png", buffer: PNG_200x150 },
settings: JSON.stringify({ size, color: "#FF6633" }),
},
});
expect(res.ok(), `border with size=${size} should succeed`).toBe(true);
const body = await res.json();
expect(body.downloadUrl).toBeTruthy();
expect(body.processedSize).toBeGreaterThan(0);
});
}
const borderColors = ["#000000", "#FFFFFF", "#FF0000", "#00FF00", "#0000FF"] as const;
for (const color of borderColors) {
test(`border with color=${color}`, async ({ request }) => {
const res = await request.post("/api/v1/tools/image/border", {
headers: { Authorization: `Bearer ${token}` },
multipart: {
file: { name: "test.jpg", mimeType: "image/jpeg", buffer: JPG_100x100 },
settings: JSON.stringify({ size: 10, color }),
},
});
expect(res.ok(), `border with color=${color} should succeed`).toBe(true);
const body = await res.json();
expect(body.downloadUrl).toBeTruthy();
});
}
});
// ─── Border -- Dimension Verification ──────────────────────────
test.describe("Border -- dimension verification", () => {
test("bordered image dimensions increase by 2x border size", async ({ request }) => {
const borderSize = 20;
const res = await request.post("/api/v1/tools/image/border", {
headers: { Authorization: `Bearer ${token}` },
multipart: {
file: { name: "test.png", mimeType: "image/png", buffer: PNG_200x150 },
settings: JSON.stringify({ size: borderSize, color: "#FF0000" }),
},
});
expect(res.ok()).toBe(true);
const body = await res.json();
// Download and check dimensions
const dlRes = await request.get(body.downloadUrl, {
headers: { Authorization: `Bearer ${token}` },
});
expect(dlRes.ok()).toBe(true);
const buffer = Buffer.from(await dlRes.body());
const infoRes = await request.post("/api/v1/tools/image/info", {
headers: { Authorization: `Bearer ${token}` },
multipart: {
file: { name: "bordered.png", mimeType: "image/png", buffer: buffer },
},
});
expect(infoRes.ok()).toBe(true);
const infoBody = await infoRes.json();
// 200 + 20*2 = 240, 150 + 20*2 = 190
expect(infoBody.width).toBe(200 + borderSize * 2);
expect(infoBody.height).toBe(150 + borderSize * 2);
});
});
// ─── Auth Failure ──────────────────────────────────────────────────
test.describe("Auth failure", () => {
test("split without token returns 401", async ({ request }) => {
const res = await request.post("/api/v1/tools/image/split", {
multipart: {
file: { name: "test.png", mimeType: "image/png", buffer: PNG_200x150 },
settings: JSON.stringify({ columns: 2, rows: 2 }),
},
});
expect(res.status()).toBe(401);
});
test("border without token returns 401", async ({ request }) => {
const res = await request.post("/api/v1/tools/image/border", {
multipart: {
file: { name: "test.png", mimeType: "image/png", buffer: PNG_200x150 },
settings: JSON.stringify({ size: 10, color: "#ff0000" }),
},
});
expect(res.status()).toBe(401);
});
test("collage without token returns 401", async ({ request }) => {
const { body, contentType } = buildMultipart(
[
{ name: "file", filename: "a.png", contentType: "image/png", buffer: PNG_200x150 },
{ name: "file", filename: "b.jpg", contentType: "image/jpeg", buffer: JPG_100x100 },
],
[
{
name: "settings",
value: JSON.stringify({ templateId: "2-h-equal", width: 400 }),
},
],
);
const res = await request.post("/api/v1/tools/image/collage", {
headers: { "Content-Type": contentType },
data: body,
});
expect(res.status()).toBe(401);
});
test("stitch without token returns 401", async ({ request }) => {
const { body, contentType } = buildMultipart(
[
{ name: "file", filename: "a.png", contentType: "image/png", buffer: PNG_200x150 },
{ name: "file", filename: "b.jpg", contentType: "image/jpeg", buffer: JPG_100x100 },
],
[{ name: "settings", value: JSON.stringify({ direction: "horizontal" }) }],
);
const res = await request.post("/api/v1/tools/image/stitch", {
headers: { "Content-Type": contentType },
data: body,
});
expect(res.status()).toBe(401);
});
});