@fpkit/acss 0.5.12 → 0.6.0

package/src/components/alert/alert.test.tsx

@@ -0,0 +1,762 @@
+import React from 'react';
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { render, screen, waitFor, act } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import Alert from './alert';
+
+describe('Alert', () => {
+  describe('Rendering', () => {
+    it('should render alert with title and message', () => {
+      render(
+        <Alert open={true} title="Test Title" severity="info">
+          Test message
+        </Alert>
+      );
+
+      expect(screen.getByRole('alert')).toBeInTheDocument();
+      expect(screen.getByText('Test Title')).toBeInTheDocument();
+      expect(screen.getByText('Test message')).toBeInTheDocument();
+    });
+
+    it('should not render when open is false', () => {
+      render(
+        <Alert open={false} severity="info">
+          Test message
+        </Alert>
+      );
+
+      expect(screen.queryByRole('alert')).not.toBeInTheDocument();
+    });
+
+    it('should render all severity levels correctly', () => {
+      const severities = ['default', 'info', 'success', 'warning', 'error'] as const;
+
+      severities.forEach((severity) => {
+        const { unmount } = render(
+          <Alert open={true} severity={severity}>
+            {severity} message
+          </Alert>
+        );
+
+        const alert = screen.getByRole('alert');
+        expect(alert).toHaveAttribute('data-alert', severity);
+        unmount();
+      });
+    });
+
+    it('should hide icon when hideIcon is true', () => {
+      const { container } = render(
+        <Alert open={true} severity="info" hideIcon={true}>
+          Test message
+        </Alert>
+      );
+
+      expect(container.querySelector('.alert-icon')).not.toBeInTheDocument();
+    });
+
+    it('should show icon by default', () => {
+      const { container } = render(
+        <Alert open={true} severity="info">
+          Test message
+        </Alert>
+      );
+
+      expect(container.querySelector('.alert-icon')).toBeInTheDocument();
+    });
+
+    it('should render with custom icon size', () => {
+      const { container } = render(
+        <Alert open={true} severity="info" iconSize={32}>
+          Test message
+        </Alert>
+      );
+
+      const icon = container.querySelector('.alert-icon svg');
+      expect(icon).toBeInTheDocument();
+      // Note: Actual size verification would require checking the SVG element's attributes
+      // which depends on the Icon component implementation
+    });
+
+    it('should use default icon size of 24px when iconSize not specified', () => {
+      const { container } = render(
+        <Alert open={true} severity="info">
+          Test message
+        </Alert>
+      );
+
+      const iconContainer = container.querySelector('.alert-icon');
+      expect(iconContainer).toBeInTheDocument();
+    });
+
+    it('should render actions when provided', () => {
+      render(
+        <Alert
+          open={true}
+          severity="info"
+          actions={
+            <>
+              <button>Undo</button>
+              <button>Dismiss</button>
+            </>
+          }
+        >
+          Test message
+        </Alert>
+      );
+
+      expect(screen.getByText('Undo')).toBeInTheDocument();
+      expect(screen.getByText('Dismiss')).toBeInTheDocument();
+    });
+
+    it('should render dismiss button when dismissible is true', () => {
+      render(
+        <Alert open={true} severity="info" dismissible={true}>
+          Test message
+        </Alert>
+      );
+
+      expect(screen.getByRole('button', { name: /close alert/i })).toBeInTheDocument();
+    });
+
+    it('should apply correct variant attribute', () => {
+      const variants = ['outlined', 'filled', 'soft'] as const;
+
+      variants.forEach((variant) => {
+        const { unmount } = render(
+          <Alert open={true} severity="info" variant={variant}>
+            Test message
+          </Alert>
+        );
+
+        const alert = screen.getByRole('alert');
+        expect(alert).toHaveAttribute('data-variant', variant);
+        unmount();
+      });
+    });
+  });
+
+  describe('Interactions', () => {
+    it('should call onDismiss when dismiss button is clicked', async () => {
+      const user = userEvent.setup();
+      const onDismiss = vi.fn();
+
+      render(
+        <Alert open={true} severity="info" dismissible={true} onDismiss={onDismiss}>
+          Test message
+        </Alert>
+      );
+
+      const dismissButton = screen.getByRole('button', { name: /close alert/i });
+      await user.click(dismissButton);
+
+      // Wait for animation timeout (300ms)
+      await waitFor(() => {
+        expect(onDismiss).toHaveBeenCalledTimes(1);
+      }, { timeout: 500 });
+    });
+
+    it('should dismiss alert when ESC key is pressed', async () => {
+      const user = userEvent.setup();
+      const onDismiss = vi.fn();
+
+      render(
+        <Alert open={true} severity="info" dismissible={true} onDismiss={onDismiss}>
+          Test message
+        </Alert>
+      );
+
+      await user.keyboard('{Escape}');
+
+      // Wait for animation timeout
+      await waitFor(() => {
+        expect(onDismiss).toHaveBeenCalledTimes(1);
+      }, { timeout: 500 });
+    });
+
+    it('should not dismiss with ESC key when not dismissible', async () => {
+      const user = userEvent.setup();
+      const onDismiss = vi.fn();
+
+      render(
+        <Alert open={true} severity="info" dismissible={false} onDismiss={onDismiss}>
+          Test message
+        </Alert>
+      );
+
+      await user.keyboard('{Escape}');
+
+      // Wait a bit to ensure it doesn't dismiss
+      await new Promise(resolve => setTimeout(resolve, 100));
+      expect(onDismiss).not.toHaveBeenCalled();
+    });
+
+    it('should set data-visible to false when dismissing', async () => {
+      const user = userEvent.setup();
+
+      render(
+        <Alert open={true} severity="info" dismissible={true}>
+          Test message
+        </Alert>
+      );
+
+      const alert = screen.getByRole('alert');
+      expect(alert).toHaveAttribute('data-visible', 'true');
+
+      const dismissButton = screen.getByRole('button', { name: /close alert/i });
+      await user.click(dismissButton);
+
+      // Check that data-visible changes immediately
+      expect(alert).toHaveAttribute('data-visible', 'false');
+    });
+  });
+
+  describe('Auto-dismiss', () => {
+    beforeEach(() => {
+      vi.useFakeTimers();
+    });
+
+    afterEach(() => {
+      vi.useRealTimers();
+      vi.restoreAllMocks();
+    });
+
+    it('should auto-dismiss after specified duration', async () => {
+      const onDismiss = vi.fn();
+
+      render(
+        <Alert
+          open={true}
+          severity="success"
+          dismissible={true}
+          autoHideDuration={3000}
+          onDismiss={onDismiss}
+        >
+          Auto-dismiss message
+        </Alert>
+      );
+
+      // Fast-forward time by 3000ms (auto-hide duration)
+      act(() => {
+        vi.advanceTimersByTime(3000);
+      });
+
+      // Fast-forward by 300ms for animation
+      await act(async () => {
+        vi.advanceTimersByTime(300);
+      });
+
+      expect(onDismiss).toHaveBeenCalledTimes(1);
+    });
+
+    it('should not auto-dismiss when autoHideDuration is 0', async () => {
+      const onDismiss = vi.fn();
+
+      render(
+        <Alert
+          open={true}
+          severity="success"
+          autoHideDuration={0}
+          onDismiss={onDismiss}
+        >
+          No auto-dismiss
+        </Alert>
+      );
+
+      vi.advanceTimersByTime(5000);
+
+      expect(onDismiss).not.toHaveBeenCalled();
+    });
+
+    it('should not auto-dismiss when autoHideDuration is undefined', async () => {
+      const onDismiss = vi.fn();
+
+      render(
+        <Alert
+          open={true}
+          severity="success"
+          onDismiss={onDismiss}
+        >
+          No auto-dismiss
+        </Alert>
+      );
+
+      vi.advanceTimersByTime(5000);
+
+      expect(onDismiss).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('should have correct aria-live for error severity', () => {
+      render(
+        <Alert open={true} severity="error">
+          Error message
+        </Alert>
+      );
+
+      const alert = screen.getByRole('alert');
+      expect(alert).toHaveAttribute('aria-live', 'assertive');
+    });
+
+    it('should have correct aria-live for non-error severities', () => {
+      const severities = ['default', 'info', 'success', 'warning'] as const;
+
+      severities.forEach((severity) => {
+        const { unmount } = render(
+          <Alert open={true} severity={severity}>
+            Test message
+          </Alert>
+        );
+
+        const alert = screen.getByRole('alert');
+        expect(alert).toHaveAttribute('aria-live', 'polite');
+        unmount();
+      });
+    });
+
+    it('should have aria-atomic attribute', () => {
+      render(
+        <Alert open={true} severity="info">
+          Test message
+        </Alert>
+      );
+
+      const alert = screen.getByRole('alert');
+      expect(alert).toHaveAttribute('aria-atomic', 'true');
+    });
+
+    it('should have role="alert"', () => {
+      render(
+        <Alert open={true} severity="info">
+          Test message
+        </Alert>
+      );
+
+      expect(screen.getByRole('alert')).toBeInTheDocument();
+    });
+
+    it('should focus alert when autoFocus is true', () => {
+      render(
+        <Alert open={true} severity="error" autoFocus={true}>
+          Critical alert
+        </Alert>
+      );
+
+      const alert = screen.getByRole('alert');
+      expect(alert).toHaveFocus();
+    });
+
+    it('should not focus alert when autoFocus is false', () => {
+      render(
+        <Alert open={true} severity="info" autoFocus={false}>
+          Normal alert
+        </Alert>
+      );
+
+      const alert = screen.getByRole('alert');
+      expect(alert).not.toHaveFocus();
+    });
+
+    it('should have tabIndex=-1 when autoFocus is true', () => {
+      render(
+        <Alert open={true} severity="error" autoFocus={true}>
+          Critical alert
+        </Alert>
+      );
+
+      const alert = screen.getByRole('alert');
+      expect(alert).toHaveAttribute('tabIndex', '-1');
+    });
+  });
+
+  describe('Animation State', () => {
+    it('should start with data-visible=true when open=true', () => {
+      render(
+        <Alert open={true} severity="info">
+          Test message
+        </Alert>
+      );
+
+      const alert = screen.getByRole('alert');
+      expect(alert).toHaveAttribute('data-visible', 'true');
+    });
+
+    it('should transition visibility states when dismissing', async () => {
+      const user = userEvent.setup();
+
+      render(
+        <Alert open={true} severity="info" dismissible={true}>
+          Test message
+        </Alert>
+      );
+
+      const alert = screen.getByRole('alert');
+      expect(alert).toHaveAttribute('data-visible', 'true');
+
+      const dismissButton = screen.getByRole('button', { name: /close alert/i });
+      await user.click(dismissButton);
+
+      // After click, visibility should be false but component still rendered
+      expect(alert).toHaveAttribute('data-visible', 'false');
+      expect(screen.getByRole('alert')).toBeInTheDocument();
+    });
+  });
+
+  describe('Phase 4: WCAG 2.1 Accessibility', () => {
+    describe('Severity Text for Screen Readers', () => {
+      it('should include visually hidden severity text for info', () => {
+        const { container } = render(
+          <Alert open={true} severity="info">
+            Test message
+          </Alert>
+        );
+
+        const srOnlyText = container.querySelector('.sr-only');
+        expect(srOnlyText).toBeInTheDocument();
+        expect(srOnlyText).toHaveTextContent('Information:');
+      });
+
+      it('should include visually hidden severity text for success', () => {
+        const { container } = render(
+          <Alert open={true} severity="success">
+            Test message
+          </Alert>
+        );
+
+        const srOnlyText = container.querySelector('.sr-only');
+        expect(srOnlyText).toHaveTextContent('Success:');
+      });
+
+      it('should include visually hidden severity text for warning', () => {
+        const { container } = render(
+          <Alert open={true} severity="warning">
+            Test message
+          </Alert>
+        );
+
+        const srOnlyText = container.querySelector('.sr-only');
+        expect(srOnlyText).toHaveTextContent('Warning:');
+      });
+
+      it('should include visually hidden severity text for error', () => {
+        const { container } = render(
+          <Alert open={true} severity="error">
+            Test message
+          </Alert>
+        );
+
+        const srOnlyText = container.querySelector('.sr-only');
+        expect(srOnlyText).toHaveTextContent('Error:');
+      });
+
+      it('should not include severity text for default severity', () => {
+        const { container } = render(
+          <Alert open={true} severity="default">
+            Test message
+          </Alert>
+        );
+
+        const srOnlyText = container.querySelector('.sr-only');
+        expect(srOnlyText).not.toBeInTheDocument();
+      });
+    });
+
+    describe('Configurable Heading Level', () => {
+      it('should render h2 when titleLevel is 2', () => {
+        const { container } = render(
+          <Alert open={true} severity="info" title="Test Title" titleLevel={2}>
+            Test message
+          </Alert>
+        );
+
+        const heading = container.querySelector('h2.alert-title');
+        expect(heading).toBeInTheDocument();
+        expect(heading).toHaveTextContent('Test Title');
+      });
+
+      it('should render h3 when titleLevel is 3', () => {
+        const { container } = render(
+          <Alert open={true} severity="info" title="Test Title" titleLevel={3}>
+            Test message
+          </Alert>
+        );
+
+        const heading = container.querySelector('h3.alert-title');
+        expect(heading).toBeInTheDocument();
+        expect(heading).toHaveTextContent('Test Title');
+      });
+
+      it('should render h4 when titleLevel is 4', () => {
+        const { container } = render(
+          <Alert open={true} severity="info" title="Test Title" titleLevel={4}>
+            Test message
+          </Alert>
+        );
+
+        const heading = container.querySelector('h4.alert-title');
+        expect(heading).toBeInTheDocument();
+      });
+
+      it('should render h5 when titleLevel is 5', () => {
+        const { container } = render(
+          <Alert open={true} severity="info" title="Test Title" titleLevel={5}>
+            Test message
+          </Alert>
+        );
+
+        const heading = container.querySelector('h5.alert-title');
+        expect(heading).toBeInTheDocument();
+      });
+
+      it('should render h6 when titleLevel is 6', () => {
+        const { container } = render(
+          <Alert open={true} severity="info" title="Test Title" titleLevel={6}>
+            Test message
+          </Alert>
+        );
+
+        const heading = container.querySelector('h6.alert-title');
+        expect(heading).toBeInTheDocument();
+      });
+
+      it('should render default heading element when titleLevel is undefined', () => {
+        const { container } = render(
+          <Alert open={true} severity="info" title="Test Title">
+            Test message
+          </Alert>
+        );
+
+        // The UI component wraps the title, check that title is rendered
+        const titleElement = container.querySelector('.alert-title');
+        expect(titleElement).toBeInTheDocument();
+        expect(titleElement).toHaveTextContent('Test Title');
+        // The element should be rendered (exact tag depends on UI component implementation)
+      });
+
+      it('should not render title element when title prop is not provided', () => {
+        const { container } = render(
+          <Alert open={true} severity="info">
+            Test message
+          </Alert>
+        );
+
+        expect(container.querySelector('.alert-title')).not.toBeInTheDocument();
+      });
+
+      it('should apply alert-title class to all heading levels', () => {
+        const levels = [2, 3, 4, 5, 6] as const;
+
+        levels.forEach((level) => {
+          const { container, unmount } = render(
+            <Alert open={true} severity="info" title="Test" titleLevel={level}>
+              Message
+            </Alert>
+          );
+
+          const heading = container.querySelector(`h${level}`);
+          expect(heading).toHaveClass('alert-title');
+          unmount();
+        });
+      });
+    });
+
+    describe('Pause on Hover/Focus', () => {
+      it('should have mouse enter and leave handlers when pauseOnHover is true', () => {
+        render(
+          <Alert
+            open={true}
+            severity="info"
+            autoHideDuration={3000}
+            pauseOnHover={true}
+          >
+            Test message
+          </Alert>
+        );
+
+        const alert = screen.getByRole('alert');
+
+        // Verify the handlers are attached by checking we can dispatch events without errors
+        expect(() => {
+          alert.dispatchEvent(new MouseEvent('mouseenter', { bubbles: true }));
+          alert.dispatchEvent(new MouseEvent('mouseleave', { bubbles: true }));
+        }).not.toThrow();
+      });
+
+      it('should have focus and blur handlers when pauseOnHover is true', () => {
+        render(
+          <Alert
+            open={true}
+            severity="info"
+            autoHideDuration={3000}
+            autoFocus={true}
+            pauseOnHover={true}
+          >
+            Test message
+          </Alert>
+        );
+
+        const alert = screen.getByRole('alert');
+
+        // Verify the handlers are attached
+        expect(() => {
+          alert.dispatchEvent(new FocusEvent('focus', { bubbles: true }));
+          alert.dispatchEvent(new FocusEvent('blur', { bubbles: true }));
+        }).not.toThrow();
+      });
+
+      it('should accept pauseOnHover prop with default true', () => {
+        const { rerender } = render(
+          <Alert open={true} severity="info" autoHideDuration={3000}>
+            Test message
+          </Alert>
+        );
+
+        // Just verify component renders without issues
+        expect(screen.getByRole('alert')).toBeInTheDocument();
+
+        rerender(
+          <Alert open={true} severity="info" autoHideDuration={3000} pauseOnHover={false}>
+            Test message
+          </Alert>
+        );
+
+        expect(screen.getByRole('alert')).toBeInTheDocument();
+      });
+    });
+
+    describe('Touch Target Size', () => {
+      it('should apply alert-dismiss class to dismiss button', () => {
+        const { container } = render(
+          <Alert open={true} severity="info" dismissible={true}>
+            Test message
+          </Alert>
+        );
+
+        const dismissButton = container.querySelector('.alert-dismiss');
+        expect(dismissButton).toBeInTheDocument();
+      });
+    });
+
+    describe('Focus Indicators', () => {
+      it('should be focusable when autoFocus is true', () => {
+        render(
+          <Alert open={true} severity="info" autoFocus={true}>
+            Test message
+          </Alert>
+        );
+
+        const alert = screen.getByRole('alert');
+        expect(alert).toHaveAttribute('tabIndex', '-1');
+      });
+
+      it('should not have tabIndex when autoFocus is false', () => {
+        render(
+          <Alert open={true} severity="info" autoFocus={false}>
+            Test message
+          </Alert>
+        );
+
+        const alert = screen.getByRole('alert');
+        expect(alert).not.toHaveAttribute('tabIndex');
+      });
+    });
+
+    describe('Content Type', () => {
+      it('should wrap children in paragraph tag when contentType is "text" (default)', () => {
+        const { container } = render(
+          <Alert open={true} severity="info">
+            Simple text content
+          </Alert>
+        );
+
+        const paragraph = container.querySelector('.alert-message p');
+        expect(paragraph).toBeInTheDocument();
+        expect(paragraph).toHaveTextContent('Simple text content');
+      });
+
+      it('should wrap children in paragraph tag when contentType is explicitly set to "text"', () => {
+        const { container } = render(
+          <Alert open={true} severity="warning" contentType="text">
+            Explicit text content
+          </Alert>
+        );
+
+        const paragraph = container.querySelector('.alert-message p');
+        expect(paragraph).toBeInTheDocument();
+        expect(paragraph).toHaveTextContent('Explicit text content');
+      });
+
+      it('should render children directly without paragraph wrapper when contentType is "node"', () => {
+        const { container } = render(
+          <Alert open={true} severity="error" contentType="node">
+            <div className="custom-content">Custom layout</div>
+          </Alert>
+        );
+
+        // Should not have a paragraph wrapper
+        const paragraph = container.querySelector('.alert-message > p');
+        expect(paragraph).not.toBeInTheDocument();
+
+        // Should have direct custom content
+        const customContent = container.querySelector('.alert-message .custom-content');
+        expect(customContent).toBeInTheDocument();
+        expect(customContent).toHaveTextContent('Custom layout');
+      });
+
+      it('should render complex content with lists when contentType is "node"', () => {
+        const { container } = render(
+          <Alert open={true} severity="warning" contentType="node">
+            <ul>
+              <li>First item</li>
+              <li>Second item</li>
+              <li>Third item</li>
+            </ul>
+          </Alert>
+        );
+
+        const list = container.querySelector('.alert-message ul');
+        expect(list).toBeInTheDocument();
+
+        const listItems = container.querySelectorAll('.alert-message li');
+        expect(listItems).toHaveLength(3);
+        expect(listItems[0]).toHaveTextContent('First item');
+        expect(listItems[1]).toHaveTextContent('Second item');
+        expect(listItems[2]).toHaveTextContent('Third item');
+      });
+
+      it('should render multiple child elements when contentType is "node"', () => {
+        const { container } = render(
+          <Alert open={true} severity="success" contentType="node">
+            <p>First paragraph</p>
+            <p>Second paragraph</p>
+            <div>Additional content</div>
+          </Alert>
+        );
+
+        const messageDiv = container.querySelector('.alert-message');
+        const paragraphs = messageDiv?.querySelectorAll('p') || [];
+        const divs = messageDiv?.querySelectorAll('div') || [];
+
+        expect(paragraphs.length).toBeGreaterThanOrEqual(2);
+        expect(divs.length).toBeGreaterThanOrEqual(1);
+      });
+
+      it('should maintain accessibility with contentType="node"', () => {
+        render(
+          <Alert open={true} severity="info" contentType="node">
+            <div>
+              <p>Complex content structure</p>
+              <ul>
+                <li>Item 1</li>
+              </ul>
+            </div>
+          </Alert>
+        );
+
+        const alert = screen.getByRole('alert');
+        expect(alert).toHaveAttribute('aria-live', 'polite');
+        expect(alert).toHaveAttribute('aria-atomic', 'true');
+      });
+    });
+  });
+});