add tests

apps/website/components/auth/AuthFooterLinks.test.tsx

@@ -0,0 +1,126 @@
+import React from 'react';
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { AuthFooterLinks } from './AuthFooterLinks';
+
+describe('AuthFooterLinks', () => {
+  describe('rendering', () => {
+    it('should render with single child', () => {
+      render(
+        <AuthFooterLinks>
+          <a href="/forgot-password">Forgot password?</a>
+        </AuthFooterLinks>
+      );
+
+      expect(screen.getByText('Forgot password?')).toBeInTheDocument();
+    });
+
+    it('should render with multiple children', () => {
+      render(
+        <AuthFooterLinks>
+          <a href="/forgot-password">Forgot password?</a>
+          <a href="/register">Create account</a>
+          <a href="/help">Help</a>
+        </AuthFooterLinks>
+      );
+
+      expect(screen.getByText('Forgot password?')).toBeInTheDocument();
+      expect(screen.getByText('Create account')).toBeInTheDocument();
+      expect(screen.getByText('Help')).toBeInTheDocument();
+    });
+
+    it('should render with button children', () => {
+      render(
+        <AuthFooterLinks>
+          <button type="button">Back</button>
+          <button type="button">Continue</button>
+        </AuthFooterLinks>
+      );
+
+      expect(screen.getByText('Back')).toBeInTheDocument();
+      expect(screen.getByText('Continue')).toBeInTheDocument();
+    });
+
+    it('should render with mixed element types', () => {
+      render(
+        <AuthFooterLinks>
+          <a href="/forgot-password">Forgot password?</a>
+          <button type="button">Back</button>
+          <span>Need help?</span>
+        </AuthFooterLinks>
+      );
+
+      expect(screen.getByText('Forgot password?')).toBeInTheDocument();
+      expect(screen.getByText('Back')).toBeInTheDocument();
+      expect(screen.getByText('Need help?')).toBeInTheDocument();
+    });
+  });
+
+  describe('accessibility', () => {
+    it('should have proper semantic structure', () => {
+      render(
+        <AuthFooterLinks>
+          <a href="/forgot-password">Forgot password?</a>
+        </AuthFooterLinks>
+      );
+
+      // The component uses Group which should have proper semantics
+      expect(screen.getByText('Forgot password?')).toBeInTheDocument();
+    });
+
+    it('should maintain focus order', () => {
+      render(
+        <AuthFooterLinks>
+          <a href="/forgot-password">Forgot password?</a>
+          <a href="/register">Create account</a>
+        </AuthFooterLinks>
+      );
+
+      const links = screen.getAllByRole('link');
+      expect(links).toHaveLength(2);
+    });
+  });
+
+  describe('edge cases', () => {
+    it('should handle empty children', () => {
+      render(<AuthFooterLinks>{null}</AuthFooterLinks>);
+      // Component should render without errors
+    });
+
+    it('should handle undefined children', () => {
+      render(<AuthFooterLinks>{undefined}</AuthFooterLinks>);
+      // Component should render without errors
+    });
+
+    it('should handle empty string children', () => {
+      render(<AuthFooterLinks>{''}</AuthFooterLinks>);
+      // Component should render without errors
+    });
+
+    it('should handle nested children', () => {
+      render(
+        <AuthFooterLinks>
+          <div>
+            <a href="/forgot-password">Forgot password?</a>
+          </div>
+        </AuthFooterLinks>
+      );
+
+      expect(screen.getByText('Forgot password?')).toBeInTheDocument();
+    });
+
+    it('should handle complex link structures', () => {
+      render(
+        <AuthFooterLinks>
+          <a href="/forgot-password">
+            <span>Forgot</span>
+            <span>password?</span>
+          </a>
+        </AuthFooterLinks>
+      );
+
+      expect(screen.getByText('Forgot')).toBeInTheDocument();
+      expect(screen.getByText('password?')).toBeInTheDocument();
+    });
+  });
+});