115 lines
3.3 KiB
TypeScript
115 lines
3.3 KiB
TypeScript
import React from 'react';
|
|
import { describe, it, expect } from 'vitest';
|
|
import { render, screen } from '@testing-library/react';
|
|
import { AuthCard } from './AuthCard';
|
|
|
|
describe('AuthCard', () => {
|
|
describe('rendering', () => {
|
|
it('should render with title and children', () => {
|
|
render(
|
|
<AuthCard title="Sign In">
|
|
<div data-testid="child-content">Child content</div>
|
|
</AuthCard>
|
|
);
|
|
|
|
expect(screen.getByText('Sign In')).toBeInTheDocument();
|
|
expect(screen.getByTestId('child-content')).toBeInTheDocument();
|
|
});
|
|
|
|
it('should render with title and description', () => {
|
|
render(
|
|
<AuthCard title="Sign In" description="Enter your credentials">
|
|
<div data-testid="child-content">Child content</div>
|
|
</AuthCard>
|
|
);
|
|
|
|
expect(screen.getByText('Sign In')).toBeInTheDocument();
|
|
expect(screen.getByText('Enter your credentials')).toBeInTheDocument();
|
|
expect(screen.getByTestId('child-content')).toBeInTheDocument();
|
|
});
|
|
|
|
it('should render without description', () => {
|
|
render(
|
|
<AuthCard title="Sign In">
|
|
<div data-testid="child-content">Child content</div>
|
|
</AuthCard>
|
|
);
|
|
|
|
expect(screen.getByText('Sign In')).toBeInTheDocument();
|
|
expect(screen.getByTestId('child-content')).toBeInTheDocument();
|
|
});
|
|
|
|
it('should render with multiple children', () => {
|
|
render(
|
|
<AuthCard title="Sign In">
|
|
<div data-testid="child-1">Child 1</div>
|
|
<div data-testid="child-2">Child 2</div>
|
|
<div data-testid="child-3">Child 3</div>
|
|
</AuthCard>
|
|
);
|
|
|
|
expect(screen.getByText('Sign In')).toBeInTheDocument();
|
|
expect(screen.getByTestId('child-1')).toBeInTheDocument();
|
|
expect(screen.getByTestId('child-2')).toBeInTheDocument();
|
|
expect(screen.getByTestId('child-3')).toBeInTheDocument();
|
|
});
|
|
});
|
|
|
|
describe('accessibility', () => {
|
|
it('should have proper semantic structure', () => {
|
|
render(
|
|
<AuthCard title="Sign In" description="Enter your credentials">
|
|
<div>Content</div>
|
|
</AuthCard>
|
|
);
|
|
|
|
// The component uses Card and SectionHeader which should have proper semantics
|
|
expect(screen.getByText('Sign In')).toBeInTheDocument();
|
|
expect(screen.getByText('Enter your credentials')).toBeInTheDocument();
|
|
});
|
|
});
|
|
|
|
describe('edge cases', () => {
|
|
it('should handle empty title', () => {
|
|
render(
|
|
<AuthCard title="">
|
|
<div>Content</div>
|
|
</AuthCard>
|
|
);
|
|
|
|
expect(screen.getByText('Content')).toBeInTheDocument();
|
|
});
|
|
|
|
it('should handle empty description', () => {
|
|
render(
|
|
<AuthCard title="Sign In" description="">
|
|
<div>Content</div>
|
|
</AuthCard>
|
|
);
|
|
|
|
expect(screen.getByText('Sign In')).toBeInTheDocument();
|
|
expect(screen.getByText('Content')).toBeInTheDocument();
|
|
});
|
|
|
|
it('should handle null children', () => {
|
|
render(
|
|
<AuthCard title="Sign In">
|
|
{null}
|
|
</AuthCard>
|
|
);
|
|
|
|
expect(screen.getByText('Sign In')).toBeInTheDocument();
|
|
});
|
|
|
|
it('should handle undefined children', () => {
|
|
render(
|
|
<AuthCard title="Sign In">
|
|
{undefined}
|
|
</AuthCard>
|
|
);
|
|
|
|
expect(screen.getByText('Sign In')).toBeInTheDocument();
|
|
});
|
|
});
|
|
});
|