chore: add test for preview with set values

Author: brettkolodny

src/client/App.test.tsx

@@ -1,11 +1,6 @@
 import type { EditorProps } from "@monaco-editor/react";
 import { TooltipProvider } from "@radix-ui/react-tooltip";
-import {
-	cleanup,
-	render,
-	screen,
-	waitFor,
-} from "@testing-library/react";
+import { cleanup, render, screen, waitFor } from "@testing-library/react";
 import type { FC } from "react";
 import { createBrowserRouter, RouterProvider } from "react-router";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";

src/client/Preview.test.tsx

@@ -16,22 +16,27 @@ import { Preview } from "@/client/Preview";
 import type { ParameterWithSource } from "@/gen/types";
 import {
 	defaultExampleParameters,
+	defaultExampleParamterValues,
 	formTypesExampleParameters,
 } from "@/test-data/preview";
 import { mockUsers } from "@/user";
 
 type TestAppProps = {
 	parameters: ParameterWithSource[];
+	parameterValues?: Record<string, string>;
 };
 
-const TestPreview: FC<TestAppProps> = ({ parameters }) => {
+const TestPreview: FC<TestAppProps> = ({
+	parameters,
+	parameterValues = {},
+}) => {
 	return (
 		<PanelGroup direction="horizontal">
 			<Preview
 				wasmLoadState="loaded"
 				isDebouncing={false}
 				onDownloadOutput={() => null}
-				parameterValues={{}}
+				parameterValues={parameterValues}
 				setParameterValues={() => null}
 				output={null}
 				parameters={parameters}
@@ -44,20 +49,25 @@ const TestPreview: FC<TestAppProps> = ({ parameters }) => {
 	);
 };
 
-const router = (parameters: ParameterWithSource[]) =>
+const router = (parameters: ParameterWithSource[], parameterValues = {}) =>
 	createBrowserRouter([
 		{
 			path: "*",
-			Component: () => <TestPreview parameters={parameters} />,
+			Component: () => (
+				<TestPreview
+					parameters={parameters}
+					parameterValues={parameterValues}
+				/>
+			),
 		},
 	]);
 
-const TestApp: FC<TestAppProps> = ({ parameters }) => {
+const TestApp: FC<TestAppProps> = ({ parameters, parameterValues }) => {
 	return (
 		<ThemeProvider>
 			<TooltipProvider>
 				<EditorProvider>
-					<RouterProvider router={router(parameters)} />
+					<RouterProvider router={router(parameters, parameterValues)} />
 				</EditorProvider>
 			</TooltipProvider>
 		</ThemeProvider>
@@ -73,8 +83,7 @@ describe("Preview - Rendering", () => {
 		const page = render(<TestApp parameters={[]} />);
 
 		expect(findByTestId(page.container, "preview-empty-state"));
-	  
-	})
+	});
 
 	it("should render the default example as expected", async () => {
 		const page = render(<TestApp parameters={defaultExampleParameters} />);
@@ -87,7 +96,7 @@ describe("Preview - Rendering", () => {
 		);
 	});
 
-	it("should render the form type example as expected", async () => {
+	it("should render the form type example as with the expected default values", async () => {
 		const page = render(<TestApp parameters={formTypesExampleParameters} />);
 
 		const formTypeSelects = queryAllByLabelText(
@@ -142,4 +151,57 @@ describe("Preview - Rendering", () => {
 		);
 		expect(checkbox.getAttribute("data-state")).toBe("unchecked");
 	});
+
+	it("should render form elements with set values", async () => {
+		const page = render(
+			<TestApp 
+				parameters={formTypesExampleParameters}
+				parameterValues={defaultExampleParamterValues}
+			/>
+		);
+
+		const formTypeSelects = queryAllByLabelText(
+			page.container,
+			"How do you want to format the options of the next parameter?Immutable",
+		);
+
+		expect(formTypeSelects[0].textContent).toBe("Radio Selector");
+
+		const singleRadioGroup = getByLabelText(
+			page.container,
+			"Selecting a single value from a list of options.Immutable"
+		);
+		expect(getByLabelText(singleRadioGroup, "Alpha").getAttribute("data-state")).toBe(
+			"unchecked"
+		);
+		expect(getByLabelText(singleRadioGroup, "Bravo").getAttribute("data-state")).toBe(
+			"checked"
+		);
+		expect(getByLabelText(singleRadioGroup, "Charlie").getAttribute("data-state")).toBe(
+			"unchecked"
+		);
+
+		const numberInput = getByLabelText(
+			page.container,
+			"What is your favorite number?Immutable"
+		) as HTMLInputElement;
+		expect(numberInput.value).toBe("48");
+
+		const booleanRadioGroup = getByLabelText(
+			page.container,
+			"Do you agree with me?Immutable"
+		);
+		expect(getByLabelText(booleanRadioGroup, "Yes").getAttribute("data-state")).toBe(
+			"unchecked"
+		);
+		expect(getByLabelText(booleanRadioGroup, "No").getAttribute("data-state")).toBe(
+			"checked"
+		);
+
+		const likeItCheckbox = getByLabelText(
+			page.container,
+			"Did you like this demo?Immutable"
+		);
+		expect(likeItCheckbox.getAttribute("data-state")).toBe("checked");
+	});
 });

src/client/Preview.tsx

@@ -235,7 +235,10 @@ export const Preview: FC<PreviewProps> = ({
 
 const PreviewEmptyState = () => {
 	return (
-		<div className="flex flex-col items-center justify-center gap-3" data-testid="preview-empty-state">
+		<div
+			className="flex flex-col items-center justify-center gap-3"
+			data-testid="preview-empty-state"
+		>
 			<div className="flex items-center justify-center rounded-[6px] bg-highlight-sky p-2">
 				<ActivityIcon className="text-content-invert" width={24} height={24} />
 			</div>

src/test-data/preview.ts

@@ -833,3 +833,16 @@ export const formTypesExampleParameters: ParameterWithSource[] = [
 		},
 	},
 ];
+
+export const defaultExampleParamterValues: Record<string, string> = {
+	single_select: "radio",
+	single: "bravo-value",
+	number_format: "input",
+	number: "48",
+	boolean_format: "radio",
+	boolean: "false",
+	list_format: "radio",
+	list: JSON.stringify(["red"]),
+	like_it: "true",
+	satisfaction: "38",
+};