File size: 2,785 Bytes
a03b3ba |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 |
import { test, describe, assert, afterEach } from "vitest";
import { cleanup, render } from "@gradio/tootils";
import event from "@testing-library/user-event";
import Radio 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("Radio", () => {
afterEach(() => cleanup());
const choices = [
["dog", "dog"],
["cat", "cat"],
["turtle", "turtle"]
] as [string, string][];
test("renders provided value", async () => {
const { getAllByRole, getByTestId } = await render(Radio, {
choices: choices,
value: "cat",
label: "Radio"
});
assert.equal(
getByTestId("cat-radio-label").className.includes("selected"),
true
);
const radioButtons: HTMLOptionElement[] = getAllByRole(
"radio"
) as HTMLOptionElement[];
assert.equal(radioButtons.length, 3);
radioButtons.forEach((radioButton: HTMLOptionElement, index) => {
assert.equal(radioButton.value === choices[index][1], true);
});
});
test("should update the value when a radio is clicked", async () => {
const { getByDisplayValue, getByTestId } = await render(Radio, {
choices: choices,
value: "cat",
label: "Radio"
});
await event.click(getByDisplayValue("dog"));
assert.equal(
getByTestId("dog-radio-label").className.includes("selected"),
true
);
assert.equal(
getByTestId("cat-radio-label").classList.contains("selected"),
false
);
await event.click(getByDisplayValue("turtle"));
assert.equal(
getByTestId("turtle-radio-label").classList.contains("selected"),
true
);
});
test("should dispatch the select event when clicks", async () => {
const { listen, getAllByTestId } = await render(Radio, {
choices: choices,
value: "cat",
label: "Radio"
});
const mock = listen("select");
await event.click(getAllByTestId("dog-radio-label")[0]);
expect(mock.callCount).toBe(1);
expect(mock.calls[0][0].detail.data.value).toEqual("dog");
});
test("when multiple radios are on the screen, they should not conflict", async () => {
const { container } = await render(Radio, {
choices: choices,
value: "cat",
label: "Radio"
});
const { getAllByLabelText } = await render(
Radio,
{
choices: choices,
value: "dog",
label: "Radio"
},
container
);
const items = getAllByLabelText("dog") as HTMLInputElement[];
expect([items[0].checked, items[1].checked]).toEqual([false, true]);
await event.click(items[0]);
expect([items[0].checked, items[1].checked]).toEqual([true, true]);
cleanup();
});
});
|