import React from 'react'
import { shallow } from 'enzyme'

import Page from '../index'

describe('Page', () => {
  it('passes contentRole to main div', () => {
    const wrapper = shallow(<Page contentRole="form">content</Page>, {disableLifecycleMethods: true})
    expect(wrapper.find('div[role="form"]')).to.have.length(1)
  })

  it('passes props to sidebar', () => {
    function Sidebar (props) {
      return <div {...props} />
    }
    const sidebarRole = 'complementary'
    const sidebarProps = {
      sidebarOpen: true,
      toggleSidebar: Function.prototype
    }
    const wrapper = shallow(
      <Page
        sidebarComponent={Sidebar}
        sidebarRole={sidebarRole}
        {...sidebarProps}
      >
        content
      </Page>,
      {disableLifecycleMethods: true}
    )
    const sidebar = wrapper.find(Sidebar)
    expect(sidebar.props()).to.deep.equal({
      role: sidebarRole,
      ...sidebarProps
    })
  })
})
