content: 
  import React from 'react'
  import TestUtils from 'react-addons-test-utils'
  import expect from 'expect'
  import { config, Heading, Base } from '../src'
  
  const renderer = TestUtils.createRenderer()
  
  describe('Heading', () => {
    const { fontSizes } = config
    let tree
  
    beforeEach(() => {
      renderer.render(<Heading />)
      tree = renderer.getRenderOutput()
    })
  
    it('should render', () => {
      expect(tree.type).toEqual(Base)
    })
  
    it('should set tagName h2', () => {
      expect(tree.props.tagName).toEqual('h2')
    })
  
    it('should have a className', () => {
      expect(tree.props.className).toEqual('Heading')
    })
  
    it('should have default font size', () => {
      expect(tree.props.baseStyle.fontSize).toEqual(fontSizes[2])
    })
  
    context('when level is 1', () => {
      beforeEach(() => {
        renderer.render(<Heading level={1} />)
        tree = renderer.getRenderOutput()
      })
  
      it('should set tagName h1', () => {
        expect(tree.props.tagName).toEqual('h1')
      })
  
      it('should have h1 font size', () => {
        expect(tree.props.baseStyle.fontSize).toEqual(fontSizes[1])
      })
    })
  
    context('when level is 2', () => {
      beforeEach(() => {
        renderer.render(<Heading level={2} />)
        tree = renderer.getRenderOutput()
      })
  
      it('should set tagName h2', () => {
        expect(tree.props.tagName).toEqual('h2')
      })
  
      it('should have h2 font size', () => {
        expect(tree.props.baseStyle.fontSize).toEqual(fontSizes[2])
      })
    })
  
    context('when level is 3', () => {
      beforeEach(() => {
        renderer.render(<Heading level={3} />)
        tree = renderer.getRenderOutput()
      })
  
      it('should set tagName h3', () => {
        expect(tree.props.tagName).toEqual('h3')
      })
  
      it('should have h3 font size', () => {
        expect(tree.props.baseStyle.fontSize).toEqual(fontSizes[3])
      })
    })
  
    context('when level is 4', () => {
      beforeEach(() => {
        renderer.render(<Heading level={4} />)
        tree = renderer.getRenderOutput()
      })
  
      it('should set tagName h4', () => {
        expect(tree.props.tagName).toEqual('h4')
      })
  
      it('should have h4 font size', () => {
        expect(tree.props.baseStyle.fontSize).toEqual(fontSizes[4])
      })
    })
  
    context('when level is 5', () => {
      beforeEach(() => {
        renderer.render(<Heading level={5} />)
        tree = renderer.getRenderOutput()
      })
  
      it('should set tagName h5', () => {
        expect(tree.props.tagName).toEqual('h5')
      })
  
      it('should have h5 font size', () => {
        expect(tree.props.baseStyle.fontSize).toEqual(fontSizes[5])
      })
    })
  
    context('when level is 6', () => {
      beforeEach(() => {
        renderer.render(<Heading level={6} />)
        tree = renderer.getRenderOutput()
      })
  
      it('should set tagName h6', () => {
        expect(tree.props.tagName).toEqual('h6')
      })
  
      it('should have h6 font size', () => {
        expect(tree.props.baseStyle.fontSize).toEqual(fontSizes[6])
      })
    })
  
    context('when size is 0', () => {
      beforeEach(() => {
        renderer.render(<Heading size={0} />)
        tree = renderer.getRenderOutput()
      })
  
      it('should set tagName h2', () => {
        expect(tree.props.tagName).toEqual('h2')
      })
  
      it('should have h0 font size', () => {
        expect(tree.props.baseStyle.fontSize).toEqual(fontSizes[0])
      })
    })
  
    context('when size is 0 and level is 4', () => {
      beforeEach(() => {
        renderer.render(<Heading size={0} level={4} />)
        tree = renderer.getRenderOutput()
      })
  
      it('should set tagName h4', () => {
        expect(tree.props.tagName).toEqual('h4')
      })
  
      it('should have h0 font size', () => {
        expect(tree.props.baseStyle.fontSize).toEqual(fontSizes[0])
      })
    })
  
    context('when big is true', () => {
      beforeEach(() => {
        renderer.render(<Heading big />)
        tree = renderer.getRenderOutput()
      })
  
      it('should set tagName h2', () => {
        expect(tree.props.tagName).toEqual('h2')
      })
  
      it('should have double the fontSize', () => {
        expect(tree.props.baseStyle.fontSize).toEqual(fontSizes[2] * 2)
      })
    })
  
    context('when alt is true', () => {
      beforeEach(() => {
        renderer.render(<Heading alt />)
        tree = renderer.getRenderOutput()
      })
  
      it('should set className', () => {
        expect(tree.props.className).toEqual('Heading Heading_alt')
      })
  
      it('should apply alt styles', () => {
        expect(tree.props.baseStyle.opacity).toEqual(0.5)
      })
    })
  
    context('when _className is set', () => {
      beforeEach(() => {
        renderer.render(<Heading _className='Test' />)
        tree = renderer.getRenderOutput()
      })
  
      it('should set className', () => {
        expect(tree.props.className).toEqual('Test')
      })
    })
  
    context('when custom styles are set', () => {
      beforeEach(() => {
        renderer.render(<Heading style={{ color: 'tomato' }} />)
        tree = renderer.getRenderOutput()
      })
  
      it('should have a custom color', () => {
        expect(tree.props.style.color).toEqual('tomato')
      })
    })
  })
  
  