import React from 'react';
import 'jest-styled-components/native';
import { render } from '@testing-library/react-native';
import { AtomDivider } from './index';
import { theme } from 'data/dataMx';

describe('Divider   ', () => {
  // 'getByTestId' is used because the Divider component it is just an empty view, so there is no way to get it 
  // (As getByType is Deprecated it cannot be getByyType(View))
  test('Render divider', () => {
    const { getByTestId } = render(<AtomDivider />);
    let divider = getByTestId('divider');
    expect(divider).toBeTruthy();
  });

  it('Should have hr general styling', () => {

    let element = render(
      
        <AtomDivider />
      
    );

    let divider = element.getByTestId('divider');

    expect(divider).toHaveStyleRule('border-width', 4);
    expect(divider).toHaveStyleRule('border-style', 'solid');
    expect(divider).toHaveStyleRule('margin-top', 8);
    expect(divider).toHaveStyleRule('margin-bottom', 8);
  });

  it('Should be transparent', () => {

    let element = render(
      
        <AtomDivider
          isInvisible={true}
        />
      
    );

    let divider = element.getByTestId('divider');

    expect(divider).toHaveStyleRule('border-color', theme?.transparent);
  })

  it('Should have theme color neutral400', () => {

    let element = render(
      
        <AtomDivider />
      
    );
  
    let divider = element.getByTestId('divider');
  
    expect(divider).toHaveStyleRule('border-color', theme.neutral400);
  });

  it('Should have same color prop', () => {
      
    let element = render(
      
        <AtomDivider
          color={'primary'}
        />
      
    );
  
    let divider = element.getByTestId('divider');
  
    expect(divider).toHaveStyleRule('border-color', theme.primary);
  });

  it('Should have height prop', () => {
      
    let element = render(
      
        <AtomDivider
          height={25}
        />
      
    );
  
    let divider = element.getByTestId('divider');
  
    expect(divider).toHaveStyleRule('border-width', 25);
  });
});

