mirror of
https://github.com/gradio-app/gradio.git
synced 2024-11-27 01:40:20 +08:00
49d9c48537
* processing * add changeset * changes * add changeset * add changeset * changes * changes * clean * changes * add changeset * add changeset * root url * refactor * testing * testing * log * logs * fix * format * add changeset * remove * add root * format * apply to everything * annoying fix * fixes * lint * fixes * fixes * fixes * fix tests * fix js tests * format * fix python tests * clean guides * add changeset * add changeset * simplify * add changeset --------- Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com> Co-authored-by: pngwn <hello@pngwn.io>
283 lines
8.1 KiB
TypeScript
283 lines
8.1 KiB
TypeScript
import {
|
|
test,
|
|
describe,
|
|
assert,
|
|
afterEach,
|
|
vi,
|
|
beforeAll,
|
|
beforeEach,
|
|
expect
|
|
} from "vitest";
|
|
import { spy, spyOn } from "tinyspy";
|
|
import { cleanup, render } from "@gradio/tootils";
|
|
import { setupi18n } from "../app/src/i18n";
|
|
|
|
import Video from "./Index.svelte";
|
|
|
|
import type { LoadingStatus } from "@gradio/statustracker";
|
|
|
|
const loading_status = {
|
|
eta: 0,
|
|
queue_position: 1,
|
|
queue_size: 1,
|
|
status: "complete" as LoadingStatus["status"],
|
|
scroll_to_output: false,
|
|
visible: true,
|
|
fn_index: 0,
|
|
show_progress: "full" as LoadingStatus["show_progress"]
|
|
};
|
|
|
|
describe("Video", () => {
|
|
beforeAll(() => {
|
|
window.HTMLMediaElement.prototype.play = vi.fn();
|
|
window.HTMLMediaElement.prototype.pause = vi.fn();
|
|
});
|
|
beforeEach(setupi18n);
|
|
afterEach(() => cleanup());
|
|
|
|
test("renders provided value and label", async () => {
|
|
const { getByTestId, queryAllByText } = await render(Video, {
|
|
show_label: true,
|
|
loading_status,
|
|
value: {
|
|
video: {
|
|
path: "https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/demo/video_component/files/a.mp4",
|
|
url: "https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/demo/video_component/files/a.mp4"
|
|
},
|
|
subtitles: null
|
|
},
|
|
label: "Test Label",
|
|
root: "foo",
|
|
proxy_url: null,
|
|
streaming: false,
|
|
pending: false,
|
|
name: "bar",
|
|
sources: ["upload"],
|
|
interactive: true
|
|
});
|
|
let vid = getByTestId("Test Label-player") as HTMLVideoElement;
|
|
assert.equal(
|
|
vid.src,
|
|
"https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/demo/video_component/files/a.mp4"
|
|
);
|
|
assert.equal(queryAllByText("Test Label").length, 1);
|
|
});
|
|
|
|
test("hides label", async () => {
|
|
const { queryAllByText } = await render(Video, {
|
|
show_label: false,
|
|
loading_status,
|
|
value: {
|
|
video: {
|
|
path: "https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/demo/video_component/files/a.mp4",
|
|
url: "https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/demo/video_component/files/a.mp4"
|
|
},
|
|
subtitles: null
|
|
},
|
|
label: "Video Component",
|
|
root: "foo",
|
|
proxy_url: null,
|
|
streaming: false,
|
|
pending: false,
|
|
name: "bar",
|
|
sources: ["upload"],
|
|
interactive: true
|
|
});
|
|
assert.equal(queryAllByText("Video Component").length, 1);
|
|
});
|
|
|
|
test("static Video sets value", async () => {
|
|
const { getByTestId } = await render(Video, {
|
|
show_label: true,
|
|
loading_status,
|
|
value: {
|
|
video: {
|
|
path: "https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/demo/video_component/files/a.mp4",
|
|
url: "https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/demo/video_component/files/a.mp4"
|
|
},
|
|
subtitles: null
|
|
},
|
|
root: "foo",
|
|
proxy_url: null,
|
|
streaming: false,
|
|
pending: false,
|
|
name: "bar",
|
|
sources: ["upload"],
|
|
mode: "static"
|
|
});
|
|
let vid = getByTestId("test-player") as HTMLVideoElement;
|
|
assert.equal(
|
|
vid.src,
|
|
"https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/demo/video_component/files/a.mp4"
|
|
);
|
|
});
|
|
|
|
test("when autoplay is true `media.play` should be called in static mode", async () => {
|
|
const { getByTestId } = await render(Video, {
|
|
show_label: true,
|
|
loading_status,
|
|
interactive: false,
|
|
value: {
|
|
video: {
|
|
path: "https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/demo/video_component/files/a.mp4",
|
|
url: "https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/demo/video_component/files/a.mp4"
|
|
},
|
|
subtitles: null
|
|
},
|
|
root: "foo",
|
|
proxy_url: null,
|
|
streaming: false,
|
|
pending: false,
|
|
sources: ["upload"],
|
|
autoplay: true
|
|
});
|
|
const startButton = getByTestId("test-player") as HTMLVideoElement;
|
|
const fn = spyOn(startButton, "play");
|
|
startButton.dispatchEvent(new Event("loadeddata"));
|
|
assert.equal(fn.callCount, 1);
|
|
});
|
|
|
|
test("when autoplay is true `media.play` should be called in dynamic mode", async () => {
|
|
const { getByTestId } = await render(Video, {
|
|
show_label: true,
|
|
loading_status,
|
|
value: {
|
|
video: {
|
|
path: "https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/demo/video_component/files/a.mp4",
|
|
url: "https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/demo/video_component/files/a.mp4"
|
|
},
|
|
subtitles: null
|
|
},
|
|
root: "foo",
|
|
proxy_url: null,
|
|
streaming: false,
|
|
pending: false,
|
|
sources: ["upload"],
|
|
autoplay: true
|
|
});
|
|
const startButton = getByTestId("test-player") as HTMLVideoElement;
|
|
const fn = spyOn(startButton, "play");
|
|
startButton.dispatchEvent(new Event("loadeddata"));
|
|
assert.equal(fn.callCount, 1);
|
|
});
|
|
|
|
test("when autoplay is true `media.play` should be called in static mode when the Video data is updated", async () => {
|
|
const { component, getByTestId } = await render(Video, {
|
|
show_label: true,
|
|
loading_status,
|
|
interactive: false,
|
|
value: {
|
|
video: {
|
|
path: "https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/demo/video_component/files/a.mp4",
|
|
url: "https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/demo/video_component/files/a.mp4"
|
|
},
|
|
subtitles: null
|
|
},
|
|
root: "foo",
|
|
proxy_url: null,
|
|
streaming: false,
|
|
pending: false,
|
|
sources: ["upload"],
|
|
autoplay: true
|
|
});
|
|
const startButton = getByTestId("test-player") as HTMLVideoElement;
|
|
const fn = spyOn(startButton, "play");
|
|
startButton.dispatchEvent(new Event("loadeddata"));
|
|
component.$set({
|
|
value: {
|
|
video: {
|
|
path: "https://gradio-builds.s3.amazonaws.com/demo-files/audio_sample.wav"
|
|
}
|
|
}
|
|
});
|
|
startButton.dispatchEvent(new Event("loadeddata"));
|
|
assert.equal(fn.callCount, 2);
|
|
});
|
|
|
|
test("when autoplay is true `media.play` should be called in dynamic mode when the Video data is updated", async () => {
|
|
const { component, getByTestId } = await render(Video, {
|
|
show_label: true,
|
|
loading_status,
|
|
interactive: true,
|
|
value: {
|
|
video: {
|
|
path: "https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/demo/video_component/files/a.mp4",
|
|
url: "https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/demo/video_component/files/a.mp4"
|
|
},
|
|
subtitles: null
|
|
},
|
|
root: "foo",
|
|
proxy_url: null,
|
|
streaming: false,
|
|
pending: false,
|
|
sources: ["upload"],
|
|
autoplay: true
|
|
});
|
|
const startButton = getByTestId("test-player") as HTMLVideoElement;
|
|
const fn = spyOn(startButton, "play");
|
|
startButton.dispatchEvent(new Event("loadeddata"));
|
|
component.$set({
|
|
value: {
|
|
video: {
|
|
path: "https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/demo/video_component/files/a.mp4",
|
|
url: "https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/demo/video_component/files/a.mp4"
|
|
},
|
|
subtitles: null
|
|
}
|
|
});
|
|
startButton.dispatchEvent(new Event("loadeddata"));
|
|
assert.equal(fn.callCount, 2);
|
|
});
|
|
test("renders video and download button", async () => {
|
|
const data = {
|
|
video: {
|
|
path: "https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/demo/video_component/files/a.mp4",
|
|
url: "https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/demo/video_component/files/a.mp4"
|
|
}
|
|
};
|
|
const results = await render(Video, {
|
|
interactive: false,
|
|
label: "video",
|
|
show_label: true,
|
|
value: data,
|
|
root: "https://localhost:8000"
|
|
});
|
|
|
|
const downloadButton = results.getAllByTestId("download-div")[0];
|
|
expect(
|
|
downloadButton.getElementsByTagName("a")[0].getAttribute("href")
|
|
).toBe(data.video.path);
|
|
expect(
|
|
downloadButton.getElementsByTagName("button").length
|
|
).toBeGreaterThan(0);
|
|
});
|
|
|
|
test("video change event trigger fires when value is changed and only fires once", async () => {
|
|
const { component, listen } = await render(Video, {
|
|
show_label: true,
|
|
loading_status,
|
|
interactive: true,
|
|
value: [
|
|
{
|
|
path: "https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/demo/video_component/files/a.mp4"
|
|
}
|
|
],
|
|
root: "foo",
|
|
proxy_url: null,
|
|
streaming: false,
|
|
pending: false,
|
|
sources: ["upload"],
|
|
autoplay: true
|
|
});
|
|
|
|
const mock = listen("change");
|
|
|
|
(component.value = [
|
|
{
|
|
path: "https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/demo/video_component/files/b.mp4"
|
|
}
|
|
]),
|
|
assert.equal(mock.callCount, 1);
|
|
});
|
|
});
|