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

describe('ProgressBar', () => {
  it('renders the component without crashing', () => {
    const { container } = render(<ProgressBar kind="simple" progress={10} />);

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

  it('diplays the progress', () => {
    const { container } = render(<ProgressBar kind="simple" progress={10} />);

    const progressBar = container.querySelector('.progress') as HTMLDivElement;

    expect(progressBar.style.width).toBe('10%');
  });

  it('displays the status', () => {
    const { container } = render(
      <ProgressBar
        kind="simple"
        progress={10}
        status={ProgressBarStatus.Completed}
      />,
    );

    const progressBar = container.querySelector('.completed');

    expect(progressBar).toBeInTheDocument();
  });

  it('displays the status text', () => {
    const text = 'Progress 10%';
    const { container } = render(
      <ProgressBar kind="full" progress={10} text={text} />,
    );

    const progressText = container.querySelector('.text');

    expect(progressText?.textContent).toBe(text);
  });

  it('renders indeterminate progress bar', () => {
    const { container } = render(
      <ProgressBar kind="simple" indeterminate={true} />,
    );

    const progressBar = container.querySelector('.infinite');

    expect(progressBar).toBeInTheDocument();
  });
});
