import { renderWithProviders as render, screen } from '../../../test/render';
import { describe, it, expect } from 'vitest';
import { PasswordStrengthMeter } from './PasswordStrengthMeter';
import React from 'react';

describe('PasswordStrengthMeter', () => {
  it('renders nothing when strength is null', () => {
    const { container } = render(<PasswordStrengthMeter strength={null} />);
    expect(container).toBeEmptyDOMElement();
  });

  it('renders the weak state with its label and a 1/3-width bar', () => {
    const { container } = render(<PasswordStrengthMeter strength="weak" />);
    expect(screen.getByText('Senha fraca')).toBeInTheDocument();
    const bar = container.querySelector('.w-1\\/3');
    expect(bar).toBeInTheDocument();
    expect(bar).toHaveClass('bg-destructive');
  });

  it('renders the medium state with its label and a 2/3-width bar', () => {
    const { container } = render(<PasswordStrengthMeter strength="medium" />);
    expect(screen.getByText('Senha média')).toBeInTheDocument();
    const bar = container.querySelector('.w-2\\/3');
    expect(bar).toBeInTheDocument();
  });

  it('renders the strong state with its label and a full-width bar', () => {
    const { container } = render(<PasswordStrengthMeter strength="strong" />);
    expect(screen.getByText('Senha forte')).toBeInTheDocument();
    const bar = container.querySelector('.w-full');
    expect(bar).toBeInTheDocument();
  });

  it('colors the label to match the current strength', () => {
    const { rerender } = render(<PasswordStrengthMeter strength="weak" />);
    expect(screen.getByText('Senha fraca')).toHaveClass('text-destructive');

    rerender(<PasswordStrengthMeter strength="strong" />);
    expect(screen.getByText('Senha forte')).toHaveClass('text-[var(--chart-2)]');
  });
});