import React from 'react';
import {render} from '../../test-utils';
import LinearProgress, {Bar, Dot, Line, LinearProgressType, LineFill} from '../LinearProgress';



describe('LinearProgress', () => {
  it('should render dots', () => {
    const wrapper = render(<LinearProgress type={LinearProgressType.Dots} max={11} value={6}/>);
    expect(wrapper.container.querySelectorAll(`${Dot}`)).toHaveLength(11)
    expect(wrapper.container.querySelectorAll(`${Dot}.active`)).toHaveLength(6)
  });

  it('should render bars', () => {
    const wrapper = render(<LinearProgress type={LinearProgressType.Bars} max={11} value={6}/>);
    expect(wrapper.container.querySelectorAll(`${Bar}`)).toHaveLength(11)
    expect(wrapper.container.querySelectorAll(`${Bar}.active`)).toHaveLength(6)
  });

  it('should render line', () => {
    const wrapper = render(<LinearProgress type={LinearProgressType.Line} max={11} value={6}/>);
    expect(wrapper.container.querySelectorAll(`${Line}`)).toHaveLength(1)
    expect(wrapper.container.querySelectorAll(`${LineFill}`).item(0).getAttribute('style')).toEqual(`width: ${6 / 11 * 100}%;`)
  });
});