gradio/js/app/test/video_component_events.spec.ts
Hannah 73268ee2e3
Improve source selection UX (#6766)
* Add new source option styling for pasting from clipboard
Use SourceSelect in Image component

* prevent device selection cut off
tweak source selection ux

* Check for dupe sources in source selection
Set sources[0] to active_source in Image

* tweaks

* tweak

* add image interaction test

* more tests

* improve light/dark mode color contrast

* add changeset

* remove unused prop

* add no device found placeholder
change T<sources> -> T<source_types>

* style tweak

* allow pasting on click + add e2e test

* fix e2e tests

* formatting

* add timeout to e2e test

* tweak

* tweak test

* change `getByLabel` to `getByText`

* value tweak

* logic tweak

* test

* formatting

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
2023-12-19 19:24:08 +00:00

70 lines
2.5 KiB
TypeScript

import { test, expect, drag_and_drop_file } from "@gradio/tootils";
test("Video click-to-upload uploads video successfuly. Clear, play, and pause buttons dispatch events correctly. Downloading the file works and has the correct name.", async ({
page
}) => {
await page.getByRole("button", { name: "Upload file" }).click();
const uploader = await page.locator("input[type=file]");
await uploader.setInputFiles(["./test/files/file_test.ogg"]);
await expect(page.getByLabel("# Change Events")).toHaveValue("1");
await expect(page.getByLabel("# Upload Events")).toHaveValue("1");
await page.getByLabel("Clear").click();
await expect(page.getByLabel("# Change Events")).toHaveValue("2");
await page.getByRole("button", { name: "Upload file" }).click();
await uploader.setInputFiles(["./test/files/file_test.ogg"]);
await expect(page.getByLabel("# Change Events")).toHaveValue("3");
await expect(page.getByLabel("# Upload Events")).toHaveValue("2");
const downloadPromise = page.waitForEvent("download");
await page.getByLabel("Download").click();
const download = await downloadPromise;
await expect(download.suggestedFilename()).toBe("file_test.ogg");
});
test("Video play, pause events work correctly.", async ({ page }) => {
await page.getByLabel("Upload file").click();
const uploader = await page.locator("input[type=file]");
await uploader.setInputFiles(["./test/files/file_test.ogg"]);
// Wait change event to trigger
await expect(page.getByLabel("# Change Events")).toHaveValue("1");
await page.getByLabel("play-pause-replay-button").first().click();
await expect(page.getByLabel("# Play Events")).toHaveValue("1");
await page.getByLabel("play-pause-replay-button").first().click();
await expect(page.getByLabel("# Pause Events")).toHaveValue("1");
});
test("Video drag-and-drop uploads a file to the server correctly.", async ({
page
}) => {
await page.getByLabel("Upload file").click();
await drag_and_drop_file(
page,
"input[type=file]",
"./test/files/file_test.ogg",
"file_test.ogg",
"video/*"
);
await expect(page.getByLabel("# Change Events")).toHaveValue("1");
await expect(page.getByLabel("# Upload Events")).toHaveValue("1");
});
test("Video drag-and-drop displays a warning when the file is of the wrong mime type.", async ({
page
}) => {
await page.getByLabel("Upload file").click();
await drag_and_drop_file(
page,
"input[type=file]",
"./test/files/file_test.ogg",
"file_test.ogg"
);
const toast = page.getByTestId("toast-body");
expect(toast).toContainText("warning");
});