mirror of
https://github.com/snapotter-hq/SnapOtter.git
synced 2026-08-03 07:46:42 +02:00
test: add QOI codec unit tests and E2E GUI format support tests
- QOI codec: 16 tests covering encode/decode round-trips, error handling, fixture validation - E2E: 28 tests for format upload/resize, convert new outputs, dropdown verification, HEIC-to-JPG flow, and exotic format upload acceptance
This commit is contained in:
SnapOtter
@@ -85,7 +85,6 @@ export async function decodeToSharpCompat(
|
||||
case "pgm":
|
||||
case "pbm":
|
||||
return decodeNetpbm(buffer, format);
|
||||
return decodeQoi(buffer);
|
||||
default:
|
||||
return buffer;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,107 @@
|
||||
import path from "node:path";
|
||||
import { expect, test, uploadTestImage, waitForProcessing } from "./helpers";
|
||||
|
||||
const fixtureFormat = (name: string) =>
|
||||
path.join(process.cwd(), "tests", "fixtures", "formats", name);
|
||||
const fixtureRoot = (name: string) => path.join(process.cwd(), "tests", "fixtures", name);
|
||||
|
||||
async function uploadFixture(page: import("@playwright/test").Page, filePath: string) {
|
||||
const fileChooserPromise = page.waitForEvent("filechooser");
|
||||
await page.locator("[class*='border-dashed']").first().click();
|
||||
const fileChooser = await fileChooserPromise;
|
||||
await fileChooser.setFiles(filePath);
|
||||
await page.waitForTimeout(500);
|
||||
}
|
||||
|
||||
test.describe("Format upload and resize processing", () => {
|
||||
test.describe.configure({ timeout: 60_000 });
|
||||
const formats: [string, string][] = [
|
||||
["PNG", "sample.png"], ["JPEG", "sample.jpg"], ["WebP", "sample.webp"],
|
||||
["BMP", "sample.bmp"], ["AVIF", "sample.avif"], ["GIF", "sample.gif"],
|
||||
["SVG", "sample.svg"], ["TIFF", "sample.tiff"],
|
||||
];
|
||||
for (const [label, fileName] of formats) {
|
||||
test(`${label} uploads and resizes`, async ({ loggedInPage: page }) => {
|
||||
await page.goto("/resize");
|
||||
await uploadFixture(page, fixtureFormat(fileName));
|
||||
await page.locator("input[placeholder='Auto']").first().fill("25");
|
||||
await page.getByRole("button", { name: "Resize" }).click();
|
||||
await waitForProcessing(page);
|
||||
await expect(page.getByRole("link", { name: /download/i }).first()).toBeVisible({ timeout: 15_000 });
|
||||
});
|
||||
}
|
||||
test("HEIC uploads and resizes", async ({ loggedInPage: page }) => {
|
||||
await page.goto("/resize");
|
||||
await uploadFixture(page, fixtureRoot("test-200x150.heic"));
|
||||
await page.locator("input[placeholder='Auto']").first().fill("25");
|
||||
await page.getByRole("button", { name: "Resize" }).click();
|
||||
await waitForProcessing(page);
|
||||
await expect(page.getByRole("link", { name: /download/i }).first()).toBeVisible({ timeout: 15_000 });
|
||||
});
|
||||
});
|
||||
|
||||
test.describe("Convert tool - new output formats", () => {
|
||||
test.describe.configure({ timeout: 60_000 });
|
||||
for (const fmt of ["bmp", "ico", "jp2", "qoi", "jxl"]) {
|
||||
test(`converts PNG to ${fmt.toUpperCase()}`, async ({ loggedInPage: page }) => {
|
||||
await page.goto("/convert");
|
||||
await uploadTestImage(page);
|
||||
await page.selectOption("#convert-target-format", fmt);
|
||||
await page.getByRole("button", { name: /convert/i }).click();
|
||||
await waitForProcessing(page);
|
||||
const ok = await page.getByRole("link", { name: /download/i }).first()
|
||||
.waitFor({ state: "visible", timeout: 15_000 }).then(() => true).catch(() => false);
|
||||
const err = !ok ? await page.getByText(/error|unsupported|failed|not available/i).first()
|
||||
.waitFor({ state: "visible", timeout: 5_000 }).then(() => true).catch(() => false) : false;
|
||||
expect(ok || err, `${fmt}: expected download or error`).toBe(true);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
test.describe("Convert tool - format dropdown", () => {
|
||||
test("contains all 13 output formats", async ({ loggedInPage: page }) => {
|
||||
await page.goto("/convert");
|
||||
await page.waitForSelector("#convert-target-format", { timeout: 10_000 });
|
||||
const options = await page.locator("#convert-target-format option")
|
||||
.evaluateAll((els) => els.map((el) => (el as HTMLOptionElement).value));
|
||||
for (const fmt of ["jpg","png","webp","avif","tiff","gif","heic","heif","jxl","bmp","ico","jp2","qoi"]) {
|
||||
expect(options, `missing: ${fmt}`).toContain(fmt);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
test.describe("HEIC-to-JPG conversion", () => {
|
||||
test.describe.configure({ timeout: 60_000 });
|
||||
test("uploads HEIC, converts to JPG", async ({ loggedInPage: page }) => {
|
||||
await page.goto("/convert");
|
||||
await uploadFixture(page, fixtureRoot("test-200x150.heic"));
|
||||
await expect(page.getByText(/heic/i).first()).toBeVisible({ timeout: 10_000 });
|
||||
await page.selectOption("#convert-target-format", "jpg");
|
||||
await page.getByRole("button", { name: /convert/i }).click();
|
||||
await waitForProcessing(page);
|
||||
await expect(page.getByRole("link", { name: /download/i }).first()).toBeVisible({ timeout: 15_000 });
|
||||
});
|
||||
});
|
||||
|
||||
test.describe("Exotic format upload acceptance", () => {
|
||||
test.describe.configure({ timeout: 60_000 });
|
||||
const exoticFormats: [string, string][] = [
|
||||
["SVGZ","sample.svgz"], ["JP2","sample.jp2"], ["EPS","sample.eps"],
|
||||
["PPM","sample.ppm"], ["PGM","sample.pgm"], ["PBM","sample.pbm"],
|
||||
["DDS","sample.dds"], ["CUR","sample.cur"], ["DPX","sample.dpx"],
|
||||
["FITS","sample.fits"], ["APNG","sample.apng"],
|
||||
];
|
||||
for (const [label, fileName] of exoticFormats) {
|
||||
test(`${label} uploads to info without crashing`, async ({ loggedInPage: page }) => {
|
||||
await page.goto("/info");
|
||||
await uploadFixture(page, fixtureFormat(fileName));
|
||||
await page.getByRole("button", { name: /read info/i }).click();
|
||||
await waitForProcessing(page);
|
||||
const meta = await page.getByText(/width|height|format|dimensions|size|resolution|channels|pixel/i).first()
|
||||
.waitFor({ state: "visible", timeout: 15_000 }).then(() => true).catch(() => false);
|
||||
const err = !meta ? await page.getByText(/error|unsupported|failed|not supported|cannot|invalid/i).first()
|
||||
.waitFor({ state: "visible", timeout: 5_000 }).then(() => true).catch(() => false) : false;
|
||||
expect(meta || err, `${label}: expected metadata or error`).toBe(true);
|
||||
});
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,138 @@
|
||||
import { readFileSync } from "node:fs";
|
||||
import path from "node:path";
|
||||
import { qoiDecode, qoiEncode } from "@snapotter/image-engine";
|
||||
import { describe, expect, it } from "vitest";
|
||||
|
||||
const FORMATS_DIR = path.resolve(__dirname, "../../fixtures/formats");
|
||||
|
||||
describe("QOI codec", () => {
|
||||
it("round-trips RGBA pixel data", () => {
|
||||
const w = 4, h = 4;
|
||||
const pixels = new Uint8Array(w * h * 4);
|
||||
for (let i = 0; i < w * h; i++) {
|
||||
pixels[i * 4] = (i * 17) & 0xff;
|
||||
pixels[i * 4 + 1] = (i * 31) & 0xff;
|
||||
pixels[i * 4 + 2] = (i * 53) & 0xff;
|
||||
pixels[i * 4 + 3] = 255;
|
||||
}
|
||||
const encoded = qoiEncode(pixels, w, h, 4);
|
||||
const { header, pixels: decoded } = qoiDecode(encoded);
|
||||
expect(header.width).toBe(w);
|
||||
expect(header.height).toBe(h);
|
||||
for (let i = 0; i < w * h * 4; i++) expect(decoded[i]).toBe(pixels[i]);
|
||||
});
|
||||
|
||||
it("encodes 3-channel data", () => {
|
||||
const w = 3, h = 3;
|
||||
const pixels = new Uint8Array(w * h * 3);
|
||||
for (let i = 0; i < pixels.length; i++) pixels[i] = (i * 41) & 0xff;
|
||||
const encoded = qoiEncode(pixels, w, h, 3);
|
||||
const { header, pixels: decoded } = qoiDecode(encoded);
|
||||
expect(header.channels).toBe(3);
|
||||
for (let i = 0; i < w * h; i++) {
|
||||
expect(decoded[i * 4 + 3]).toBe(255);
|
||||
}
|
||||
});
|
||||
|
||||
it("writes correct header magic", () => {
|
||||
const encoded = qoiEncode(new Uint8Array(4), 1, 1, 4);
|
||||
const view = new DataView(encoded.buffer, encoded.byteOffset);
|
||||
expect(view.getUint32(0)).toBe(0x716f6966);
|
||||
});
|
||||
|
||||
it("writes correct header dimensions", () => {
|
||||
const encoded = qoiEncode(new Uint8Array(20 * 15 * 4), 20, 15, 4);
|
||||
const view = new DataView(encoded.buffer, encoded.byteOffset);
|
||||
expect(view.getUint32(4)).toBe(20);
|
||||
expect(view.getUint32(8)).toBe(15);
|
||||
expect(encoded[12]).toBe(4);
|
||||
});
|
||||
|
||||
it("round-trips 1x1 image", () => {
|
||||
const pixels = new Uint8Array([42, 128, 200, 255]);
|
||||
const { pixels: decoded } = qoiDecode(qoiEncode(pixels, 1, 1, 4));
|
||||
expect(decoded[0]).toBe(42);
|
||||
expect(decoded[3]).toBe(255);
|
||||
});
|
||||
|
||||
it("round-trips solid color image", () => {
|
||||
const w = 8, h = 8;
|
||||
const pixels = new Uint8Array(w * h * 4);
|
||||
for (let i = 0; i < w * h; i++) { pixels[i*4]=100; pixels[i*4+1]=150; pixels[i*4+2]=200; pixels[i*4+3]=255; }
|
||||
const { pixels: decoded } = qoiDecode(qoiEncode(pixels, w, h, 4));
|
||||
for (let i = 0; i < pixels.length; i++) expect(decoded[i]).toBe(pixels[i]);
|
||||
});
|
||||
|
||||
it("compresses solid color efficiently", () => {
|
||||
const w = 100, h = 100;
|
||||
const pixels = new Uint8Array(w * h * 4);
|
||||
for (let i = 0; i < w * h; i++) { pixels[i*4]=50; pixels[i*4+1]=100; pixels[i*4+2]=150; pixels[i*4+3]=255; }
|
||||
const encoded = qoiEncode(pixels, w, h, 4);
|
||||
expect(encoded.length).toBeLessThan(pixels.length / 10);
|
||||
});
|
||||
|
||||
it("round-trips gradient", () => {
|
||||
const w = 16, h = 1;
|
||||
const pixels = new Uint8Array(w * 4);
|
||||
for (let i = 0; i < w; i++) { const v = Math.round((i/(w-1))*255); pixels[i*4]=v; pixels[i*4+1]=v; pixels[i*4+2]=v; pixels[i*4+3]=255; }
|
||||
const { pixels: decoded } = qoiDecode(qoiEncode(pixels, w, h, 4));
|
||||
for (let i = 0; i < pixels.length; i++) expect(decoded[i]).toBe(pixels[i]);
|
||||
});
|
||||
|
||||
it("round-trips random-ish data", () => {
|
||||
const w = 10, h = 10;
|
||||
const pixels = new Uint8Array(w * h * 4);
|
||||
for (let i = 0; i < pixels.length; i++) pixels[i] = (i * 97 + 53) & 0xff;
|
||||
const { pixels: decoded } = qoiDecode(qoiEncode(pixels, w, h, 4));
|
||||
for (let i = 0; i < pixels.length; i++) expect(decoded[i]).toBe(pixels[i]);
|
||||
});
|
||||
|
||||
it("round-trips varying alpha", () => {
|
||||
const pixels = new Uint8Array([100,150,200,0, 100,150,200,128, 100,150,200,255, 0,0,0,0]);
|
||||
const { pixels: decoded } = qoiDecode(qoiEncode(pixels, 4, 1, 4));
|
||||
for (let i = 0; i < pixels.length; i++) expect(decoded[i]).toBe(pixels[i]);
|
||||
});
|
||||
|
||||
it("throws on invalid magic", () => {
|
||||
expect(() => qoiDecode(new Uint8Array(20))).toThrow();
|
||||
});
|
||||
|
||||
it("throws on zero width", () => {
|
||||
const buf = new Uint8Array(14); const v = new DataView(buf.buffer);
|
||||
v.setUint32(0, 0x716f6966); v.setUint32(4, 0); v.setUint32(8, 1); buf[12] = 4;
|
||||
expect(() => qoiDecode(buf)).toThrow();
|
||||
});
|
||||
|
||||
it("throws on zero height", () => {
|
||||
const buf = new Uint8Array(14); const v = new DataView(buf.buffer);
|
||||
v.setUint32(0, 0x716f6966); v.setUint32(4, 1); v.setUint32(8, 0); buf[12] = 4;
|
||||
expect(() => qoiDecode(buf)).toThrow();
|
||||
});
|
||||
|
||||
it("throws on invalid channels", () => {
|
||||
const buf = new Uint8Array(14); const v = new DataView(buf.buffer);
|
||||
v.setUint32(0, 0x716f6966); v.setUint32(4, 1); v.setUint32(8, 1); buf[12] = 5;
|
||||
expect(() => qoiDecode(buf)).toThrow();
|
||||
});
|
||||
|
||||
it("ends with correct end marker", () => {
|
||||
const encoded = qoiEncode(new Uint8Array([1, 2, 3, 255]), 1, 1, 4);
|
||||
expect(Array.from(encoded.slice(-8))).toEqual([0, 0, 0, 0, 0, 0, 0, 1]);
|
||||
});
|
||||
|
||||
it("decodes real fixture with correct header", () => {
|
||||
const data = readFileSync(path.join(FORMATS_DIR, "sample.qoi"));
|
||||
const { header } = qoiDecode(new Uint8Array(data));
|
||||
expect(header.width).toBe(10);
|
||||
expect(header.height).toBe(10);
|
||||
expect(header.channels).toBe(4);
|
||||
});
|
||||
|
||||
it("re-encodes real fixture with matching pixels", () => {
|
||||
const data = readFileSync(path.join(FORMATS_DIR, "sample.qoi"));
|
||||
const { header, pixels } = qoiDecode(new Uint8Array(data));
|
||||
const reEncoded = qoiEncode(pixels, header.width, header.height, 4);
|
||||
const { pixels: reDecoded } = qoiDecode(reEncoded);
|
||||
for (let i = 0; i < pixels.length; i++) expect(reDecoded[i]).toBe(pixels[i]);
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user