// @flow
import React from 'react';
import { mountWrappedComponent } from '../../../../../utils/tests';
import { Selector } from '..';
import { SelectorItem } from '.';

describe('SelectorItem', () => {
  const noop = () => {};

  it('has the correct styling when size context = "sm"', () => {
    const wrapper = mountWrappedComponent(
      <Selector name="test" size="sm" onChange={noop} label="test">
        <SelectorItem id="test" onChange={noop} value="test" label="label" />
      </Selector>,
    );

    const labelWrapper = wrapper.find('LabelWrapper');
    expect(labelWrapper).toHaveStyleRule('margin', '5px 0');

    const inputContainer = wrapper.find('InputContainer');
    expect(inputContainer).toHaveStyleRule('width', '32px', {
      modifier: 'svg',
    });
  });

  it('has the correct styling when size context = "lg"', () => {
    const wrapper = mountWrappedComponent(
      <Selector name="test" size="lg" onChange={noop} label="test">
        <SelectorItem id="test" onChange={noop} value="test" label="label" />
      </Selector>,
    );

    const primaryLabelText = wrapper.find('PrimaryLabelText');
    expect(primaryLabelText).toHaveStyleRule('font-weight', '700');

    const boxFlex = wrapper.find('BoxFlex');
    expect(boxFlex).toHaveStyleRule('padding', '8px 30px');
  });
});
