add tests

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

@@ -0,0 +1,69 @@
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+import { ActionsHeader } from './ActionsHeader';
+
+describe('ActionsHeader', () => {
+  describe('Rendering states', () => {
+    it('renders the provided title', () => {
+      const title = 'User Actions';
+      render(<ActionsHeader title={title} />);
+      
+      expect(screen.getByText(title)).toBeDefined();
+    });
+
+    it('renders with different titles', () => {
+      const titles = ['User Actions', 'System Actions', 'Admin Actions'];
+      
+      titles.forEach((title) => {
+        const { container } = render(<ActionsHeader title={title} />);
+        expect(screen.getByText(title)).toBeDefined();
+      });
+    });
+  });
+
+  describe('Visual presentation', () => {
+    it('renders the status indicator with correct label', () => {
+      render(<ActionsHeader title="Test Title" />);
+      
+      expect(screen.getByText('SYSTEM_READY')).toBeDefined();
+    });
+
+    it('renders the Activity icon', () => {
+      const { container } = render(<ActionsHeader title="Test Title" />);
+      
+      // The StatusIndicator component should render with the Activity icon
+      expect(container.firstChild).toBeDefined();
+    });
+
+    it('renders with correct heading hierarchy', () => {
+      render(<ActionsHeader title="Test Title" />);
+      
+      // The title should be rendered as an h1 element
+      const heading = screen.getByRole('heading', { level: 1 });
+      expect(heading).toBeDefined();
+      expect(heading.textContent).toBe('Test Title');
+    });
+  });
+
+  describe('Edge cases', () => {
+    it('handles empty string title', () => {
+      const { container } = render(<ActionsHeader title="" />);
+      
+      expect(container.firstChild).toBeDefined();
+    });
+
+    it('handles long title', () => {
+      const longTitle = 'A very long title that might wrap to multiple lines';
+      render(<ActionsHeader title={longTitle} />);
+      
+      expect(screen.getByText(longTitle)).toBeDefined();
+    });
+
+    it('handles special characters in title', () => {
+      const specialTitle = 'Actions & Tasks (Admin)';
+      render(<ActionsHeader title={specialTitle} />);
+      
+      expect(screen.getByText(specialTitle)).toBeDefined();
+    });
+  });
+});