Add radio unit test (#4710)

* add radio unit test

* add default selection

* remove unused spy

js/app/src/components/Radio/Radio.svelte

@@ -4,17 +4,17 @@
 	import StatusTracker from "../StatusTracker/StatusTracker.svelte";
 	import type { LoadingStatus } from "../StatusTracker/types";
 
-	export let label: string = "Radio";
+	export let label = "Radio";
 	export let info: string | undefined = undefined;
-	export let elem_id: string = "";
-	export let elem_classes: Array<string> = [];
-	export let visible: boolean = true;
+	export let elem_id = "";
+	export let elem_classes: string[] = [];
+	export let visible = true;
 	export let value: string | null = null;
-	export let value_is_output: boolean = false;
-	export let choices: Array<string> = [];
+	export let value_is_output = false;
+	export let choices: string[] = [];
 	export let mode: "static" | "dynamic";
 	export let show_label: boolean;
-	export let container: boolean = false;
+	export let container = false;
 	export let scale: number | null = null;
 	export let min_width: number | undefined = undefined;
 	export let loading_status: LoadingStatus;

js/app/src/components/Radio/Radio.test.ts

@@ -0,0 +1,77 @@
+import { test, describe, assert, afterEach } from "vitest";
+
+import { cleanup, render } from "@gradio/tootils";
+import event from "@testing-library/user-event";
+
+import Radio from "./Radio.svelte";
+import type { LoadingStatus } from "../StatusTracker/types";
+
+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", "cat", "turtle"];
+
+	test("renders provided value", () => {
+		const { getAllByRole, getByTestId } = render(Radio, {
+			show_label: true,
+			loading_status,
+			choices: choices,
+			value: "cat",
+			label: "Radio",
+			mode: "dynamic"
+		});
+
+		const radioButtons: HTMLOptionElement[] = getAllByRole("radio");
+
+		assert.equal(
+			getByTestId("cat-radio-label").className.includes("selected"),
+			true
+		);
+
+		assert.equal(radioButtons.length, 3);
+
+		radioButtons.forEach((radioButton: HTMLOptionElement, index) => {
+			assert.equal(radioButton.value === choices[index], true);
+		});
+	});
+
+	test("should update the value when a radio is clicked", async () => {
+		const { getByDisplayValue, getByTestId } = render(Radio, {
+			show_label: true,
+			loading_status,
+			choices: choices,
+			value: "cat",
+			label: "Radio",
+			mode: "dynamic"
+		});
+
+		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
+		);
+	});
+});

js/form/src/Radio.svelte

@@ -4,12 +4,12 @@
 	import type { SelectData } from "@gradio/utils";
 
 	export let value: string | null;
-	export let value_is_output: boolean = false;
-	export let choices: Array<string>;
-	export let disabled: boolean = false;
+	export let value_is_output = false;
+	export let choices: string[];
+	export let disabled = false;
 	export let label: string;
 	export let info: string | undefined = undefined;
-	export let show_label: boolean = true;
+	export let show_label = true;
 	export let elem_id: string;
 
 	const dispatch = createEventDispatcher<{
@@ -18,7 +18,7 @@
 		select: SelectData;
 	}>();
 
-	function handle_change() {
+	function handle_change(): void {
 		dispatch("change", value);
 		if (!value_is_output) {
 			dispatch("input");
@@ -34,7 +34,11 @@
 
 <div class="wrap">
 	{#each choices as choice, i (i)}
-		<label class:disabled class:selected={value === choice}>
+		<label
+			class:disabled
+			class:selected={value === choice}
+			data-testid={`${choice}-radio-label`}
+		>
 			<input
 				{disabled}
 				bind:group={value}