import React from 'react';
import '@testing-library/jest-dom'
import { act } from 'react-dom/test-utils';
import { AtomProgressBar, IProgressBarProps } from './index';
import { render } from '@testing-library/react-native';

describe('[Native] AtomProgressBar', () => {
    const props: IProgressBarProps = {
      background: 'neutral300',
      colorPoints: 'quaternary500',
      
      percentage: 100
    }
    it('Render component', async () => {
        await act(async () => {
          const component = render(<AtomProgressBar {...props}/>);
        
          expect(component).toBeDefined();
        });
    });

    it('Render component default props', async () => {
        await act(async () => {
          const component = render(<AtomProgressBar percentage={20} />);
        
          expect(component).toBeDefined();
        });
    });

    it('Render component AtomProgressBar validate background', async () => {
        await act(async () => {
          const component = render(<AtomProgressBar {...props}/>);
          const propsComponent = component.container.props;
          
          expect(propsComponent.background).toBe(props.background);
        });
    });

    it('Render component AtomProgressBar validate colorPoints', async () => {
        await act(async () => {
          const component = render(<AtomProgressBar {...props}/>);
          const propsComponent = component.container.props;
          
          expect(propsComponent.colorPoints).toBe(props.colorPoints);
        });
    });

    it('Render component AtomProgressBar validate porcent', async () => {
      let percentage = 20;
      let height = '10px';
      await act(async () => {
        const component = render(<AtomProgressBar {...props}/>);
        percentage = 50;
        height = '4px';
        await component.rerender(<AtomProgressBar {...props}/>);
        
        const propsComponent = component.container.props;
        
        expect(propsComponent.percentage).toBe(props.percentage);
      });
    });
});