import { render, screen } from '../test-utils';

import ProgressBar from './ProgressBar';

describe('ProgressBar', () => {
  describe('by default', () => {
    const props = {
      description: 'description',
      title: 'title',
      progress: { value: 50, max: 100 },
      textEnd: 'textEnd',
      className: 'className',
      id: 'id',
    };
    beforeEach(() => {
      render(<ProgressBar {...props} />);
    });

    it('renders the title', () => {
      expect(screen.getByText('title')).toBeInTheDocument();
    });

    it('renders the description', () => {
      expect(screen.getByText('description')).toBeInTheDocument();
    });

    it('renders the textEnd', () => {
      expect(screen.getByText('textEnd')).toBeInTheDocument();
    });
  });
  describe('with custom React node type as props', () => {
    const props = {
      description: <span>Custom Description</span>,
      title: <span>Custom Title</span>,
      progress: { value: 50, max: 100 },
      textEnd: <span>Custom TextEnd</span>,
      className: 'className',
      id: 'id',
    };
    beforeEach(() => {
      render(<ProgressBar {...props} />);
    });

    it('renders the custom title', () => {
      expect(screen.getByText('Custom Title')).toBeInTheDocument();
    });

    it('renders the custom description', () => {
      expect(screen.getByText('Custom Description')).toBeInTheDocument();
    });

    it('renders the custom textEnd', () => {
      expect(screen.getByText('Custom TextEnd')).toBeInTheDocument();
    });
  });
});