87 lines
3.6 KiB
TypeScript
87 lines
3.6 KiB
TypeScript
import { describe, it, expect } from 'vitest';
|
|
import { render, screen } from '@testing-library/react';
|
|
import { PasswordStrengthIndicator } from './PasswordStrengthIndicator';
|
|
|
|
describe('PasswordStrengthIndicator', () => {
|
|
it('should not render when password is empty', () => {
|
|
const { container } = render(<PasswordStrengthIndicator password="" />);
|
|
expect(container.firstChild).toBeNull();
|
|
});
|
|
|
|
it('should display weak strength for short password', () => {
|
|
render(<PasswordStrengthIndicator password="abc" />);
|
|
expect(screen.getByText('Force: Faible')).toBeInTheDocument();
|
|
});
|
|
|
|
it('should display weak strength for password with only lowercase', () => {
|
|
render(<PasswordStrengthIndicator password="abcdefgh" />);
|
|
expect(screen.getByText('Force: Faible')).toBeInTheDocument();
|
|
});
|
|
|
|
it('should display weak strength for password with length >= 8 and mixed case', () => {
|
|
render(<PasswordStrengthIndicator password="Abcdefgh" />);
|
|
expect(screen.getByText('Force: Faible')).toBeInTheDocument();
|
|
});
|
|
|
|
it('should display medium strength for password with length >= 8, mixed case and numbers', () => {
|
|
render(<PasswordStrengthIndicator password="Abcdefgh1" />);
|
|
expect(screen.getByText('Force: Moyen')).toBeInTheDocument();
|
|
});
|
|
|
|
it('should display strong strength for password with length >= 8, mixed case, numbers and special chars', () => {
|
|
render(<PasswordStrengthIndicator password="Abcdefgh1!" />);
|
|
expect(screen.getByText('Force: Fort')).toBeInTheDocument();
|
|
});
|
|
|
|
it('should display very strong strength for long password with all requirements', () => {
|
|
render(<PasswordStrengthIndicator password="Abcdefgh123!@#" />);
|
|
expect(screen.getByText('Force: Très fort')).toBeInTheDocument();
|
|
});
|
|
|
|
it('should display very strong strength for password with length >= 12 and all requirements', () => {
|
|
render(<PasswordStrengthIndicator password="Abcdefghijkl1!" />);
|
|
expect(screen.getByText('Force: Très fort')).toBeInTheDocument();
|
|
});
|
|
|
|
it('should render progress bar', () => {
|
|
const { container } = render(
|
|
<PasswordStrengthIndicator password="Abcdefgh1!" />,
|
|
);
|
|
const progressBar = container.querySelector('.bg-gray-200');
|
|
expect(progressBar).toBeInTheDocument();
|
|
});
|
|
|
|
it('should render progress fill with correct width for weak password', () => {
|
|
const { container } = render(<PasswordStrengthIndicator password="abc" />);
|
|
const progressFill = container.querySelector('.bg-red-500');
|
|
expect(progressFill).toBeInTheDocument();
|
|
expect(progressFill).toHaveStyle({ width: '25%' });
|
|
});
|
|
|
|
it('should render progress fill with correct width for medium password', () => {
|
|
const { container } = render(
|
|
<PasswordStrengthIndicator password="Abcdefgh1" />,
|
|
);
|
|
const progressFill = container.querySelector('.bg-yellow-500');
|
|
expect(progressFill).toBeInTheDocument();
|
|
expect(progressFill).toHaveStyle({ width: '50%' });
|
|
});
|
|
|
|
it('should render progress fill with correct width for strong password', () => {
|
|
const { container } = render(
|
|
<PasswordStrengthIndicator password="Abcdefgh1!" />,
|
|
);
|
|
const progressFill = container.querySelector('.bg-green-500');
|
|
expect(progressFill).toBeInTheDocument();
|
|
expect(progressFill).toHaveStyle({ width: '75%' });
|
|
});
|
|
|
|
it('should render progress fill with correct width for very strong password', () => {
|
|
const { container } = render(
|
|
<PasswordStrengthIndicator password="Abcdefghijkl1!" />,
|
|
);
|
|
const progressFill = container.querySelector('.bg-green-600');
|
|
expect(progressFill).toBeInTheDocument();
|
|
expect(progressFill).toHaveStyle({ width: '100%' });
|
|
});
|
|
});
|