Refactor modal tests for improved clarity and consistency in content and actions

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);

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

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);

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>