Add tests

BrunoQuaresma · BrunoQuaresma · commit e388f8a057ca · 2022-05-06T15:06:13.000Z
diff --git a/site/jest.setup.ts b/site/jest.setup.ts
@@ -1,6 +1,16 @@
 import "@testing-library/jest-dom"
+import crypto from "crypto"
 import { server } from "./src/testHelpers/server"
 
+// Polyfill the getRandomValues that is used on utils/random.ts
+Object.defineProperty(global.self, "crypto", {
+  value: {
+    getRandomValues: function (buffer: Buffer) {
+      return crypto.randomFillSync(buffer)
+    },
+  },
+})
+
 // Establish API mocking before all tests through MSW.
 beforeAll(() =>
   server.listen({
diff --git a/site/src/components/ResetPasswordDialog/ResetPasswordDialog.tsx b/site/src/components/ResetPasswordDialog/ResetPasswordDialog.tsx
@@ -13,6 +13,17 @@ export interface ResetPasswordDialogProps {
   onConfirm: () => void
   user?: TypesGen.User
   newPassword?: string
+  loading: boolean
+}
+
+export const Language = {
+  title: "Reset password",
+  message: (username?: string): JSX.Element => (
+    <>
+      You will need to send <strong>{username}</strong> the following password:
+    </>
+  ),
+  confirmText: "Reset password",
 }
 
 export const ResetPasswordDialog: React.FC<ResetPasswordDialogProps> = ({
@@ -21,25 +32,29 @@ export const ResetPasswordDialog: React.FC<ResetPasswordDialogProps> = ({
   onConfirm,
   user,
   newPassword,
+  loading,
 }) => {
   const styles = useStyles()
 
   return (
     <Dialog open={open} onClose={onClose}>
-      <DialogTitle title="Reset password" />
+      <DialogTitle title={Language.title} />
 
       <DialogContent>
-        <DialogContentText variant="subtitle2">
-          You will need to send <strong>{user?.username}</strong> the following password:
-        </DialogContentText>
+        <DialogContentText variant="subtitle2">{Language.message(user?.username)}</DialogContentText>
 
         <DialogContentText component="div">
           <CodeBlock lines={[newPassword ?? ""]} className={styles.codeBlock} />
         </DialogContentText>
       </DialogContent>
 
       <DialogActions>
-        <DialogActionButtons onCancel={onClose} confirmText="Reset password" onConfirm={onConfirm} />
+        <DialogActionButtons
+          onCancel={onClose}
+          confirmText={Language.confirmText}
+          onConfirm={onConfirm}
+          confirmLoading={loading}
+        />
       </DialogActions>
     </Dialog>
   )
diff --git a/site/src/pages/UsersPage/UsersPage.test.tsx b/site/src/pages/UsersPage/UsersPage.test.tsx
@@ -2,6 +2,7 @@ import { fireEvent, screen, waitFor, within } from "@testing-library/react"
 import React from "react"
 import * as API from "../../api"
 import { GlobalSnackbar } from "../../components/GlobalSnackbar/GlobalSnackbar"
+import { Language as ResetPasswordDialogLanguage } from "../../components/ResetPasswordDialog/ResetPasswordDialog"
 import { Language as UsersTableLanguage } from "../../components/UsersTable/UsersTable"
 import { MockUser, MockUser2, render } from "../../testHelpers"
 import { Language as usersXServiceLanguage } from "../../xServices/users/usersXService"
@@ -34,6 +35,33 @@ const suspendUser = async (setupActionSpies: () => void) => {
   fireEvent.click(confirmButton)
 }
 
+const resetUserPassword = async (setupActionSpies: () => void) => {
+  // 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 "more" button to display the "Suspend" option
+  const moreButton = within(firstUserRow).getByLabelText("more")
+  fireEvent.click(moreButton)
+  const menu = screen.getByRole("menu")
+  const resetPasswordButton = within(menu).getByText(UsersTableLanguage.resetPasswordMenuItem)
+  fireEvent.click(resetPasswordButton)
+
+  // Check if the confirm message is displayed
+  const confirmDialog = screen.getByRole("dialog")
+  expect(confirmDialog).toHaveTextContent(`You will need to send ${MockUser.username} the following password:`)
+
+  // Setup spies to check the actions after
+  setupActionSpies()
+
+  // Click on the "Confirm" button
+  const confirmButton = within(confirmDialog).getByRole("button", { name: ResetPasswordDialogLanguage.confirmText })
+  fireEvent.click(confirmButton)
+}
+
 describe("Users Page", () => {
   it("shows users", async () => {
     render(<UsersPage />)
@@ -81,7 +109,7 @@ describe("Users Page", () => {
           jest.spyOn(API, "suspendUser").mockRejectedValueOnce({})
         })
 
-        // Check if the success message is displayed
+        // Check if the error message is displayed
         await screen.findByText(usersXServiceLanguage.suspendUserError)
 
         // Check if the API was called correctly
@@ -90,4 +118,50 @@ describe("Users Page", () => {
       })
     })
   })
+
+  describe("reset user password", () => {
+    describe("when it is success", () => {
+      it("shows a success message", async () => {
+        render(
+          <>
+            <UsersPage />
+            <GlobalSnackbar />
+          </>,
+        )
+
+        await resetUserPassword(() => {
+          jest.spyOn(API, "updateUserPassword").mockResolvedValueOnce(undefined)
+        })
+
+        // Check if the success message is displayed
+        await screen.findByText(usersXServiceLanguage.resetUserPasswordSuccess)
+
+        // Check if the API was called correctly
+        expect(API.updateUserPassword).toBeCalledTimes(1)
+        expect(API.updateUserPassword).toBeCalledWith(expect.any(String), MockUser.id)
+      })
+    })
+
+    describe("when it fails", () => {
+      it("shows an error message", async () => {
+        render(
+          <>
+            <UsersPage />
+            <GlobalSnackbar />
+          </>,
+        )
+
+        await resetUserPassword(() => {
+          jest.spyOn(API, "updateUserPassword").mockRejectedValueOnce({})
+        })
+
+        // Check if the error message is displayed
+        await screen.findByText(usersXServiceLanguage.resetUserPasswordError)
+
+        // Check if the API was called correctly
+        expect(API.updateUserPassword).toBeCalledTimes(1)
+        expect(API.updateUserPassword).toBeCalledWith(expect.any(String), MockUser.id)
+      })
+    })
+  })
 })
diff --git a/site/src/pages/UsersPage/UsersPage.tsx b/site/src/pages/UsersPage/UsersPage.tsx
@@ -68,6 +68,7 @@ export const UsersPage: React.FC = () => {
         />
 
         <ResetPasswordDialog
+          loading={usersState.matches("resettingUserPassword")}
           user={userToResetPassword}
           newPassword={newUserPassword}
           open={usersState.matches("confirmUserPasswordReset")}
diff --git a/site/src/xServices/users/usersXService.ts b/site/src/xServices/users/usersXService.ts
@@ -255,7 +255,7 @@ export const usersMachine = createMachine(
         displaySuccess(Language.resetUserPasswordSuccess)
       },
       displayResetPasswordErrorMessage: () => {
-        displaySuccess(Language.resetUserPasswordError)
+        displayError(Language.resetUserPasswordError)
       },
       generateRandomPassword: assign({
         newUserPassword: (_) => generateRandomString(12),
