// @flow
import React from 'react';
import { shallow, mount } from 'enzyme';
import Typography from './Typography';

describe('Typography component', () => {
  let wrapper;

  beforeEach(() => {
    wrapper = shallow(<Typography text="Example" />);
  });

  it('displays text', () => {
    expect(wrapper.find('Text')).toExist();
    expect(wrapper.dive()).toHaveText('Example');
  });

  it('default type is body', () => {
    expect(Typography.defaultProps.type).toEqual('body1');
  });

  it('accessibility role is heading for heading types', () => {
    wrapper.setProps({ type: 'display1' });
    expect(wrapper).toHaveProp('accessibilityRole', 'heading');
    wrapper.setProps({ type: 'display2' });
    expect(wrapper).toHaveProp('accessibilityRole', 'heading');
    wrapper.setProps({ type: 'display3' });
    expect(wrapper).toHaveProp('accessibilityRole', 'heading');
    wrapper.setProps({ type: 'display4' });
    expect(wrapper).toHaveProp('accessibilityRole', 'heading');
    wrapper.setProps({ type: 'headline' });
    expect(wrapper).toHaveProp('accessibilityRole', 'heading');
    wrapper.setProps({ type: 'title' });
    expect(wrapper).toHaveProp('accessibilityRole', 'heading');
    wrapper.setProps({ type: 'subheading' });
    expect(wrapper).toHaveProp('accessibilityRole', 'heading');
  });

  it('accessibility role is null for non heading types', () => {
    wrapper.setProps({ type: 'body1' });
    expect(wrapper).toHaveProp('accessibilityRole', null);
    wrapper.setProps({ type: 'body2' });
    expect(wrapper).toHaveProp('accessibilityRole', null);
    wrapper.setProps({ type: 'caption' });
    expect(wrapper).toHaveProp('accessibilityRole', null);
    wrapper.setProps({ type: 'button' });
    expect(wrapper).toHaveProp('accessibilityRole', null);
  });

  it('text is uppercase for buttons', () => {
    expect(wrapper.dive()).toHaveText('Example');
    wrapper.setProps({ type: 'button' });
    expect(wrapper.dive()).toHaveText('EXAMPLE');
  });

  it('can style color', () => {
    wrapper.setProps({ color: 'red' });
    expect(wrapper.dive()).toHaveStyle('color', 'red');
  });

  it('passes native props', () => {
    const typo = mount(<Typography text="Example" />);
    expect(typo.instance()).toHaveProperty('setNativeProps');
    typo.instance().setNativeProps();
    wrapper.instance().setNativeProps();
  });

  it('can customize font size', () => {
    wrapper.setProps({ size: 10 });
    expect(wrapper).toHaveStyle('fontSize', 10);
  });
});
