Refactor UsersPage stories

BrunoQuaresma · BrunoQuaresma · commit f47f6568f1b0 · 2023-09-08T14:03:54.000Z
diff --git a/site/src/pages/UsersPage/ResetPasswordDialog.stories.tsx b/site/src/pages/UsersPage/ResetPasswordDialog.stories.tsx
@@ -1,28 +1,20 @@
-import { action } from "@storybook/addon-actions";
-import { Story } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react";
 import { MockUser } from "testHelpers/entities";
 
-import {
-  ResetPasswordDialog,
-  ResetPasswordDialogProps,
-} from "./ResetPasswordDialog";
+import { ResetPasswordDialog } from "./ResetPasswordDialog";
 
-export default {
+const meta: Meta<typeof ResetPasswordDialog> = {
   title: "components/Dialogs/ResetPasswordDialog",
   component: ResetPasswordDialog,
-  argTypes: {
-    onClose: { action: "onClose", defaultValue: action("onClose") },
-    onConfirm: { action: "onConfirm", defaultValue: action("onConfirm") },
-  },
 };
 
-const Template: Story<ResetPasswordDialogProps> = (
-  args: ResetPasswordDialogProps,
-) => <ResetPasswordDialog {...args} />;
+export default meta;
+type Story = StoryObj<typeof ResetPasswordDialog>;
 
-export const Example = Template.bind({});
-Example.args = {
-  open: true,
-  user: MockUser,
-  newPassword: "somerandomstringhere",
+export const Example: Story = {
+  args: {
+    open: true,
+    user: MockUser,
+    newPassword: "somerandomstringhere",
+  },
 };
diff --git a/site/src/pages/UsersPage/UsersPage.test.tsx b/site/src/pages/UsersPage/UsersPage.test.tsx
@@ -179,12 +179,6 @@ const updateUserRole = async (setupActionSpies: () => void, role: Role) => {
 };
 
 describe("UsersPage", () => {
-  it("shows users", async () => {
-    renderPage();
-    const users = await screen.findAllByText(/.*@coder.com/);
-    expect(users.length).toEqual(3);
-  });
-
   describe("suspend user", () => {
     describe("when it is success", () => {
       it("shows a success message and refresh the page", async () => {
diff --git a/site/src/pages/UsersPage/UsersTable/EditRolesButton.stories.tsx b/site/src/pages/UsersPage/UsersTable/EditRolesButton.stories.tsx
@@ -1,42 +1,41 @@
-import { ComponentMeta, Story } from "@storybook/react";
 import {
   MockOwnerRole,
   MockSiteRoles,
   MockUserAdminRole,
 } from "testHelpers/entities";
-import { EditRolesButtonProps, EditRolesButton } from "./EditRolesButton";
+import { EditRolesButton } from "./EditRolesButton";
+import type { Meta, StoryObj } from "@storybook/react";
 
-export default {
+const meta: Meta<typeof EditRolesButton> = {
   title: "components/EditRolesButton",
   component: EditRolesButton,
-  argTypes: {
-    defaultIsOpen: {
-      defaultValue: true,
-    },
+  args: {
+    defaultIsOpen: true,
   },
-} as ComponentMeta<typeof EditRolesButton>;
+};
 
-const Template: Story<EditRolesButtonProps> = (args) => (
-  <EditRolesButton {...args} />
-);
+export default meta;
+type Story = StoryObj<typeof EditRolesButton>;
 
-export const Open = Template.bind({});
-Open.args = {
-  roles: MockSiteRoles,
-  selectedRoles: [MockUserAdminRole, MockOwnerRole],
-};
-Open.parameters = {
-  chromatic: { delay: 300 },
+export const Open: Story = {
+  args: {
+    roles: MockSiteRoles,
+    selectedRoles: [MockUserAdminRole, MockOwnerRole],
+  },
+  parameters: {
+    chromatic: { delay: 300 },
+  },
 };
 
-export const Loading = Template.bind({});
-Loading.args = {
-  isLoading: true,
-  roles: MockSiteRoles,
-  selectedRoles: [MockUserAdminRole, MockOwnerRole],
-  userLoginType: "password",
-  oidcRoleSync: false,
-};
-Loading.parameters = {
-  chromatic: { delay: 300 },
+export const Loading: Story = {
+  args: {
+    isLoading: true,
+    roles: MockSiteRoles,
+    selectedRoles: [MockUserAdminRole, MockOwnerRole],
+    userLoginType: "password",
+    oidcRoleSync: false,
+  },
+  parameters: {
+    chromatic: { delay: 300 },
+  },
 };
