From e642b735563ebe364faf40f5951ba6d3bb7717fd Mon Sep 17 00:00:00 2001
From: LordMathis <matus@namesny.com>
Date: Sat, 31 May 2025 20:23:15 +0200
Subject: [PATCH] Add data-testid attributes for improved testing in modals

---
 .../modals/account/DeleteAccountModal.tsx        |  8 +++++++-
 .../modals/account/EmailPasswordModal.tsx        |  8 +++++++-
 .../components/modals/user/CreateUserModal.tsx   | 16 ++++++++++++++--
 .../components/modals/user/DeleteUserModal.tsx   | 13 +++++++++++--
 app/src/components/modals/user/EditUserModal.tsx | 16 ++++++++++++++--
 .../modals/workspace/CreateWorkspaceModal.tsx    |  8 +++++++-
 .../modals/workspace/DeleteWorkspaceModal.tsx    | 12 ++++++++++--
 7 files changed, 70 insertions(+), 11 deletions(-)

diff --git a/app/src/components/modals/account/DeleteAccountModal.tsx b/app/src/components/modals/account/DeleteAccountModal.tsx
index 96d56ea..d3e2b81 100644
--- a/app/src/components/modals/account/DeleteAccountModal.tsx
+++ b/app/src/components/modals/account/DeleteAccountModal.tsx
@@ -39,12 +39,17 @@ const DeleteAccountModal: React.FC<DeleteAccountModalProps> = ({
         <PasswordInput
           label="Current Password"
           placeholder="Enter your current password"
+          data-testid="delete-account-password-input"
           value={password}
           onChange={(e) => setPassword(e.currentTarget.value)}
           required
         />
         <Group justify="flex-end" mt="md">
-          <Button variant="default" onClick={onClose}>
+          <Button
+            variant="default"
+            onClick={onClose}
+            data-testid="cancel-delete-button"
+          >
             Cancel
           </Button>
           <Button
@@ -53,6 +58,7 @@ const DeleteAccountModal: React.FC<DeleteAccountModalProps> = ({
               void onConfirm(password);
               setPassword('');
             }}
+            data-testid="confirm-delete-button"
           >
             Delete Account
           </Button>
diff --git a/app/src/components/modals/account/EmailPasswordModal.tsx b/app/src/components/modals/account/EmailPasswordModal.tsx
index 02974ad..e82c92d 100644
--- a/app/src/components/modals/account/EmailPasswordModal.tsx
+++ b/app/src/components/modals/account/EmailPasswordModal.tsx
@@ -38,12 +38,17 @@ const EmailPasswordModal: React.FC<EmailPasswordModalProps> = ({
         <PasswordInput
           label="Current Password"
           placeholder="Enter your current password"
+          data-testid="email-password-input"
           value={password}
           onChange={(e) => setPassword(e.currentTarget.value)}
           required
         />
         <Group justify="flex-end" mt="md">
-          <Button variant="default" onClick={onClose}>
+          <Button
+            variant="default"
+            onClick={onClose}
+            data-testid="cancel-email-password-button"
+          >
             Cancel
           </Button>
           <Button
@@ -51,6 +56,7 @@ const EmailPasswordModal: React.FC<EmailPasswordModalProps> = ({
               void onConfirm(password);
               setPassword('');
             }}
+            data-testid="confirm-email-password-button"
           >
             Confirm
           </Button>
diff --git a/app/src/components/modals/user/CreateUserModal.tsx b/app/src/components/modals/user/CreateUserModal.tsx
index 39d0560..b346390 100644
--- a/app/src/components/modals/user/CreateUserModal.tsx
+++ b/app/src/components/modals/user/CreateUserModal.tsx
@@ -54,12 +54,14 @@ const CreateUserModal: React.FC<CreateUserModalProps> = ({
           label="Email"
           required
           value={email}
+          data-testid="create-user-email-input"
           onChange={(e) => setEmail(e.currentTarget.value)}
           placeholder="user@example.com"
         />
         <TextInput
           label="Display Name"
           value={displayName}
+          data-testid="create-user-display-name-input"
           onChange={(e) => setDisplayName(e.currentTarget.value)}
           placeholder="John Doe"
         />
@@ -67,6 +69,7 @@ const CreateUserModal: React.FC<CreateUserModalProps> = ({
           label="Password"
           required
           value={password}
+          data-testid="create-user-password-input"
           onChange={(e) => setPassword(e.currentTarget.value)}
           placeholder="Enter password"
         />
@@ -74,6 +77,7 @@ const CreateUserModal: React.FC<CreateUserModalProps> = ({
           label="Role"
           required
           value={role}
+          data-testid="create-user-role-select"
           onChange={(value) => value && setRole(value as UserRole)}
           data={[
             { value: UserRole.Admin, label: 'Admin' },
@@ -82,10 +86,18 @@ const CreateUserModal: React.FC<CreateUserModalProps> = ({
           ]}
         />
         <Group justify="flex-end" mt="md">
-          <Button variant="default" onClick={onClose}>
+          <Button
+            variant="default"
+            onClick={onClose}
+            data-testid="cancel-create-user-button"
+          >
             Cancel
           </Button>
-          <Button onClick={() => void handleSubmit} loading={loading}>
+          <Button
+            onClick={() => void handleSubmit}
+            loading={loading}
+            data-testid="confirm-create-user-button"
+          >
             Create User
           </Button>
         </Group>
diff --git a/app/src/components/modals/user/DeleteUserModal.tsx b/app/src/components/modals/user/DeleteUserModal.tsx
index 8870816..aab500a 100644
--- a/app/src/components/modals/user/DeleteUserModal.tsx
+++ b/app/src/components/modals/user/DeleteUserModal.tsx
@@ -31,10 +31,19 @@ const DeleteUserModal: React.FC<DeleteUserModalProps> = ({
         deleted.
       </Text>
       <Group justify="flex-end" mt="xl">
-        <Button variant="default" onClick={onClose}>
+        <Button
+          variant="default"
+          onClick={onClose}
+          data-testid="cancel-delete-user-button"
+        >
           Cancel
         </Button>
-        <Button color="red" onClick={() => void onConfirm()} loading={loading}>
+        <Button
+          color="red"
+          onClick={() => void onConfirm()}
+          loading={loading}
+          data-testid="confirm-delete-user-button"
+        >
           Delete User
         </Button>
       </Group>
diff --git a/app/src/components/modals/user/EditUserModal.tsx b/app/src/components/modals/user/EditUserModal.tsx
index b270a35..74f511b 100644
--- a/app/src/components/modals/user/EditUserModal.tsx
+++ b/app/src/components/modals/user/EditUserModal.tsx
@@ -72,6 +72,7 @@ const EditUserModal: React.FC<EditUserModalProps> = ({
           label="Email"
           required
           value={formData.email}
+          data-testid="edit-user-email-input"
           onChange={(e) =>
             setFormData({ ...formData, email: e.currentTarget.value })
           }
@@ -80,6 +81,7 @@ const EditUserModal: React.FC<EditUserModalProps> = ({
         <TextInput
           label="Display Name"
           value={formData.displayName}
+          data-testid="edit-user-display-name-input"
           onChange={(e) =>
             setFormData({ ...formData, displayName: e.currentTarget.value })
           }
@@ -89,6 +91,7 @@ const EditUserModal: React.FC<EditUserModalProps> = ({
           label="Role"
           required
           value={formData.role ? formData.role.toString() : null}
+          data-testid="edit-user-role-select"
           onChange={(value) =>
             setFormData({ ...formData, role: value as UserRole })
           }
@@ -101,6 +104,7 @@ const EditUserModal: React.FC<EditUserModalProps> = ({
         <PasswordInput
           label="New Password"
           value={formData.password}
+          data-testid="edit-user-password-input"
           onChange={(e) =>
             setFormData({ ...formData, password: e.currentTarget.value })
           }
@@ -110,10 +114,18 @@ const EditUserModal: React.FC<EditUserModalProps> = ({
           Leave password empty to keep the current password
         </Text>
         <Group justify="flex-end" mt="md">
-          <Button variant="default" onClick={onClose}>
+          <Button
+            variant="default"
+            onClick={onClose}
+            data-testid="cancel-edit-user-button"
+          >
             Cancel
           </Button>
-          <Button onClick={() => void handleSubmit} loading={loading}>
+          <Button
+            onClick={() => void handleSubmit}
+            loading={loading}
+            data-testid="confirm-edit-user-button"
+          >
             Save Changes
           </Button>
         </Group>
diff --git a/app/src/components/modals/workspace/CreateWorkspaceModal.tsx b/app/src/components/modals/workspace/CreateWorkspaceModal.tsx
index 1d218d5..7a6c90c 100644
--- a/app/src/components/modals/workspace/CreateWorkspaceModal.tsx
+++ b/app/src/components/modals/workspace/CreateWorkspaceModal.tsx
@@ -63,6 +63,7 @@ const CreateWorkspaceModal: React.FC<CreateWorkspaceModalProps> = ({
         <TextInput
           label="Workspace Name"
           placeholder="Enter workspace name"
+          data-testid="workspace-name-input"
           value={name}
           onChange={(event) => setName(event.currentTarget.value)}
           mb="md"
@@ -74,10 +75,15 @@ const CreateWorkspaceModal: React.FC<CreateWorkspaceModalProps> = ({
             variant="default"
             onClick={() => setCreateWorkspaceModalVisible(false)}
             disabled={loading}
+            data-testid="cancel-create-workspace-button"
           >
             Cancel
           </Button>
-          <Button onClick={() => void handleSubmit} loading={loading}>
+          <Button
+            onClick={() => void handleSubmit}
+            loading={loading}
+            data-testid="confirm-create-workspace-button"
+          >
             Create
           </Button>
         </Group>
diff --git a/app/src/components/modals/workspace/DeleteWorkspaceModal.tsx b/app/src/components/modals/workspace/DeleteWorkspaceModal.tsx
index e7e5d08..f484093 100644
--- a/app/src/components/modals/workspace/DeleteWorkspaceModal.tsx
+++ b/app/src/components/modals/workspace/DeleteWorkspaceModal.tsx
@@ -28,10 +28,18 @@ const DeleteWorkspaceModal: React.FC<DeleteUserModalProps> = ({
         permanently deleted.
       </Text>
       <Group justify="flex-end" mt="xl">
-        <Button variant="default" onClick={onClose}>
+        <Button
+          variant="default"
+          onClick={onClose}
+          data-testid="cancel-delete-workspace-button"
+        >
           Cancel
         </Button>
-        <Button color="red" onClick={() => void onConfirm}>
+        <Button
+          color="red"
+          onClick={() => void onConfirm}
+          data-testid="confirm-delete-workspace-button"
+        >
           Delete Workspace
         </Button>
       </Group>