import React from 'react';
import Adapter from 'enzyme-adapter-react-16';
import { configure, mount, ReactWrapper } from 'enzyme';

import Banner from './Badge';
import { Props } from './Badge.types';

configure({ adapter: new Adapter() });

const defaultProps: Props = {
  children: <span>Test</span>,
  className: 'custom-classname',
  theme: 'primary',
  weight: 'normal'
};

describe('Banner Component on its default state', () => {
  let banner: ReactWrapper<Props>;
  let wrapper: ReactWrapper;
  const props: Props = { ...defaultProps };

  beforeEach(() => {
    banner = mount(<Banner {...props} />);
    wrapper = banner.find('.app-badge');
  });
  
  it('should contain a wrapper with the classname app-badge', () => {
    expect(wrapper.exists()).toBe(true);
  });

  it('should render with the primary colour', () => {
    expect(wrapper.hasClass('app-badge_primary')).toBe(true);
  });

  it('should render with the normal font weight', () => {
    expect(wrapper.hasClass('app-badge_normal')).toBe(true);
  });

  it('should render the child passed as props', () => {
    expect(banner.props().children).toEqual(props.children);
  });
});

describe('Banner component with custom props passed in', () => {
  let banner: ReactWrapper;
  let wrapper: ReactWrapper;

  const props: Props = {
    ...defaultProps,
    theme: 'secondary',
    weight: 'bold'
  };

  beforeEach(() => {
    banner = mount(<Banner {...props} />);
    wrapper = banner.find('.app-badge');
  });

  it('should add the secondary modifier classname', () => {
    expect(wrapper.hasClass('app-badge_secondary')).toBe(true);
  });

  it('should add the bold modifier classname', () => {
    expect(wrapper.hasClass('app-badge_bold')).toBe(true);
  });

  it('should add the custom classname', () => {
    expect(wrapper.hasClass(defaultProps.className)).toBe(true);
  });

});