mirror of
https://github.com/librespeed/speedtest.git
synced 2026-10-21 07:40:50 +00:00
test: cover share dialog image dimensions
This commit is contained in:
parent
61a98ce015
commit
cb4ab85f3f
1 changed files with 28 additions and 16 deletions
|
|
@ -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);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue