127 lines
3.7 KiB
TypeScript
127 lines
3.7 KiB
TypeScript
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();
|
|
});
|
|
});
|
|
});
|