44 lines
1.4 KiB
TypeScript
44 lines
1.4 KiB
TypeScript
|
import { render, screen } from '@testing-library/react';
|
||
|
|
import { describe, it, expect } from 'vitest';
|
||
|
|
import { HelpText } from './HelpText';
|
||
|
|
|
||
|
|
describe('HelpText Component', () => {
|
||
|
|
it('renders help text icon', () => {
|
||
|
|
const { container } = render(<HelpText text="This is helpful information" />);
|
||
|
|
|
||
|
|
const icon = container.querySelector('svg');
|
||
|
|
expect(icon).toBeInTheDocument();
|
||
|
|
});
|
||
|
|
|
||
|
|
it('has correct aria-label', () => {
|
||
|
|
render(<HelpText text="Helpful information" />);
|
||
|
|
|
||
|
|
const element = screen.getByLabelText('Aide: Helpful information');
|
||
|
|
expect(element).toBeInTheDocument();
|
||
|
|
});
|
||
|
|
|
||
|
|
it('applies custom className', () => {
|
||
|
|
const { container } = render(
|
||
|
|
<HelpText text="Test" className="custom-class" />
|
||
|
|
);
|
||
|
|
|
||
|
|
const element = container.querySelector('span');
|
||
|
|
expect(element).toHaveClass('custom-class');
|
||
|
|
});
|
||
|
|
|
||
|
|
it('renders with different positions', () => {
|
||
|
|
const { rerender } = render(<HelpText text="Test" position="top" />);
|
||
|
|
expect(screen.getByLabelText('Aide: Test')).toBeInTheDocument();
|
||
|
|
|
||
|
|
rerender(<HelpText text="Test" position="bottom" />);
|
||
|
|
expect(screen.getByLabelText('Aide: Test')).toBeInTheDocument();
|
||
|
|
|
||
|
|
rerender(<HelpText text="Test" position="left" />);
|
||
|
|
expect(screen.getByLabelText('Aide: Test')).toBeInTheDocument();
|
||
|
|
|
||
|
|
rerender(<HelpText text="Test" position="right" />);
|
||
|
|
expect(screen.getByLabelText('Aide: Test')).toBeInTheDocument();
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|