Use Storybook for non-redirect org settings tests

code-asher · code-asher · commit e3ac9a28ad77 · 2024-08-09T13:14:45.000-08:00
diff --git a/site/src/pages/ManagementSettingsPage/OrganizationSettingsPage.stories.tsx b/site/src/pages/ManagementSettingsPage/OrganizationSettingsPage.stories.tsx
@@ -0,0 +1,69 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { reactRouterParameters } from "storybook-addon-remix-react-router";
+import {
+  MockDefaultOrganization,
+  MockOrganization2,
+  MockUser,
+} from "testHelpers/entities";
+import { organizationsKey } from "api/queries/organizations";
+import { permissionsToCheck } from "contexts/auth/permissions";
+import { withAuthProvider, withDashboardProvider } from "testHelpers/storybook";
+import OrganizationSettingsPage from "./OrganizationSettingsPage";
+
+const meta: Meta<typeof OrganizationSettingsPage> = {
+  title: "pages/OrganizationSettingsPage",
+  component: OrganizationSettingsPage,
+  decorators: [withAuthProvider, withDashboardProvider],
+  parameters: {
+    user: MockUser,
+    permissions: { viewDeploymentValues: true },
+    queries: [
+      {
+        key: ["organizations", [MockDefaultOrganization.id], "permissions"],
+        data: {},
+      },
+    ],
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof OrganizationSettingsPage>;
+
+export const NoRedirectableOrganizations: Story = {};
+
+export const OrganizationDoesNotExist: Story = {
+  parameters: {
+    reactRouter: reactRouterParameters({
+      location: { pathParams: { organization: "does-not-exist" } },
+      routing: { path: "/organizations/:organization" },
+    }),
+  },
+};
+
+export const CannotEditOrganization: Story = {
+  parameters: {
+    reactRouter: reactRouterParameters({
+      location: { pathParams: { organization: MockDefaultOrganization.name } },
+      routing: { path: "/organizations/:organization" },
+    }),
+  },
+};
+
+export const CanEditOrganization: Story = {
+  parameters: {
+    reactRouter: reactRouterParameters({
+      location: { pathParams: { organization: MockDefaultOrganization.name } },
+      routing: { path: "/organizations/:organization" },
+    }),
+    queries: [
+      {
+        key: ["organizations", [MockDefaultOrganization.id], "permissions"],
+        data: {
+          [MockDefaultOrganization.id]: {
+            editOrganization: true,
+          },
+        },
+      },
+    ],
+  },
+};
diff --git a/site/src/pages/ManagementSettingsPage/OrganizationSettingsPage.test.tsx b/site/src/pages/ManagementSettingsPage/OrganizationSettingsPage.test.tsx
@@ -13,39 +13,15 @@ import OrganizationSettingsPage from "./OrganizationSettingsPage";
 
 jest.spyOn(console, "error").mockImplementation(() => {});
 
-const renderRootPage = async () => {
+const renderPage = async () => {
   renderWithManagementSettingsLayout(<OrganizationSettingsPage />, {
     route: "/organizations",
     path: "/organizations/:organization?",
   });
   await waitForLoaderToBeRemoved();
 };
 
-const renderPage = async (orgName: string) => {
-  renderWithManagementSettingsLayout(<OrganizationSettingsPage />, {
-    route: `/organizations/${orgName}`,
-    path: "/organizations/:organization",
-  });
-  await waitForLoaderToBeRemoved();
-};
-
 describe("OrganizationSettingsPage", () => {
-  it("has no organizations", async () => {
-    server.use(
-      http.get("/api/v2/organizations", () => {
-        return HttpResponse.json([]);
-      }),
-      http.post("/api/v2/authcheck", async () => {
-        return HttpResponse.json({
-          [`${MockDefaultOrganization.id}.editOrganization`]: true,
-          viewDeploymentValues: true,
-        });
-      }),
-    );
-    await renderRootPage();
-    await screen.findByText("No organizations found");
-  });
-
   it("has no editable organizations", async () => {
     server.use(
       http.get("/api/v2/organizations", () => {
@@ -57,7 +33,7 @@ describe("OrganizationSettingsPage", () => {
         });
       }),
     );
-    await renderRootPage();
+    await renderPage();
     await screen.findByText("No organizations found");
   });
 
@@ -75,7 +51,7 @@ describe("OrganizationSettingsPage", () => {
         });
       }),
     );
-    await renderRootPage();
+    await renderPage();
     const form = screen.getByTestId("org-settings-form");
     expect(within(form).getByRole("textbox", { name: "Name" })).toHaveValue(
       MockDefaultOrganization.name,
@@ -94,46 +70,10 @@ describe("OrganizationSettingsPage", () => {
         });
       }),
     );
-    await renderRootPage();
+    await renderPage();
     const form = screen.getByTestId("org-settings-form");
     expect(within(form).getByRole("textbox", { name: "Name" })).toHaveValue(
       MockOrganization2.name,
     );
   });
-
-  it("cannot find organization", async () => {
-    server.use(
-      http.get("/api/v2/organizations", () => {
-        return HttpResponse.json([MockDefaultOrganization, MockOrganization2]);
-      }),
-      http.post("/api/v2/authcheck", async () => {
-        return HttpResponse.json({
-          [`${MockOrganization2.id}.editOrganization`]: true,
-          viewDeploymentValues: true,
-        });
-      }),
-    );
-    await renderPage("the-endless-void");
-    await screen.findByText("Organization not found");
-  });
-
-  it("cannot edit organization", async () => {
-    server.use(
-      http.get("/api/v2/organizations", () => {
-        return HttpResponse.json([MockDefaultOrganization]);
-      }),
-      http.post("/api/v2/authcheck", async () => {
-        return HttpResponse.json({
-          viewDeploymentValues: true,
-        });
-      }),
-    );
-    // No form since they cannot edit, instead sees the summary view.
-    await renderPage(MockDefaultOrganization.name);
-    expect(screen.queryByTestId("org-settings-form")).not.toBeInTheDocument();
-    await screen.findByRole("heading", {
-      level: 1,
-      name: MockDefaultOrganization.display_name,
-    });
-  });
 });
