From 32d03347fc50796477b732adb53a125257881fa3 Mon Sep 17 00:00:00 2001
From: LordMathis <matus@namesny.com>
Date: Sun, 29 Jun 2025 16:06:35 +0200
Subject: [PATCH] Refactor modal tests for improved clarity and consistency in
 content and actions

---
 .../account/DeleteAccountModal.test.tsx       | 48 +++++++++++++------
 .../modals/account/DeleteAccountModal.tsx     |  4 +-
 .../account/EmailPasswordModal.test.tsx       |  8 ++--
 .../modals/file/CreateFileModal.test.tsx      | 38 +++++++++------
 .../modals/file/CreateFileModal.tsx           |  4 +-
 .../modals/file/DeleteFileModal.test.tsx      | 32 ++++++++-----
 .../modals/file/DeleteFileModal.tsx           |  4 +-
 .../modals/git/CommitMessageModal.test.tsx    | 42 +++++++++-------
 .../modals/git/CommitMessageModal.tsx         |  4 +-
 .../modals/user/CreateUserModal.test.tsx      |  4 +-
 .../modals/user/EditUserModal.test.tsx        |  4 +-
 .../workspace/CreateWorkspaceModal.test.tsx   | 10 ++--
 12 files changed, 122 insertions(+), 80 deletions(-)

diff --git a/app/src/components/modals/account/DeleteAccountModal.test.tsx b/app/src/components/modals/account/DeleteAccountModal.test.tsx
index 1e79d13..104c5bb 100644
--- a/app/src/components/modals/account/DeleteAccountModal.test.tsx
+++ b/app/src/components/modals/account/DeleteAccountModal.test.tsx
@@ -28,8 +28,8 @@ describe('DeleteAccountModal', () => {
     mockOnConfirm.mockResolvedValue(undefined);
   });
 
-  describe('Modal Visibility', () => {
-    it('shows modal with warning and form when opened', () => {
+  describe('Modal Visibility and Content', () => {
+    it('renders modal with correct content when opened', () => {
       render(
         <DeleteAccountModal
           opened={true}
@@ -50,11 +50,15 @@ describe('DeleteAccountModal', () => {
       expect(
         screen.getByTestId('delete-account-password-input')
       ).toBeInTheDocument();
-      expect(screen.getByTestId('cancel-delete-button')).toBeInTheDocument();
-      expect(screen.getByTestId('confirm-delete-button')).toBeInTheDocument();
+      expect(
+        screen.getByTestId('cancel-delete-account-button')
+      ).toBeInTheDocument();
+      expect(
+        screen.getByTestId('confirm-delete-account-button')
+      ).toBeInTheDocument();
     });
 
-    it('hides modal when closed', () => {
+    it('does not render when closed', () => {
       render(
         <DeleteAccountModal
           opened={false}
@@ -67,7 +71,7 @@ describe('DeleteAccountModal', () => {
     });
   });
 
-  describe('Password Input and Validation', () => {
+  describe('Form Validation', () => {
     it('updates password value when user types', () => {
       render(
         <DeleteAccountModal
@@ -93,7 +97,7 @@ describe('DeleteAccountModal', () => {
       );
 
       const passwordInput = screen.getByTestId('delete-account-password-input');
-      const deleteButton = screen.getByTestId('confirm-delete-button');
+      const deleteButton = screen.getByTestId('confirm-delete-account-button');
 
       // Test empty password
       fireEvent.click(deleteButton);
@@ -104,8 +108,10 @@ describe('DeleteAccountModal', () => {
       fireEvent.click(deleteButton);
       expect(mockOnConfirm).not.toHaveBeenCalled();
     });
+  });
 
-    it('submits with valid password and clears field on success', async () => {
+  describe('User Actions', () => {
+    it('calls onConfirm with valid password and clears field on success', async () => {
       render(
         <DeleteAccountModal
           opened={true}
@@ -115,7 +121,7 @@ describe('DeleteAccountModal', () => {
       );
 
       const passwordInput = screen.getByTestId('delete-account-password-input');
-      const deleteButton = screen.getByTestId('confirm-delete-button');
+      const deleteButton = screen.getByTestId('confirm-delete-account-button');
 
       fireEvent.change(passwordInput, { target: { value: 'validpassword' } });
       fireEvent.click(deleteButton);
@@ -129,6 +135,20 @@ describe('DeleteAccountModal', () => {
       });
     });
 
+    it('calls onClose when cancel button is clicked', () => {
+      render(
+        <DeleteAccountModal
+          opened={true}
+          onClose={mockOnClose}
+          onConfirm={mockOnConfirm}
+        />
+      );
+
+      fireEvent.click(screen.getByTestId('cancel-delete-account-button'));
+      expect(mockOnClose).toHaveBeenCalled();
+      expect(mockOnConfirm).not.toHaveBeenCalled();
+    });
+
     it('preserves password in field when submission fails', async () => {
       mockOnConfirm.mockRejectedValue(new Error('Invalid password'));
 
@@ -141,7 +161,7 @@ describe('DeleteAccountModal', () => {
       );
 
       const passwordInput = screen.getByTestId('delete-account-password-input');
-      const deleteButton = screen.getByTestId('confirm-delete-button');
+      const deleteButton = screen.getByTestId('confirm-delete-account-button');
 
       fireEvent.change(passwordInput, { target: { value: 'wrongpassword' } });
       fireEvent.click(deleteButton);
@@ -165,7 +185,7 @@ describe('DeleteAccountModal', () => {
         />
       );
 
-      const cancelButton = screen.getByTestId('cancel-delete-button');
+      const cancelButton = screen.getByTestId('cancel-delete-account-button');
       fireEvent.click(cancelButton);
 
       expect(mockOnClose).toHaveBeenCalled();
@@ -182,7 +202,7 @@ describe('DeleteAccountModal', () => {
       );
 
       const passwordInput = screen.getByTestId('delete-account-password-input');
-      const deleteButton = screen.getByTestId('confirm-delete-button');
+      const deleteButton = screen.getByTestId('confirm-delete-account-button');
 
       fireEvent.change(passwordInput, { target: { value: 'testpassword' } });
 
@@ -240,7 +260,7 @@ describe('DeleteAccountModal', () => {
       fireEvent.change(passwordInput, { target: { value: 'userpassword' } });
 
       // 3. User confirms deletion
-      const deleteButton = screen.getByTestId('confirm-delete-button');
+      const deleteButton = screen.getByTestId('confirm-delete-account-button');
       fireEvent.click(deleteButton);
 
       // 4. System processes deletion
@@ -267,7 +287,7 @@ describe('DeleteAccountModal', () => {
       const passwordInput = screen.getByTestId('delete-account-password-input');
       fireEvent.change(passwordInput, { target: { value: 'somepassword' } });
 
-      const cancelButton = screen.getByTestId('cancel-delete-button');
+      const cancelButton = screen.getByTestId('cancel-delete-account-button');
       fireEvent.click(cancelButton);
 
       // Modal closes without deletion
diff --git a/app/src/components/modals/account/DeleteAccountModal.tsx b/app/src/components/modals/account/DeleteAccountModal.tsx
index 668704d..921e251 100644
--- a/app/src/components/modals/account/DeleteAccountModal.tsx
+++ b/app/src/components/modals/account/DeleteAccountModal.tsx
@@ -62,14 +62,14 @@ const DeleteAccountModal: React.FC<DeleteAccountModalProps> = ({
           <Button
             variant="default"
             onClick={onClose}
-            data-testid="cancel-delete-button"
+            data-testid="cancel-delete-account-button"
           >
             Cancel
           </Button>
           <Button
             color="red"
             onClick={() => void handleConfirm()}
-            data-testid="confirm-delete-button"
+            data-testid="confirm-delete-account-button"
           >
             Delete
           </Button>
diff --git a/app/src/components/modals/account/EmailPasswordModal.test.tsx b/app/src/components/modals/account/EmailPasswordModal.test.tsx
index 3b6044a..e1a25fd 100644
--- a/app/src/components/modals/account/EmailPasswordModal.test.tsx
+++ b/app/src/components/modals/account/EmailPasswordModal.test.tsx
@@ -29,8 +29,8 @@ describe('EmailPasswordModal', () => {
     mockOnConfirm.mockResolvedValue(true);
   });
 
-  describe('Modal Visibility', () => {
-    it('shows modal with email confirmation message when opened', () => {
+  describe('Modal Visibility and Content', () => {
+    it('renders modal with correct content when opened', () => {
       render(
         <EmailPasswordModal
           opened={true}
@@ -55,7 +55,7 @@ describe('EmailPasswordModal', () => {
       ).toBeInTheDocument();
     });
 
-    it('hides modal when closed', () => {
+    it('does not render when closed', () => {
       render(
         <EmailPasswordModal
           opened={false}
@@ -68,7 +68,7 @@ describe('EmailPasswordModal', () => {
       expect(screen.queryByText('Confirm Password')).not.toBeInTheDocument();
     });
 
-    it('displays different email addresses correctly', () => {
+    it('displays various email addresses correctly', () => {
       const customEmail = 'user@custom.com';
       render(
         <EmailPasswordModal
diff --git a/app/src/components/modals/file/CreateFileModal.test.tsx b/app/src/components/modals/file/CreateFileModal.test.tsx
index 098bcb2..4d7a605 100644
--- a/app/src/components/modals/file/CreateFileModal.test.tsx
+++ b/app/src/components/modals/file/CreateFileModal.test.tsx
@@ -49,20 +49,26 @@ describe('CreateFileModal', () => {
     mockModalContext.setNewFileModalVisible.mockClear();
   });
 
-  describe('Basic functionality', () => {
-    it('renders modal with all essential elements', () => {
+  describe('Modal Visibility and Content', () => {
+    it('renders modal with correct content when opened', () => {
       render(<CreateFileModal onCreateFile={mockOnCreateFile} />);
 
       expect(screen.getByText('Create New File')).toBeInTheDocument();
       expect(screen.getByTestId('file-name-input')).toBeInTheDocument();
-      expect(screen.getByTestId('cancel-create-button')).toBeInTheDocument();
-      expect(screen.getByTestId('confirm-create-button')).toBeInTheDocument();
+      expect(
+        screen.getByTestId('cancel-create-file-button')
+      ).toBeInTheDocument();
+      expect(
+        screen.getByTestId('confirm-create-file-button')
+      ).toBeInTheDocument();
     });
+  });
 
-    it('closes modal when cancel button is clicked', () => {
+  describe('User Actions', () => {
+    it('calls onClose when cancel button is clicked', () => {
       render(<CreateFileModal onCreateFile={mockOnCreateFile} />);
 
-      fireEvent.click(screen.getByTestId('cancel-create-button'));
+      fireEvent.click(screen.getByTestId('cancel-create-file-button'));
 
       expect(mockModalContext.setNewFileModalVisible).toHaveBeenCalledWith(
         false
@@ -77,11 +83,13 @@ describe('CreateFileModal', () => {
 
       expect((fileNameInput as HTMLInputElement).value).toBe('test-file.md');
     });
+  });
 
+  describe('Form Validation', () => {
     it('has disabled create button when input is empty', () => {
       render(<CreateFileModal onCreateFile={mockOnCreateFile} />);
 
-      const createButton = screen.getByTestId('confirm-create-button');
+      const createButton = screen.getByTestId('confirm-create-file-button');
       expect(createButton).toBeDisabled();
     });
 
@@ -89,7 +97,7 @@ describe('CreateFileModal', () => {
       render(<CreateFileModal onCreateFile={mockOnCreateFile} />);
 
       const fileNameInput = screen.getByTestId('file-name-input');
-      const createButton = screen.getByTestId('confirm-create-button');
+      const createButton = screen.getByTestId('confirm-create-file-button');
 
       fireEvent.change(fileNameInput, { target: { value: 'test.md' } });
 
@@ -97,12 +105,12 @@ describe('CreateFileModal', () => {
     });
   });
 
-  describe('File creation flow', () => {
-    it('creates file successfully with valid input', async () => {
+  describe('File Creation Flow', () => {
+    it('calls onCreateFile when confirmed with valid input', async () => {
       render(<CreateFileModal onCreateFile={mockOnCreateFile} />);
 
       const fileNameInput = screen.getByTestId('file-name-input');
-      const createButton = screen.getByTestId('confirm-create-button');
+      const createButton = screen.getByTestId('confirm-create-file-button');
 
       fireEvent.change(fileNameInput, { target: { value: 'new-document.md' } });
       fireEvent.click(createButton);
@@ -136,7 +144,7 @@ describe('CreateFileModal', () => {
       render(<CreateFileModal onCreateFile={mockOnCreateFile} />);
 
       const fileNameInput = screen.getByTestId('file-name-input');
-      const createButton = screen.getByTestId('confirm-create-button');
+      const createButton = screen.getByTestId('confirm-create-file-button');
 
       fireEvent.change(fileNameInput, {
         target: { value: '  spaced-file.md  ' },
@@ -161,7 +169,7 @@ describe('CreateFileModal', () => {
       render(<CreateFileModal onCreateFile={mockOnCreateFile} />);
 
       const fileNameInput = screen.getByTestId('file-name-input');
-      const createButton = screen.getByTestId('confirm-create-button');
+      const createButton = screen.getByTestId('confirm-create-file-button');
 
       fireEvent.change(fileNameInput, { target: { value: '   ' } });
 
@@ -170,7 +178,7 @@ describe('CreateFileModal', () => {
     });
   });
 
-  describe('File name variations', () => {
+  describe('File Name Variations', () => {
     it.each([
       ['file-with_special.chars (1).md', 'special characters'],
       ['README', 'no extension'],
@@ -180,7 +188,7 @@ describe('CreateFileModal', () => {
       render(<CreateFileModal onCreateFile={mockOnCreateFile} />);
 
       const fileNameInput = screen.getByTestId('file-name-input');
-      const createButton = screen.getByTestId('confirm-create-button');
+      const createButton = screen.getByTestId('confirm-create-file-button');
 
       fireEvent.change(fileNameInput, { target: { value: fileName } });
       fireEvent.click(createButton);
diff --git a/app/src/components/modals/file/CreateFileModal.tsx b/app/src/components/modals/file/CreateFileModal.tsx
index 499af0f..f3c7d7e 100644
--- a/app/src/components/modals/file/CreateFileModal.tsx
+++ b/app/src/components/modals/file/CreateFileModal.tsx
@@ -49,13 +49,13 @@ const CreateFileModal: React.FC<CreateFileModalProps> = ({ onCreateFile }) => {
           <Button
             variant="default"
             onClick={() => setNewFileModalVisible(false)}
-            data-testid="cancel-create-button"
+            data-testid="cancel-create-file-button"
           >
             Cancel
           </Button>
           <Button
             onClick={() => void handleSubmit()}
-            data-testid="confirm-create-button"
+            data-testid="confirm-create-file-button"
             disabled={!fileName.trim()}
           >
             Create
diff --git a/app/src/components/modals/file/DeleteFileModal.test.tsx b/app/src/components/modals/file/DeleteFileModal.test.tsx
index 9fe3bd2..582763e 100644
--- a/app/src/components/modals/file/DeleteFileModal.test.tsx
+++ b/app/src/components/modals/file/DeleteFileModal.test.tsx
@@ -49,8 +49,8 @@ describe('DeleteFileModal', () => {
     mockModalContext.setDeleteFileModalVisible.mockClear();
   });
 
-  describe('Basic functionality', () => {
-    it('renders modal with file confirmation and action buttons', () => {
+  describe('Modal Visibility and Content', () => {
+    it('renders modal with correct content when opened', () => {
       render(
         <DeleteFileModal
           onDeleteFile={mockOnDeleteFile}
@@ -62,8 +62,12 @@ describe('DeleteFileModal', () => {
       expect(
         screen.getByText(/Are you sure you want to delete "test-file.md"?/)
       ).toBeInTheDocument();
-      expect(screen.getByTestId('cancel-delete-button')).toBeInTheDocument();
-      expect(screen.getByTestId('confirm-delete-button')).toBeInTheDocument();
+      expect(
+        screen.getByTestId('cancel-delete-file-button')
+      ).toBeInTheDocument();
+      expect(
+        screen.getByTestId('confirm-delete-file-button')
+      ).toBeInTheDocument();
     });
 
     it('renders modal with null file selection', () => {
@@ -76,8 +80,10 @@ describe('DeleteFileModal', () => {
         screen.getByText(/Are you sure you want to delete/)
       ).toBeInTheDocument();
     });
+  });
 
-    it('closes modal when cancel button is clicked', () => {
+  describe('User Actions', () => {
+    it('calls onClose when cancel button is clicked', () => {
       render(
         <DeleteFileModal
           onDeleteFile={mockOnDeleteFile}
@@ -85,7 +91,7 @@ describe('DeleteFileModal', () => {
         />
       );
 
-      fireEvent.click(screen.getByTestId('cancel-delete-button'));
+      fireEvent.click(screen.getByTestId('cancel-delete-file-button'));
 
       expect(mockModalContext.setDeleteFileModalVisible).toHaveBeenCalledWith(
         false
@@ -93,8 +99,8 @@ describe('DeleteFileModal', () => {
     });
   });
 
-  describe('File deletion flow', () => {
-    it('deletes file successfully when confirmed', async () => {
+  describe('File Deletion Flow', () => {
+    it('calls onDeleteFile when confirmed', async () => {
       render(
         <DeleteFileModal
           onDeleteFile={mockOnDeleteFile}
@@ -102,7 +108,7 @@ describe('DeleteFileModal', () => {
         />
       );
 
-      fireEvent.click(screen.getByTestId('confirm-delete-button'));
+      fireEvent.click(screen.getByTestId('confirm-delete-file-button'));
 
       await waitFor(() => {
         expect(mockOnDeleteFile).toHaveBeenCalledWith('document.md');
@@ -120,7 +126,7 @@ describe('DeleteFileModal', () => {
         <DeleteFileModal onDeleteFile={mockOnDeleteFile} selectedFile={null} />
       );
 
-      fireEvent.click(screen.getByTestId('confirm-delete-button'));
+      fireEvent.click(screen.getByTestId('confirm-delete-file-button'));
 
       expect(mockOnDeleteFile).not.toHaveBeenCalled();
     });
@@ -130,7 +136,7 @@ describe('DeleteFileModal', () => {
         <DeleteFileModal onDeleteFile={mockOnDeleteFile} selectedFile="" />
       );
 
-      fireEvent.click(screen.getByTestId('confirm-delete-button'));
+      fireEvent.click(screen.getByTestId('confirm-delete-file-button'));
 
       expect(mockOnDeleteFile).not.toHaveBeenCalled();
     });
@@ -143,7 +149,7 @@ describe('DeleteFileModal', () => {
         />
       );
 
-      fireEvent.click(screen.getByTestId('cancel-delete-button'));
+      fireEvent.click(screen.getByTestId('cancel-delete-file-button'));
 
       expect(mockOnDeleteFile).not.toHaveBeenCalled();
       expect(mockModalContext.setDeleteFileModalVisible).toHaveBeenCalledWith(
@@ -171,7 +177,7 @@ describe('DeleteFileModal', () => {
         screen.getByText(`Are you sure you want to delete "${fileName}"?`)
       ).toBeInTheDocument();
 
-      fireEvent.click(screen.getByTestId('confirm-delete-button'));
+      fireEvent.click(screen.getByTestId('confirm-delete-file-button'));
 
       await waitFor(() => {
         expect(mockOnDeleteFile).toHaveBeenCalledWith(fileName);
diff --git a/app/src/components/modals/file/DeleteFileModal.tsx b/app/src/components/modals/file/DeleteFileModal.tsx
index 48b0bc7..d5ad7ec 100644
--- a/app/src/components/modals/file/DeleteFileModal.tsx
+++ b/app/src/components/modals/file/DeleteFileModal.tsx
@@ -33,14 +33,14 @@ const DeleteFileModal: React.FC<DeleteFileModalProps> = ({
         <Button
           variant="default"
           onClick={() => setDeleteFileModalVisible(false)}
-          data-testid="cancel-delete-button"
+          data-testid="cancel-delete-file-button"
         >
           Cancel
         </Button>
         <Button
           color="red"
           onClick={() => void handleConfirm()}
-          data-testid="confirm-delete-button"
+          data-testid="confirm-delete-file-button"
         >
           Delete
         </Button>
diff --git a/app/src/components/modals/git/CommitMessageModal.test.tsx b/app/src/components/modals/git/CommitMessageModal.test.tsx
index 7138702..099ce93 100644
--- a/app/src/components/modals/git/CommitMessageModal.test.tsx
+++ b/app/src/components/modals/git/CommitMessageModal.test.tsx
@@ -55,20 +55,26 @@ describe('CommitMessageModal', () => {
     mockModalContext.setCommitMessageModalVisible.mockClear();
   });
 
-  describe('Modal Rendering and Controls', () => {
-    it('renders modal with form elements when open', () => {
+  describe('Modal Visibility and Content', () => {
+    it('renders modal with correct content when opened', () => {
       render(<CommitMessageModal onCommitAndPush={mockOnCommitAndPush} />);
 
       expect(screen.getByText('Enter Commit Message')).toBeInTheDocument();
       expect(screen.getByTestId('commit-message-input')).toBeInTheDocument();
-      expect(screen.getByTestId('cancel-commit-button')).toBeInTheDocument();
-      expect(screen.getByTestId('commit-button')).toBeInTheDocument();
+      expect(
+        screen.getByTestId('cancel-commit-message-button')
+      ).toBeInTheDocument();
+      expect(
+        screen.getByTestId('confirm-commit-message-button')
+      ).toBeInTheDocument();
     });
+  });
 
-    it('closes modal when cancel button is clicked', () => {
+  describe('User Actions', () => {
+    it('calls onClose when cancel button is clicked', () => {
       render(<CommitMessageModal onCommitAndPush={mockOnCommitAndPush} />);
 
-      const cancelButton = screen.getByTestId('cancel-commit-button');
+      const cancelButton = screen.getByTestId('cancel-commit-message-button');
       fireEvent.click(cancelButton);
 
       expect(
@@ -77,7 +83,7 @@ describe('CommitMessageModal', () => {
     });
   });
 
-  describe('Form Input and Validation', () => {
+  describe('Form Validation', () => {
     it('updates input value when user types', () => {
       render(<CommitMessageModal onCommitAndPush={mockOnCommitAndPush} />);
 
@@ -90,7 +96,7 @@ describe('CommitMessageModal', () => {
     it('disables commit button when input is empty', () => {
       render(<CommitMessageModal onCommitAndPush={mockOnCommitAndPush} />);
 
-      const commitButton = screen.getByTestId('commit-button');
+      const commitButton = screen.getByTestId('confirm-commit-message-button');
       expect(commitButton).toBeDisabled();
     });
 
@@ -98,18 +104,20 @@ describe('CommitMessageModal', () => {
       render(<CommitMessageModal onCommitAndPush={mockOnCommitAndPush} />);
 
       const messageInput = screen.getByTestId('commit-message-input');
-      const commitButton = screen.getByTestId('commit-button');
+      const commitButton = screen.getByTestId('confirm-commit-message-button');
 
       fireEvent.change(messageInput, { target: { value: 'Test commit' } });
 
       expect(commitButton).not.toBeDisabled();
     });
+  });
 
-    it('trims whitespace from commit messages', async () => {
+  describe('Commit and Push Flow', () => {
+    it('calls onCommitAndPush with trimmed message', async () => {
       render(<CommitMessageModal onCommitAndPush={mockOnCommitAndPush} />);
 
       const messageInput = screen.getByTestId('commit-message-input');
-      const commitButton = screen.getByTestId('commit-button');
+      const commitButton = screen.getByTestId('confirm-commit-message-button');
 
       fireEvent.change(messageInput, {
         target: { value: '  Update README  ' },
@@ -120,14 +128,12 @@ describe('CommitMessageModal', () => {
         expect(mockOnCommitAndPush).toHaveBeenCalledWith('Update README');
       });
     });
-  });
 
-  describe('Form Submission', () => {
-    it('calls onCommitAndPush with message when commit button clicked', async () => {
+    it('calls onCommitAndPush when commit button clicked', async () => {
       render(<CommitMessageModal onCommitAndPush={mockOnCommitAndPush} />);
 
       const messageInput = screen.getByTestId('commit-message-input');
-      const commitButton = screen.getByTestId('commit-button');
+      const commitButton = screen.getByTestId('confirm-commit-message-button');
 
       fireEvent.change(messageInput, {
         target: { value: 'Fix bug in editor' },
@@ -165,7 +171,7 @@ describe('CommitMessageModal', () => {
       render(<CommitMessageModal onCommitAndPush={mockOnCommitAndPush} />);
 
       const messageInput = screen.getByTestId('commit-message-input');
-      const commitButton = screen.getByTestId('commit-button');
+      const commitButton = screen.getByTestId('confirm-commit-message-button');
 
       fireEvent.change(messageInput, { target: { value: 'Initial commit' } });
       fireEvent.click(commitButton);
@@ -197,8 +203,8 @@ describe('CommitMessageModal', () => {
     it('has accessible buttons with proper roles', () => {
       render(<CommitMessageModal onCommitAndPush={mockOnCommitAndPush} />);
 
-      const cancelButton = screen.getByTestId('cancel-commit-button');
-      const commitButton = screen.getByTestId('commit-button');
+      const cancelButton = screen.getByTestId('cancel-commit-message-button');
+      const commitButton = screen.getByTestId('confirm-commit-message-button');
 
       // Mantine buttons are semantic HTML buttons
       expect(cancelButton.tagName).toBe('BUTTON');
diff --git a/app/src/components/modals/git/CommitMessageModal.tsx b/app/src/components/modals/git/CommitMessageModal.tsx
index 7eab8cc..df0413c 100644
--- a/app/src/components/modals/git/CommitMessageModal.tsx
+++ b/app/src/components/modals/git/CommitMessageModal.tsx
@@ -53,13 +53,13 @@ const CommitMessageModal: React.FC<CommitMessageModalProps> = ({
           <Button
             variant="default"
             onClick={() => setCommitMessageModalVisible(false)}
-            data-testid="cancel-commit-button"
+            data-testid="cancel-commit-message-button"
           >
             Cancel
           </Button>
           <Button
             onClick={() => void handleSubmit()}
-            data-testid="commit-button"
+            data-testid="confirm-commit-message-button"
             disabled={!message.trim()}
           >
             Commit
diff --git a/app/src/components/modals/user/CreateUserModal.test.tsx b/app/src/components/modals/user/CreateUserModal.test.tsx
index e7801a4..9c54e2a 100644
--- a/app/src/components/modals/user/CreateUserModal.test.tsx
+++ b/app/src/components/modals/user/CreateUserModal.test.tsx
@@ -36,8 +36,8 @@ describe('CreateUserModal', () => {
     mockOnCreateUser.mockResolvedValue(true);
   });
 
-  describe('Modal Visibility and Basic Interaction', () => {
-    it('renders modal when opened with all form elements', () => {
+  describe('Modal Visibility and Content', () => {
+    it('renders modal with correct content when opened', () => {
       render(
         <CreateUserModal
           opened={true}
diff --git a/app/src/components/modals/user/EditUserModal.test.tsx b/app/src/components/modals/user/EditUserModal.test.tsx
index ea5f42e..ee335da 100644
--- a/app/src/components/modals/user/EditUserModal.test.tsx
+++ b/app/src/components/modals/user/EditUserModal.test.tsx
@@ -45,8 +45,8 @@ describe('EditUserModal', () => {
     mockOnEditUser.mockResolvedValue(true);
   });
 
-  describe('Modal Visibility and Form Pre-population', () => {
-    it('renders modal when opened with all form elements pre-populated', () => {
+  describe('Modal Visibility and Content', () => {
+    it('renders modal with correct content when opened', () => {
       render(
         <EditUserModal
           opened={true}
diff --git a/app/src/components/modals/workspace/CreateWorkspaceModal.test.tsx b/app/src/components/modals/workspace/CreateWorkspaceModal.test.tsx
index d49cad3..de8eaa7 100644
--- a/app/src/components/modals/workspace/CreateWorkspaceModal.test.tsx
+++ b/app/src/components/modals/workspace/CreateWorkspaceModal.test.tsx
@@ -89,8 +89,8 @@ describe('CreateWorkspaceModal', () => {
     mockUseModalContext.mockReturnValue(mockModalContext);
   });
 
-  describe('Modal Visibility and Basic Interaction', () => {
-    it('renders modal with form elements when visible', () => {
+  describe('Modal Visibility and Content', () => {
+    it('renders modal with correct content when opened', () => {
       render(
         <CreateWorkspaceModal onWorkspaceCreated={mockOnWorkspaceCreated} />
       );
@@ -119,8 +119,10 @@ describe('CreateWorkspaceModal', () => {
         screen.queryByText('Create New Workspace')
       ).not.toBeInTheDocument();
     });
+  });
 
-    it('closes modal when cancel button is clicked', () => {
+  describe('User Actions', () => {
+    it('calls onClose when cancel button is clicked', () => {
       render(
         <CreateWorkspaceModal onWorkspaceCreated={mockOnWorkspaceCreated} />
       );
@@ -268,7 +270,7 @@ describe('CreateWorkspaceModal', () => {
     });
   });
 
-  describe('Successful Workspace Creation', () => {
+  describe('Workspace Creation Flow', () => {
     it('completes full successful creation flow', async () => {
       render(
         <CreateWorkspaceModal onWorkspaceCreated={mockOnWorkspaceCreated} />