gradio/js/chatbot/Chatbot.test.ts

Ignoring revisions in .git-blame-ignore-revs. Click here to bypass and see the normal blame view.

185 lines
4.6 KiB
TypeScript
Raw Normal View History

import { test, describe, assert, afterEach } from "vitest";
import { cleanup, render } from "@gradio/tootils";
import Chatbot from "./index.svelte";
import type { LoadingStatus } from "@gradio/statustracker";
import type { FileData } from "@gradio/upload";
const loading_status: LoadingStatus = {
eta: 0,
queue_position: 1,
Release new queue beta (#1969) * queue-refactor-backend (#1489) * queue-refactor-backend - create a template for the new design * queue-refactor-backend - clean after the old queue * queue-refactor-backend - add basic test to websocket endpoint * queue-refactor-backend - small fix * queue-refactor-backend - debugs&fixes&finalizations - test the flow with postman * queue-refactor-backend - tweaks on websocket closing * queue-refactor-backend - cleanup * queue-refactor-backend - cleanup & tweaks * queue-refactor-backend - cleanup & tweaks * queue-refactor-backend - cleanup & tweaks - correct the exception handling * queue-refactor-backend - add websockets dependency * queue-refactor-backend - reformat * queue-refactor-backend - add single event test * queue-refactor-backend - tweaks - remove outdated tests * queue-refactor-backend - reformat * queue-refactor-backend - reformat * queue-refactor-backend - reformat * queue-refactor-backend - add Queue configurations to Blocks.launch() - add live_queue_update to send estimations whenever a job gets fetched from the Queue * queue-refactor-backend - add Queue configurations to Blocks.launch() - add live_queue_update to send estimations whenever a job gets fetched from the Queue * queue-refactor-backend - tweaks * queue-refactor-backend - make SLEEP_WHEN_FREE shorter Co-authored-by: Ali Abid <aabid94@gmail.com> * Add estimation parameters to queue (#1889) * - tweaks on Estimation * version * Revert "version" This reverts commit bd1f4d7bfe3658a4967b93126859a62a511a70e2. * some fix and tweaks * implement queue frontend (#1950) * implement queue frontend * fix types * fix ws endpoint in build mode * cleanup * Queue tweaks (#1909) * tweaks on estimation payload * Queue keep ws connections open (#1910) * 1. keep ws connections open after the event process is completed 2. do not send estimations periodically if live queue updates is open * fix calculation * 1. tweaks on event_queue * fix issue - create new ws for each request * format * fix * fix tests * fix tests * tets * test * changes * changes * changes * change' * wtf * changes * changes * file perms * Release queue beta v1 (#1971) * - release the new queue * - bypass the issue in the tests - rewrite the lost part in the codebase * - add concurrent queue example (#1978) * rank_eta calc * Queue fixes (#1981) * change * format * - comment out queue tests as they dont work well * - reformat * Update gradio/event_queue.py Co-authored-by: Ömer Faruk Özdemir <farukozderim@gmail.com> * changes * changes * change * weird fix Co-authored-by: Ömer Faruk Özdemir <farukozderim@gmail.com> * release-queue-v3 (#1988) * Fix frontend queuing to target secure WSS (#1996) * change * format * changes * queue-concurrency-tweaks (#2002) 1. make gather_data and broadcast_estimation sequential instead of concurrent because they were deleting elements at the same time and raising expections which was lowering the performance * Update Queue API, documentation (#2026) * changes * changes * fixes * changes * change * fix Co-authored-by: Ömer Faruk Özdemir <farukozderim@gmail.com> Co-authored-by: pngwn <hello@pngwn.io>
2022-08-18 02:17:56 +08:00
queue_size: 1,
status: "complete",
scroll_to_output: false,
visible: true,
fn_index: 0,
show_progress: "full"
};
describe("Chatbot", () => {
afterEach(() => cleanup());
test("renders user and bot messages", async () => {
const { getAllByTestId } = await render(Chatbot, {
loading_status,
label: "chatbot",
value: [["user message one", "bot message one"]],
root: "",
root_url: "",
latex_delimiters: [{ left: "$$", right: "$$", display: true }],
theme_mode: "dark"
});
const bot = getAllByTestId("user")[0];
const user = getAllByTestId("bot")[0];
assert.exists(bot);
assert.exists(user);
});
test("renders additional message as they are passed", async () => {
const { component, getAllByTestId } = await render(Chatbot, {
loading_status,
label: "chatbot",
value: [["user message one", "bot message one"]],
root: "",
root_url: "",
latex_delimiters: [{ left: "$$", right: "$$", display: true }],
theme_mode: "dark"
});
await component.$set({
value: [
["user message one", "bot message one"],
["user message two", "bot message two"]
]
});
const user_2 = getAllByTestId("user");
const bot_2 = getAllByTestId("bot");
assert.equal(user_2.length, 2);
assert.equal(bot_2.length, 2);
assert.exists(user_2[1]);
assert.exists(bot_2[1]);
});
test("renders image bot and user messages", async () => {
const { component, getAllByTestId } = await render(Chatbot, {
loading_status,
label: "chatbot",
value: undefined,
root: "",
root_url: "",
latex_delimiters: [],
theme_mode: "dark"
});
let value: [string | FileData | null, string | FileData | null][] = Array(
2
).fill([
{
2023-07-07 01:43:49 +08:00
name: "https://gradio-builds.s3.amazonaws.com/demo-files/cheetah1.jpg",
mime_type: "image/jpeg",
alt_text: null,
data: null,
is_file: true
}
2023-07-07 01:43:49 +08:00
]);
await component.$set({
value: value
});
const image = getAllByTestId("chatbot-image") as HTMLImageElement[];
assert.isTrue(image[0].src.includes("cheetah1.jpg"));
assert.isTrue(image[1].src.includes("cheetah1.jpg"));
});
test("renders video bot and user messages", async () => {
const { component, getAllByTestId } = await render(Chatbot, {
loading_status,
label: "chatbot",
root: "",
root_url: "",
latex_delimiters: [],
theme_mode: "dark"
});
let value: Array<[string | FileData | null, string | FileData | null]> =
Array(2).fill([
{
name: "https://gradio-builds.s3.amazonaws.com/demo-files/video_sample.mp4",
mime_type: "video/mp4",
alt_text: null,
data: null,
is_file: true
}
]);
await component.$set({
value: value
});
const video = getAllByTestId("chatbot-video") as HTMLVideoElement[];
assert.isTrue(video[0].src.includes("video_sample.mp4"));
assert.isTrue(video[1].src.includes("video_sample.mp4"));
});
test("renders audio bot and user messages", async () => {
const { component, getAllByTestId } = await render(Chatbot, {
loading_status,
label: "chatbot",
root: "",
root_url: "",
latex_delimiters: [],
theme_mode: "dark"
});
let value = Array(2).fill([
{
2023-07-07 01:43:49 +08:00
name: "https://gradio-builds.s3.amazonaws.com/demo-files/audio_sample.wav",
mime_type: "audio/wav",
alt_text: null,
data: null,
is_file: true
}
2023-07-07 01:43:49 +08:00
]);
await component.$set({
value: value
});
const audio = getAllByTestId("chatbot-audio") as HTMLAudioElement[];
assert.isTrue(audio[0].src.includes("audio_sample.wav"));
assert.isTrue(audio[1].src.includes("audio_sample.wav"));
});
test("renders hyperlinks to file bot and user messages", async () => {
const { component, getAllByTestId } = await render(Chatbot, {
loading_status,
label: "chatbot",
root: "",
root_url: "",
latex_delimiters: [],
theme_mode: "dark"
});
let value = Array(2).fill([
{
name: "https://gradio-builds.s3.amazonaws.com/demo-files/titanic.csv",
mime_type: "text/csv",
alt_text: null,
data: "https://gradio-builds.s3.amazonaws.com/demo-files/titanic.csv",
is_file: true
}
]);
await component.$set({
value: value
});
const file_link = getAllByTestId("chatbot-file") as HTMLAnchorElement[];
assert.isTrue(file_link[0].href.includes("titanic.csv"));
assert.isTrue(file_link[0].href.includes("titanic.csv"));
});
});