import Flex from './Flex.component';

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

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

  it('renders with sx prop', () => {
    const json = renderJSON(
      <Flex
        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(
      <Flex
        css={{
          margin: 4,
          padding: 16,
          color: 'tomato',
        }}
      />,
    );
    expect(json).toHaveStyleRule('margin', '4px');
    expect(json).toHaveStyleRule('padding', '16px');
    expect(json).toHaveStyleRule('color', 'tomato');
  });
});