import ReactTestUtils from 'react-dom/test-utils'

import Button from '@instructure/ui-buttons/lib/components/Button'

import SidebarItem from '../presenter'
import styles from '../styles.css'

describe('Common SidebarItem Presenter', () => {
  const scrollSpy = sinon.spy()

  const props = {
    itemId: '1',
    itemBody: '<div>Hello</div>',
    itemName: 'Multiple Choice',
    position: '1',
    pointsPossible: 2,
    sidebarOpen: true,
    // from connect
    scrollToItem: scrollSpy
  }

  const testbed = createTestbed(SidebarItem, props)

  shouldRenderComponent(testbed, {}, SidebarItem)

  it('should call scrollToItem with the item id', () => {
    testbed.render()

    const sidebarItem = testbed.findChildByType(Button)
    testbed.click(sidebarItem)

    expect(scrollSpy.called).to.be.true()
  })

  it('should call scrollToItem with the item id on space or enter', () => {
    testbed.render()

    const sidebarItem = testbed.findChildrenByClass(styles.mainText)[0]
    ReactTestUtils.Simulate.keyDown(sidebarItem, {keyCode: 13})

    expect(scrollSpy.called).to.be.true()
  })

  it('should include a friendly interaction type', () => {
    testbed.render()
    const interactionType = testbed.findChildrenByClass(styles.interactionType)[0]

    expect(interactionType.innerHTML).to.include('Multiple Choice')
  })

  it('should include possible points', () => {
    testbed.render()
    const pointsPossible = testbed.findChildrenByClass(styles.pointsPossible)[0]

    expect(pointsPossible.innerHTML).to.include('2 points')
  })

  it('should include a question index', () => {
    testbed.render({ displayPosition: '42' })
    const positionNode = testbed.findChildrenByClass(styles.sidebarIsOpen)[0]

    expect(positionNode.innerHTML).to.include('42')
  })

  describe('a11y tests', () => {
    it('should meet a11y standards', (done) => {
      testbed.render()
      testbed.checkA11yStandards(done)
    })
  })
})
