RED: add unit tests for AccountForm username field

johnstcn · johnstcn · commit 15f7d35d9e51 · 2022-08-23T19:12:33.000Z
diff --git a/site/src/components/SettingsAccountForm/SettingsAccountForm.test.tsx b/site/src/components/SettingsAccountForm/SettingsAccountForm.test.tsx
@@ -0,0 +1,87 @@
+import { screen } from "@testing-library/react"
+import { MockUser2 } from "../../testHelpers/entities"
+import { render } from "../../testHelpers/renderHelpers"
+import { AccountForm, AccountFormValues } from "./SettingsAccountForm"
+
+// NOTE: it does not matter what the role props of MockUser are set to,
+//       only that editable is set to true or false. This is passed from
+//       the call to /authorization done by authXService
+describe("AccountForm", () => {
+  describe("for owners", () => {
+    it("allows updating username", async () => {
+      // Given
+      const mockInitialValues: AccountFormValues = {
+        username: MockUser2.username,
+        editable: true,
+      }
+
+      // When
+      render(
+        <AccountForm
+          email={MockUser2.email}
+          initialValues={mockInitialValues}
+          isLoading={false}
+          onSubmit={() => {
+            return
+          }}
+        />,
+      )
+
+      // Then
+      const el = await screen.findByLabelText("Username")
+      expect(el).toBeEnabled()
+    })
+  })
+
+  describe("for user admins", () => {
+    it("allows updating username", async () => {
+      // Given
+      const mockInitialValues: AccountFormValues = {
+        username: MockUser2.username,
+        editable: true,
+      }
+
+      // When
+      render(
+        <AccountForm
+          email={MockUser2.email}
+          initialValues={mockInitialValues}
+          isLoading={false}
+          onSubmit={() => {
+            return
+          }}
+        />,
+      )
+
+      // Then
+      const el = await screen.findByLabelText("Username")
+      expect(el).toBeEnabled()
+    })
+  })
+
+  describe("for members", () => {
+    it("allows updating username", async () => {
+      // Given
+      const mockInitialValues: AccountFormValues = {
+        username: MockUser2.username,
+        editable: false,
+      }
+
+      // When
+      render(
+        <AccountForm
+          email={MockUser2.email}
+          initialValues={mockInitialValues}
+          isLoading={false}
+          onSubmit={() => {
+            return
+          }}
+        />,
+      )
+
+      // Then
+      const el = await screen.findByLabelText("Username")
+      expect(el).toBeDisabled()
+    })
+  })
+})
diff --git a/site/src/components/SettingsAccountForm/SettingsAccountForm.tsx b/site/src/components/SettingsAccountForm/SettingsAccountForm.tsx
@@ -7,7 +7,7 @@ import { getFormHelpersWithError, nameValidator, onChangeTrimmed } from "../../u
 import { LoadingButton } from "../LoadingButton/LoadingButton"
 import { Stack } from "../Stack/Stack"
 
-interface AccountFormValues {
+export interface AccountFormValues {
   username: string
 }
 
diff --git a/site/src/testHelpers/entities.ts b/site/src/testHelpers/entities.ts
@@ -61,6 +61,16 @@ export const MockUser: TypesGen.User = {
   roles: [MockOwnerRole],
 }
 
+export const MockUserAdmin: TypesGen.User = {
+  id: "test-user",
+  username: "TestUser",
+  email: "test@coder.com",
+  created_at: "",
+  status: "active",
+  organization_ids: ["fc0774ce-cc9e-48d4-80ae-88f7a4d4a8b0"],
+  roles: [MockUserAdminRole],
+}
+
 export const MockUser2: TypesGen.User = {
   id: "test-user-2",
   username: "TestUser2",

Original file line number	Diff line number	Diff line change
`@@ -7,7 +7,7 @@ import { getFormHelpersWithError, nameValidator, onChangeTrimmed } from "../../u`
`7`	`7`	`import { LoadingButton } from "../LoadingButton/LoadingButton"`
`8`	`8`	`import { Stack } from "../Stack/Stack"`
`9`	`9`
`10`		`-interface AccountFormValues {`
	`10`	`+export interface AccountFormValues {`
`11`	`11`	`username: string`
`12`	`12`	`}`
`13`	`13`