import Image from './Image.component';

describe('<Image>', () => {
  it('Happy: Render Image', () => {
    const wrapper = shallow(<Image />);
    expect(wrapper).toHaveLength(1);
  });

  it('renders with as prop', () => {
    const json = renderJSON(<Image as="header" />);
    expect(json.type).toBe('header');
  });

  it('renders with sx prop', () => {
    const json = renderJSON(
      <Image
        sx={{
          borderRadius: 2,
          border: '1px solid cyan',
        }}
      />,
    );
    expect(json).toHaveStyleRule('border-radius', '2px');
    expect(json).toHaveStyleRule('border', '1px solid cyan');
  });

  test('renders with css prop', () => {
    const json = renderJSON(
      <Image
        css={{
          margin: 4,
          padding: 16,
          color: 'tomato',
        }}
      />,
    );
    expect(json).toHaveStyleRule('margin', '4px');
    expect(json).toHaveStyleRule('padding', '16px');
    expect(json).toHaveStyleRule('color', 'tomato');
  });
});