Fix tests and logic

BrunoQuaresma · BrunoQuaresma · commit 953f3db79deb · 2025-05-30T14:47:48.000Z
diff --git a/site/src/pages/TasksPage/TasksPage.stories.tsx b/site/src/pages/TasksPage/TasksPage.stories.tsx
@@ -1,5 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { expect, spyOn, userEvent, within } from "@storybook/test";
+import { API } from "api/api";
+import { MockUsers } from "pages/UsersPage/storybookData/users";
 import {
 	MockTemplate,
 	MockUserOwner,
@@ -21,6 +23,12 @@ const meta: Meta<typeof TasksPage> = {
 	parameters: {
 		user: MockUserOwner,
 	},
+	beforeEach: () => {
+		spyOn(API, "getUsers").mockResolvedValue({
+			users: MockUsers,
+			count: MockUsers.length,
+		});
+	},
 };
 
 export default meta;
@@ -62,7 +70,8 @@ export const LoadingTasks: Story = {
 		const canvas = within(canvasElement);
 
 		await step("Select the first AI template", async () => {
-			const combobox = await canvas.findByRole("combobox");
+			const form = await canvas.findByRole("form");
+			const combobox = await within(form).findByRole("combobox");
 			expect(combobox).toHaveTextContent(MockTemplate.display_name);
 		});
 	},
@@ -94,37 +103,40 @@ export const LoadedTasks: Story = {
 	},
 };
 
+const newTaskData = {
+	prompt: "Create a new task",
+	workspace: {
+		...MockWorkspace,
+		id: "workspace-4",
+		latest_app_status: {
+			...MockWorkspaceAppStatus,
+			message: "Task created successfully!",
+		},
+	},
+};
+
 export const CreateTaskSuccessfully: Story = {
 	decorators: [withProxyProvider()],
 	beforeEach: () => {
 		spyOn(data, "fetchAITemplates").mockResolvedValue([MockTemplate]);
-		spyOn(data, "fetchTasks").mockResolvedValue(MockTasks);
-		spyOn(data, "createTask").mockImplementation((prompt: string) => {
-			return Promise.resolve({
-				prompt,
-				workspace: {
-					...MockWorkspace,
-					latest_app_status: {
-						...MockWorkspaceAppStatus,
-						message: "Task created successfully!",
-					},
-				},
-			});
-		});
+		spyOn(data, "fetchTasks")
+			.mockResolvedValueOnce(MockTasks)
+			.mockResolvedValue([newTaskData, ...MockTasks]);
+		spyOn(data, "createTask").mockResolvedValue(newTaskData);
 	},
 	play: async ({ canvasElement, step }) => {
 		const canvas = within(canvasElement);
 
 		await step("Run task", async () => {
 			const prompt = await canvas.findByLabelText(/prompt/i);
-			await userEvent.type(prompt, "Create a new task");
+			await userEvent.type(prompt, newTaskData.prompt);
 			const submitButton = canvas.getByRole("button", { name: /run task/i });
 			await userEvent.click(submitButton);
 		});
 
 		await step("Verify task in the table", async () => {
 			await canvas.findByRole("row", {
-				name: /create a new task/i,
+				name: new RegExp(newTaskData.prompt, "i"),
 			});
 		});
 	},
diff --git a/site/src/pages/TasksPage/TasksPage.tsx b/site/src/pages/TasksPage/TasksPage.tsx
@@ -77,7 +77,7 @@ const TasksPage: FC = () => {
 	const [filter, setFilter] = useState<TasksFilter>({
 		user: {
 			value: user.username,
-			label: user.name ?? user.username,
+			label: user.name || user.username,
 			avatarUrl: user.avatar_url,
 		},
 	});
@@ -179,12 +179,9 @@ const TaskForm: FC<TaskFormProps> = ({ templates }) => {
 	const createTaskMutation = useMutation({
 		mutationFn: async ({ prompt, templateId }: CreateTaskMutationFnProps) =>
 			data.createTask(prompt, user.id, templateId),
-		onSuccess: (newTask) => {
-			// The current data loading is heavy, so we manually update the cache to
-			// avoid re-fetching. Once we improve data loading, we can replace the
-			// manual update with queryClient.invalidateQueries.
-			queryClient.setQueryData<Task[]>(["tasks"], (oldTasks = []) => {
-				return [newTask, ...oldTasks];
+		onSuccess: async () => {
+			await queryClient.invalidateQueries({
+				queryKey: ["tasks"],
 			});
 		},
 	});
@@ -218,6 +215,7 @@ const TaskForm: FC<TaskFormProps> = ({ templates }) => {
 		<form
 			className="border border-border border-solid rounded-lg p-4"
 			onSubmit={onSubmit}
+			aria-label="Create AI task"
 		>
 			<fieldset disabled={createTaskMutation.isPending}>
 				<label htmlFor="prompt" className="sr-only">
diff --git a/site/src/pages/TasksPage/UsersCombobox.tsx b/site/src/pages/TasksPage/UsersCombobox.tsx
@@ -49,7 +49,7 @@ export const UsersCombobox: FC<UsersComboboxProps> = ({
 	});
 
 	const options = usersQuery.data?.map((user) => ({
-		label: user.name ?? user.username,
+		label: user.name || user.username,
 		value: user.username,
 		avatarUrl: user.avatar_url,
 	}));
