test: cover share dialog image dimensions

This commit is contained in:
Stefan Stidl 2026-09-11 20:25:52 +02:00
parent 61a98ce015
commit cb4ab85f3f

View file

@ -3,31 +3,43 @@ const { baseUrls } = require("./helpers/env");
test.use({ viewport: { width: 360, height: 800 } });
test.describe("Mobile result-image sharing", () => {
test("keeps the result image within the share dialog", async ({ page }) => {
await page.goto(`${baseUrls.standaloneNew}/index-modern.html`);
async function openResultImage(page, width, height) {
await page.goto(`${baseUrls.standaloneNew}/index-modern.html`);
await page.locator("#results").evaluate(image => {
await page.locator("#results").evaluate(
(image, dimensions) => {
image.src =
"data:image/svg+xml," +
encodeURIComponent(
'<svg xmlns="http://www.w3.org/2000/svg" width="480" height="1600"><rect width="480" height="1600" fill="black"/></svg>'
`<svg xmlns="http://www.w3.org/2000/svg" width="${dimensions.width}" height="${dimensions.height}"><rect width="100%" height="100%" fill="black"/></svg>`
);
});
await page.locator("#share").evaluate(dialog => dialog.showModal());
},
{ width, height }
);
await page.locator("#share").evaluate(dialog => dialog.showModal());
const image = page.locator("#results");
await expect(image).toBeVisible();
await expect(image).toHaveJSProperty("complete", true);
const image = page.locator("#results");
await expect(image).toBeVisible();
await expect(image).toHaveJSProperty("complete", true);
const dimensions = await image.evaluate(element => ({
width: element.getBoundingClientRect().width,
height: element.getBoundingClientRect().height,
dialogWidth: element.closest("dialog").clientWidth,
dialogHeight: element.closest("dialog").clientHeight
}));
return image.evaluate(element => ({
width: element.getBoundingClientRect().width,
height: element.getBoundingClientRect().height,
dialogWidth: element.closest("dialog").clientWidth,
dialogHeight: element.closest("dialog").clientHeight
}));
}
test.describe("Mobile result-image sharing", () => {
test("keeps the landscape result image within the share dialog width", async ({ page }) => {
const dimensions = await openResultImage(page, 800, 480);
expect(dimensions.width).toBeLessThanOrEqual(dimensions.dialogWidth);
});
test("keeps a tall result image within the share dialog height", async ({ page }) => {
const dimensions = await openResultImage(page, 480, 1600);
expect(dimensions.height).toBeLessThanOrEqual(dimensions.dialogHeight);
});
});