jira-pat 1.0.0

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

@@ -0,0 +1,962 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, fireEvent, waitFor, act } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import React from 'react';
+import IssueDetailPanel from '../../components/IssueDetailPanel.jsx';
+
+vi.mock('../../utils/sanitize.js', () => ({
+  sanitizeHtml: vi.fn((html) => html),
+}));
+
+const mockIssueDetail = {
+  key: 'PROJ-123',
+  fields: {
+    summary: 'Test Issue',
+    descriptionHtml: '<p>Test description</p>',
+    descriptionText: 'Test description',
+    status: { name: 'In Progress' },
+    assignee: { displayName: 'John Doe' },
+    reporter: { displayName: 'Jane Smith' },
+    issuetype: { name: 'Bug' },
+    customfield_10260: { value: 'Critical' },
+    created: '2024-01-01T00:00:00.000Z',
+    updated: '2024-01-02T00:00:00.000Z',
+    labels: ['bug', 'urgent'],
+    fixVersions: [{ id: '10001', name: 'v1.0' }],
+    attachment: [
+      { id: 'att1', filename: 'test.txt', content: 'http://example.com/file', size: 1024 },
+    ],
+    subtasksMapped: [
+      { key: 'PROJ-124', summary: 'Subtask 1', status: 'To Do' },
+    ],
+    issuelinksMapped: [
+      { key: 'PROJ-125', summary: 'Linked Issue', status: 'Done', label: 'blocks' },
+    ],
+  },
+};
+
+const mockComments = [
+  {
+    id: '10001',
+    author: { displayName: 'John Doe' },
+    created: '2024-01-01T12:00:00.000Z',
+    bodyText: 'Test comment',
+    renderedHtml: '<p>Test comment</p>',
+  },
+];
+
+const mockTransitions = [
+  { id: '1', name: 'To Do', to: { name: 'To Do' } },
+  { id: '2', name: 'In Progress', to: { name: 'In Progress' } },
+  { id: '3', name: 'Done', to: { name: 'Done' } },
+];
+
+const mockAssignableUsers = [
+  { accountId: 'acc1', displayName: 'User One' },
+  { accountId: 'acc2', displayName: 'User Two' },
+];
+
+const mockProjectVersions = [
+  { id: '10001', name: 'v1.0', released: false },
+  { id: '10002', name: 'v0.9', released: true },
+];
+
+describe('IssueDetailPanel', () => {
+  const defaultProps = {
+    mode: 'drawer',
+    issueDetail: mockIssueDetail,
+    comments: mockComments,
+    transitions: mockTransitions,
+    assignableUsers: mockAssignableUsers,
+    projectVersions: mockProjectVersions,
+    drawerLoading: false,
+    drawerError: null,
+    newCommentText: '',
+    setNewCommentText: vi.fn(),
+    isPostingComment: false,
+    targetTransitionId: '',
+    setTargetTransitionId: vi.fn(),
+    isTransitioning: false,
+    isTransitioningOptimistic: false,
+    optimisticStatus: null,
+    assigneeSearch: '',
+    setAssigneeSearch: vi.fn(),
+    targetAccountId: '',
+    setTargetAccountId: vi.fn(),
+    isAssigning: false,
+    isAssigningOptimistic: false,
+    optimisticAssignee: null,
+    isUpdatingVersions: false,
+    newLabelText: '',
+    setNewLabelText: vi.fn(),
+    labelSuggestions: ['suggestion1', 'suggestion2'],
+    showLabelSuggestions: false,
+    setShowLabelSuggestions: vi.fn(),
+    isUpdatingLabels: false,
+    isUploading: false,
+    uploadMessage: '',
+    handlePostComment: vi.fn(),
+    handleAssignUser: vi.fn(),
+    handleFileUpload: vi.fn(),
+    handleUpdateVersion: vi.fn(),
+    handleAddLabel: vi.fn(),
+    handleRemoveLabel: vi.fn(),
+    handleUpdateStatus: vi.fn(),
+    onSubtaskClick: vi.fn(),
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe('Rendering', () => {
+    it('renders issue description', () => {
+      render(<IssueDetailPanel {...defaultProps} />);
+      
+      expect(screen.getByText('Description')).toBeInTheDocument();
+      expect(screen.getByText('Test description')).toBeInTheDocument();
+    });
+
+    it('renders HTML description with dangerouslySetInnerHTML', () => {
+      render(<IssueDetailPanel {...defaultProps} />);
+      
+      const descContent = document.querySelector('.description-content');
+      expect(descContent).toBeInTheDocument();
+    });
+
+    it('renders placeholder when no description', () => {
+      const noDescIssue = {
+        ...mockIssueDetail,
+        fields: { ...mockIssueDetail.fields, descriptionHtml: null, descriptionText: null },
+      };
+      render(<IssueDetailPanel {...defaultProps} issueDetail={noDescIssue} />);
+      
+      expect(screen.getByText('No description provided.')).toBeInTheDocument();
+    });
+
+    it('renders subtasks section', () => {
+      render(<IssueDetailPanel {...defaultProps} />);
+      
+      expect(screen.getByText('Subtasks (1)')).toBeInTheDocument();
+      expect(screen.getByText('Subtask 1')).toBeInTheDocument();
+    });
+
+    it('renders linked issues section', () => {
+      render(<IssueDetailPanel {...defaultProps} />);
+      
+      expect(screen.getByText('Linked Issues (1)')).toBeInTheDocument();
+      expect(screen.getByText('Linked Issue')).toBeInTheDocument();
+    });
+
+    it('renders attachments section', () => {
+      render(<IssueDetailPanel {...defaultProps} />);
+      
+      expect(screen.getByText('Attachments (1)')).toBeInTheDocument();
+      expect(screen.getByText('test.txt')).toBeInTheDocument();
+    });
+
+    it('renders comments section', () => {
+      render(<IssueDetailPanel {...defaultProps} />);
+      
+      expect(screen.getByText('Comments (1)')).toBeInTheDocument();
+      expect(screen.getByText('Test comment')).toBeInTheDocument();
+    });
+
+    it('renders empty comments state', () => {
+      render(<IssueDetailPanel {...defaultProps} comments={[]} />);
+      
+      expect(screen.getByText('Comments (0)')).toBeInTheDocument();
+      expect(screen.getByText('No comments yet. Be the first to comment!')).toBeInTheDocument();
+    });
+
+    it('renders sidebar sections', () => {
+      render(<IssueDetailPanel {...defaultProps} />);
+      
+      expect(screen.getByText('Status')).toBeInTheDocument();
+      expect(screen.getByText('Assignee')).toBeInTheDocument();
+      expect(screen.getByText('Severity')).toBeInTheDocument();
+      expect(screen.getByText('Labels')).toBeInTheDocument();
+      expect(screen.getByText('Fix Version')).toBeInTheDocument();
+      expect(screen.getByText('Reporter')).toBeInTheDocument();
+      expect(screen.getByText('Created')).toBeInTheDocument();
+      expect(screen.getByText('Updated')).toBeInTheDocument();
+    });
+  });
+
+  describe('Loading State', () => {
+    it('renders skeleton when drawerLoading is true', () => {
+      render(<IssueDetailPanel {...defaultProps} drawerLoading={true} />);
+      
+      expect(document.querySelector('.drawer-skeleton')).toBeInTheDocument();
+    });
+
+    it('does not render content when loading', () => {
+      render(<IssueDetailPanel {...defaultProps} drawerLoading={true} />);
+      
+      expect(screen.queryByText('Description')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Error State', () => {
+    it('renders error message when drawerError is present', () => {
+      render(<IssueDetailPanel {...defaultProps} drawerError="Failed to load issue" />);
+      
+      expect(screen.getByText('Failed to load issue')).toBeInTheDocument();
+    });
+
+    it('error has role alert', () => {
+      render(<IssueDetailPanel {...defaultProps} drawerError="Error occurred" />);
+      
+      expect(screen.getByRole('alert')).toBeInTheDocument();
+    });
+  });
+
+  describe('Comments', () => {
+    it('renders comment author name', () => {
+      render(<IssueDetailPanel {...defaultProps} />);
+      
+      const authors = screen.getAllByText('John Doe');
+      expect(authors.length).toBeGreaterThan(0);
+    });
+
+    it('renders comment date', () => {
+      render(<IssueDetailPanel {...defaultProps} />);
+      
+      const commentDates = document.querySelectorAll('.comment-date');
+      expect(commentDates.length).toBeGreaterThan(0);
+    });
+
+    it('renders comment textarea', () => {
+      render(<IssueDetailPanel {...defaultProps} />);
+      
+      const textarea = screen.getByLabelText('Add comment');
+      expect(textarea).toBeInTheDocument();
+    });
+
+    it('disables textarea when posting comment', () => {
+      render(<IssueDetailPanel {...defaultProps} isPostingComment={true} />);
+      
+      const textarea = screen.getByLabelText('Add comment');
+      expect(textarea).toBeDisabled();
+    });
+
+    it('calls setNewCommentText when typing', async () => {
+      render(<IssueDetailPanel {...defaultProps} />);
+      
+      const textarea = screen.getByLabelText('Add comment');
+      await userEvent.type(textarea, 'New comment');
+      
+      expect(defaultProps.setNewCommentText).toHaveBeenCalled();
+    });
+
+    it('disables post button when comment is empty', () => {
+      render(<IssueDetailPanel {...defaultProps} />);
+      
+      const postButton = screen.getByLabelText('Post comment');
+      expect(postButton).toBeDisabled();
+    });
+
+    it('enables post button when comment has text', async () => {
+      render(<IssueDetailPanel {...defaultProps} newCommentText="Test" />);
+      
+      const postButton = screen.getByLabelText('Post comment');
+      expect(postButton).not.toBeDisabled();
+    });
+
+    it('calls handlePostComment when post button is clicked', async () => {
+      render(<IssueDetailPanel {...defaultProps} newCommentText="Test comment" />);
+      
+      const postButton = screen.getByLabelText('Post comment');
+      await userEvent.click(postButton);
+      
+      expect(defaultProps.handlePostComment).toHaveBeenCalled();
+    });
+
+    it('shows loading text when posting comment', () => {
+      render(<IssueDetailPanel {...defaultProps} newCommentText="Test" isPostingComment={true} />);
+      
+      expect(screen.getByText('Posting...')).toBeInTheDocument();
+    });
+  });
+
+  describe('Transitions', () => {
+    it('renders transition select dropdown', () => {
+      render(<IssueDetailPanel {...defaultProps} />);
+      
+      const select = screen.getByLabelText('Select transition');
+      expect(select).toBeInTheDocument();
+      
+      const options = select.querySelectorAll('option');
+      const optionTexts = Array.from(options).map(o => o.textContent);
+      expect(optionTexts).toContain('To Do');
+      expect(optionTexts).toContain('In Progress');
+      expect(optionTexts).toContain('Done');
+    });
+
+    it('handles transitions without to.name by falling back to name', () => {
+      const transitionsWithNameOnly = [
+        { id: '1', name: 'To Do' },
+        { id: '2', name: 'In Progress' },
+      ];
+      render(<IssueDetailPanel {...defaultProps} transitions={transitionsWithNameOnly} />);
+      
+      const select = screen.getByLabelText('Select transition');
+      const options = select.querySelectorAll('option');
+      const optionTexts = Array.from(options).map(o => o.textContent);
+      expect(optionTexts).toContain('To Do');
+      expect(optionTexts).toContain('In Progress');
+    });
+
+    it('sorts Backlog transitions to the end', () => {
+      const transitionsWithBacklog = [
+        { id: '1', name: 'Backlog', to: { name: 'Backlog' } },
+        { id: '2', name: 'In Progress', to: { name: 'In Progress' } },
+      ];
+      render(<IssueDetailPanel {...defaultProps} transitions={transitionsWithBacklog} />);
+      
+      const select = screen.getByLabelText('Select transition');
+      const options = Array.from(select.querySelectorAll('option')).filter(o => o.value);
+      expect(options[0].textContent).toBe('In Progress');
+      expect(options[1].textContent).toBe('Backlog');
+    });
+
+    it('calls setTargetTransitionId when transition is selected', async () => {
+      render(<IssueDetailPanel {...defaultProps} />);
+      
+      const select = screen.getByLabelText('Select transition');
+      await userEvent.selectOptions(select, '2');
+      
+      expect(defaultProps.setTargetTransitionId).toHaveBeenCalledWith('2');
+    });
+
+    it('disables Go button when no transition selected', () => {
+      render(<IssueDetailPanel {...defaultProps} />);
+      
+      const goButton = screen.getByLabelText('Update status');
+      expect(goButton).toBeDisabled();
+    });
+
+    it('enables Go button when transition is selected', async () => {
+      render(<IssueDetailPanel {...defaultProps} targetTransitionId="2" />);
+      
+      const goButton = screen.getByLabelText('Update status');
+      expect(goButton).not.toBeDisabled();
+    });
+
+    it('calls handleUpdateStatus when Go button is clicked', async () => {
+      render(<IssueDetailPanel {...defaultProps} targetTransitionId="2" />);
+      
+      const goButton = screen.getByLabelText('Update status');
+      await userEvent.click(goButton);
+      
+      expect(defaultProps.handleUpdateStatus).toHaveBeenCalled();
+    });
+
+    it('uses name fallback when to.name is not available in handleUpdateStatus', async () => {
+      const transitionsWithNameOnly = [
+        { id: '1', name: 'To Do' },
+        { id: '2', name: 'In Progress' },
+      ];
+      render(<IssueDetailPanel {...defaultProps} transitions={transitionsWithNameOnly} targetTransitionId="2" />);
+      
+      const goButton = screen.getByLabelText('Update status');
+      await userEvent.click(goButton);
+      
+      expect(defaultProps.handleUpdateStatus).toHaveBeenCalledWith('2', 'In Progress');
+    });
+
+    it('shows inline spinner when transitioning optimistically', () => {
+      render(<IssueDetailPanel {...defaultProps} targetTransitionId="2" isTransitioningOptimistic={true} />);
+      
+      const spinner = document.querySelector('.inline-spinner');
+      expect(spinner).toBeInTheDocument();
+    });
+
+    it('disables Go button when transitioning', () => {
+      render(<IssueDetailPanel {...defaultProps} targetTransitionId="2" isTransitioning={true} />);
+      
+      const goButton = screen.getByLabelText('Update status');
+      expect(goButton).toBeDisabled();
+    });
+  });
+
+  describe('Assignee', () => {
+    it('renders current assignee', () => {
+      render(<IssueDetailPanel {...defaultProps} />);
+      
+      const authors = screen.getAllByText('John Doe');
+      expect(authors.length).toBeGreaterThan(0);
+    });
+
+    it('renders unassigned when no assignee', () => {
+      const unassignedIssue = {
+        ...mockIssueDetail,
+        fields: { ...mockIssueDetail.fields, assignee: null },
+      };
+      render(<IssueDetailPanel {...defaultProps} issueDetail={unassignedIssue} />);
+      
+      expect(screen.getByText('Unassigned')).toBeInTheDocument();
+    });
+
+    it('renders assignee search input', () => {
+      render(<IssueDetailPanel {...defaultProps} />);
+      
+      const input = screen.getByLabelText('Search for assignee');
+      expect(input).toBeInTheDocument();
+    });
+
+    it('calls setAssigneeSearch when typing', async () => {
+      render(<IssueDetailPanel {...defaultProps} />);
+      
+      const input = screen.getByLabelText('Search for assignee');
+      await userEvent.type(input, 'User');
+      
+      expect(defaultProps.setAssigneeSearch).toHaveBeenCalled();
+    });
+
+    it('shows assignee suggestions when search matches', async () => {
+      render(<IssueDetailPanel {...defaultProps} assigneeSearch="User" />);
+      
+      const suggestions = document.querySelector('.assignee-suggestions-dropdown');
+      expect(suggestions).toBeInTheDocument();
+      expect(screen.getByText('User One')).toBeInTheDocument();
+    });
+
+    it('calls setTargetAccountId when suggestion is clicked', async () => {
+      render(<IssueDetailPanel {...defaultProps} assigneeSearch="User" />);
+      
+      await userEvent.click(screen.getByText('User One'));
+      
+      expect(defaultProps.setTargetAccountId).toHaveBeenCalledWith('acc1');
+    });
+
+    it('shows spinner when assigning', () => {
+      render(<IssueDetailPanel {...defaultProps} targetAccountId="acc1" isAssigning={true} />);
+      
+      const assignButton = screen.getByLabelText('Assign');
+      expect(assignButton).toBeDisabled();
+      expect(assignButton).toHaveTextContent('...');
+    });
+
+    it('shows optimistic assignee when isAssigningOptimistic is true', () => {
+      const optimisticUser = { displayName: 'Optimistic User', accountId: 'opt1' };
+      render(
+        <IssueDetailPanel 
+          {...defaultProps} 
+          isAssigningOptimistic={true} 
+          optimisticAssignee={optimisticUser} 
+        />
+      );
+      
+      expect(screen.getByText('Optimistic User')).toBeInTheDocument();
+    });
+
+    it('shows saving spinner when isAssigningOptimistic is true', () => {
+      const optimisticUser = { displayName: 'Optimistic User', accountId: 'opt1' };
+      render(
+        <IssueDetailPanel 
+          {...defaultProps} 
+          isAssigningOptimistic={true} 
+          optimisticAssignee={optimisticUser} 
+        />
+      );
+      
+      const spinner = document.querySelector('.inline-spinner');
+      expect(spinner).toBeInTheDocument();
+    });
+
+    it('calls handleAssignUser when Assign is clicked', async () => {
+      render(<IssueDetailPanel {...defaultProps} targetAccountId="acc1" assigneeSearch="User One" />);
+      
+      const assignButton = screen.getByLabelText('Assign');
+      await userEvent.click(assignButton);
+      
+      expect(defaultProps.handleAssignUser).toHaveBeenCalled();
+    });
+
+    it('uses assigneeSearch fallback when user not in assignableUsers', async () => {
+      render(<IssueDetailPanel {...defaultProps} targetAccountId="unknown-id" assigneeSearch="Unknown User" />);
+      
+      const assignButton = screen.getByLabelText('Assign');
+      await userEvent.click(assignButton);
+      
+      expect(defaultProps.handleAssignUser).toHaveBeenCalledWith('unknown-id', 'Unknown User');
+    });
+
+    it('shows Clear button to reset assignee selection', () => {
+      render(<IssueDetailPanel {...defaultProps} targetAccountId="acc1" />);
+      
+      const clearButton = screen.getByLabelText('Clear');
+      expect(clearButton).toBeInTheDocument();
+    });
+
+    it('clears assignee selection when Clear is clicked', async () => {
+      render(<IssueDetailPanel {...defaultProps} targetAccountId="acc1" assigneeSearch="User One" />);
+      
+      const clearButton = screen.getByLabelText('Clear');
+      await userEvent.click(clearButton);
+      
+      expect(defaultProps.setTargetAccountId).toHaveBeenCalledWith('');
+      expect(defaultProps.setAssigneeSearch).toHaveBeenCalledWith('');
+    });
+  });
+
+  describe('Labels', () => {
+    it('renders labels', () => {
+      render(<IssueDetailPanel {...defaultProps} />);
+      
+      expect(screen.getByText('bug')).toBeInTheDocument();
+      expect(screen.getByText('urgent')).toBeInTheDocument();
+    });
+
+    it('renders label remove buttons', () => {
+      render(<IssueDetailPanel {...defaultProps} />);
+      
+      const removeButtons = document.querySelectorAll('.label-remove');
+      expect(removeButtons).toHaveLength(2);
+    });
+
+    it('calls handleRemoveLabel when remove is clicked', async () => {
+      render(<IssueDetailPanel {...defaultProps} />);
+      
+      const removeButtons = document.querySelectorAll('.label-remove');
+      await userEvent.click(removeButtons[0]);
+      
+      expect(defaultProps.handleRemoveLabel).toHaveBeenCalledWith('bug');
+    });
+
+    it('renders add label input', () => {
+      render(<IssueDetailPanel {...defaultProps} />);
+      
+      const input = document.querySelector('.add-label-input');
+      expect(input).toBeInTheDocument();
+    });
+
+    it('calls handleAddLabel when Enter is pressed', async () => {
+      render(<IssueDetailPanel {...defaultProps} newLabelText="newlabel" />);
+      
+      const input = document.querySelector('.add-label-input');
+      await userEvent.type(input, '{Enter}');
+      
+      expect(defaultProps.handleAddLabel).toHaveBeenCalled();
+    });
+  });
+
+  describe('Labels', () => {
+    it('renders labels', () => {
+      render(<IssueDetailPanel {...defaultProps} />);
+      
+      expect(screen.getByText('bug')).toBeInTheDocument();
+      expect(screen.getByText('urgent')).toBeInTheDocument();
+    });
+
+    it('renders label remove buttons', () => {
+      render(<IssueDetailPanel {...defaultProps} />);
+      
+      const removeButtons = document.querySelectorAll('.label-remove');
+      expect(removeButtons).toHaveLength(2);
+    });
+
+    it('calls handleRemoveLabel when remove is clicked', async () => {
+      render(<IssueDetailPanel {...defaultProps} />);
+      
+      const removeButtons = document.querySelectorAll('.label-remove');
+      await userEvent.click(removeButtons[0]);
+      
+      expect(defaultProps.handleRemoveLabel).toHaveBeenCalledWith('bug');
+    });
+
+    it('renders add label input', () => {
+      render(<IssueDetailPanel {...defaultProps} />);
+      
+      const input = document.querySelector('.add-label-input');
+      expect(input).toBeInTheDocument();
+    });
+
+    it('calls setNewLabelText when typing in label input', async () => {
+      render(<IssueDetailPanel {...defaultProps} />);
+      
+      const input = document.querySelector('.add-label-input');
+      await userEvent.type(input, 'newlabel');
+      
+      expect(defaultProps.setNewLabelText).toHaveBeenCalled();
+    });
+
+    it('calls handleAddLabel when Enter is pressed', async () => {
+      render(<IssueDetailPanel {...defaultProps} newLabelText="newlabel" />);
+      
+      const input = document.querySelector('.add-label-input');
+      await userEvent.type(input, '{Enter}');
+      
+      expect(defaultProps.handleAddLabel).toHaveBeenCalled();
+    });
+
+    it('shows label suggestions on focus when suggestions exist', () => {
+      render(<IssueDetailPanel {...defaultProps} labelSuggestions={['suggestion1', 'suggestion2']} />);
+      
+      const input = document.querySelector('.add-label-input');
+      fireEvent.focus(input);
+      
+      expect(defaultProps.setShowLabelSuggestions).toHaveBeenCalledWith(true);
+    });
+
+    it('renders label suggestions dropdown when showLabelSuggestions is true', () => {
+      render(<IssueDetailPanel {...defaultProps} showLabelSuggestions={true} />);
+      
+      const dropdown = document.querySelector('.label-suggestions-dropdown');
+      expect(dropdown).toBeInTheDocument();
+      expect(screen.getByText('suggestion1')).toBeInTheDocument();
+      expect(screen.getByText('suggestion2')).toBeInTheDocument();
+    });
+
+    it('calls handleAddLabel with suggestion text when suggestion is clicked', () => {
+      render(<IssueDetailPanel {...defaultProps} showLabelSuggestions={true} />);
+      
+      fireEvent.click(screen.getByText('suggestion1'));
+      
+      expect(defaultProps.handleAddLabel).toHaveBeenCalledWith('suggestion1');
+    });
+
+    it('disables add label input when updating labels', () => {
+      render(<IssueDetailPanel {...defaultProps} isUpdatingLabels={true} />);
+      
+      const input = document.querySelector('.add-label-input');
+      expect(input).toBeDisabled();
+    });
+
+    it('hides label suggestions on blur after timeout', async () => {
+      vi.useFakeTimers();
+      render(<IssueDetailPanel {...defaultProps} showLabelSuggestions={true} />);
+      
+      const input = document.querySelector('.add-label-input');
+      fireEvent.focus(input);
+      fireEvent.blur(input);
+      
+      vi.advanceTimersByTime(200);
+      
+      expect(defaultProps.setShowLabelSuggestions).toHaveBeenCalledWith(false);
+      vi.useRealTimers();
+    });
+  });
+
+  describe('File Upload', () => {
+    it('renders file input', () => {
+      render(<IssueDetailPanel {...defaultProps} />);
+      
+      const fileInput = screen.getByLabelText('Upload attachment');
+      expect(fileInput).toBeInTheDocument();
+    });
+
+    it('disables file input when uploading', () => {
+      render(<IssueDetailPanel {...defaultProps} isUploading={true} />);
+      
+      const fileInput = screen.getByLabelText('Upload attachment');
+      expect(fileInput).toBeDisabled();
+    });
+
+    it('shows upload message', () => {
+      render(<IssueDetailPanel {...defaultProps} uploadMessage="Upload complete" />);
+      
+      expect(screen.getByText('Upload complete')).toBeInTheDocument();
+    });
+
+    it('shows error upload message with error class', () => {
+      render(<IssueDetailPanel {...defaultProps} uploadMessage="Error: Upload failed" />);
+      
+      const message = document.querySelector('.upload-message.error');
+      expect(message).toBeInTheDocument();
+    });
+
+    it('shows success upload message with success class', () => {
+      render(<IssueDetailPanel {...defaultProps} uploadMessage="Upload complete!" />);
+      
+      const message = document.querySelector('.upload-message.success');
+      expect(message).toBeInTheDocument();
+    });
+
+    it('shows uploading indicator when isUploading is true', () => {
+      render(<IssueDetailPanel {...defaultProps} isUploading={true} />);
+      
+      expect(screen.getByText('Uploading...')).toBeInTheDocument();
+    });
+  });
+
+  describe('Empty States', () => {
+    it('renders empty subtasks when no subtasks', () => {
+      const noSubtasksIssue = {
+        ...mockIssueDetail,
+        fields: { ...mockIssueDetail.fields, subtasksMapped: [] },
+      };
+      render(<IssueDetailPanel {...defaultProps} issueDetail={noSubtasksIssue} />);
+      
+      expect(screen.queryByText(/Subtasks/)).not.toBeInTheDocument();
+    });
+
+    it('renders empty linked issues when no linked issues', () => {
+      const noLinksIssue = {
+        ...mockIssueDetail,
+        fields: { ...mockIssueDetail.fields, issuelinksMapped: [] },
+      };
+      render(<IssueDetailPanel {...defaultProps} issueDetail={noLinksIssue} />);
+      
+      expect(screen.queryByText(/Linked Issues/)).not.toBeInTheDocument();
+    });
+
+    it('renders empty attachments message', () => {
+      const noAttachmentsIssue = {
+        ...mockIssueDetail,
+        fields: { ...mockIssueDetail.fields, attachment: [] },
+      };
+      render(<IssueDetailPanel {...defaultProps} issueDetail={noAttachmentsIssue} />);
+      
+      expect(screen.getByText('Attachments (0)')).toBeInTheDocument();
+      expect(screen.getByText('No attachments yet.')).toBeInTheDocument();
+    });
+
+    it('renders empty attachments when attachment is null', () => {
+      const nullAttachmentsIssue = {
+        ...mockIssueDetail,
+        fields: { ...mockIssueDetail.fields, attachment: null },
+      };
+      render(<IssueDetailPanel {...defaultProps} issueDetail={nullAttachmentsIssue} />);
+      
+      expect(screen.getByText('Attachments (0)')).toBeInTheDocument();
+      expect(screen.getByText('No attachments yet.')).toBeInTheDocument();
+    });
+
+    it('renders empty labels when no labels', () => {
+      const noLabelsIssue = {
+        ...mockIssueDetail,
+        fields: { ...mockIssueDetail.fields, labels: [] },
+      };
+      render(<IssueDetailPanel {...defaultProps} issueDetail={noLabelsIssue} />);
+      
+      expect(screen.getByText('Labels')).toBeInTheDocument();
+    });
+  });
+
+  describe('Edge Cases', () => {
+    it('renders issue without severity', () => {
+      const noSeverityIssue = {
+        ...mockIssueDetail,
+        fields: { ...mockIssueDetail.fields, customfield_10260: null },
+      };
+      render(<IssueDetailPanel {...defaultProps} issueDetail={noSeverityIssue} />);
+      
+      expect(screen.getAllByText('—').length).toBeGreaterThan(0);
+    });
+
+    it('renders severity with name when value is not present', () => {
+      const nameOnlySeverity = {
+        ...mockIssueDetail,
+        fields: { ...mockIssueDetail.fields, customfield_10260: { name: 'High' } },
+      };
+      render(<IssueDetailPanel {...defaultProps} issueDetail={nameOnlySeverity} />);
+      
+      expect(screen.getByText('High')).toBeInTheDocument();
+    });
+
+    it('renders status as Unknown when status name is null', () => {
+      const nullStatusIssue = {
+        ...mockIssueDetail,
+        fields: { ...mockIssueDetail.fields, status: null },
+      };
+      render(<IssueDetailPanel {...defaultProps} issueDetail={nullStatusIssue} />);
+      
+      expect(screen.getByText('Unknown')).toBeInTheDocument();
+    });
+
+    it('renders empty labels array when labels is null', () => {
+      const nullLabelsIssue = {
+        ...mockIssueDetail,
+        fields: { ...mockIssueDetail.fields, labels: null },
+      };
+      render(<IssueDetailPanel {...defaultProps} issueDetail={nullLabelsIssue} />);
+      
+      expect(screen.getByText('Labels')).toBeInTheDocument();
+    });
+
+    it('renders issue without reporter', () => {
+      const noReporterIssue = {
+        ...mockIssueDetail,
+        fields: { ...mockIssueDetail.fields, reporter: null },
+      };
+      render(<IssueDetailPanel {...defaultProps} issueDetail={noReporterIssue} />);
+      
+      expect(screen.getAllByText('Unknown').length).toBeGreaterThan(0);
+    });
+
+    it('renders issue without fixVersion', () => {
+      const noVersionIssue = {
+        ...mockIssueDetail,
+        fields: { ...mockIssueDetail.fields, fixVersions: [] },
+      };
+      render(<IssueDetailPanel {...defaultProps} issueDetail={noVersionIssue} />);
+      
+      const select = document.querySelector('.version-select');
+      const selectedOption = select.querySelector('option:checked');
+      expect(selectedOption.value).toBe('');
+    });
+
+    it('renders comment with renderedHtml', () => {
+      render(<IssueDetailPanel {...defaultProps} />);
+      
+      const commentBody = document.querySelector('.comment-body');
+      expect(commentBody).toBeInTheDocument();
+    });
+
+    it('renders comment with bodyText only (no renderedHtml)', () => {
+      const textOnlyComment = [
+        {
+          id: '10002',
+          author: { displayName: 'Jane Doe' },
+          created: '2024-01-02T12:00:00.000Z',
+          bodyText: 'Plain text comment',
+          renderedHtml: null,
+        },
+      ];
+      render(<IssueDetailPanel {...defaultProps} comments={textOnlyComment} />);
+      
+      expect(screen.getByText('Plain text comment')).toBeInTheDocument();
+    });
+
+    it('renders comment with empty body', () => {
+      const emptyComment = [
+        {
+          id: '10002',
+          author: { displayName: 'Jane Doe' },
+          created: '2024-01-02T12:00:00.000Z',
+          bodyText: '',
+          renderedHtml: null,
+        },
+      ];
+      render(<IssueDetailPanel {...defaultProps} comments={emptyComment} />);
+      
+      expect(screen.getByText('Empty comment')).toBeInTheDocument();
+    });
+
+    it('renders comment author with unknown name when no displayName', () => {
+      const unknownAuthorComment = [
+        {
+          id: '10002',
+          author: {},
+          created: '2024-01-02T12:00:00.000Z',
+          bodyText: 'Test comment',
+          renderedHtml: '<p>Test comment</p>',
+        },
+      ];
+      render(<IssueDetailPanel {...defaultProps} comments={unknownAuthorComment} />);
+      
+      expect(screen.getAllByText('Unknown').length).toBeGreaterThan(0);
+    });
+  });
+
+  describe('Navigation', () => {
+    it('subtask clickable with Enter key', async () => {
+      render(<IssueDetailPanel {...defaultProps} />);
+      
+      const subtask = document.querySelector('.subtask-item');
+      subtask.focus();
+      await userEvent.keyboard('{Enter}');
+      
+      expect(defaultProps.onSubtaskClick).toHaveBeenCalledWith('PROJ-124');
+    });
+
+    it('linked issue clickable with Enter key', async () => {
+      render(<IssueDetailPanel {...defaultProps} />);
+      
+      const linkedIssue = document.querySelector('.linked-item');
+      linkedIssue.focus();
+      await userEvent.keyboard('{Enter}');
+      
+      expect(defaultProps.onSubtaskClick).toHaveBeenCalledWith('PROJ-125');
+    });
+
+    it('subtask clickable by mouse click', async () => {
+      render(<IssueDetailPanel {...defaultProps} />);
+      
+      const subtask = document.querySelector('.subtask-item');
+      await userEvent.click(subtask);
+      
+      expect(defaultProps.onSubtaskClick).toHaveBeenCalledWith('PROJ-124');
+    });
+
+    it('linked issue clickable by mouse click', async () => {
+      render(<IssueDetailPanel {...defaultProps} />);
+      
+      const linkedIssue = document.querySelector('.linked-item');
+      await userEvent.click(linkedIssue);
+      
+      expect(defaultProps.onSubtaskClick).toHaveBeenCalledWith('PROJ-125');
+    });
+
+    it('sets window.location.hash in standalone mode when subtask clicked', async () => {
+      render(<IssueDetailPanel {...defaultProps} mode="standalone" />);
+      
+      const subtask = document.querySelector('.subtask-item');
+      await userEvent.click(subtask);
+      
+      expect(window.location.hash).toBe('#/view/PROJ-124');
+    });
+
+    it('sets window.location.hash in standalone mode when linked issue clicked', async () => {
+      render(<IssueDetailPanel {...defaultProps} mode="standalone" />);
+      
+      const linkedIssue = document.querySelector('.linked-item');
+      await userEvent.click(linkedIssue);
+      
+      expect(window.location.hash).toBe('#/view/PROJ-125');
+    });
+
+    it('does not call onSubtaskClick in standalone mode when subtask clicked', async () => {
+      render(<IssueDetailPanel {...defaultProps} mode="standalone" />);
+      
+      const subtask = document.querySelector('.subtask-item');
+      await userEvent.click(subtask);
+      
+      expect(defaultProps.onSubtaskClick).not.toHaveBeenCalled();
+    });
+
+    it('does nothing in drawer mode when onSubtaskClick is not provided', async () => {
+      const { onSubtaskClick, ...rest } = defaultProps;
+      render(<IssueDetailPanel {...rest} mode="drawer" />);
+      
+      const subtask = document.querySelector('.subtask-item');
+      await userEvent.click(subtask);
+      
+      expect(onSubtaskClick).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('Version Update', () => {
+    it('renders version select', () => {
+      render(<IssueDetailPanel {...defaultProps} />);
+      
+      const select = document.querySelector('.version-select');
+      expect(select).toBeInTheDocument();
+    });
+
+    it('calls handleUpdateVersion when version changes', async () => {
+      render(<IssueDetailPanel {...defaultProps} />);
+      
+      const select = document.querySelector('.version-select');
+      await userEvent.selectOptions(select, '10002');
+      
+      expect(defaultProps.handleUpdateVersion).toHaveBeenCalledWith('10002');
+    });
+
+    it('shows spinner when updating versions', () => {
+      const issueWithVersion = {
+        ...mockIssueDetail,
+        fields: {
+          ...mockIssueDetail.fields,
+          fixVersions: [{ id: '10001', name: 'v1.0' }],
+        },
+      };
+      render(<IssueDetailPanel {...defaultProps} issueDetail={issueWithVersion} isUpdatingVersions={true} />);
+      
+      const spinner = document.querySelector('.spinner');
+      expect(spinner).toBeInTheDocument();
+    });
+  });
+});