Add missing tests

coder · BrunoQuaresma · May 10, 2022 · May 6, 2022 · May 6, 2022 · May 6, 2022
commit 9c0587ecf3f3721701ade54d7ba93c52d95b1846
diff --git a/site/src/components/RoleSelect/RoleSelect.stories.tsx b/site/src/components/RoleSelect/RoleSelect.stories.tsx
@@ -0,0 +1,24 @@
+import { ComponentMeta, Story } from "@storybook/react"
+import React from "react"
+import { MockAdminRole, MockMemberRole, MockSiteRoles } from "../../testHelpers"
+import { RoleSelect, RoleSelectProps } from "./RoleSelect"
+
+export default {
+  title: "components/RoleSelect",
+  component: RoleSelect,
+} as ComponentMeta<typeof RoleSelect>
+
+const Template: Story<RoleSelectProps> = (args) => <RoleSelect {...args} />
+
+export const Close = Template.bind({})
+Close.args = {
+  roles: MockSiteRoles,
+  selectedRoles: [MockAdminRole, MockMemberRole],
+}
+
+export const Open = Template.bind({})
+Open.args = {
+  open: true,
+  roles: MockSiteRoles,
+  selectedRoles: [MockAdminRole, MockMemberRole],
+}
diff --git a/.../src/components/UsersTable/RoleSelect.tsx → .../src/components/RoleSelect/RoleSelect.tsx b/.../src/components/UsersTable/RoleSelect.tsx → .../src/components/RoleSelect/RoleSelect.tsx
@@ -5,6 +5,9 @@ import { makeStyles, Theme } from "@material-ui/core/styles"
 import React from "react"
 import { Role } from "../../api/typesGenerated"
 
+export const Language = {
+  label: "Roles",
+}
 export interface RoleSelectProps {
   roles: Role[]
   selectedRoles: Role[]
@@ -21,6 +24,7 @@ export const RoleSelect: React.FC<RoleSelectProps> = ({ roles, selectedRoles, lo
 
   return (
     <Select
+      aria-label={Language.label}
       open={open}
       multiple
       value={value}

diff --git a/site/src/components/UsersTable/RoleSelect.stories.tsx b/site/src/components/UsersTable/RoleSelect.stories.tsx
diff --git a/site/src/components/UsersTable/UsersTable.tsx b/site/src/components/UsersTable/UsersTable.tsx
@@ -8,11 +8,11 @@ import React from "react"
 import { UserResponse } from "../../api/types"
 import * as TypesGen from "../../api/typesGenerated"
 import { EmptyState } from "../EmptyState/EmptyState"
+import { RoleSelect } from "../RoleSelect/RoleSelect"
 import { TableHeaderRow } from "../TableHeaders/TableHeaders"
 import { TableRowMenu } from "../TableRowMenu/TableRowMenu"
 import { TableTitle } from "../TableTitle/TableTitle"
 import { UserCell } from "../UserCell/UserCell"
-import { RoleSelect } from "./RoleSelect"
 
 export const Language = {
   pageTitle: "Users",

diff --git a/site/src/pages/UsersPage/UsersPage.test.tsx b/site/src/pages/UsersPage/UsersPage.test.tsx
@@ -1,10 +1,12 @@
 import { fireEvent, screen, waitFor, within } from "@testing-library/react"
 import React from "react"
 import * as API from "../../api"
+import { Role } from "../../api/typesGenerated"
 import { GlobalSnackbar } from "../../components/GlobalSnackbar/GlobalSnackbar"
 import { Language as ResetPasswordDialogLanguage } from "../../components/ResetPasswordDialog/ResetPasswordDialog"
+import { Language as RoleSelectLanguage } from "../../components/RoleSelect/RoleSelect"
 import { Language as UsersTableLanguage } from "../../components/UsersTable/UsersTable"
-import { MockUser, MockUser2, render } from "../../testHelpers"
+import { MockAuditorRole, MockUser, MockUser2, render } from "../../testHelpers"
 import { Language as usersXServiceLanguage } from "../../xServices/users/usersXService"
 import { Language as UsersPageLanguage, UsersPage } from "./UsersPage"
 
@@ -62,6 +64,34 @@ const resetUserPassword = async (setupActionSpies: () => void) => {
   fireEvent.click(confirmButton)
 }
 
+const updateUserRole = async (setupActionSpies: () => void, role: Role) => {
+  // Get the first user in the table
+  const users = await screen.findAllByText(/.*@coder.com/)
+  const firstUserRow = users[0].closest("tr")
+  if (!firstUserRow) {
+    throw new Error("Error on get the first user row")
+  }
+
+  // Click on the "roles" menu to display the role options
+  const rolesLabel = within(firstUserRow).getByLabelText(RoleSelectLanguage.label)
+  const rolesMenuTrigger = within(rolesLabel).getByRole("button")
+  // For v4, the Select was changed to open on mouseDown instead of click
+  // https://github.com/mui-org/material-ui/pull/17978
+  fireEvent.mouseDown(rolesMenuTrigger)
+
+  // Setup spies to check the actions after
+  setupActionSpies()
+
+  // Click on the role option
+  const listBox = screen.getByRole("listbox")
+  const auditorOption = within(listBox).getByRole("option", { name: role.display_name })
+  fireEvent.click(auditorOption)
+
+  return {
+    rolesMenuTrigger,
+  }
+}
+
 describe("Users Page", () => {
   it("shows users", async () => {
     render(<UsersPage />)
@@ -164,4 +194,32 @@ describe("Users Page", () => {
       })
     })
   })
+
+  describe("Update user role", () => {
+    describe("when it is success", () => {
+      it("updates the roles", async () => {
+        render(
+          <>
+            <UsersPage />
+            <GlobalSnackbar />
+          </>,
+        )
+
+        const { rolesMenuTrigger } = await updateUserRole(() => {
+          jest.spyOn(API, "updateUserRoles").mockResolvedValueOnce({
+            ...MockUser,
+            roles: [...MockUser.roles, MockAuditorRole],
+          })
+        }, MockAuditorRole)
+
+        // Check if the select text was updated with the Auditor role
+        await waitFor(() => expect(rolesMenuTrigger).toHaveTextContent("Admin, Member, Auditor"))
+
+        // Check if the API was called correctly
+        const currentRoles = MockUser.roles.map((r) => r.name)
+        expect(API.updateUserRoles).toBeCalledTimes(1)
+        expect(API.updateUserRoles).toBeCalledWith([...currentRoles, MockAuditorRole.name], MockUser.id)
+      })
+    })
+  })
 })
diff --git a/site/src/pages/UsersPage/UsersPage.tsx b/site/src/pages/UsersPage/UsersPage.tsx
@@ -15,23 +15,14 @@ export const Language = {
 
 const useRoles = () => {
   const xServices = useContext(XServiceContext)
-  const [authState] = useActor(xServices.authXService)
   const [rolesState, rolesSend] = useActor(xServices.siteRolesXService)
   const { roles } = rolesState.context
-  const { me } = authState.context
 
   useEffect(() => {
-    if (!me) {
-      throw new Error("User is not logged in")
-    }
-
-    const organizationId = me.organization_ids[0]
-
     rolesSend({
       type: "GET_ROLES",
-      organizationId,
     })
-  }, [me, rolesSend])
+  }, [rolesSend])
 
   return roles
 }

diff --git a/site/src/testHelpers/entities.ts b/site/src/testHelpers/entities.ts
@@ -10,7 +10,7 @@ import {
   WorkspaceAutostartRequest,
   WorkspaceResource,
 } from "../api/types"
-import { AuthMethods } from "../api/typesGenerated"
+import { AuthMethods, Role } from "../api/typesGenerated"
 
 export const MockSessionToken = { session_token: "my-session-token" }
 
@@ -21,14 +21,31 @@ export const MockBuildInfo: BuildInfoResponse = {
   version: "v99.999.9999+c9cdf14",
 }
 
+export const MockAdminRole: Role = {
+  name: "admin",
+  display_name: "Admin",
+}
+
+export const MockMemberRole: Role = {
+  name: "member",
+  display_name: "Member",
+}
+
+export const MockAuditorRole: Role = {
+  name: "auditor",
+  display_name: "Auditor",
+}
+
+export const MockSiteRoles = [MockAdminRole, MockAuditorRole, MockMemberRole]
+
 export const MockUser: UserResponse = {
   id: "test-user",
   username: "TestUser",
   email: "test@coder.com",
   created_at: "",
   status: "active",
   organization_ids: ["fc0774ce-cc9e-48d4-80ae-88f7a4d4a8b0"],
-  roles: [],
+  roles: [MockAdminRole, MockMemberRole],
 }
 
 export const MockUser2: UserResponse = {
@@ -38,7 +55,7 @@ export const MockUser2: UserResponse = {
   created_at: "",
   status: "active",
   organization_ids: ["fc0774ce-cc9e-48d4-80ae-88f7a4d4a8b0"],
-  roles: [],
+  roles: [MockMemberRole],
 }
 
 export const MockOrganization: Organization = {

diff --git a/site/src/testHelpers/handlers.ts b/site/src/testHelpers/handlers.ts
@@ -51,6 +51,9 @@ export const handlers = [
   rest.get("/api/v2/users/authmethods", async (req, res, ctx) => {
     return res(ctx.status(200), ctx.json(M.MockAuthMethods))
   }),
+  rest.get("/api/v2/users/roles", async (req, res, ctx) => {
+    return res(ctx.status(200), ctx.json(M.MockSiteRoles))
+  }),
 
   // workspaces
   rest.get("/api/v2/organizations/:organizationId/workspaces/:userName/:workspaceName", (req, res, ctx) => {

diff --git a/site/src/xServices/roles/siteRolesXService.ts b/site/src/xServices/roles/siteRolesXService.ts
@@ -10,7 +10,6 @@ type SiteRolesContext = {
 
 type SiteRolesEvent = {
   type: "GET_ROLES"
-  organizationId: string
 }
 
 export const siteRolesMachine = createMachine(