import { render } from '@testing-library/react';
import React from 'react';
import { describe, expect, it, vi } from 'vitest';
import { ReadOnlyField } from './ReadOnlyField';

describe('ReadOnlyField', () => {
  it('renders the component without crashing', () => {
    const { container } = render(<ReadOnlyField />);

    expect(container).toBeTruthy();
  });

  it('displays a label', () => {
    const mockLabel = 'mockLabel';
    const { container } = render(<ReadOnlyField label={mockLabel} />);

    const label = container.querySelector('label');

    expect(label?.textContent).toBe(mockLabel);
  });

  it('renders a string value', () => {
    const mockValue = 'mockLabel';
    const { container } = render(<ReadOnlyField value={mockValue} />);

    const value = container.querySelector('.value');

    expect(value?.textContent).toBe(mockValue);
  });

  it('renders a numeric value', () => {
    const mockValue = 3;
    const { container } = render(<ReadOnlyField value={mockValue} />);

    const value = container.querySelector('.value');

    expect(value?.textContent).toBe(String(mockValue));
  });

  it('renders an array of values', () => {
    const mockValue = ['de', 'en', 'ja', 'fr'];
    const { container } = render(<ReadOnlyField value={mockValue} />);

    const value = container.querySelector('.value');

    expect(value?.textContent).toBe('de, en, ja, fr');
  });

  it('defaults to empty strings for label and value', () => {
    const mockDefaults = '';
    const { container } = render(<ReadOnlyField />);

    const label = container.querySelector('label');
    const value = container.querySelector('.value');

    expect(label?.textContent).toBe(mockDefaults);
    expect(value?.textContent).toBe(mockDefaults);
  });

  it('triggers transform functions once per render', () => {
    const spy = vi.fn();
    const mockValue = 3;

    render(<ReadOnlyField value={mockValue} transform={spy} />);

    expect(spy).toHaveBeenCalledTimes(1);
    expect(spy).toHaveBeenCalledWith(3);
  });
});
