import { render, screen } from '@testing-library/react';
import { describe, it, expect } from 'vitest';
import { Wordmark } from '../Wordmark';

describe('<Wordmark />', () => {
  it('exposes the brand name in lowercase as its accessible name', () => {
    render(<Wordmark />);
    expect(screen.getByRole('img', { name: 'creeer' })).toBeInTheDocument();
  });
  it('renders the "≡" as three separate bars for dorado styling', () => {
    const { container } = render(<Wordmark />);
    const accent = container.querySelector('[data-accent="true"]');
    expect(accent).not.toBeNull();
    expect(accent?.classList.contains('fill-dorado')).toBe(true);
    expect(accent?.querySelectorAll('rect')).toHaveLength(3);
  });
  it('never renders uppercase CREEER', () => {
    const { container } = render(<Wordmark showTagline />);
    expect(container.textContent).not.toMatch(/CREEER/);
    expect(container.textContent).not.toMatch(/Creeer/);
    expect(screen.getByRole('img').getAttribute('aria-label')).toMatch(/^creeer\b/);
  });
  it('renders the tagline pillars with dorado separators, justified to the mark', () => {
    const { container } = render(<Wordmark showTagline />);
    const tagline = container.querySelector('text');
    expect(tagline?.textContent).toBe('CLARIDAD · DIRECCIÓN · CRECIMIENTO');
    expect(tagline?.getAttribute('textLength')).toBe('1000');
    expect(tagline?.querySelectorAll('.fill-dorado')).toHaveLength(2);
  });
  it('omits the tagline unless asked, and shortens the viewBox accordingly', () => {
    const { container } = render(<Wordmark />);
    expect(container.querySelector('text')).toBeNull();
    expect(container.querySelector('svg')?.getAttribute('viewBox')).toBe('0 0 1000 153.14');
  });
});