mirror of
https://github.com/gradio-app/gradio.git
synced 2024-12-15 02:11:15 +08:00
80 lines
2.8 KiB
TypeScript
80 lines
2.8 KiB
TypeScript
import { test, expect, drag_and_drop_file } from "@gradio/tootils";
|
|
import fs from "fs";
|
|
|
|
test("Image click-to-upload uploads image successfuly. Clear button dispatches event correctly. Downloading the file works and has the correct name.", async ({
|
|
page
|
|
}) => {
|
|
await page.getByRole("button", { name: "Drop Image Here" }).click();
|
|
const uploader = await page.locator("input[type=file]");
|
|
await Promise.all([
|
|
uploader.setInputFiles(["./test/files/cheetah1.jpg"]),
|
|
page.waitForResponse("**/upload?*?*")
|
|
]);
|
|
|
|
await expect(page.getByLabel("# Change Events").first()).toHaveValue("1");
|
|
await expect(await page.getByLabel("# Upload Events")).toHaveValue("1");
|
|
await expect(await page.getByLabel("# Change Events Output")).toHaveValue(
|
|
"1"
|
|
);
|
|
|
|
const downloadPromise = page.waitForEvent("download");
|
|
await page.getByLabel("Download").click();
|
|
const download = await downloadPromise;
|
|
// Automatically convert to png in the backend since PIL is very picky
|
|
await expect(download.suggestedFilename()).toBe("cheetah1.jpeg");
|
|
|
|
await page.getByLabel("Remove Image").click();
|
|
await expect(page.getByLabel("# Clear Events")).toHaveValue("1");
|
|
await expect(page.getByLabel("# Change Events").first()).toHaveValue("2");
|
|
|
|
await Promise.all([
|
|
uploader.setInputFiles(["./test/files/gradio-logo.svg"]),
|
|
page.waitForResponse("**/upload?*?*")
|
|
]);
|
|
|
|
await expect(page.getByLabel("# Change Events").first()).toHaveValue("3");
|
|
await expect(await page.getByLabel("# Upload Events")).toHaveValue("2");
|
|
await expect(await page.getByLabel("# Change Events Output")).toHaveValue(
|
|
"2"
|
|
);
|
|
|
|
const SVGdownloadPromise = page.waitForEvent("download");
|
|
await page.getByLabel("Download").click();
|
|
const SVGdownload = await SVGdownloadPromise;
|
|
expect(SVGdownload.suggestedFilename()).toBe("gradio-logo.svg");
|
|
});
|
|
|
|
test("Image drag-to-upload uploads image successfuly.", async ({ page }) => {
|
|
await Promise.all([
|
|
drag_and_drop_file(
|
|
page,
|
|
"input[type=file]",
|
|
"./test/files/cheetah1.jpg",
|
|
"cheetag1.jpg",
|
|
"image/*"
|
|
),
|
|
page.waitForResponse("**/upload?*")
|
|
]);
|
|
await expect(page.getByLabel("# Change Events").first()).toHaveValue("1");
|
|
await expect(page.getByLabel("# Upload Events")).toHaveValue("1");
|
|
});
|
|
|
|
test("Image copy from clipboard dispatches upload event.", async ({ page }) => {
|
|
// Need to make request from inside browser for blob to be formatted correctly
|
|
// tried lots of different things
|
|
await page.evaluate(async () => {
|
|
const blob = await (
|
|
await fetch(
|
|
`https://gradio-builds.s3.amazonaws.com/assets/PDFDisplay.png`
|
|
)
|
|
).blob();
|
|
navigator.clipboard.write([new ClipboardItem({ [blob.type]: blob })]);
|
|
});
|
|
|
|
await page.pause();
|
|
await page.getByLabel("clipboard-image-toolbar-btn").click();
|
|
await page.pause();
|
|
await expect(page.getByLabel("# Change Events").first()).toHaveValue("1");
|
|
await expect(page.getByLabel("# Upload Events")).toHaveValue("1");
|
|
});
|