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

describe('StockDetails', () => {
  it('renders stock details', () => {
    const stock = createMockShare();
    render(<StockDetails stock={stock} />);
    expect(screen.getByText('Сбер (SBER)')).toBeInTheDocument();
    expect(screen.getByText('Сбер Банк · RU0009029540')).toBeInTheDocument();
  });

  it('displays positive change in green', () => {
    const stock = createMockShare({
      marketData: {
        ...createMockShare().marketData,
        change: 5,
        changePercent: 2,
      },
    });
    render(<StockDetails stock={stock} />);
    const changeEl = screen.getByText('+5.00 (2.00%)');
    expect(changeEl).toBeInTheDocument();
  });

  it('displays negative change in red', () => {
    const stock = createMockShare({
      marketData: {
        ...createMockShare().marketData,
        change: -3,
        changePercent: -1,
      },
    });
    render(<StockDetails stock={stock} />);
    const changeEl = screen.getByText('-3.00 (-1.00%)');
    expect(changeEl).toBeInTheDocument();
  });

  it('shows price formatted', () => {
    const stock = createMockShare();
    render(<StockDetails stock={stock} />);
    expect(screen.getByText('289,50')).toBeInTheDocument();
  });

  it('shows dash for null high', () => {
    const stock = createMockShare({
      marketData: {
        ...createMockShare().marketData,
        high: null,
      },
    });
    render(<StockDetails stock={stock} />);
    const dashes = screen.getAllByText('—');
    expect(dashes.length).toBeGreaterThanOrEqual(1);
  });

  it('shows capitalization in billions', () => {
    const stock = createMockShare();
    render(<StockDetails stock={stock} />);
    expect(screen.getByText('6250.00 млрд ₽')).toBeInTheDocument();
  });
});