test: add workspace rename use case (#169)

Author: peppescg

src/features/workspace/components/__tests__/archive-workspace.test.tsx

@@ -8,7 +8,7 @@ const mockToast = vi.fn();
 vi.mock("react-router-dom", async () => {
   const original =
     await vi.importActual<typeof import("react-router-dom")>(
-      "react-router-dom"
+      "react-router-dom",
     );
   return {
     ...original,
@@ -19,7 +19,7 @@ vi.mock("react-router-dom", async () => {
 vi.mock("@stacklok/ui-kit", async () => {
   const original =
     await vi.importActual<typeof import("@stacklok/ui-kit")>(
-      "@stacklok/ui-kit"
+      "@stacklok/ui-kit",
     );
   return {
     ...original,
@@ -31,5 +31,6 @@ test("archive workspace", async () => {
   render(<ArchiveWorkspace isArchived={false} workspaceName="foo" />);
 
   await userEvent.click(screen.getByRole("button", { name: /archive/i }));
-  await waitFor(() => expect(mockNavigate).toBeCalled());
+  await waitFor(() => expect(mockNavigate).toHaveBeenCalledTimes(1));
+  expect(mockNavigate).toHaveBeenCalledWith("/workspaces");
 });

src/features/workspace/components/workspace-name.tsx

@@ -39,7 +39,10 @@ export function WorkspaceName({
 
   return (
     <Form onSubmit={handleSubmit} validationBehavior="aria">
-      <Card className={twMerge(className, "shrink-0")}>
+      <Card
+        className={twMerge(className, "shrink-0")}
+        data-testid="workspace-name"
+      >
         <CardBody>
           <TextField
             aria-label="Workspace name"

src/routes/__tests__/route-workspace.test.tsx

@@ -1,7 +1,10 @@
 import { render, waitFor, within } from "@/lib/test-utils";
-import { test, expect } from "vitest";
+import { test, expect, vi } from "vitest";
+import userEvent from "@testing-library/user-event";
 import { RouteWorkspace } from "../route-workspace";
 
+const mockNavigate = vi.fn();
+
 const renderComponent = () =>
   render(<RouteWorkspace />, {
     routeConfig: {
@@ -24,6 +27,17 @@ vi.mock("@monaco-editor/react", () => {
   return { default: FakeEditor };
 });
 
+vi.mock("react-router-dom", async () => {
+  const original =
+    await vi.importActual<typeof import("react-router-dom")>(
+      "react-router-dom",
+    );
+  return {
+    ...original,
+    useNavigate: () => mockNavigate,
+  };
+});
+
 test("renders title", () => {
   const { getByRole } = renderComponent();
 
@@ -59,3 +73,19 @@ test("has breadcrumbs", () => {
   ).toHaveAttribute("href", "/workspaces");
   expect(within(breadcrumbs).getByText(/workspace settings/i)).toBeVisible();
 });
+
+test("rename workspace", async () => {
+  const { getByRole, getByTestId } = renderComponent();
+
+  const workspaceName = getByRole("textbox", {
+    name: /workspace name/i,
+  });
+  await userEvent.type(workspaceName, "_renamed");
+
+  const saveBtn = within(getByTestId("workspace-name")).getByRole("button", {
+    name: /save/i,
+  });
+  await userEvent.click(saveBtn);
+  await waitFor(() => expect(mockNavigate).toHaveBeenCalledTimes(1));
+  expect(mockNavigate).toHaveBeenCalledWith("/workspace/foo_renamed");
+});