add tests

apps/website/components/actions/ActionStatusBadge.test.tsx

@@ -0,0 +1,63 @@
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+import { ActionStatusBadge } from './ActionStatusBadge';
+
+describe('ActionStatusBadge', () => {
+  describe('Rendering states', () => {
+    it('renders PENDING status with warning variant', () => {
+      render(<ActionStatusBadge status="PENDING" />);
+      
+      expect(screen.getByText('PENDING')).toBeDefined();
+    });
+
+    it('renders COMPLETED status with success variant', () => {
+      render(<ActionStatusBadge status="COMPLETED" />);
+      
+      expect(screen.getByText('COMPLETED')).toBeDefined();
+    });
+
+    it('renders FAILED status with danger variant', () => {
+      render(<ActionStatusBadge status="FAILED" />);
+      
+      expect(screen.getByText('FAILED')).toBeDefined();
+    });
+
+    it('renders IN_PROGRESS status with info variant', () => {
+      render(<ActionStatusBadge status="IN_PROGRESS" />);
+      
+      expect(screen.getByText('IN PROGRESS')).toBeDefined();
+    });
+  });
+
+  describe('Visual presentation', () => {
+    it('formats status text by replacing underscores with spaces', () => {
+      render(<ActionStatusBadge status="IN_PROGRESS" />);
+      
+      expect(screen.getByText('IN PROGRESS')).toBeDefined();
+      expect(screen.queryByText('IN_PROGRESS')).toBeNull();
+    });
+
+    it('renders with correct size and rounded props', () => {
+      const { container } = render(<ActionStatusBadge status="PENDING" />);
+      
+      // The Badge component should receive size="sm" and rounded="sm"
+      expect(container.firstChild).toBeDefined();
+    });
+  });
+
+  describe('Edge cases', () => {
+    it('handles all valid status types without errors', () => {
+      const statuses: Array<'PENDING' | 'COMPLETED' | 'FAILED' | 'IN_PROGRESS'> = [
+        'PENDING',
+        'COMPLETED',
+        'FAILED',
+        'IN_PROGRESS',
+      ];
+
+      statuses.forEach((status) => {
+        const { container } = render(<ActionStatusBadge status={status} />);
+        expect(container.firstChild).toBeDefined();
+      });
+    });
+  });
+});