Add CreateWorkspaceModal and DeleteWorkspaceModal tests

app/src/components/modals/workspace/CreateWorkspaceModal.test.tsx

@@ -0,0 +1,728 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import {
+  render as rtlRender,
+  screen,
+  fireEvent,
+  waitFor,
+} from '@testing-library/react';
+import React from 'react';
+import { MantineProvider } from '@mantine/core';
+import CreateWorkspaceModal from './CreateWorkspaceModal';
+import { Theme, type Workspace } from '@/types/models';
+import { notifications } from '@mantine/notifications';
+import { useModalContext } from '../../../contexts/ModalContext';
+import { createWorkspace } from '@/api/workspace';
+
+// Mock notifications
+vi.mock('@mantine/notifications', () => ({
+  notifications: {
+    show: vi.fn(),
+  },
+}));
+
+// Mock ModalContext
+vi.mock('../../../contexts/ModalContext', () => ({
+  useModalContext: vi.fn(),
+}));
+
+// Mock workspace API
+vi.mock('@/api/workspace', () => ({
+  createWorkspace: vi.fn(),
+}));
+
+// Helper wrapper component for testing
+const TestWrapper = ({ children }: { children: React.ReactNode }) => (
+  <MantineProvider defaultColorScheme="light">{children}</MantineProvider>
+);
+
+// Custom render function
+const render = (ui: React.ReactElement) => {
+  return rtlRender(ui, { wrapper: TestWrapper });
+};
+
+describe('CreateWorkspaceModal', () => {
+  const mockOnWorkspaceCreated = vi.fn();
+  const mockNotificationsShow = vi.mocked(notifications.show);
+  const mockUseModalContext = vi.mocked(useModalContext);
+  const mockCreateWorkspace = vi.mocked(createWorkspace);
+
+  const mockSetCreateWorkspaceModalVisible = vi.fn();
+  const mockModalContext = {
+    newFileModalVisible: false,
+    setNewFileModalVisible: vi.fn(),
+    deleteFileModalVisible: false,
+    setDeleteFileModalVisible: vi.fn(),
+    commitMessageModalVisible: false,
+    setCommitMessageModalVisible: vi.fn(),
+    settingsModalVisible: false,
+    setSettingsModalVisible: vi.fn(),
+    switchWorkspaceModalVisible: false,
+    setSwitchWorkspaceModalVisible: vi.fn(),
+    createWorkspaceModalVisible: true,
+    setCreateWorkspaceModalVisible: mockSetCreateWorkspaceModalVisible,
+  };
+
+  const mockWorkspace: Workspace = {
+    id: 1,
+    userId: 1,
+    name: 'test-workspace',
+    createdAt: '2024-01-01T00:00:00Z',
+    theme: Theme.Light,
+    autoSave: false,
+    showHiddenFiles: false,
+    gitEnabled: false,
+    gitUrl: '',
+    gitUser: '',
+    gitToken: '',
+    gitAutoCommit: false,
+    gitCommitMsgTemplate: '${action} ${filename}',
+    gitCommitName: '',
+    gitCommitEmail: '',
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockCreateWorkspace.mockResolvedValue(mockWorkspace);
+    mockOnWorkspaceCreated.mockResolvedValue(undefined);
+    mockSetCreateWorkspaceModalVisible.mockClear();
+    mockNotificationsShow.mockClear();
+
+    // Set up default modal context
+    mockUseModalContext.mockReturnValue(mockModalContext);
+  });
+
+  describe('Modal Visibility', () => {
+    it('renders modal when visible', () => {
+      render(
+        <CreateWorkspaceModal onWorkspaceCreated={mockOnWorkspaceCreated} />
+      );
+
+      expect(screen.getByText('Create New Workspace')).toBeInTheDocument();
+      expect(screen.getByTestId('workspace-name-input')).toBeInTheDocument();
+      expect(
+        screen.getByTestId('cancel-create-workspace-button')
+      ).toBeInTheDocument();
+      expect(
+        screen.getByTestId('confirm-create-workspace-button')
+      ).toBeInTheDocument();
+    });
+
+    it('does not render modal when not visible', () => {
+      const hiddenModalContext = {
+        ...mockModalContext,
+        createWorkspaceModalVisible: false,
+      };
+
+      mockUseModalContext.mockReturnValueOnce(hiddenModalContext);
+
+      render(
+        <CreateWorkspaceModal onWorkspaceCreated={mockOnWorkspaceCreated} />
+      );
+
+      expect(
+        screen.queryByText('Create New Workspace')
+      ).not.toBeInTheDocument();
+    });
+
+    it('calls setCreateWorkspaceModalVisible when modal is closed via cancel button', () => {
+      render(
+        <CreateWorkspaceModal onWorkspaceCreated={mockOnWorkspaceCreated} />
+      );
+
+      const cancelButton = screen.getByTestId('cancel-create-workspace-button');
+      fireEvent.click(cancelButton);
+
+      expect(mockSetCreateWorkspaceModalVisible).toHaveBeenCalledWith(false);
+    });
+  });
+
+  describe('Form Interaction', () => {
+    it('updates workspace name input when typed', () => {
+      render(
+        <CreateWorkspaceModal onWorkspaceCreated={mockOnWorkspaceCreated} />
+      );
+
+      const nameInput = screen.getByTestId('workspace-name-input');
+      fireEvent.change(nameInput, { target: { value: 'my-workspace' } });
+
+      expect((nameInput as HTMLInputElement).value).toBe('my-workspace');
+    });
+
+    it('handles form submission with valid workspace name', async () => {
+      render(
+        <CreateWorkspaceModal onWorkspaceCreated={mockOnWorkspaceCreated} />
+      );
+
+      const nameInput = screen.getByTestId('workspace-name-input');
+      const createButton = screen.getByTestId(
+        'confirm-create-workspace-button'
+      );
+
+      fireEvent.change(nameInput, { target: { value: 'new-workspace' } });
+      fireEvent.click(createButton);
+
+      await waitFor(() => {
+        expect(mockCreateWorkspace).toHaveBeenCalledWith('new-workspace');
+      });
+    });
+
+    it('prevents submission with empty workspace name', async () => {
+      render(
+        <CreateWorkspaceModal onWorkspaceCreated={mockOnWorkspaceCreated} />
+      );
+
+      const createButton = screen.getByTestId(
+        'confirm-create-workspace-button'
+      );
+      fireEvent.click(createButton);
+
+      await waitFor(() => {
+        expect(mockNotificationsShow).toHaveBeenCalledWith({
+          title: 'Error',
+          message: 'Workspace name is required',
+          color: 'red',
+        });
+      });
+
+      expect(mockCreateWorkspace).not.toHaveBeenCalled();
+    });
+
+    it('prevents submission with whitespace-only workspace name', async () => {
+      render(
+        <CreateWorkspaceModal onWorkspaceCreated={mockOnWorkspaceCreated} />
+      );
+
+      const nameInput = screen.getByTestId('workspace-name-input');
+      const createButton = screen.getByTestId(
+        'confirm-create-workspace-button'
+      );
+
+      fireEvent.change(nameInput, { target: { value: '   ' } });
+      fireEvent.click(createButton);
+
+      await waitFor(() => {
+        expect(mockNotificationsShow).toHaveBeenCalledWith({
+          title: 'Error',
+          message: 'Workspace name is required',
+          color: 'red',
+        });
+      });
+
+      expect(mockCreateWorkspace).not.toHaveBeenCalled();
+    });
+
+    it('closes modal and clears form after successful creation', async () => {
+      render(
+        <CreateWorkspaceModal onWorkspaceCreated={mockOnWorkspaceCreated} />
+      );
+
+      const nameInput = screen.getByTestId('workspace-name-input');
+      const createButton = screen.getByTestId(
+        'confirm-create-workspace-button'
+      );
+
+      fireEvent.change(nameInput, { target: { value: 'success-workspace' } });
+      fireEvent.click(createButton);
+
+      await waitFor(() => {
+        expect(mockCreateWorkspace).toHaveBeenCalledWith('success-workspace');
+      });
+
+      await waitFor(() => {
+        expect(mockSetCreateWorkspaceModalVisible).toHaveBeenCalledWith(false);
+      });
+
+      await waitFor(() => {
+        expect((nameInput as HTMLInputElement).value).toBe('');
+      });
+    });
+  });
+
+  describe('Workspace Name Validation', () => {
+    it('handles various workspace name formats', async () => {
+      const workspaceNames = [
+        'simple',
+        'workspace-with-dashes',
+        'workspace_with_underscores',
+        'workspace with spaces',
+        'workspace123',
+        'Very Long Workspace Name Here',
+      ];
+
+      for (const name of workspaceNames) {
+        const { unmount } = render(
+          <CreateWorkspaceModal onWorkspaceCreated={mockOnWorkspaceCreated} />
+        );
+
+        const nameInput = screen.getByTestId('workspace-name-input');
+        const createButton = screen.getByTestId(
+          'confirm-create-workspace-button'
+        );
+
+        fireEvent.change(nameInput, { target: { value: name } });
+        fireEvent.click(createButton);
+
+        await waitFor(() => {
+          expect(mockCreateWorkspace).toHaveBeenCalledWith(name);
+        });
+
+        unmount();
+        vi.clearAllMocks();
+        mockCreateWorkspace.mockResolvedValue(mockWorkspace);
+      }
+    });
+
+    it('handles unicode characters in workspace names', async () => {
+      render(
+        <CreateWorkspaceModal onWorkspaceCreated={mockOnWorkspaceCreated} />
+      );
+
+      const nameInput = screen.getByTestId('workspace-name-input');
+      const createButton = screen.getByTestId(
+        'confirm-create-workspace-button'
+      );
+
+      const unicodeName = 'ワークスペース';
+      fireEvent.change(nameInput, { target: { value: unicodeName } });
+      fireEvent.click(createButton);
+
+      await waitFor(() => {
+        expect(mockCreateWorkspace).toHaveBeenCalledWith(unicodeName);
+      });
+    });
+
+    it('trims whitespace from workspace names', async () => {
+      render(
+        <CreateWorkspaceModal onWorkspaceCreated={mockOnWorkspaceCreated} />
+      );
+
+      const nameInput = screen.getByTestId('workspace-name-input');
+      const createButton = screen.getByTestId(
+        'confirm-create-workspace-button'
+      );
+
+      fireEvent.change(nameInput, {
+        target: { value: '  trimmed-workspace  ' },
+      });
+      fireEvent.click(createButton);
+
+      await waitFor(() => {
+        expect(mockCreateWorkspace).toHaveBeenCalledWith('trimmed-workspace');
+      });
+    });
+  });
+
+  describe('Loading State', () => {
+    it('shows loading state on create button during creation', async () => {
+      // Make the API call hang to test loading state
+      mockCreateWorkspace.mockImplementation(() => new Promise(() => {}));
+
+      render(
+        <CreateWorkspaceModal onWorkspaceCreated={mockOnWorkspaceCreated} />
+      );
+
+      const nameInput = screen.getByTestId('workspace-name-input');
+      const createButton = screen.getByTestId(
+        'confirm-create-workspace-button'
+      );
+
+      fireEvent.change(nameInput, { target: { value: 'loading-test' } });
+      fireEvent.click(createButton);
+
+      await waitFor(() => {
+        expect(createButton).toHaveAttribute('data-loading', 'true');
+      });
+    });
+
+    it('disables form elements during creation', async () => {
+      mockCreateWorkspace.mockImplementation(() => new Promise(() => {}));
+
+      render(
+        <CreateWorkspaceModal onWorkspaceCreated={mockOnWorkspaceCreated} />
+      );
+
+      const nameInput = screen.getByTestId('workspace-name-input');
+      const createButton = screen.getByTestId(
+        'confirm-create-workspace-button'
+      );
+      const cancelButton = screen.getByTestId('cancel-create-workspace-button');
+
+      fireEvent.change(nameInput, { target: { value: 'disabled-test' } });
+      fireEvent.click(createButton);
+
+      await waitFor(() => {
+        expect(nameInput).toBeDisabled();
+        expect(createButton).toBeDisabled();
+        expect(cancelButton).toBeDisabled();
+      });
+    });
+
+    it('handles normal state when not loading', () => {
+      render(
+        <CreateWorkspaceModal onWorkspaceCreated={mockOnWorkspaceCreated} />
+      );
+
+      const nameInput = screen.getByTestId('workspace-name-input');
+      const createButton = screen.getByTestId(
+        'confirm-create-workspace-button'
+      );
+      const cancelButton = screen.getByTestId('cancel-create-workspace-button');
+
+      expect(nameInput).not.toBeDisabled();
+      expect(createButton).not.toBeDisabled();
+      expect(cancelButton).not.toBeDisabled();
+      expect(createButton).not.toHaveAttribute('data-loading', 'true');
+    });
+  });
+
+  describe('Success Handling', () => {
+    it('shows success notification after workspace creation', async () => {
+      render(
+        <CreateWorkspaceModal onWorkspaceCreated={mockOnWorkspaceCreated} />
+      );
+
+      const nameInput = screen.getByTestId('workspace-name-input');
+      const createButton = screen.getByTestId(
+        'confirm-create-workspace-button'
+      );
+
+      fireEvent.change(nameInput, { target: { value: 'success-workspace' } });
+      fireEvent.click(createButton);
+
+      await waitFor(() => {
+        expect(mockNotificationsShow).toHaveBeenCalledWith({
+          title: 'Success',
+          message: 'Workspace created successfully',
+          color: 'green',
+        });
+      });
+    });
+
+    it('calls onWorkspaceCreated callback when provided', async () => {
+      render(
+        <CreateWorkspaceModal onWorkspaceCreated={mockOnWorkspaceCreated} />
+      );
+
+      const nameInput = screen.getByTestId('workspace-name-input');
+      const createButton = screen.getByTestId(
+        'confirm-create-workspace-button'
+      );
+
+      fireEvent.change(nameInput, { target: { value: 'callback-test' } });
+      fireEvent.click(createButton);
+
+      await waitFor(() => {
+        expect(mockOnWorkspaceCreated).toHaveBeenCalledWith(mockWorkspace);
+      });
+    });
+
+    it('works without onWorkspaceCreated callback', async () => {
+      render(<CreateWorkspaceModal />);
+
+      const nameInput = screen.getByTestId('workspace-name-input');
+      const createButton = screen.getByTestId(
+        'confirm-create-workspace-button'
+      );
+
+      fireEvent.change(nameInput, { target: { value: 'no-callback-test' } });
+      fireEvent.click(createButton);
+
+      await waitFor(() => {
+        expect(mockCreateWorkspace).toHaveBeenCalledWith('no-callback-test');
+      });
+
+      await waitFor(() => {
+        expect(mockNotificationsShow).toHaveBeenCalledWith({
+          title: 'Success',
+          message: 'Workspace created successfully',
+          color: 'green',
+        });
+      });
+    });
+  });
+
+  describe('Error Handling', () => {
+    it('handles creation errors gracefully', async () => {
+      mockCreateWorkspace.mockRejectedValue(new Error('Creation failed'));
+
+      render(
+        <CreateWorkspaceModal onWorkspaceCreated={mockOnWorkspaceCreated} />
+      );
+
+      const nameInput = screen.getByTestId('workspace-name-input');
+      const createButton = screen.getByTestId(
+        'confirm-create-workspace-button'
+      );
+
+      fireEvent.change(nameInput, { target: { value: 'error-workspace' } });
+      fireEvent.click(createButton);
+
+      await waitFor(() => {
+        expect(mockNotificationsShow).toHaveBeenCalledWith({
+          title: 'Error',
+          message: 'Failed to create workspace',
+          color: 'red',
+        });
+      });
+
+      // Modal should remain open when creation fails
+      expect(mockSetCreateWorkspaceModalVisible).not.toHaveBeenCalledWith(
+        false
+      );
+      expect(screen.getByText('Create New Workspace')).toBeInTheDocument();
+    });
+
+    it('handles network errors', async () => {
+      mockCreateWorkspace.mockRejectedValue(new Error('Network error'));
+
+      render(
+        <CreateWorkspaceModal onWorkspaceCreated={mockOnWorkspaceCreated} />
+      );
+
+      const nameInput = screen.getByTestId('workspace-name-input');
+      const createButton = screen.getByTestId(
+        'confirm-create-workspace-button'
+      );
+
+      fireEvent.change(nameInput, { target: { value: 'network-error-test' } });
+      fireEvent.click(createButton);
+
+      await waitFor(() => {
+        expect(mockNotificationsShow).toHaveBeenCalledWith({
+          title: 'Error',
+          message: 'Failed to create workspace',
+          color: 'red',
+        });
+      });
+
+      // Should not crash the component
+      expect(screen.getByText('Create New Workspace')).toBeInTheDocument();
+    });
+
+    it('retains form values when creation fails', async () => {
+      mockCreateWorkspace.mockRejectedValue(new Error('Creation failed'));
+
+      render(
+        <CreateWorkspaceModal onWorkspaceCreated={mockOnWorkspaceCreated} />
+      );
+
+      const nameInput = screen.getByTestId('workspace-name-input');
+      const createButton = screen.getByTestId(
+        'confirm-create-workspace-button'
+      );
+
+      fireEvent.change(nameInput, { target: { value: 'persist-error' } });
+      fireEvent.click(createButton);
+
+      await waitFor(() => {
+        expect(mockCreateWorkspace).toHaveBeenCalledWith('persist-error');
+      });
+
+      // Form should retain values when creation fails
+      expect((nameInput as HTMLInputElement).value).toBe('persist-error');
+    });
+
+    it('resets loading state after error', async () => {
+      mockCreateWorkspace.mockRejectedValue(new Error('Creation failed'));
+
+      render(
+        <CreateWorkspaceModal onWorkspaceCreated={mockOnWorkspaceCreated} />
+      );
+
+      const nameInput = screen.getByTestId('workspace-name-input');
+      const createButton = screen.getByTestId(
+        'confirm-create-workspace-button'
+      );
+
+      fireEvent.change(nameInput, { target: { value: 'loading-error' } });
+      fireEvent.click(createButton);
+
+      await waitFor(() => {
+        expect(mockCreateWorkspace).toHaveBeenCalled();
+      });
+
+      await waitFor(() => {
+        expect(createButton).not.toHaveAttribute('data-loading', 'true');
+        expect(nameInput).not.toBeDisabled();
+      });
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('has proper form labels and structure', () => {
+      render(
+        <CreateWorkspaceModal onWorkspaceCreated={mockOnWorkspaceCreated} />
+      );
+
+      const nameInput = screen.getByTestId('workspace-name-input');
+      expect(nameInput).toBeInTheDocument();
+      expect(nameInput.tagName).toBe('INPUT');
+      expect(nameInput).toHaveAttribute('type', 'text');
+      expect(nameInput).toHaveAccessibleName();
+    });
+
+    it('has proper button roles', () => {
+      render(
+        <CreateWorkspaceModal onWorkspaceCreated={mockOnWorkspaceCreated} />
+      );
+
+      const buttons = screen.getAllByRole('button');
+      expect(buttons.length).toBeGreaterThanOrEqual(2);
+
+      const cancelButton = screen.getByRole('button', { name: /cancel/i });
+      const createButton = screen.getByRole('button', { name: /create/i });
+
+      expect(cancelButton).toBeInTheDocument();
+      expect(createButton).toBeInTheDocument();
+    });
+
+    it('supports keyboard navigation', () => {
+      render(
+        <CreateWorkspaceModal onWorkspaceCreated={mockOnWorkspaceCreated} />
+      );
+
+      const nameInput = screen.getByTestId('workspace-name-input');
+
+      // Check that the input is focusable
+      expect(nameInput).not.toHaveAttribute('disabled');
+      expect(nameInput).not.toHaveAttribute('readonly');
+
+      // Test keyboard input
+      fireEvent.change(nameInput, { target: { value: 'keyboard-test' } });
+      expect((nameInput as HTMLInputElement).value).toBe('keyboard-test');
+    });
+
+    it('has proper modal structure', () => {
+      render(
+        <CreateWorkspaceModal onWorkspaceCreated={mockOnWorkspaceCreated} />
+      );
+
+      expect(screen.getByText('Create New Workspace')).toBeInTheDocument();
+      expect(screen.getByTestId('workspace-name-input')).toBeInTheDocument();
+    });
+  });
+
+  describe('Component Props', () => {
+    it('accepts and uses onWorkspaceCreated prop correctly', async () => {
+      const customCallback = vi.fn().mockResolvedValue(undefined);
+
+      render(<CreateWorkspaceModal onWorkspaceCreated={customCallback} />);
+
+      const nameInput = screen.getByTestId('workspace-name-input');
+      const createButton = screen.getByTestId(
+        'confirm-create-workspace-button'
+      );
+
+      fireEvent.change(nameInput, { target: { value: 'custom-callback' } });
+      fireEvent.click(createButton);
+
+      await waitFor(() => {
+        expect(customCallback).toHaveBeenCalledWith(mockWorkspace);
+      });
+    });
+
+    it('handles function props correctly', () => {
+      const testCallback = vi.fn();
+
+      expect(() => {
+        render(<CreateWorkspaceModal onWorkspaceCreated={testCallback} />);
+      }).not.toThrow();
+
+      expect(screen.getByText('Create New Workspace')).toBeInTheDocument();
+    });
+  });
+
+  describe('User Interaction Flow', () => {
+    it('completes full workspace creation flow successfully', async () => {
+      render(
+        <CreateWorkspaceModal onWorkspaceCreated={mockOnWorkspaceCreated} />
+      );
+
+      // 1. Modal opens and shows form
+      expect(screen.getByText('Create New Workspace')).toBeInTheDocument();
+
+      // 2. User types workspace name
+      const nameInput = screen.getByTestId('workspace-name-input');
+      fireEvent.change(nameInput, { target: { value: 'complete-flow-test' } });
+
+      // 3. User clicks create
+      const createButton = screen.getByTestId(
+        'confirm-create-workspace-button'
+      );
+      fireEvent.click(createButton);
+
+      // 4. API is called
+      await waitFor(() => {
+        expect(mockCreateWorkspace).toHaveBeenCalledWith('complete-flow-test');
+      });
+
+      // 5. Success notification is shown
+      await waitFor(() => {
+        expect(mockNotificationsShow).toHaveBeenCalledWith({
+          title: 'Success',
+          message: 'Workspace created successfully',
+          color: 'green',
+        });
+      });
+
+      // 6. Callback is called
+      await waitFor(() => {
+        expect(mockOnWorkspaceCreated).toHaveBeenCalledWith(mockWorkspace);
+      });
+
+      // 7. Modal closes and form clears
+      await waitFor(() => {
+        expect(mockSetCreateWorkspaceModalVisible).toHaveBeenCalledWith(false);
+      });
+
+      await waitFor(() => {
+        expect((nameInput as HTMLInputElement).value).toBe('');
+      });
+    });
+
+    it('allows user to cancel workspace creation', () => {
+      render(
+        <CreateWorkspaceModal onWorkspaceCreated={mockOnWorkspaceCreated} />
+      );
+
+      // User types name but then cancels
+      const nameInput = screen.getByTestId('workspace-name-input');
+      fireEvent.change(nameInput, { target: { value: 'cancelled-workspace' } });
+
+      const cancelButton = screen.getByTestId('cancel-create-workspace-button');
+      fireEvent.click(cancelButton);
+
+      // Should close modal without calling API
+      expect(mockCreateWorkspace).not.toHaveBeenCalled();
+      expect(mockSetCreateWorkspaceModalVisible).toHaveBeenCalledWith(false);
+    });
+
+    it('handles validation error flow', async () => {
+      render(
+        <CreateWorkspaceModal onWorkspaceCreated={mockOnWorkspaceCreated} />
+      );
+
+      // User tries to submit without entering name
+      const createButton = screen.getByTestId(
+        'confirm-create-workspace-button'
+      );
+      fireEvent.click(createButton);
+
+      // Should show validation error
+      await waitFor(() => {
+        expect(mockNotificationsShow).toHaveBeenCalledWith({
+          title: 'Error',
+          message: 'Workspace name is required',
+          color: 'red',
+        });
+      });
+
+      // Should not call API or close modal
+      expect(mockCreateWorkspace).not.toHaveBeenCalled();
+      expect(mockSetCreateWorkspaceModalVisible).not.toHaveBeenCalledWith(
+        false
+      );
+      expect(screen.getByText('Create New Workspace')).toBeInTheDocument();
+    });
+  });
+});

app/src/components/modals/workspace/CreateWorkspaceModal.tsx

@@ -18,7 +18,8 @@ const CreateWorkspaceModal: React.FC<CreateWorkspaceModalProps> = ({
     useModalContext();
 
   const handleSubmit = async (): Promise<void> => {
-    if (!name.trim()) {
+    const trimmedName = name.trim();
+    if (!trimmedName) {
       notifications.show({
         title: 'Error',
         message: 'Workspace name is required',
@@ -29,7 +30,7 @@ const CreateWorkspaceModal: React.FC<CreateWorkspaceModalProps> = ({
 
     setLoading(true);
     try {
-      const workspace = await createWorkspace(name);
+      const workspace = await createWorkspace(trimmedName);
       notifications.show({
         title: 'Success',
         message: 'Workspace created successfully',
@@ -61,6 +62,7 @@ const CreateWorkspaceModal: React.FC<CreateWorkspaceModalProps> = ({
     >
       <Box maw={400} mx="auto">
         <TextInput
+          type="text"
           label="Workspace Name"
           placeholder="Enter workspace name"
           data-testid="workspace-name-input"
@@ -80,7 +82,7 @@ const CreateWorkspaceModal: React.FC<CreateWorkspaceModalProps> = ({
             Cancel
           </Button>
           <Button
-            onClick={() => void handleSubmit}
+            onClick={() => void handleSubmit()}
             loading={loading}
             data-testid="confirm-create-workspace-button"
           >

app/src/components/modals/workspace/DeleteWorkspaceModal.test.tsx

@@ -0,0 +1,679 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import {
+  render as rtlRender,
+  screen,
+  fireEvent,
+  waitFor,
+} from '@testing-library/react';
+import React from 'react';
+import { MantineProvider } from '@mantine/core';
+import DeleteWorkspaceModal from './DeleteWorkspaceModal';
+
+// Mock notifications
+vi.mock('@mantine/notifications', () => ({
+  notifications: {
+    show: vi.fn(),
+  },
+}));
+
+// Helper wrapper component for testing
+const TestWrapper = ({ children }: { children: React.ReactNode }) => (
+  <MantineProvider defaultColorScheme="light">{children}</MantineProvider>
+);
+
+// Custom render function
+const render = (ui: React.ReactElement) => {
+  return rtlRender(ui, { wrapper: TestWrapper });
+};
+
+describe('DeleteWorkspaceModal', () => {
+  const mockOnConfirm = vi.fn();
+  const mockOnClose = vi.fn();
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockOnConfirm.mockResolvedValue(undefined);
+    mockOnClose.mockClear();
+  });
+
+  describe('Modal Visibility', () => {
+    it('renders modal when opened with workspace name', () => {
+      render(
+        <DeleteWorkspaceModal
+          opened={true}
+          onClose={mockOnClose}
+          onConfirm={mockOnConfirm}
+          workspaceName="test-workspace"
+        />
+      );
+
+      expect(screen.getByText('Delete Workspace')).toBeInTheDocument();
+      expect(
+        screen.getByText(
+          'Are you sure you want to delete workspace "test-workspace"? This action cannot be undone and all files in this workspace will be permanently deleted.'
+        )
+      ).toBeInTheDocument();
+      expect(
+        screen.getByTestId('cancel-delete-workspace-button')
+      ).toBeInTheDocument();
+      expect(
+        screen.getByTestId('confirm-delete-workspace-button')
+      ).toBeInTheDocument();
+    });
+
+    it('does not render modal when closed', () => {
+      render(
+        <DeleteWorkspaceModal
+          opened={false}
+          onClose={mockOnClose}
+          onConfirm={mockOnConfirm}
+          workspaceName="test-workspace"
+        />
+      );
+
+      expect(screen.queryByText('Delete Workspace')).not.toBeInTheDocument();
+    });
+
+    it('renders modal with undefined workspace name', () => {
+      render(
+        <DeleteWorkspaceModal
+          opened={true}
+          onClose={mockOnClose}
+          onConfirm={mockOnConfirm}
+          workspaceName={undefined}
+        />
+      );
+
+      expect(screen.getByText('Delete Workspace')).toBeInTheDocument();
+      expect(
+        screen.getByText(
+          'Are you sure you want to delete workspace ""? This action cannot be undone and all files in this workspace will be permanently deleted.'
+        )
+      ).toBeInTheDocument();
+    });
+
+    it('calls onClose when modal is closed via cancel button', () => {
+      render(
+        <DeleteWorkspaceModal
+          opened={true}
+          onClose={mockOnClose}
+          onConfirm={mockOnConfirm}
+          workspaceName="test-workspace"
+        />
+      );
+
+      const cancelButton = screen.getByTestId('cancel-delete-workspace-button');
+      fireEvent.click(cancelButton);
+
+      expect(mockOnClose).toHaveBeenCalled();
+    });
+  });
+
+  describe('Workspace Information Display', () => {
+    it('displays correct workspace name in confirmation message', () => {
+      render(
+        <DeleteWorkspaceModal
+          opened={true}
+          onClose={mockOnClose}
+          onConfirm={mockOnConfirm}
+          workspaceName="my-workspace"
+        />
+      );
+
+      expect(
+        screen.getByText(
+          'Are you sure you want to delete workspace "my-workspace"? This action cannot be undone and all files in this workspace will be permanently deleted.'
+        )
+      ).toBeInTheDocument();
+    });
+
+    it('handles various workspace name formats in confirmation message', () => {
+      const workspaceNames = [
+        'simple',
+        'workspace-with-dashes',
+        'workspace_with_underscores',
+        'workspace with spaces',
+        'very-long-workspace-name-here',
+      ];
+
+      workspaceNames.forEach((workspaceName) => {
+        const { unmount } = render(
+          <DeleteWorkspaceModal
+            opened={true}
+            onClose={mockOnClose}
+            onConfirm={mockOnConfirm}
+            workspaceName={workspaceName}
+          />
+        );
+
+        expect(
+          screen.getByText(
+            `Are you sure you want to delete workspace "${workspaceName}"? This action cannot be undone and all files in this workspace will be permanently deleted.`
+          )
+        ).toBeInTheDocument();
+
+        unmount();
+      });
+    });
+
+    it('handles workspace with special characters in name', () => {
+      const specialWorkspace = 'workspace"with@quotes';
+
+      render(
+        <DeleteWorkspaceModal
+          opened={true}
+          onClose={mockOnClose}
+          onConfirm={mockOnConfirm}
+          workspaceName={specialWorkspace}
+        />
+      );
+
+      expect(
+        screen.getByText(
+          'Are you sure you want to delete workspace "workspace"with@quotes"? This action cannot be undone and all files in this workspace will be permanently deleted.'
+        )
+      ).toBeInTheDocument();
+    });
+
+    it('handles unicode characters in workspace name', () => {
+      const unicodeWorkspace = 'ワークスペース';
+
+      render(
+        <DeleteWorkspaceModal
+          opened={true}
+          onClose={mockOnClose}
+          onConfirm={mockOnConfirm}
+          workspaceName={unicodeWorkspace}
+        />
+      );
+
+      expect(
+        screen.getByText(
+          'Are you sure you want to delete workspace "ワークスペース"? This action cannot be undone and all files in this workspace will be permanently deleted.'
+        )
+      ).toBeInTheDocument();
+    });
+
+    it('handles empty workspace name', () => {
+      render(
+        <DeleteWorkspaceModal
+          opened={true}
+          onClose={mockOnClose}
+          onConfirm={mockOnConfirm}
+          workspaceName=""
+        />
+      );
+
+      expect(
+        screen.getByText(
+          'Are you sure you want to delete workspace ""? This action cannot be undone and all files in this workspace will be permanently deleted.'
+        )
+      ).toBeInTheDocument();
+    });
+  });
+
+  describe('Modal Actions', () => {
+    it('has cancel and delete buttons with correct text', () => {
+      render(
+        <DeleteWorkspaceModal
+          opened={true}
+          onClose={mockOnClose}
+          onConfirm={mockOnConfirm}
+          workspaceName="test-workspace"
+        />
+      );
+
+      const cancelButton = screen.getByTestId('cancel-delete-workspace-button');
+      const deleteButton = screen.getByTestId(
+        'confirm-delete-workspace-button'
+      );
+
+      expect(cancelButton).toBeInTheDocument();
+      expect(deleteButton).toBeInTheDocument();
+
+      expect(cancelButton).toHaveTextContent('Cancel');
+      expect(deleteButton).toHaveTextContent('Delete');
+
+      expect(cancelButton).toHaveRole('button');
+      expect(deleteButton).toHaveRole('button');
+    });
+
+    it('calls onConfirm when delete button is clicked', async () => {
+      render(
+        <DeleteWorkspaceModal
+          opened={true}
+          onClose={mockOnClose}
+          onConfirm={mockOnConfirm}
+          workspaceName="test-workspace"
+        />
+      );
+
+      const deleteButton = screen.getByTestId(
+        'confirm-delete-workspace-button'
+      );
+      fireEvent.click(deleteButton);
+
+      await waitFor(() => {
+        expect(mockOnConfirm).toHaveBeenCalledTimes(1);
+      });
+    });
+
+    it('calls onClose when cancel button is clicked', () => {
+      render(
+        <DeleteWorkspaceModal
+          opened={true}
+          onClose={mockOnClose}
+          onConfirm={mockOnConfirm}
+          workspaceName="test-workspace"
+        />
+      );
+
+      const cancelButton = screen.getByTestId('cancel-delete-workspace-button');
+      fireEvent.click(cancelButton);
+
+      expect(mockOnClose).toHaveBeenCalled();
+    });
+  });
+
+  describe('Error Handling', () => {
+    it('handles deletion errors gracefully', async () => {
+      mockOnConfirm.mockRejectedValue(new Error('Deletion failed'));
+
+      render(
+        <DeleteWorkspaceModal
+          opened={true}
+          onClose={mockOnClose}
+          onConfirm={mockOnConfirm}
+          workspaceName="error-workspace"
+        />
+      );
+
+      const deleteButton = screen.getByTestId(
+        'confirm-delete-workspace-button'
+      );
+      fireEvent.click(deleteButton);
+
+      await waitFor(() => {
+        expect(mockOnConfirm).toHaveBeenCalled();
+      });
+
+      // Modal should handle the error gracefully (not crash)
+      expect(screen.getByText('Delete Workspace')).toBeInTheDocument();
+    });
+
+    it('handles network errors', async () => {
+      mockOnConfirm.mockRejectedValue(new Error('Network error'));
+
+      render(
+        <DeleteWorkspaceModal
+          opened={true}
+          onClose={mockOnClose}
+          onConfirm={mockOnConfirm}
+          workspaceName="network-error-workspace"
+        />
+      );
+
+      const deleteButton = screen.getByTestId(
+        'confirm-delete-workspace-button'
+      );
+      fireEvent.click(deleteButton);
+
+      await waitFor(() => {
+        expect(mockOnConfirm).toHaveBeenCalled();
+      });
+
+      // Should not crash the component
+      expect(screen.getByText('Delete Workspace')).toBeInTheDocument();
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('has proper modal structure', () => {
+      render(
+        <DeleteWorkspaceModal
+          opened={true}
+          onClose={mockOnClose}
+          onConfirm={mockOnConfirm}
+          workspaceName="test-workspace"
+        />
+      );
+
+      // Modal should have proper title
+      expect(screen.getByText('Delete Workspace')).toBeInTheDocument();
+
+      // Should have confirmation text
+      expect(
+        screen.getByText(/Are you sure you want to delete workspace/)
+      ).toBeInTheDocument();
+    });
+
+    it('has proper button roles', () => {
+      render(
+        <DeleteWorkspaceModal
+          opened={true}
+          onClose={mockOnClose}
+          onConfirm={mockOnConfirm}
+          workspaceName="test-workspace"
+        />
+      );
+
+      const buttons = screen.getAllByRole('button');
+      expect(buttons.length).toBeGreaterThanOrEqual(2);
+
+      const cancelButton = screen.getByRole('button', { name: /cancel/i });
+      const deleteButton = screen.getByRole('button', {
+        name: /delete/i,
+      });
+
+      expect(cancelButton).toBeInTheDocument();
+      expect(deleteButton).toBeInTheDocument();
+    });
+
+    it('supports keyboard navigation', () => {
+      render(
+        <DeleteWorkspaceModal
+          opened={true}
+          onClose={mockOnClose}
+          onConfirm={mockOnConfirm}
+          workspaceName="test-workspace"
+        />
+      );
+
+      const cancelButton = screen.getByTestId('cancel-delete-workspace-button');
+      const deleteButton = screen.getByTestId(
+        'confirm-delete-workspace-button'
+      );
+
+      // Buttons should be focusable
+      expect(cancelButton).not.toHaveAttribute('disabled');
+      expect(deleteButton).not.toHaveAttribute('disabled');
+
+      // Should handle keyboard events
+      fireEvent.keyDown(deleteButton, { key: 'Enter', code: 'Enter' });
+      fireEvent.keyDown(cancelButton, { key: 'Escape', code: 'Escape' });
+    });
+
+    it('has proper confirmation message structure', () => {
+      render(
+        <DeleteWorkspaceModal
+          opened={true}
+          onClose={mockOnClose}
+          onConfirm={mockOnConfirm}
+          workspaceName="important-workspace"
+        />
+      );
+
+      // Check that the workspace name is properly quoted in the message
+      expect(
+        screen.getByText(
+          /Are you sure you want to delete workspace "important-workspace"?/
+        )
+      ).toBeInTheDocument();
+    });
+  });
+
+  describe('Component Props', () => {
+    it('accepts and uses onConfirm prop correctly', async () => {
+      const customMockConfirm = vi.fn().mockResolvedValue(undefined);
+
+      render(
+        <DeleteWorkspaceModal
+          opened={true}
+          onClose={mockOnClose}
+          onConfirm={customMockConfirm}
+          workspaceName="custom-workspace"
+        />
+      );
+
+      const deleteButton = screen.getByTestId(
+        'confirm-delete-workspace-button'
+      );
+      fireEvent.click(deleteButton);
+
+      await waitFor(() => {
+        expect(customMockConfirm).toHaveBeenCalledTimes(1);
+      });
+    });
+
+    it('accepts and uses onClose prop correctly', () => {
+      const customMockClose = vi.fn();
+
+      render(
+        <DeleteWorkspaceModal
+          opened={true}
+          onClose={customMockClose}
+          onConfirm={mockOnConfirm}
+          workspaceName="custom-workspace"
+        />
+      );
+
+      const cancelButton = screen.getByTestId('cancel-delete-workspace-button');
+      fireEvent.click(cancelButton);
+
+      expect(customMockClose).toHaveBeenCalled();
+    });
+
+    it('handles function props correctly', () => {
+      const testOnConfirm = vi.fn();
+      const testOnClose = vi.fn();
+
+      expect(() => {
+        render(
+          <DeleteWorkspaceModal
+            opened={true}
+            onClose={testOnClose}
+            onConfirm={testOnConfirm}
+            workspaceName="test-workspace"
+          />
+        );
+      }).not.toThrow();
+
+      expect(screen.getByText('Delete Workspace')).toBeInTheDocument();
+    });
+
+    it('handles different workspace name types correctly', () => {
+      const workspaceNames = [
+        'normal-workspace',
+        'workspace with spaces',
+        'workspace_with_underscores',
+        'ワークスペース',
+        '',
+        undefined,
+      ];
+
+      workspaceNames.forEach((workspaceName) => {
+        const { unmount } = render(
+          <DeleteWorkspaceModal
+            opened={true}
+            onClose={mockOnClose}
+            onConfirm={mockOnConfirm}
+            workspaceName={workspaceName}
+          />
+        );
+
+        expect(screen.getByText('Delete Workspace')).toBeInTheDocument();
+        const displayName = workspaceName || '';
+        expect(
+          screen.getByText(
+            `Are you sure you want to delete workspace "${displayName}"?`,
+            { exact: false }
+          )
+        ).toBeInTheDocument();
+        unmount();
+      });
+    });
+
+    it('handles opened prop correctly', () => {
+      const { rerender } = render(
+        <DeleteWorkspaceModal
+          opened={false}
+          onClose={mockOnClose}
+          onConfirm={mockOnConfirm}
+          workspaceName="test-workspace"
+        />
+      );
+
+      // Should not be visible when opened is false
+      expect(screen.queryByText('Delete Workspace')).not.toBeInTheDocument();
+
+      rerender(
+        <TestWrapper>
+          <DeleteWorkspaceModal
+            opened={true}
+            onClose={mockOnClose}
+            onConfirm={mockOnConfirm}
+            workspaceName="test-workspace"
+          />
+        </TestWrapper>
+      );
+
+      // Should be visible when opened is true
+      expect(screen.getByText('Delete Workspace')).toBeInTheDocument();
+    });
+  });
+
+  describe('User Interaction Flow', () => {
+    it('completes full deletion confirmation flow successfully', async () => {
+      render(
+        <DeleteWorkspaceModal
+          opened={true}
+          onClose={mockOnClose}
+          onConfirm={mockOnConfirm}
+          workspaceName="flow-test-workspace"
+        />
+      );
+
+      // 1. Modal opens and shows workspace information
+      expect(screen.getByText('Delete Workspace')).toBeInTheDocument();
+      expect(
+        screen.getByText(
+          'Are you sure you want to delete workspace "flow-test-workspace"? This action cannot be undone and all files in this workspace will be permanently deleted.'
+        )
+      ).toBeInTheDocument();
+
+      // 2. User clicks delete
+      const deleteButton = screen.getByTestId(
+        'confirm-delete-workspace-button'
+      );
+      fireEvent.click(deleteButton);
+
+      // 3. Confirmation function is called
+      await waitFor(() => {
+        expect(mockOnConfirm).toHaveBeenCalledTimes(1);
+      });
+    });
+
+    it('allows user to cancel deletion', () => {
+      render(
+        <DeleteWorkspaceModal
+          opened={true}
+          onClose={mockOnClose}
+          onConfirm={mockOnConfirm}
+          workspaceName="cancel-test-workspace"
+        />
+      );
+
+      // User clicks cancel instead of delete
+      const cancelButton = screen.getByTestId('cancel-delete-workspace-button');
+      fireEvent.click(cancelButton);
+
+      // Should close modal without calling confirm function
+      expect(mockOnConfirm).not.toHaveBeenCalled();
+      expect(mockOnClose).toHaveBeenCalled();
+    });
+
+    it('handles multiple rapid clicks gracefully', () => {
+      render(
+        <DeleteWorkspaceModal
+          opened={true}
+          onClose={mockOnClose}
+          onConfirm={mockOnConfirm}
+          workspaceName="rapid-click-workspace"
+        />
+      );
+
+      const deleteButton = screen.getByTestId(
+        'confirm-delete-workspace-button'
+      );
+
+      // Rapidly click multiple times - should not crash
+      fireEvent.click(deleteButton);
+      fireEvent.click(deleteButton);
+      fireEvent.click(deleteButton);
+
+      // Verify component is still functional
+      expect(screen.getByText('Delete Workspace')).toBeInTheDocument();
+      expect(mockOnConfirm).toHaveBeenCalled();
+    });
+  });
+
+  describe('Security Considerations', () => {
+    it('clearly shows destructive action warning', () => {
+      render(
+        <DeleteWorkspaceModal
+          opened={true}
+          onClose={mockOnClose}
+          onConfirm={mockOnConfirm}
+          workspaceName="security-test-workspace"
+        />
+      );
+
+      expect(
+        screen.getByText(
+          /This action cannot be undone and all files in this workspace will be permanently deleted/
+        )
+      ).toBeInTheDocument();
+    });
+
+    it('requires explicit confirmation', () => {
+      render(
+        <DeleteWorkspaceModal
+          opened={true}
+          onClose={mockOnClose}
+          onConfirm={mockOnConfirm}
+          workspaceName="confirmation-test-workspace"
+        />
+      );
+
+      // Should show clear delete button
+      const deleteButton = screen.getByTestId(
+        'confirm-delete-workspace-button'
+      );
+      expect(deleteButton).toHaveTextContent('Delete');
+    });
+
+    it('displays workspace name for verification', () => {
+      render(
+        <DeleteWorkspaceModal
+          opened={true}
+          onClose={mockOnClose}
+          onConfirm={mockOnConfirm}
+          workspaceName="verification-workspace"
+        />
+      );
+
+      // User should be able to verify they're deleting the right workspace
+      expect(
+        screen.getByText(/delete workspace "verification-workspace"/)
+      ).toBeInTheDocument();
+    });
+
+    it('warns about file deletion consequences', () => {
+      render(
+        <DeleteWorkspaceModal
+          opened={true}
+          onClose={mockOnClose}
+          onConfirm={mockOnConfirm}
+          workspaceName="file-warning-workspace"
+        />
+      );
+
+      // Should warn about files being deleted
+      expect(
+        screen.getByText(
+          /all files in this workspace will be permanently deleted/
+        )
+      ).toBeInTheDocument();
+    });
+  });
+});

app/src/components/modals/workspace/DeleteWorkspaceModal.tsx

@@ -37,10 +37,10 @@ const DeleteWorkspaceModal: React.FC<DeleteUserModalProps> = ({
         </Button>
         <Button
           color="red"
-          onClick={() => void onConfirm}
+          onClick={() => void onConfirm()}
           data-testid="confirm-delete-workspace-button"
         >
-          Delete Workspace
+          Delete
         </Button>
       </Group>
     </Stack>