import React from 'react';
import 'jest-styled-components/native';
import { render } from '@testing-library/react-native';
import { AtomCardContainer, ICardContainerProps } from './index';

describe('[Native] AtomCardContainer', () => {
 
  it('Render component with default shadow type', () => {
    let props: ICardContainerProps = {
      height: '360px',
      width: '460px',
    };

    const component = render(<AtomCardContainer {...props} />);

    expect(component).toBeTruthy();
    expect(component.getByTestId('card-container')).toBeDefined();
    expect(component.getByTestId('card-container')).toHaveStyleRule('shadow-opacity', 0.2);
  });

  it('Render component with small shadow type', () => {
    let props: ICardContainerProps = {
      height: '360px',
      width: '460px',
      shadowSize: 'small'
    };

    const component = render(<AtomCardContainer {...props} />);

    expect(component).toBeTruthy();
    expect(component.getByTestId('card-container')).toBeDefined();
    expect(component.getByTestId('card-container')).toHaveStyleRule('shadow-opacity', 0.1);
  });

  it('Render component with large shadow type', () => {
    let props: ICardContainerProps = {
      height: '360px',
      width: '460px',
      shadowSize: 'large'
    };

    const component = render(<AtomCardContainer {...props} />);

    expect(component).toBeTruthy();
    expect(component.getByTestId('card-container')).toBeDefined();
    expect(component.getByTestId('card-container')).toHaveStyleRule('shadow-opacity', 0.3);
  });

  it('Render component with regular shadow type', () => {
    let props: ICardContainerProps = {
      height: '360px',
      width: '460px',
      shadowSize: 'regular'
    };

    const component = render(<AtomCardContainer {...props} />);

    expect(component).toBeTruthy();
    expect(component.getByTestId('card-container')).toBeDefined();
    expect(component.getByTestId('card-container')).toHaveStyleRule('shadow-opacity', 0.2);
    expect(component.getByTestId('card-container')).toHaveStyleRule('shadow-radius', 16);
  });

  it('Render component with default shadow type is regular', () => {
    let props: ICardContainerProps = {
      height: '360px',
      width: '460px',
    };

    const component = render(<AtomCardContainer {...props} />);

    expect(component).toBeTruthy();
    expect(component.getByTestId('card-container')).toBeDefined();
    expect(component.getByTestId('card-container')).toHaveStyleRule('shadow-opacity', 0.2);
  });
});
