Add and update tests

coder · presleyp · Sep 20, 2022 · Sep 14, 2022 · Sep 14, 2022 · Sep 14, 2022
commit b8a6c53df62ab68f090fbc74e5a129dd84d22154
diff --git a/site/src/components/Dialogs/DeleteDialog/DeleteDialog.stories.tsx b/site/src/components/Dialogs/DeleteDialog/DeleteDialog.stories.tsx
@@ -19,11 +19,11 @@ export default {
       defaultValue: "foo",
     },
     name: {
-      defaultValue: "MyFoo"
+      defaultValue: "MyFoo",
     },
     info: {
-      defaultValue: "Here's some info about the foo so you know you're deleting the right one."
-    }
+      defaultValue: "Here's some info about the foo so you know you're deleting the right one.",
+    },
   },
 } as ComponentMeta<typeof DeleteDialog>
 

diff --git a/site/src/components/Dialogs/DeleteDialog/DeleteDialog.test.tsx b/site/src/components/Dialogs/DeleteDialog/DeleteDialog.test.tsx
@@ -0,0 +1,57 @@
+import { screen } from "@testing-library/react"
+import userEvent from "@testing-library/user-event"
+import i18next from "i18next"
+import { render } from "testHelpers/renderHelpers"
+import { DeleteDialog } from "./DeleteDialog"
+
+describe("DeleteDialog", () => {
+  it("disables confirm button when the text field is empty", () => {
+    render(
+      <DeleteDialog
+        isOpen
+        onConfirm={jest.fn()}
+        onCancel={jest.fn()}
+        entity="template"
+        name="MyTemplate"
+      />,
+    )
+    const confirmButton = screen.getByRole("button", { name: "Delete" })
+    expect(confirmButton).toBeDisabled()
+  })
+
+  it("disables confirm button when the text field is filled incorrectly", async () => {
+    const { t } = i18next
+    render(
+      <DeleteDialog
+        isOpen
+        onConfirm={jest.fn()}
+        onCancel={jest.fn()}
+        entity="template"
+        name="MyTemplate"
+      />,
+    )
+    const labelText = t("deleteDialog.confirmLabel", { ns: "common", entity: "template" })
+    const textField = screen.getByLabelText(labelText)
+    await userEvent.type(textField, "MyTemplateWrong")
+    const confirmButton = screen.getByRole("button", { name: "Delete" })
+    expect(confirmButton).toBeDisabled()
+  })
+
+  it("enables confirm button when the text field is filled correctly", async () => {
+    const { t } = i18next
+    render(
+      <DeleteDialog
+        isOpen
+        onConfirm={jest.fn()}
+        onCancel={jest.fn()}
+        entity="template"
+        name="MyTemplate"
+      />,
+    )
+    const labelText = t("deleteDialog.confirmLabel", { ns: "common", entity: "template" })
+    const textField = screen.getByLabelText(labelText)
+    await userEvent.type(textField, "MyTemplate")
+    const confirmButton = screen.getByRole("button", { name: "Delete" })
+    expect(confirmButton).not.toBeDisabled()
+  })
+})
diff --git a/site/src/components/Dialogs/DeleteDialog/DeleteDialog.tsx b/site/src/components/Dialogs/DeleteDialog/DeleteDialog.tsx
@@ -43,7 +43,14 @@ export const DeleteDialog: React.FC<React.PropsWithChildren<DeleteDialogProps>>
       </Maybe>
       <Typography>{t("deleteDialog.confirm", { entity })}</Typography>
       <Stack spacing={1}>
-        <TextField placeholder={name} value={nameValue} onChange={handleChange} />
+        <TextField
+          name="confirmation"
+          id="confirmation"
+          placeholder={name}
+          value={nameValue}
+          onChange={handleChange}
+          label={t("deleteDialog.confirmLabel", { entity })}
+        />
         <Maybe condition={nameValue.length > 0 && !confirmed}>
           <FormHelperText error>{t("deleteDialog.incorrectName", { entity })}</FormHelperText>
         </Maybe>

diff --git a/site/src/i18n/en/common.json b/site/src/i18n/en/common.json
@@ -16,6 +16,7 @@
     "title": "Delete {{entity}}",
     "intro": "Deleting this {{entity}} is irreversible!",
     "confirm": "Are you sure you want to proceed? Type the name of this {{entity}} below to confirm.",
+    "confirmLabel": "Name of {{entity}} to delete",
     "incorrectName": "Incorrect {{entity}} name."
   }
 }
diff --git a/site/src/pages/UsersPage/UsersPage.test.tsx b/site/src/pages/UsersPage/UsersPage.test.tsx
@@ -1,5 +1,7 @@
 /* eslint-disable @typescript-eslint/no-floating-promises */
 import { fireEvent, screen, waitFor, within } from "@testing-library/react"
+import userEvent from "@testing-library/user-event"
+import { i18n } from "i18n"
 import { rest } from "msw"
 import { Language as usersXServiceLanguage } from "xServices/users/usersXService"
 import * as API from "../../api/api"
@@ -20,6 +22,8 @@ import { permissionsToCheck } from "../../xServices/auth/authXService"
 import { Language as UsersPageLanguage, UsersPage } from "./UsersPage"
 import { Language as UsersViewLanguage } from "./UsersPageView"
 
+const { t } = i18n
+
 const suspendUser = async (setupActionSpies: () => void) => {
   // Get the first user in the table
   const users = await screen.findAllByText(/.*@coder.com/)
@@ -73,14 +77,19 @@ const deleteUser = async (setupActionSpies: () => void) => {
   // Check if the confirm message is displayed
   const confirmDialog = await screen.findByRole("dialog")
   expect(confirmDialog).toHaveTextContent(
-    `${UsersPageLanguage.deleteDialogMessagePrefix} ${MockUser.username}?`,
+    t("deleteDialog.confirm", { ns: "common", entity: "user" }),
   )
 
+  // Confirm with text input
+  const labelText = t("deleteDialog.confirmLabel", { ns: "common", entity: "user" })
+  const textField = screen.getByLabelText(labelText)
+  await userEvent.type(textField, MockUser.username)
+
   // Setup spies to check the actions after
   setupActionSpies()
 
   // Click on the "Confirm" button
-  const confirmButton = within(confirmDialog).getByText(UsersPageLanguage.deleteDialogAction)
+  const confirmButton = screen.getByRole("button", { name: "Delete" })
   fireEvent.click(confirmButton)
 }
 

diff --git a/site/src/pages/WorkspacePage/WorkspacePage.test.tsx b/site/src/pages/WorkspacePage/WorkspacePage.test.tsx
@@ -1,5 +1,6 @@
 /* eslint-disable @typescript-eslint/no-floating-promises */
-import { fireEvent, screen, waitFor, within } from "@testing-library/react"
+import { fireEvent, screen, waitFor } from "@testing-library/react"
+import userEvent from "@testing-library/user-event"
 import i18next from "i18next"
 import { rest } from "msw"
 import * as api from "../../api/api"
@@ -103,9 +104,10 @@ describe("WorkspacePage", () => {
     const button = await screen.findByText(Language.delete)
     fireEvent.click(button)
 
-    const confirmDialog = await screen.findByRole("dialog")
-    const confirmButton = within(confirmDialog).getByText("Delete")
-
+    const labelText = t("deleteDialog.confirmLabel", { ns: "common", entity: "workspace" })
+    const textField = screen.getByLabelText(labelText)
+    await userEvent.type(textField, MockWorkspace.name)
+    const confirmButton = screen.getByRole("button", { name: "Delete" })
     fireEvent.click(confirmButton)
     expect(deleteWorkspaceMock).toBeCalled()
   })