Make the draw image test actually draw a line on the image

This commit is contained in:
Jonatan Heyman 2026-01-27 15:58:58 +01:00
parent 86d943e34c
commit 04dc51a4fe

View File

@ -9,6 +9,30 @@ const buildContent = (tag) => `
hello ${tag} world`;
test.beforeEach(async ({ page }) => {
await page.addInitScript(() => {
// Playwright can't intercept custom schemes like heynote-file:// with page.route,
// because Chromium never issues a network request. Rewrite image src instead.
const original = Object.getOwnPropertyDescriptor(HTMLImageElement.prototype, "src");
if (!original || typeof original.set !== "function" || typeof original.get !== "function") {
return;
}
Object.defineProperty(HTMLImageElement.prototype, "src", {
configurable: true,
enumerable: original.enumerable,
get() {
return original.get.call(this);
},
set(value) {
// Swap heynote-file://image/... for the mocked saveImage data URL so the
// widget can render in browser tests.
if (typeof value === "string" && value.startsWith("heynote-file://image/")) {
const replacement = window.__mockSavedImageDataUrl || "/icon.png";
return original.set.call(this, replacement);
}
return original.set.call(this, value);
},
});
});
heynotePage = new HeynotePage(page);
await heynotePage.goto();
});
@ -24,6 +48,14 @@ test("draw modal saves image and updates tag", async () => {
mime: payload?.mime,
size: payload?.data?.length ?? payload?.data?.byteLength ?? 0,
});
if (payload?.data && payload?.mime) {
const bytes = payload.data instanceof Uint8Array ? payload.data : new Uint8Array(payload.data);
let binary = "";
for (const byte of bytes) {
binary += String.fromCharCode(byte);
}
window.__mockSavedImageDataUrl = `data:${payload.mime};base64,${btoa(binary)}`;
}
return "drawn-test.png";
};
});
@ -43,6 +75,19 @@ test("draw modal saves image and updates tag", async () => {
await expect(modal).toBeVisible();
await expect(modal.locator("canvas").first()).toBeVisible();
const drawCanvas = modal.locator("canvas.upper-canvas");
const box = await drawCanvas.boundingBox();
expect(box).not.toBeNull();
const startX = box.x + box.width * 0.3;
const startY = box.y + box.height * 0.3;
const endX = box.x + box.width * 0.6;
const endY = box.y + box.height * 0.6;
await heynotePage.page.mouse.move(startX, startY);
await heynotePage.page.mouse.down();
await heynotePage.page.mouse.move(endX, endY);
await heynotePage.page.mouse.up();
await modal.locator(".bottom-bar .save").click();
await expect(modal).toHaveCount(0);