import React from 'react'
import renderer from 'react-test-renderer'
import { Tray, TrayControls } from '..'
import { mount } from 'enzyme'

describe('packages/ui/tray', () => {
  it('renders a tray', () => {
    const tree = renderer
      .create(
        <Tray position="left" padding isOpen ariaDescId="test" ariaLabel="test">
          <p>Foo</p>
        </Tray>
      )
      .toJSON()
    expect(tree).toMatchSnapshot()
  })

  it('renders a close button', () => {
    const close = jest.fn()
    const wrapper = mount(
      <Tray close={close} ariaDescId="test" ariaLabel="test">
        <p>Foo</p>
      </Tray>
    )
    expect(wrapper).toMatchSnapshot()
    wrapper.find('.ui-tray__close').simulate('click')
    expect(close).toHaveBeenCalled()
  })

  it('yields tray controls', () => {
    const wrapper = mount(
      <TrayControls>
        {({ open, close, isOpen }) => (
          <div>
            <Tray isOpen={isOpen} ariaDescId="test" ariaLabel="test">
              <p>wat</p>
            </Tray>
            <button data-testid="test-button" onClick={isOpen ? close : open}>
              Toggle
            </button>
          </div>
        )}
      </TrayControls>
    )
    expect(wrapper).toMatchSnapshot()
    wrapper.find('button[data-testid="test-button"]').simulate('click')
    expect(wrapper).toMatchSnapshot()
  })
})