jira-pat 1.0.0

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

@@ -0,0 +1,196 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import React from 'react';
+import ToastContainer from '../../components/ToastContainer.jsx';
+
+describe('ToastContainer', () => {
+  const defaultProps = {
+    toasts: [],
+    onRemove: vi.fn(),
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe('Rendering', () => {
+    it('renders toast container', () => {
+      render(<ToastContainer {...defaultProps} />);
+      
+      const container = document.querySelector('.toast-container');
+      expect(container).toBeInTheDocument();
+      expect(container).toHaveAttribute('aria-live', 'polite');
+    });
+
+    it('renders nothing when toasts array is empty', () => {
+      render(<ToastContainer {...defaultProps} />);
+      
+      expect(screen.queryByRole('alert')).not.toBeInTheDocument();
+    });
+
+    it('renders success toast with correct icon', () => {
+      const toasts = [{ id: 1, message: 'Success message', type: 'success' }];
+      render(<ToastContainer {...defaultProps} toasts={toasts} />);
+      
+      expect(screen.getByText('Success message')).toBeInTheDocument();
+      const toast = document.querySelector('.toast.success');
+      expect(toast).toBeInTheDocument();
+    });
+
+    it('renders error toast with correct icon', () => {
+      const toasts = [{ id: 1, message: 'Error message', type: 'error' }];
+      render(<ToastContainer {...defaultProps} toasts={toasts} />);
+      
+      expect(screen.getByText('Error message')).toBeInTheDocument();
+    });
+
+    it('renders info toast with correct icon', () => {
+      const toasts = [{ id: 1, message: 'Info message', type: 'info' }];
+      render(<ToastContainer {...defaultProps} toasts={toasts} />);
+      
+      expect(screen.getByText('Info message')).toBeInTheDocument();
+    });
+
+    it('renders multiple toasts', () => {
+      const toasts = [
+        { id: 1, message: 'First toast', type: 'success' },
+        { id: 2, message: 'Second toast', type: 'error' },
+        { id: 3, message: 'Third toast', type: 'info' },
+      ];
+      render(<ToastContainer {...defaultProps} toasts={toasts} />);
+      
+      expect(screen.getByText('First toast')).toBeInTheDocument();
+      expect(screen.getByText('Second toast')).toBeInTheDocument();
+      expect(screen.getByText('Third toast')).toBeInTheDocument();
+    });
+
+    it('renders dismiss button for each toast', () => {
+      const toasts = [
+        { id: 1, message: 'Toast 1', type: 'success' },
+        { id: 2, message: 'Toast 2', type: 'error' },
+      ];
+      render(<ToastContainer {...defaultProps} toasts={toasts} />);
+      
+      const dismissButtons = screen.getAllByLabelText('Dismiss');
+      expect(dismissButtons).toHaveLength(2);
+    });
+  });
+
+  describe('Interactions', () => {
+    it('calls onRemove with toast id when dismiss button is clicked', async () => {
+      const onRemove = vi.fn();
+      const toasts = [{ id: 123, message: 'Test toast', type: 'success' }];
+      render(<ToastContainer toasts={toasts} onRemove={onRemove} />);
+      
+      const dismissButton = screen.getByLabelText('Dismiss');
+      await userEvent.click(dismissButton);
+      
+      expect(onRemove).toHaveBeenCalledWith(123);
+    });
+
+    it('calls onRemove with correct id for each toast when dismissed', async () => {
+      const onRemove = vi.fn();
+      const toasts = [
+        { id: 1, message: 'Toast 1', type: 'success' },
+        { id: 2, message: 'Toast 2', type: 'error' },
+        { id: 3, message: 'Toast 3', type: 'info' },
+      ];
+      render(<ToastContainer toasts={toasts} onRemove={onRemove} />);
+      
+      const dismissButtons = screen.getAllByLabelText('Dismiss');
+      
+      await userEvent.click(dismissButtons[0]);
+      expect(onRemove).toHaveBeenCalledWith(1);
+      
+      await userEvent.click(dismissButtons[1]);
+      expect(onRemove).toHaveBeenCalledWith(2);
+      
+      await userEvent.click(dismissButtons[2]);
+      expect(onRemove).toHaveBeenCalledWith(3);
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('container has aria-live polite attribute', () => {
+      render(<ToastContainer {...defaultProps} />);
+      
+      const container = document.querySelector('.toast-container');
+      expect(container).toHaveAttribute('aria-live', 'polite');
+    });
+
+    it('each toast has role alert', () => {
+      const toasts = [{ id: 1, message: 'Test alert', type: 'success' }];
+      render(<ToastContainer {...defaultProps} toasts={toasts} />);
+      
+      const toast = document.querySelector('.toast');
+      expect(toast).toHaveAttribute('role', 'alert');
+    });
+
+    it('dismiss buttons have aria-label', () => {
+      const toasts = [{ id: 1, message: 'Test toast', type: 'success' }];
+      render(<ToastContainer {...defaultProps} toasts={toasts} />);
+      
+      expect(screen.getByLabelText('Dismiss')).toBeInTheDocument();
+    });
+  });
+
+  describe('Toast Types', () => {
+    it('renders success toast with CheckCircle icon', () => {
+      const toasts = [{ id: 1, message: 'Success', type: 'success' }];
+      render(<ToastContainer {...defaultProps} toasts={toasts} />);
+      
+      const toast = screen.getByRole('alert');
+      expect(toast).toHaveClass('success');
+    });
+
+    it('renders error toast with AlertCircle icon', () => {
+      const toasts = [{ id: 1, message: 'Error', type: 'error' }];
+      render(<ToastContainer {...defaultProps} toasts={toasts} />);
+      
+      const toast = screen.getByRole('alert');
+      expect(toast).toHaveClass('error');
+    });
+
+    it('renders info toast with Info icon', () => {
+      const toasts = [{ id: 1, message: 'Info', type: 'info' }];
+      render(<ToastContainer {...defaultProps} toasts={toasts} />);
+      
+      const toast = screen.getByRole('alert');
+      expect(toast).toHaveClass('info');
+    });
+
+    it('handles unknown toast type gracefully', () => {
+      const toasts = [{ id: 1, message: 'Unknown', type: 'unknown' }];
+      render(<ToastContainer {...defaultProps} toasts={toasts} />);
+      
+      const toast = screen.getByRole('alert');
+      expect(toast).toHaveClass('unknown');
+    });
+  });
+
+  describe('Edge Cases', () => {
+    it('handles empty message gracefully', () => {
+      const toasts = [{ id: 1, message: '', type: 'info' }];
+      render(<ToastContainer {...defaultProps} toasts={toasts} />);
+      
+      expect(screen.getByRole('alert')).toBeInTheDocument();
+    });
+
+    it('handles long message text', () => {
+      const longMessage = 'This is a very long toast message that should still render correctly without breaking the layout';
+      const toasts = [{ id: 1, message: longMessage, type: 'success' }];
+      render(<ToastContainer {...defaultProps} toasts={toasts} />);
+      
+      expect(screen.getByText(longMessage)).toBeInTheDocument();
+    });
+
+    it('handles special characters in message', () => {
+      const specialMessage = 'Test <script>alert("xss")</script> & more';
+      const toasts = [{ id: 1, message: specialMessage, type: 'info' }];
+      render(<ToastContainer {...defaultProps} toasts={toasts} />);
+      
+      expect(screen.getByText(specialMessage)).toBeInTheDocument();
+    });
+  });
+});

package/frontend/src/__tests__/hooks/useFocusTrap.test.js

@@ -0,0 +1,197 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { renderHook, act } from '@testing-library/react';
+import { useFocusTrap } from '../../hooks/useFocusTrap';
+
+describe('useFocusTrap', () => {
+  let container;
+  let button1;
+  let button2;
+  let input;
+  let previousActiveElement;
+
+  beforeEach(() => {
+    previousActiveElement = document.createElement('button');
+    previousActiveElement.textContent = 'Previous';
+    document.body.appendChild(previousActiveElement);
+    previousActiveElement.focus();
+
+    container = document.createElement('div');
+    button1 = document.createElement('button');
+    button1.textContent = 'First Button';
+    button1.tabIndex = 0;
+    
+    button2 = document.createElement('button');
+    button2.textContent = 'Second Button';
+    button2.tabIndex = 0;
+    
+    input = document.createElement('input');
+    input.type = 'text';
+    input.tabIndex = 0;
+
+    container.appendChild(button1);
+    container.appendChild(input);
+    container.appendChild(button2);
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    if (container && container.parentNode) {
+      container.parentNode.removeChild(container);
+    }
+    if (previousActiveElement && previousActiveElement.parentNode) {
+      previousActiveElement.parentNode.removeChild(previousActiveElement);
+    }
+    vi.restoreAllMocks();
+  });
+
+  it('should not trap focus when isActive is false', () => {
+    const ref = { current: container };
+    
+    renderHook(() => useFocusTrap(ref, false));
+    
+    expect(document.activeElement).not.toBe(button1);
+  });
+
+  it('should trap focus when isActive becomes true', () => {
+    const ref = { current: container };
+    
+    const { rerender } = renderHook(
+      ({ active }) => useFocusTrap({ current: container }, active),
+      { initialProps: { active: false } }
+    );
+
+    rerender({ active: true });
+
+    expect(document.activeElement).toBe(button1);
+  });
+
+  it('should focus first focusable element when activated', () => {
+    const ref = { current: container };
+    
+    renderHook(() => useFocusTrap(ref, true));
+
+    expect(document.activeElement).toBe(button1);
+  });
+
+  it('should return focus to previous element on cleanup', () => {
+    const ref = { current: container };
+    
+    const { unmount } = renderHook(() => useFocusTrap(ref, true));
+    
+    expect(document.activeElement).toBe(button1);
+
+    unmount();
+
+    expect(document.activeElement).toBe(previousActiveElement);
+  });
+
+  it('should cycle focus forward from last to first element', () => {
+    const simpleContainer = document.createElement('div');
+    const btnA = document.createElement('button');
+    btnA.textContent = 'A';
+    const btnB = document.createElement('button');
+    btnB.textContent = 'B';
+    simpleContainer.appendChild(btnA);
+    simpleContainer.appendChild(btnB);
+    document.body.appendChild(simpleContainer);
+
+    const ref = { current: simpleContainer };
+    renderHook(() => useFocusTrap(ref, true));
+
+    btnB.focus();
+    expect(document.activeElement).toBe(btnB);
+
+    const tabEvent = new KeyboardEvent('keydown', {
+      key: 'Tab',
+      bubbles: true,
+      cancelable: true
+    });
+    Object.defineProperty(tabEvent, 'shiftKey', { value: false });
+    simpleContainer.dispatchEvent(tabEvent);
+
+    expect(document.activeElement).toBe(btnA);
+    simpleContainer.parentNode.removeChild(simpleContainer);
+  });
+
+  it('should cycle focus backward from first to last element', () => {
+    const simpleContainer = document.createElement('div');
+    const btnA = document.createElement('button');
+    btnA.textContent = 'A';
+    const btnB = document.createElement('button');
+    btnB.textContent = 'B';
+    simpleContainer.appendChild(btnA);
+    simpleContainer.appendChild(btnB);
+    document.body.appendChild(simpleContainer);
+
+    const ref = { current: simpleContainer };
+    renderHook(() => useFocusTrap(ref, true));
+
+    btnA.focus();
+    expect(document.activeElement).toBe(btnA);
+
+    const shiftTabEvent = new KeyboardEvent('keydown', {
+      key: 'Tab',
+      bubbles: true,
+      cancelable: true
+    });
+    Object.defineProperty(shiftTabEvent, 'shiftKey', { value: true });
+    simpleContainer.dispatchEvent(shiftTabEvent);
+
+    expect(document.activeElement).toBe(btnB);
+    simpleContainer.parentNode.removeChild(simpleContainer);
+  });
+
+  it('should not trap non-Tab keys', () => {
+    const ref = { current: container };
+    
+    renderHook(() => useFocusTrap(ref, true));
+
+    button1.focus();
+    expect(document.activeElement).toBe(button1);
+
+    const enterEvent = new KeyboardEvent('keydown', {
+      key: 'Enter',
+      bubbles: true
+    });
+    container.dispatchEvent(enterEvent);
+
+    expect(document.activeElement).toBe(button1);
+  });
+
+  it('should handle empty container gracefully', () => {
+    const emptyContainer = document.createElement('div');
+    document.body.appendChild(emptyContainer);
+    
+    const { unmount } = renderHook(() => useFocusTrap({ current: emptyContainer }, true));
+
+    expect(document.activeElement).not.toBe(emptyContainer);
+
+    unmount();
+    emptyContainer.parentNode.removeChild(emptyContainer);
+  });
+
+  it('should ignore Tab key when no focusable elements exist', () => {
+    const emptyContainer = document.createElement('div');
+    document.body.appendChild(emptyContainer);
+    
+    renderHook(() => useFocusTrap({ current: emptyContainer }, true));
+
+    const tabEvent = new KeyboardEvent('keydown', {
+      key: 'Tab',
+      bubbles: true,
+      cancelable: true
+    });
+    emptyContainer.dispatchEvent(tabEvent);
+
+    expect(tabEvent.defaultPrevented).toBe(false);
+    emptyContainer.parentNode.removeChild(emptyContainer);
+  });
+
+  it('should not include elements with tabindex="-1" in trap', () => {
+    const ref = { current: container };
+    
+    renderHook(() => useFocusTrap(ref, true));
+
+    expect(document.activeElement).toBe(button1);
+  });
+});