// @flow
import React from 'react';
import { shallow } from 'enzyme';
import { Text } from 'react-native';
import Elevation from './Elevation';

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

  beforeEach(() => {
    wrapper = shallow(<Elevation><Text>Example</Text></Elevation>);
  });

  it('wraps content', () => {
    const content = wrapper.find(Text);
    expect(content).toExist();
    expect(content.dive()).toHaveText('Example');
  });

  it('is a view', () => {
    expect(wrapper.find('View')).toExist();
  });

  it('can have a border radius', () => {
    expect(wrapper).not.toHaveStyle('borderRadius', expect.anything());
    wrapper.setProps({ borderRadius: 2 });
    expect(wrapper).toHaveStyle('borderRadius', 2);
  });

  it('has transition for web', () => {
    expect(wrapper).toHaveStyle('transitionDuration', expect.anything());
    expect(wrapper).toHaveStyle('transitionTimingFunction', expect.anything());
    expect(wrapper).toHaveStyle('transitionProperty', 'box-shadow');
    expect(wrapper).toHaveStyle('willChange', 'box-shadow');
  });

  it('level 0 has no box shadow', () => {
    expect(wrapper).not.toHaveStyle('boxShadow', expect.anything());
  });

  it('level 1 has box shadow', () => {
    wrapper.setProps({ level: 1 });
    const matcher = /(0px \d+px \d+px \d+px rgba\([\d,.\s]+\),?)+/;
    expect(wrapper).toHaveStyle('boxShadow', expect.stringMatching(matcher));
  });
});
