jira-pat 1.0.0

package/frontend/src/__tests__/components/CreateIssueModal.test.jsx

@@ -0,0 +1,375 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, waitFor, fireEvent } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import React from 'react';
+import CreateIssueModal from '../../components/CreateIssueModal.jsx';
+
+const mockProjects = [
+  { id: '10001', key: 'PROJ', name: 'Project 1' },
+  { id: '10002', key: 'TEST', name: 'Test Project' },
+];
+
+const mockIssueTypes = [
+  { id: '10010', name: 'Bug', subtask: false },
+  { id: '10011', name: 'Story', subtask: false },
+  { id: '10012', name: 'Subtask', subtask: true },
+];
+
+const mockFetchIssueTypes = vi.fn().mockResolvedValue(mockIssueTypes);
+const mockCreateIssue = vi.fn().mockResolvedValue({ key: 'PROJ-123' });
+
+vi.mock('../../services/api', () => ({
+  fetchIssueTypes: (...args) => mockFetchIssueTypes(...args),
+  createIssue: (...args) => mockCreateIssue(...args),
+}));
+
+describe('CreateIssueModal', () => {
+  const defaultProps = {
+    isOpen: true,
+    onClose: vi.fn(),
+    onCreated: vi.fn(),
+    projects: mockProjects,
+    projectsLoading: false,
+    addToast: vi.fn(),
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockFetchIssueTypes.mockResolvedValue(mockIssueTypes);
+    mockCreateIssue.mockResolvedValue({ key: 'PROJ-123' });
+  });
+
+  describe('Rendering', () => {
+    it('renders modal when isOpen is true', () => {
+      render(<CreateIssueModal {...defaultProps} />);
+      
+      expect(screen.getByRole('dialog')).toBeInTheDocument();
+      expect(screen.getByText('Create Issue')).toBeInTheDocument();
+    });
+
+    it('returns null when isOpen is false', () => {
+      render(<CreateIssueModal {...defaultProps} isOpen={false} />);
+      
+      expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+    });
+
+    it('renders project dropdown with options', () => {
+      render(<CreateIssueModal {...defaultProps} />);
+      
+      const projectSelect = screen.getByLabelText('Select project');
+      expect(projectSelect).toBeInTheDocument();
+      expect(screen.getByText('Project 1 (PROJ)')).toBeInTheDocument();
+      expect(screen.getByText('Test Project (TEST)')).toBeInTheDocument();
+    });
+
+    it('renders summary input field', () => {
+      render(<CreateIssueModal {...defaultProps} />);
+      
+      const summaryInput = screen.getByLabelText('Issue summary');
+      expect(summaryInput).toBeInTheDocument();
+    });
+
+    it('renders description textarea', () => {
+      render(<CreateIssueModal {...defaultProps} />);
+      
+      const descTextarea = screen.getByLabelText('Issue description');
+      expect(descTextarea).toBeInTheDocument();
+    });
+
+    it('renders priority dropdown', () => {
+      render(<CreateIssueModal {...defaultProps} />);
+      
+      const prioritySelect = screen.getByLabelText('Select priority');
+      expect(prioritySelect).toBeInTheDocument();
+      expect(screen.getByText('Highest')).toBeInTheDocument();
+      expect(screen.getByText('Lowest')).toBeInTheDocument();
+    });
+
+    it('renders Cancel and Create buttons', () => {
+      render(<CreateIssueModal {...defaultProps} />);
+      
+      expect(screen.getByText('Cancel')).toBeInTheDocument();
+      expect(screen.getByText('Create')).toBeInTheDocument();
+    });
+
+    it('shows loading text in project dropdown when loading', () => {
+      render(<CreateIssueModal {...defaultProps} projectsLoading={true} />);
+      
+      expect(screen.getByText('Loading...')).toBeInTheDocument();
+    });
+  });
+
+  describe('Form Interactions', () => {
+    it('shows issue type dropdown after selecting a project', async () => {
+      render(<CreateIssueModal {...defaultProps} />);
+      
+      const projectSelect = screen.getByLabelText('Select project');
+      await userEvent.selectOptions(projectSelect, 'PROJ');
+      
+      await waitFor(() => {
+        expect(screen.getByLabelText('Select issue type')).toBeInTheDocument();
+      });
+      
+      expect(screen.getByText('Bug')).toBeInTheDocument();
+      expect(screen.getByText('Story')).toBeInTheDocument();
+    });
+
+    it('filters out subtask issue types', async () => {
+      render(<CreateIssueModal {...defaultProps} />);
+      
+      const projectSelect = screen.getByLabelText('Select project');
+      await userEvent.selectOptions(projectSelect, 'PROJ');
+      
+      await waitFor(() => {
+        expect(screen.queryByText('Subtask')).not.toBeInTheDocument();
+      });
+    });
+
+    it('calls onClose when Cancel is clicked', async () => {
+      render(<CreateIssueModal {...defaultProps} />);
+      
+      await userEvent.click(screen.getByText('Cancel'));
+      
+      expect(defaultProps.onClose).toHaveBeenCalled();
+    });
+
+    it('calls setCreateData when typing in description', async () => {
+      render(<CreateIssueModal {...defaultProps} />);
+      
+      const descTextarea = screen.getByLabelText('Issue description');
+      await userEvent.type(descTextarea, 'Test description content');
+      
+      expect(descTextarea.value).toBe('Test description content');
+    });
+
+    it('resets issueType when project changes', async () => {
+      render(<CreateIssueModal {...defaultProps} />);
+      
+      const projectSelect = screen.getByLabelText('Select project');
+      await userEvent.selectOptions(projectSelect, 'PROJ');
+      
+      await waitFor(() => {
+        expect(screen.getByLabelText('Select issue type')).toBeInTheDocument();
+      });
+      
+      const issueTypeSelect = screen.getByLabelText('Select issue type');
+      await userEvent.selectOptions(issueTypeSelect, '10010');
+      
+      await waitFor(() => {
+        expect(issueTypeSelect.value).toBe('10010');
+      });
+      
+      await userEvent.selectOptions(projectSelect, 'TEST');
+      
+      await waitFor(() => {
+        expect(issueTypeSelect.value).toBe('');
+      });
+    });
+  });
+
+  describe('Form Validation', () => {
+    it('disables Create button when form is incomplete', () => {
+      render(<CreateIssueModal {...defaultProps} />);
+      
+      const createButton = screen.getByLabelText('Create issue');
+      expect(createButton).toBeDisabled();
+    });
+
+    it('enables Create button when all required fields are filled', async () => {
+      render(<CreateIssueModal {...defaultProps} />);
+      
+      const projectSelect = screen.getByLabelText('Select project');
+      await userEvent.selectOptions(projectSelect, 'PROJ');
+      
+      await waitFor(() => {
+        const issueTypeSelect = screen.getByLabelText('Select issue type');
+        userEvent.selectOptions(issueTypeSelect, '10010');
+      });
+      
+      await userEvent.type(screen.getByLabelText('Issue summary'), 'Test Issue');
+      
+      await waitFor(() => {
+        const createButton = screen.getByLabelText('Create issue');
+        expect(createButton).not.toBeDisabled();
+      });
+    });
+
+    it('disables Create button when project is missing', () => {
+      render(<CreateIssueModal {...defaultProps} />);
+      
+      const summaryInput = screen.getByLabelText('Issue summary');
+      userEvent.type(summaryInput, 'Test Issue');
+      
+      const createButton = screen.getByLabelText('Create issue');
+      expect(createButton).toBeDisabled();
+    });
+
+    it('does not call createIssue when submit is triggered with missing fields', async () => {
+      render(<CreateIssueModal {...defaultProps} />);
+      
+      const summaryInput = screen.getByLabelText('Issue summary');
+      await userEvent.type(summaryInput, 'Test Issue');
+      
+      const createButton = screen.getByLabelText('Create issue');
+      fireEvent.click(createButton);
+      
+      expect(mockCreateIssue).not.toHaveBeenCalled();
+    });
+
+    it('disables Create button when summary is missing', async () => {
+      render(<CreateIssueModal {...defaultProps} />);
+      
+      const projectSelect = screen.getByLabelText('Select project');
+      await userEvent.selectOptions(projectSelect, 'PROJ');
+      
+      await waitFor(() => {
+        const issueTypeSelect = screen.getByLabelText('Select issue type');
+        userEvent.selectOptions(issueTypeSelect, '10010');
+      });
+      
+      const createButton = screen.getByLabelText('Create issue');
+      expect(createButton).toBeDisabled();
+    });
+
+    it('changes priority when priority dropdown is selected', async () => {
+      render(<CreateIssueModal {...defaultProps} />);
+      
+      const prioritySelect = screen.getByLabelText('Select priority');
+      await userEvent.selectOptions(prioritySelect, '2');
+      
+      expect(prioritySelect.value).toBe('2');
+    });
+  });
+
+  describe('Submit', () => {
+    it('calls createIssue and callbacks on successful submission', async () => {
+      render(<CreateIssueModal {...defaultProps} />);
+      
+      const projectSelect = screen.getByLabelText('Select project');
+      await userEvent.selectOptions(projectSelect, 'PROJ');
+      
+      await waitFor(() => {
+        const issueTypeSelect = screen.getByLabelText('Select issue type');
+        userEvent.selectOptions(issueTypeSelect, '10010');
+      });
+      
+      await userEvent.type(screen.getByLabelText('Issue summary'), 'Test Issue');
+      
+      await waitFor(() => {
+        const createButton = screen.getByLabelText('Create issue');
+        userEvent.click(createButton);
+      });
+      
+      await waitFor(() => {
+        expect(mockCreateIssue).toHaveBeenCalled();
+        expect(defaultProps.onCreated).toHaveBeenCalled();
+        expect(defaultProps.addToast).toHaveBeenCalledWith('Issue created successfully', 'success');
+      });
+    });
+
+    it('shows loading state while creating', async () => {
+      mockCreateIssue.mockImplementation(() => new Promise(resolve => setTimeout(resolve, 100)));
+      
+      render(<CreateIssueModal {...defaultProps} />);
+      
+      const projectSelect = screen.getByLabelText('Select project');
+      await userEvent.selectOptions(projectSelect, 'PROJ');
+      
+      await waitFor(() => {
+        const issueTypeSelect = screen.getByLabelText('Select issue type');
+        userEvent.selectOptions(issueTypeSelect, '10010');
+      });
+      
+      await userEvent.type(screen.getByLabelText('Issue summary'), 'Test Issue');
+      
+      await waitFor(() => {
+        const createButton = screen.getByLabelText('Create issue');
+        userEvent.click(createButton);
+      });
+      
+      await waitFor(() => {
+        expect(screen.getByText('Creating...')).toBeInTheDocument();
+      });
+    });
+
+    it('displays error message on failed creation', async () => {
+      mockCreateIssue.mockRejectedValueOnce(new Error('Failed to create'));
+      
+      render(<CreateIssueModal {...defaultProps} />);
+      
+      const projectSelect = screen.getByLabelText('Select project');
+      await userEvent.selectOptions(projectSelect, 'PROJ');
+      
+      await waitFor(() => {
+        const issueTypeSelect = screen.getByLabelText('Select issue type');
+        userEvent.selectOptions(issueTypeSelect, '10010');
+      });
+      
+      await userEvent.type(screen.getByLabelText('Issue summary'), 'Test Issue');
+      
+      await waitFor(() => {
+        const createButton = screen.getByLabelText('Create issue');
+        userEvent.click(createButton);
+      });
+      
+      await waitFor(() => {
+        expect(screen.getByText('Failed to create')).toBeInTheDocument();
+        expect(defaultProps.addToast).toHaveBeenCalledWith(
+          expect.stringContaining('Error creating issue'),
+          'error'
+        );
+      });
+    });
+
+    it('displays fallback error message when error has no message', async () => {
+      mockCreateIssue.mockRejectedValueOnce(new Error());
+      
+      render(<CreateIssueModal {...defaultProps} />);
+      
+      const projectSelect = screen.getByLabelText('Select project');
+      await userEvent.selectOptions(projectSelect, 'PROJ');
+      
+      await waitFor(() => {
+        const issueTypeSelect = screen.getByLabelText('Select issue type');
+        userEvent.selectOptions(issueTypeSelect, '10010');
+      });
+      
+      await userEvent.type(screen.getByLabelText('Issue summary'), 'Test Issue');
+      
+      await waitFor(() => {
+        const createButton = screen.getByLabelText('Create issue');
+        userEvent.click(createButton);
+      });
+      
+      await waitFor(() => {
+        expect(screen.getByText('Failed to create issue')).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('modal has correct aria attributes', () => {
+      render(<CreateIssueModal {...defaultProps} />);
+      
+      const modal = screen.getByRole('dialog');
+      expect(modal).toHaveAttribute('aria-modal', 'true');
+      expect(modal).toHaveAttribute('aria-labelledby', 'modal-title');
+    });
+
+    it('close button has aria-label', () => {
+      render(<CreateIssueModal {...defaultProps} />);
+      
+      const closeButton = screen.getByLabelText('Close modal');
+      expect(closeButton).toBeInTheDocument();
+    });
+
+    it('form inputs have aria-labels', () => {
+      render(<CreateIssueModal {...defaultProps} />);
+      
+      expect(screen.getByLabelText('Select project')).toBeInTheDocument();
+      expect(screen.getByLabelText('Issue summary')).toBeInTheDocument();
+      expect(screen.getByLabelText('Issue description')).toBeInTheDocument();
+      expect(screen.getByLabelText('Select priority')).toBeInTheDocument();
+    });
+  });
+});